For the page profile image, I suggest a 200px width with 12 pixels margins on both sides. This will allow for cropping which Facebook does automatically.

You can also create a custom tab, using the static FBML application.
Once you’ve added the application, you’ll be able to use custom CSS and HTML to style the page.
At the moment, I only added a banner and a call to action button, as an experiment.

Are you a freelancer and you’ve customized your page? Let me know in the comments!

let’s say that you want to add a new custom menu to your WordPress site. For example, a list of social media links. You want these links to be icons. (Facebook, twitter, RSS)

You are going to need to add a unique CSS class to each link so that you may be able to assign the icon to each of them.

In the default view of the custom menus screen it doesn’t seem possible to add a CSS class to a link. The trick is to pick on the screen options button at the top right of the WordPress admin panel. This will bring down an extra menu where you can options for your menus. The difference of the font menu properties include CSS classes, link targets, link relationship, description.

Now, when you add a link to your menu, you will be able to add a custom CSS class.

custom menus hidden options

Custom taxonomies

Another hidden option in the screen options menu is the ability to display your custom taxonomies for adding them to your menus. So if you have registered custom taxonomies and you want to add them to your menu you will need to check them in this screen options.

You’ll need to download PhpStorm

When I’m collaborating with other independent web designers or programmers (I don’t use the term freelancer), I need a tool to centralize all our activities and communication regarding the project at hand. While Basecamp is an excellent project management app, which I use on some client projects – usually when they have a subscription and add me as a user – it doesn’t have a good free plan. I use TeamBox, which is a great online app, similar to Basecamp, and allows to manage 3 projects concurrently. You can archive projects, which will free a slot for new projects.

I use the free plan on Freshbooks, which also limits the number of clients, but allows all the functionality of the paid plans.
It also has a time tracking tool which you can use to create an invoice from the logged hours. Which leads me to time tracking.

I recently discovered Toggl, which seems to be a great app. I use the free plan limited to 5 users, so perfect for me.
It has a desktop utility which seems to be very clever.

I use Balsamiq mockups.
I use the free plan for getsignoff or notableapp for getting feedback on the design.

I use Photoshop. Of course, it’s not free, but it’s an industry standard, so there are many resources for learning how to use it. Also clients usually give me Photoshop files to work with.
I might move to Fireworks in the near future for creating my designs.

I use PhpStorm for coding HTML, CSS and Php.
Unfortunately the current version doesn’t permit to edit a unique file via FTP, you first have to download the whole project to a local copy, which is actually better. It means you work on a local copy and synchronize to the server. But sometimes, you just need to quickly edit a file so I use NotePad++ with the FTP plugin which is very buggy, it disconnects often or gives errors.

For keyword research, competition analysis, promotion,etc.. I use Market Samurai. It’s a free tool that’s really powerful to quickly get the information you need.
I first discovered Market Samurai during the Thirty Day Challenge, it’s a free course to learn how to start an online business, how to promote it, how to optimze it for SEO, etc. It’s really fun and I encourage you to participate this year, it starts in August, with a ‘pre-season’ in July.

Also, there is WebStorm which is specific for front end development, but PhpStorm has the same features plus PHP support. So for WordPress developers it’s recommended to get PhpStorm.

Anyway the price is 39$ for WebStorm and 59$ for PhpStorm, so I’m not sure if they’ll sell many licences for WebStorm.

The best features are:

• Native integration of Zen Coding, which allows to rapidly code HTML
• Version control (git,subversion,…)
• Automatic synchronization of remote files (see this screencast for a detailed explanation)
• code completion for php, css, html, js
• javascript debugging

and more!

I’m still discovering the many features that it offers. I’ve been waiting for such an IDE for a long time. And it’s really a bargain, 59$ until September.

	add_action('thesis_hook_before_content_box','do_nivo_slider');
	function do_nivo_slider(){
	if (is_home()){
	print '
';
	print '
';
    $sub_loop_1 = new WP_Query('category_name=featured');
	while ($sub_loop_1->have_posts()) : $sub_loop_1->the_post();
	global $post;
	?>
	<a href="">
	 get_the_title(), 'title' => get_the_title())); ?>


	<?php }
	}

and activate post thumbnails

	if ( function_exists( 'add_theme_support' ) ) { // Added in 2.9
	 add_theme_support( 'post-thumbnails' );
	 set_post_thumbnail_size( 200, 200, true ); // Normal post thumbnails
	 add_image_size( 'hp-post-thumbnail', 511, 231, true ); // Homepage thumbnail size
	 add_image_size( 'single-post-thumbnail', 511, 9999 ); // Permalink thumbnail size
	}

then add this to the Thesis Page Options > HomePage Options > Javascript box

	jQuery(window).load(function() {
		jQuery('#slider').nivoSlider();
	});

and check JQuery checkbox

I haven’t figured out how to use wp_enqueue_script and wp_enqueue_style with Thesis yet, so I used the absolute paths.
Usually I’d include all the javascript in the functions.php file

Copy the CSS from the nivo slider CSS file and paste it into your custom.css.
Here also I’d rather include the extra CSS file somehow.

So, in the process of redesigning my web design portfolio website , I converted the “Shaper” theme to use HTML 5 markup. Where it makes sense, I use the new HTML 5 tags such as header, section, article. I didn’t use hgroup for the logo/tagline pair, because the way the theme works is the tagline is a H1 on the homepage and a div on the other pages for SEO reasons.
The comments use the article tag, as recommended.
Please download the theme, and let me know what you think.

 ID;
      $children = wp_list_pages('depth=1&echo=0&child_of=' . $id . '&sort_column=menu_order&title_li=');
      if ($children) {
          print '
' . $page->post_title;
          print '
';
          print $children;
          print '


';
      } else {
          print '
ID) . '">' . $page->post_title . '

';
      }
  }
?>

You can view the working code at http://sideradesign.com/krf

<table cellpadding="0" cellspacing="0" border="0" class="display" id="food" style="width:600px"


Location
Dish
Type


ID, 'food-location', true );
$food_name = get_post_meta($post->ID, 'food-name', true );
$food_type = get_post_meta($post->ID, 'food-type', true );
echo '
';
if(!empty($food_location ) )
{
	echo '
' . $food_location . '

';
	/* Add any additional code. */
}
if (!empty($food_name ) )
{
	echo '
' . $food_name . '

';
	/* Add any additional code. */
}
if (!empty($food_type ) )
{
	echo '
' . $food_type . '

';
	/* Add any additional code. */
}
echo '

';
?>

You can see the demo at:
http://sideradesign.com/krf/food-drinks/