The latest major release of our favorite blogging platform – WordPress 3.0 – has brought quite a few new features to the table. Among them, the custom navigation menus and the post thumbnails (featured image), the latter being available since version 2.9 came out. This started a whole new trend between theme developers, most of them rushing to announce WordPress 3.0 ready themes.

In all this rush, some of the themes released suffered from one big problem: backward compatibility. Why is that important and how can we give some backward compatibility to our WordPress 3.0 ready themes?

Importance of backward compatibility

While I feel that generally offering some sort of backward compatibility is just a common sense policy, in this case it’s more than that. Let me explain why.

Not everyone uses the latest WordPress release, and that is for various reasons:

• Failed to update, or waiting to make sure it’s “stable”;
• Doesn’t really get the importance of an up to date software;
• Certain plugins they use are not yet 3.0/3.0.1 compatible.

This doesn’t mean they don’t want to try and use your beautiful 3.0 ready WordPress theme, or that they shouldn’t. But you see, the biggest trick resides right here, in this terminology: “3.0 ready”. The actual meaning of this is that the theme is compatible with the 3.0 version, not that it requires 3.0 or higher to function properly, and this leads a lot of people into a trap that will cause their blogs and websites to break.

So, the common sense thing to do would be to take the time and apply certain checks and fallback solutions to our themes. Lets see how we can do that.

Adding WordPress 3.0 features with fallback support

Both of the above mentioned features – custom menus and post thumbnails – are based on a WordPress function added once 2.9 was released: add theme support();

Adding post thumbnails support

In order to add post thumbnail support to your theme, you’d write this in your functions.php file:

// Adds support for post thumbnails
add_theme_support('post-thumbnails');

Simple adding this will cause any WordPress installation prior to 2.9 to break, as the add_theme_support() function was not part of the WordPress core back then. The fix? As easy as this:

/* Checks if the installation has the function defined.
If true, continues to add the support for post thumbnails. */
if(function_exists(add_theme_support)) :
	add_theme_support('post-thumbnails');
endif;

Adding custom menus support

In order to also add support for the custom menus feature, you’d normally write this:

// Add theme support for custom menus
add_theme_support( 'menus' );

// Register a custom menu name/location
register_nav_menus(array(
	'custom-menu' => __( 'My Custom Menu' ),
));

In this case, we obviously need to check for core support of both functions: add_theme_support() and register_nav_menus(). Let see how we can do that, also including in this check the post thumbnails:

if(function_exists(add_theme_support)) {
	add_theme_support('post-thumbnails'); // Support for post thumbnails

	if(function_exists(add_theme_support)) {
		add_theme_support( 'menus' ); // Support for custom menus
		register_nav_menus(array(
			'custom-menu' => __( 'My Custom Menu' ),
		));
	}
}

In case you wonder why I chose to add support for menus only after checking if register_nav_menus() is defined, it’s simply because there’s no point in adding support for a feature that you won’t be able to use. Remember, add_theme_support() was added in 2.9, while register_nav_menus() became available only in 3.0.

But how about adding compatibility in the front-end of your theme?

When using post thumbnails, never call them without checking if the function exists first:

// Performs a check to see if the function is available and there's also a thumbnail attached
if (function_exists(the_post_thumbnail) AND has_post_thumbnail()) {
	the_post_thumbnail();
}

For the custom menus, the thing is just a tad trickier, but simple as well. I’m usually using a function that I wrote to specifically check for custom menus support, and even though the wp_nav_menu() function provides a fallback solution, defaulted to wp_page_menu(), this fallback will only activate for 3.0 installations without any menus created and allocated to the reserved space. The fallback won’t set off if you’re using a version prior to 3.0.

Due to my preference of wp_list_pages() over wp_page_menu() – for more customization options – the following function will apply a compatibility fallback to wp_list_pages:

function my_nav_menu() {
	// Check if installation has wp_nav_menu() defined.
	// If true, generate the menu, but don't print it yet;
	if(function_exists(wp_nav_menu)) {
		$my_nav_menu = wp_nav_menu(array('menu' => 'Top Menu', 'container' => '', 'fallback_cb' => 'wp_list_pages', 'depth' => 2, 'echo' => false));
	}
	// If false, generate the menu using wp_list_pages, but don't print it yet;
	else {
		$my_nav_menu = '<ul class="menu">'.wp_list_pages('sort_column=menu_order&title_li=&echo=0&depth=2').'</ul>';
	}
	// Prints out the menu;
	echo $my_nav_menu;
}

Now, in the front end. instead of calling your menu with wp_nav_menu() you’ll now use my_nav_menu() to display a backward compatible version.

Conclusions

Caught in the rush of doing something nice and new, like a child discovering a shiny new toy, we can miss out some of the most basic problems. Most of them are really easy to solve, like the above mentioned and it would be common sense to make use of them.

And remember: if ( function_exists(function_name) ) is your geeky B.F.F.

Free PDF eBook: Corporate Blogging Guide by Blogsessive

For a long while the option panels where something that people could only find in premium (commercial) themes, and for a good reason. The pricing of their licenses allowed the premium theme developers to invest more time in giving theme users the ways to do through these panels what they could not do through coding.

With the buzz created around these themes, regular users became aware of what could really be achieved, and thus, those that could not afford the license of a premium theme, became more selective with the free ones. A good-looking theme was not enough anymore, and WordPress developers realized it.

A good premium theme would bring its developer not only a good amount of money, but also recognition in the community, and this is where the free theme developers scored their biggest points. Now that their “turf” was endangered they had to react, and they did. For premium themes like Thesis or WP Unlimited, users have now alternatives like Thematic, Hybrid, Carrington, WP Framework or my own (even if not a framework) Simple Balance.

Why should free theme developers consider adding an options page?

Because being “cool” is just not enough anymore. Theme developers need to learn how to be useful. Free stuff can be either useless and ignored or useful and praised. I’m yet to see the developer offering a free theme without gaining something from it, be it awareness, expertise, backlinks, donation money, you name it! But none of these are achieved through an uncompetitive – even if free – product.

5 Most looked for options in a WordPress theme

“Stand out from the crowd!” If I had a penny for every time I read this I’d laugh at Shoemoney’s AdSense check image sipping a chilled cocktail somewhere on a tropical island, but you know what? This saying is so true that it cannot be repeated enough, and users KNOW IT! Theme users want to be able to have their own identity online. They need to be able to customize their themes and make them express who they are and what they believe in. And this is where options pages come into play. What are the most looked for options? Let’s see…

1. Logo and / or header image update / replacement

It doesn’t matter if it’s a professionally designed logo or a simple Windows Paint play. If it gives the blogger satisfaction and he wants to display it, let him do so. Add either a file upload box or an input box where the user could enter the full URL to the logo image to use. Same goes for the header images.

2. Layout structure

If you’re developing a 2 column theme, give the user the option to choose to display the sidebar either on the left, or on the right. With 3 column themes, you can give them even more options, like having the content centered, between the sidebars, or having both sidebars on the same side (right or left) of the content. If only takes a couple of PHP conditions and some “visionary” CSS coding.

3. Custom navigation menus

Don’t expect users to want every page that they publish to show up in their blog’s main navigation area. Give them the option to select which pages should show up there, and why not, add their own links, even if external.

4. Custom RSS URLs and email subscription forms

Implementing a FeedBurner email subscription form is fairly easy for any developer, and I’m pretty sure that any dveloper knows how to customize such a script. The fact that it functions mostly based on a simple user ID should make the customization even easier through a theme options page.

5. Advertising management

Not everyone uses services like BuySellAds, or is affiliated with an advertising network. Some users actually prefer to take care of the advertising themselves. So, why not give them the possibility to do so by adding a few more field to the options page. Let them select the number of banners they need displayed, do-follow option, position of banners and so on. It takes a bit to develop, but the user response to it is amazing.

Additional options you could consider implementing

While the 5 options above are the most looked for, some users might also find the following options useful:

• Overall switch between serif and sans-serif typography;
• Theme color adjustments. Here are a couple of web-based color picker scripts you could use: one, two, three and four;
• Alternatively, you can offer a built in color schemes system;
• Custom “featured” areas;
• Additional, customizable widget areas;
• Twitter updates area;
• And the list could go on and on…

The limits are set by your knowledge and enthusiasm

While the enthusiasm is not something you train, but rather have it or not, knowledge can be trained. Remember that the WordPress Codex is your best friend, and the support forums can be of tremendous help. Additionally, Stefan Vervoort of DivitoDesign and WPToy has put together a very useful PDF called the “WordPress Theme Development Checklist“. Do take a look (and use it!).

So, the next time you think of releasing a free theme, ask yourself this: Is you theme competitive enough? If it’s not, it will not stand a chance when the alternatives are so smart!

Free PDF eBook: Corporate Blogging Guide by Blogsessive

One technique that is most common with WordPress magazine or news style themes is the display of an archive of the latest posts by category, as simple titles or with post excerpts. This is useful for the previously mentioned theme styles, but not only. It can be used to set up custom blog homepages, 404 pages, landing pages or even a special archive page.

This tutorial will help you build a ‘Latest Posts by Category Archive‘ in a very easy way. The widths in the CSS styling presented below have been calculated based on the default WordPress theme, assuming that is the most common theme available to anyone.

If you are looking for a plugin to generate such an archive, please check out: WP Plugin: Latest Posts by Category Archive.

Setting up the page template

Open up you favorite code editor and create a blank document. Save the document as ‘category-archive.php’ (or any other name you’d prefer) in the default WordPress theme directory (wp-content/themes/default).

The first step is to asign our new template a name and a page-like structure, so based on the default theme’s page template, the code you should paste in your new document is:

<?php
/*
Template Name: Category Archive
*/
?>

<?php get_header(); ?>

<div id="content" class="narrowcolumn">

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div class="post" id="post-<?php the_ID(); ?>">
	<h2><?php the_title(); ?></h2>
		<div class="entry">
			<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>

			<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

		</div>
	</div>
	<?php endwhile; endif; ?>

	<!-- Category Archive Start -->
	<!-- Category Archive End -->

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

The template above will make sure to display the page name you set up, and also, any additional content you might want to add before the archive, from you WordPress page editor. We will be adding our ‘latest posts by category’ code between the ‘Category Archive Start’ and ‘Category Archive End’ comments.

Adding the archive’s PHP code

Simply put, the code below will cycle through the first-level categories of your blog (parent categories), check for the ones that are not empty and if this condition is met, return an unordered list of the latest 5 post from each category. Empty categories will not be displayed.

<?php
/*
Template Name: Category Archive
*/
?>

<?php get_header(); ?>

<div id="content" class="narrowcolumn">

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div class="post" id="post-<?php the_ID(); ?>">
	<h2><?php the_title(); ?></h2>
		<div class="entry">
			<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>

			<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

		</div>
	</div>
	<?php endwhile; endif; ?>

	<!-- Category Archive Start -->
	<ul class="catArchive">
	<?php
	$catQuery = $wpdb->get_results("SELECT * FROM $wpdb->terms AS wterms INNER JOIN $wpdb->term_taxonomy AS wtaxonomy ON ( wterms.term_id = wtaxonomy.term_id ) WHERE wtaxonomy.taxonomy = 'category' AND wtaxonomy.parent = 0 AND wtaxonomy.count > 0");

	$catCounter = 0;

	foreach ($catQuery as $category) {

		$catCounter++;

		$catStyle = '';
		if (is_int($catCounter / 2)) $catStyle = ' class="catAlt"';

		$catLink = get_category_link($category->term_id);

		echo '<li'.$catStyle.'><h3><a href="'.$catLink.'" title="'.$category->name.'">'.$category->name.'</a></h3>';
			echo '<ul>';

			query_posts('cat='.$category->term_id.'&showposts=5');?>

			<?php while (have_posts()) : the_post(); ?>
				<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
			<?php endwhile; ?>

				<li><a href="<?php echo $catLink; ?>" title="<?php echo $category->name; ?>">More <strong><?php echo $category->name; ?></strong></a></li>
			</ul>
		</li>
		<?php }	?>
	</ul>
	<!-- Category Archive End -->

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

You should now save your file, because we’re done editing it. As you can see, the archive code has been added between the ‘Start’ and ‘End’ comments. Now let’s go through the code and dissect it.

The PHP code explained

The first thing we do is to set up a database query to cycle through the non-empty parent categories:

$catQuery = $wpdb->get_results("SELECT * FROM $wpdb->terms AS wterms INNER JOIN $wpdb->term_taxonomy AS wtaxonomy ON ( wterms.term_id = wtaxonomy.term_id ) WHERE wtaxonomy.taxonomy = 'category' AND wtaxonomy.parent = 0 AND wtaxonomy.count > 0");

You can further tweak this query to exclude categories or specify categories to be listed based on their ID, with the use of the MySQL comparison functions NOT IN or IN.

Let’s say that you’d like the archive to exclude the categories with IDs 2, 5 and 6. Your query would become:

$catQuery = $wpdb->get_results("SELECT * FROM $wpdb->terms AS wterms INNER JOIN $wpdb->term_taxonomy AS wtaxonomy ON ( wterms.term_id = wtaxonomy.term_id ) WHERE wtaxonomy.taxonomy = 'category' AND wtaxonomy.parent = 0 AND wtaxonomy.count > 0 AND wterms.term_id NOT IN (2,5,6)");

Similarly, if you want to display only the categories with IDs 2,5 and 6, you’d have:

$catQuery = $wpdb->get_results("SELECT * FROM $wpdb->terms AS wterms INNER JOIN $wpdb->term_taxonomy AS wtaxonomy ON ( wterms.term_id = wtaxonomy.term_id ) WHERE wtaxonomy.taxonomy = 'category' AND wtaxonomy.parent = 0 AND wtaxonomy.count > 0 AND wterms.term_id IN (2,5,6)");

For further help with comparison operators and functions, you can check out the MySQL manual.

Next, we set up a category counter which will be incremented each time a category will be displayed. Based on this counter, the code adds a ‘catAlt‘ class that you can use to style differently consecutive categories. In our case, we’ll use it to shift the categories into two columns. This is were the alternate classes are assigned:

$catCounter++;

$catStyle = '';
if (is_int($catCounter / 2)) $catStyle = ' class="catAlt"';

The category list is built by the use of foreach and it helps retrieve vital information about the categories, such as name and permalink:

foreach ($catQuery as $category) {
	/* Code used to retrieve and display the latest posts */
}

After we display the category title and link through this line of code

echo '<li'.$catStyle.'><h3><a href="'.get_category_link($category->term_id).'" title="'.$category->name.'">'.$category->name.'</a></h3>';

we continue by using a custom query to retrieve the latest 5 posts from the current category in the cycle, followed by a link to the complete category archive:

query_posts('cat='.$category->term_id.'&showposts=5');?>

<?php while (have_posts()) : the_post(); ?>
	<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
	<li><a href="<?php echo $catLink; ?>" title="<?php echo $category->name; ?>">More <strong><?php echo $category->name; ?></strong></a></li>

And that’s about everything in terms of coding! Now, onto the CSS styling.

Styling the archive

Find the style.css file in your default theme’s directory, open it and scroll down to the end of the file. Now copy the code below and paste it in your file.

/* Latest posts by category styles */

.catArchive {
	width: 450px;
	overflow: hidden;
	margin: 20px 0 0 0;
	padding: 0;
	list-style-type: none;
}

.catArchive h3 {
	font: normal bold 18px sans-serif;
	border-bottom: 1px solid #666;
	margin: 0;
	padding: 0 0 3px 0;
	display: block;
}

.catArchive li {
	display: block;
	float: left;
	width: 210px;
	margin: 0 30px 30px 0;
}

.catArchive ul {
	margin: 0;
	padding: 0;
}

.catArchive li li {
	border-bottom: 1px solid #ddd;
	margin: 0;
	padding: 4px 0;
}

.catAlt {
	margin-right: 0 !important;
}

Now, save the file. We’re done!

Note: Keep in mind that column sizes have been calculated based on the available space (450 pixels) in the default theme’s content area. So, our columns should each be 210 pixels wide, with a 30 pixels spacing between them.

Since the column shifting is done with the help of float, I’ve set the overflow to hidden to stretch the list full height. This can only work with a fixed given container width, which in our case is 450px set on .catArchive.

If your new to “floating”, Sarah has posted a fairly easy to understand article about the float property on BloggingTips.com.

You can download an archive containing both source files: Download.

Free PDF eBook: Corporate Blogging Guide by Blogsessive

As some of you might already know, back on January 17th, the folks at Automattic have launched WordPress.TV, a website they plan on turning into “Your Visual Resource for All Things WordPress”.

This is a definitely a great project that will undoubtedly become a WordPress resource hot spot. On what do I base my belief? On the amazing community of people around this extraordinary blogging (and not only) platform that is WordPress.

It’s enough to check out their support forums and see the kind of involvement that people show, how willing they are to help, solve problems and answer questions. So yes, I think that the WordPress TV will be a success.

The reasons behind this launch are simple. The WordPress community needs a place where video information (news, tutorials and so on) finds its way to people, after passing through a certain quality filter, where it will be kept up to date with ad/spam free.

By the looks of it, after only one week of existence, the community response is amazing.

So, in case you’ve missed the launch (but not only for this reason), in this post I’m going to guide you to 10 must-see videos on WordPress.TV. Since the website is fairly new, most of these videos are addressed to WordPress.com users, or users that are new to WordPress in general. So, as a heads-up, those of you with a fair level of knowledge might not find these vids to be very educational or spectacular.

But before we get to those 10 videos, let’s start with a small WordPress.TV introductory video.

Welcome to WordPress.TV Video

1. The WordPress.com Dashboard

New to WordPress and its amazing dashboard? At a first glance, the dashboard might seem like a lot information to digest, but with the new administrative options, the dashboard turn into one of the most important and accessible tools on your blog. (Video source)

2. How to get a post out quickly with QuickPress

This video walks you through the functions and capabilities of “QuickPress”, a section on the dashboard of your self-installed or WordPress.com blog. The purpose of this section is to fasten the publishing of those posts you really need to get out quick, without wasting time with every possible setting available. (Video source)

3. Moderating recent comments from the dashboard

Moderating recent comments has just become a whole lot easier with WordPress 2.7′s new dashboard and this video guides you through the steps you need to take. (Video source)

4. Adjusting the discussion settings

This video explains the setting of how will your readers interact with you and your blog through comments. (Video source)

5. How to rearrange the post editor to suit your own style

With WordPress 2.7 it has become a lot easier to configure the Post/Edit screen to suit your own style or writing. You can choose which sections you need displayed and which you don’t, and even the order they appear in the management area. (Video source)

6. How to create a static frontpage for your blog

Sometimes, a recent blog posts archive is not enough to display on your blog’s homepage. Sometimes, people need to turn their blog homepages in actual landing pages with additional information. Setting up a static page for your blog is a fairly easy task and this video teaches you just how to do it. (Video source)

7. Using the WordPress.com Video Player – A DemoGirl Tour

Molly McDonald, also known as DemoGirl, does an amazing job at teaching you all you need to know about WordPress.com’s video player. Quality user videos like this one reinforce my belief in WordPress TV’s bright future. (Video source / Author website)

8. How to change the reading settings

In this video, you will learn how to adjust the settings of your blog in terms of reading, and thus adjusting the way readers experience your content, whether when reading on-site or in their feed reader. (Video source)

9. Integrating a bbPress Forum with your self-installed WordPress

This video by bbPress developer Sam Bauers guides you through the process of integrating a bbPress forum on your self-installed WordPress blog. Also, this video stands as proof that WordPress developers have now a place to better interact with their community of users through video tutorials. (Video source / Author website )

10. CSS-Tricks: Designing for WordPress

Finally, this 3 part video tutorial by Chris Coyier of CSS-Tricks.com takes you through the steps of designing a WordPress from scratch. Since this video is also presented on its author website, I encourage you to view it there, where you also have access to all links and files used.

Here are the links to all three parts of the tutorial:

• Part one: On CSS-Tricks.com / On WordPress.TV
• Part two: On CSS-Tricks.com / On WordPress.TV
• Part three: On CSS-Tricks.com / On WordPress.TV

Next, on WordPress.TV…

Most probably a lot of great, interesting content. Make sure you bookmark the WordPress.TV website, I’m sure it will be worthwhile.

Free PDF eBook: Corporate Blogging Guide by Blogsessive

Since its launch, over 1800 people downloaded the Simple Balance 2.0 WordPress theme. For that, I thank each and every one of you!

The idea behind this theme was to keep it as simple as possible, yet effective. Simplicity in administration is one of the keywords behind its creation. But some things need a bit of coding knowledge to tweak.

One of them is the email subscription form, which, once you install the theme, serves only as a design template that does not work unless proper code has been added to it.

I’ve been asked via comments and email what’s wrong with it, or how can it be made functional and this made me write the following step-by-step tutorial on how to integrate the FeedBurner email subscription form in Simple Balance 2.0.

Getting the FeedBurner Email Form Code

Here’s a quick screenshot that illustrates the required steps:

Step 1: Click the Publicize tab;

Step 2: Look for the Email Subscription item in the left side menu and click it;

Step 3: Copy the form code and paste it in a .TXT file for later use.

Once you’ve pasted the code in a .TXT file, you’ll see that it looks a bit blocky, not being properly formatted using new lines and TAB’s.

Below is a sample of my code (do not copy it unless you want your readers to subscribe to my feed). Try to come to a similar formatting by breaking the line in the same places I did it.

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/
fb/a/mailverify?uri=Blogsessive', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
	<p>Enter your email address:</p>
	<p><input type="text" style="width:140px" name="email"/></p>
	<input type="hidden" value="Blogsessive" name="uri"/>
	<input type="hidden" name="loc" value="en_US"/>
	<input type="submit" value="Subscribe" />
	<p>Delivered by <a href="http://feedburner.google.com"
	target="_blank">FeedBurner</a></p>
</form>

Unless you want to display the link back to FeedBurner, you can delete right from the start the following line:

<p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p>

Editing the Simple Balance 2.0 Email Subscription Form

Now that you have the FeedBurner form code, all you need to do is to integrate it with Simple Balance’s custom designed form.

No need to panic, as it’s a much easier job than it seems. First, you need to locate the theme’s files and open the file called lsidebar.php with your preferred HTML (or simply Notepad) editor.

Next, you need to locate the following chunk of code (normally starts of line 22):

<h2>Subscribe by Email</h2>
<ul>
	<li class="rssForm">
		<form action="">
			<input type="text" class="rssEmail" />
			<input type="submit" class="rssSubmit" value="Subscribe" />
		</form>
		<small>We take privacy seriously.<br />
		Your email address will <strong>not</strong> be shared.</small>
	</li>
</ul>

Now, go to the FeedBurner form code and copy the one part that is similar to mine as shown below:

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/
fb/a/mailverify?uri=Blogsessive', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

The only difference is that instead of ‘uri=Blogsessive’ it will have your blog’s name.

Remove the styling contained in this line by taking out this chunk of code:”

style="border:1px solid #ccc;padding:3px;text-align:center;"

and copy the remaining code (similar to the one below):

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Blogsessive', 'popupwindow', 'scrollbars=yes,width=550,
height=520');return true">

Ok, did you copy the code? Now, let’s head back to the lsidebar.php file, to our previously selected chunk of code.

Locate this code:

<form action="">

and replace it with what you’ve copied from the FeedBurner code.

While we’re here, locate this line of code:

<input type="text" class="rssEmail" />

and replace it with this one:

<input type="text" class="rssEmail" name="email" />

Now, we head back to the FeedBurner code to copy the two lines similar to these:

<input type="hidden" value="Blogsessive" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>

Again, instead of value=”Blogsessive” you’ll have your blog’s feed name. After you copy the two line, go back to lsidebar.php and add them below the previously edited line:

<input type="text" class="rssEmail" name="email" />

and above this line:

<input type="submit" class="rssSubmit" value="Subscribe" />

Ok, we’re half way there. No, I’m joking. That’s all. You’ve implemented the form and it should be fully functional and looking pretty much like the one I’ve used to exemplify this tutorial.

Save the lsidebar.php file and upload it to your FTP server.

The End Result

Your code should look similar to mine (except for the feed name mentioned in two places):

<h2>Subscribe by Email</h2>
<ul>
	<li class="rssForm">
		<form style="border:1px solid #ccc;padding:3px;text-align:center;"
		action="http://feedburner.google.com/fb/a/mailverify" method="post"
		target="popupwindow" onsubmit="window.open('http://feedburner.google.com/
		fb/a/mailverify?uri=Blogsessive', 'popupwindow', 'scrollbars=yes,width=550,
		height=520');return true">
			<input type="text" class="rssEmail" name="email" />
			<input type="submit" class="rssSubmit" value="Subscribe" />
			<input type="hidden" value="Blogsessive" name="uri"/>
			<input type="hidden" name="loc" value="en_US"/>
		</form>
		<small>We take privacy seriously.<br />
		Your email address will <strong>not</strong> be shared.</small>
	</li>
</ul>

Now, you’ll be able to provide your readers with a functional email subscription based on FeedBurner’s code, but looking like the one designed for your free WordPress theme of choice: Simple Balance 2.0.

Any questions on this tutorial? I’d be happy to answer you in the comments section.

Free PDF eBook: Corporate Blogging Guide by Blogsessive

Not only once, it has been said that displaying full posts on your blog home page, category pages or archive pages increases the chance of being penalized for duplicate content.

In WordPress, using post excerpts has proven to be a good alternative, but one that has its downsides:

• You lose control over text formatting;
• Images won’t be displayed;
• If you don’t take time to write them yourself, WordPress might not select the most appropriate fragments;
• Readers might not be convinced to further click, if the excerpt is not attractive enough.

Better Post Excerpts

If you’re concerned about your writing style, you’ll most definitely take care about how you structure your posts, where you insert images and how you write the introductory paragraph.

With these in mind, you basically got yourself a very good post excerpt, one that you should not leave to WordPress to decide when and where to cut.

The ‘More’ Tag

This is the most valid alternative to displaying post excerpts, if the_excerpt() template tag does not fit your needs.

More is what the WordPress developers call a quicktag, designed to cut-off large posts into two fragments: one that will be displayed as an excerpt and one that users will continue to read from after clicking the “read more” link. It serves as a marker inside the post so that users who come from the excerpt link, will start reading the content from that point on, and not from the beginning, again.

What this quicktag actually represents is a HTML comment that WordPress translates a the cut-off point. To use it while editing your posts in HTML view, you simply need to add this where you want the post cut:

Your introductory paragraph should be placed before using the 'more' quicktag.
That way it will act as a post excerpt.
<!--more-->

Using it like in the above example will return a post excerpt similar to this:

Your introductory paragraph should be placed before using the ‘more’ quicktag.
That way it will act as a post excerpt. more…

Customizing the ‘more’ link

The default text (more…) is not very attractive, right? I mean, you must really be interested in the rest of the story to click it.

But fear not, there are many ways in which you could customize the link, applying a global or single post effect. Described below are two methods you could use.

Method One: Customizing the_content() template tag

Effects: Global
Requirements: Minor coding knowledge

As per default, posts excerpts are displayed by using the_excerpt(), while full posts are displayed through the use of the_content() tag.

If you take a look at the code of your theme’s index.php file, and of course if it uses full posts, you’ll notice a line of code similar to this one:

<?php the_content(); ?>

The easiest way to customize it and obtain a global effect would be by adding a parameter containing your own ‘read more’ text, as shown in the example below:

<?php the_content(' Continue reading this post!'); ?>

The end result will look similar to this:

Your introductory paragraph should be placed before using the ‘more’ quicktag.
That way it will act as a post excerpt. Continue reading this post!

To further more customize the link, you can even use HTML code and add CSS classes to it:

<?php the_content(' Continue reading this post!'); ?>

or use WordPress’ get_the_title() template tag to add the post name inside the link, like this:

<?php the_content(' Continue reading '.get_the_title()); ?>

Assuming the example of my own post title, this will result in something similar the this:

Your introductory paragraph should be placed before using the ‘more’ quicktag.

That way it will act as a post excerpt. Continue reading Post Excerpts and the More Tag in WordPress

Of course, you could always use a combination of HTML tags and WordPress template tags to further customize the link, as long as you keep in mind that the effect will be global (will apply to all posts using the more quicktag).

Method Two: Customizing the <!--more--> quicktag

Effects: Single post
Requirements: Nothing a 5 year old won’t manage

Assuming you have adjusted the link to your needs by using the above described global-method and on some posts you need to tweak the link more, the best way to customize the display text is my adding it to the <!--more--> quicktag, as shown below, in your post HTML view:

<!--more This is my custom more text-->

This will result in:

Your introductory paragraph should be placed before using the ‘more’ quicktag.
That way it will act as a post excerpt. This is my custom more text

Note: The results of this method override the defaults or the effects of the first method and only affect the text, and not the formatting.

That’s it!

Easy as one, two, three, right? Happy customizing! And in case you need more information, here are a few links from the WordPress Codex:

• Customizing the Read More
• Template Tags: the_content()
• Template Tags: the_excerpt()

Free PDF eBook: Corporate Blogging Guide by Blogsessive

Another quiet Sunday in the blogosphere, as usual. This morning I thought about writing another link share post or a WordPress theme recommendation, but later I’ve decided to break the pattern (since it’s all so quiet) and make Sundays the host of a blog SEO tips series. In this first post I’m going to talk about the importance of using SEO friendly titles (H1, H2, H3) and the right way to do so.

Usual Coding Patterns in WordPress Themes

If you’re even a bit familiar with the WordPress themes, by now you’ve probably took a look at your theme’s files. Blog pages are rendered through an association of a few PHP files with standard names (index.php, archive.php, single.php) with different templates of the theme, based on the content type.

The index.php file usually stands for your home page, also being capable of replacing any other template that hasn’t been already defined. So, if you don’t have a template for search results (search.php), the index file will take over and render your search results page.

Each of these templates includes smaller pieces of code to build up the final result. The most used are header.php, sidebar.php and footer.php.

For now, we’ll limit our attention to the following files in your theme’s folder:

• header.php
• index.php
• single.php
• page.php (not every theme has it)
• archive.php, search.php (not every theme has them)

Optimizing the Header File

Having your primary keyword present at the top of you page it’s very important.
Considering the fact that most themes come with text based logos instead of graphics, we’ll be looking for the <h1> tag in the header.php file.

If you look at the WordPress default theme will find this piece of code, close to the end of the file:

<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>

The first line displays your blog’s title into a link to the homepage, inside the H1 tag.
The second line displays your blog’s description.

H1 is the most important heading style and the coding recommendations state that only one should be used per page. When talking about a homepage, archive page or search results, it’s best that we optimize these pages according to our main keywords, therefore this H1 tag is required.

But what about on the single post pages? When we display single post, we would want to have their pages optimized according to their content, not the overall keywords of the blog. This is where the H1 should be removed from the header.php file, and placed instead of the H2 surrounding the posts title, to give make it more visible and representative in the eyes of a search engine spider.

How do we do that? First we need to add some conditional tags in the header.
Look for the piece of code that I’ve listed above and replace it with this one:

<?php if(is_single() OR is_page()) {
// On single post pages and static pages we use this code
?>
<h2><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
<?php }
else {
// On home page and archive style pages we use this code
?>
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
<?php } ?>

By using some WordPress conditional tags we managed to limit the use of the H1 HTML tag to all archive style pages (including the homepage).

Next, we move to single posts and static pages to continue our optimization.

Optimizing the Single Posts and Static Pages

After we’ve made the changes in the header file, we need to apply some modifications to the single.php and page.php files to make their titles more search engine friendly.

Open the default theme’s single.php file and look for this piece of code:

<h2><a href="<?php echo get_permalink() ?>" rel="bookmark"
title="Permanent Link: <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

Remember that I’ve told you we are allowed to used <h1> only once per file, for our most important title / phrase. Since we’ve eliminated the use of <h1> on single posts and static pages in the header.php, now, all we have to do is to change <h2> and </h2> with <h1> and </h1>, just like this:

<h1><a href="<?php echo get_permalink() ?>" rel="bookmark"
title="Permanent Link: <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>

There you go, now your most important phrase on a single post page is the post’s title, as it should be!
Most themes don’t come with this type of heading importance separation and by following this guide you’ll be able to fix this issue on your own with no trouble at all.

While the default theme does not have a page.php template defined, you could clone the single.php file and rename it. If you don’t clone it, the index.php file will be used to display static pages, which means you’ll list page titles using the <h2> instead of <h1>.

Consider Using Subheadings in Your Posts

For further SEO improvement, you should consider using relevant subheadings inside your post to evidentiate different parts of your post’s structure.
Write down your article and when you’re finished, switch to HTML view and add <h3> & </h3> around you subheadings, like this:

<h3>This Is a Subheading</h3>

Final Thoughts

Usually, titles are the most important links on your blog. Through them, users and spiders alike navigate through your content. Use them smart and effectively.
If you have any questions or need further help with this, feel free to drop a comment.
Also, join me again next Sunday for a new post in the Blog Seo Tips series.

Free PDF eBook: Corporate Blogging Guide by Blogsessive

As you might remember, a while ago I’ve recommended you the plugins developed by GeekyWeekly: My Link Order, My Page Order and My Category Order.

I’d still recommend them to everyone how wants to organize his blog easier and better, even if recently I’ve found out that the My Link Order plugin generates an XHTML validation error, specifically: it creates an ID duplicate for each blog roll category that you add.

The validation error could look like:

ID "mylinkorder" already defined

or

anchor "mylinkorder" already defined

My Link Order Fix

So, how to fix this? Actually it’s pretty simple.

1. Navigate to your plugins folder and open for editing the mylinkorder.php file;

2. Find this line of code:

'category_before' => $before_widget, 'category_after' => $after_widget,

Depending on the plugin version, it should be between lines 180 and 200.

3. Comment the like by adding 2 slashes at the beginning, so the end result would look like:

//'category_before' => $before_widget, 'category_after' => $after_widget,

4. That’s it! Upload the file and enjoy your valid ordered blog.

Free PDF eBook: Corporate Blogging Guide by Blogsessive

wp_list_pages() is one of the most common WordPress template tags. Sometimes, the little white space that some browsers add to the output of this function can create a big mess in your theme’s template, making it hard to style, especially when trying to create a horizontal list. The fix for this is quite simple and requires minimum coding knowledge, if none at all.

The Problem

The wp_list_pages() generates either a series of <li> elements containing links to all of you blog’s pages, or a full unordered list with a heading at the beginning.
The output of this list looks like this:

<ul>
<li><a href="#">Page name</a></li>
<li><a href="#">Page name</a></li>
</ul>

While some browsers don’t have a problem with elements being generated on new lines, in some, this method causes a white space to show up in front of each list item. This space becomes visible and annoying when trying to create a horizontal menu with background colors and equal horizontal spacing.

The Fix

To get rid of the white space, your output would need to look like this:

<ul><li><a href="#">Page name</a></li><li><a href="#">Page name</a></li></ul>

This can be achieved by using a small PHP function that will take the code generated by wp_list_pages() and turn it into something similar to the example above. To make this function available for use in your templates you need to edit the “functions.php” file, found in you theme’s directory. If you don’t have such a file, create an empty one and name it “functions.php”.

In functions.php add the following code at the beginning or at the end of the file. Just be careful not to paste it inside another function and cause the script to break.

function qbkl_nospace($input) {
$output = str_replace(array("\n", "\r", "\t"), "", $input);
echo $output;
}

Usage

To apply the fix, simply find the wp_list_pages() in your theme’s template (usually header.php or sidebar.php) and edit the code according to the following example:

Find:

<?php wp_list_pages(); ?>

Replace with:

<?php qbkl_nospace(wp_list_pages()); ?>

This fix works with any function or template tag that generates the same problem.

The white space generated by wp_list_pages() has been a nightmare for many WordPress themes designers. It doesn’t have to be one for you!

Where is wp_list_pages() located?

Although it’s not recommended that you alter the base code of WordPress, advanced users might feel like taking such a job.

If you need to alter the output, wp_list_pages is defined in the post-template.php file, in the “wp-includes” folder of your WordPress blog.

For further tweaking, you might also need to adjust the walk_page_tree function, located in the same file, which makes use of the class Walker_Page, extending the Walker class, both located in wp-includes/classes.php.

* The above file names and locations are confirmed for WordPress 2.5 to 2.6.3.

If you’re having any questions or need further assistance, please use this post’s comment form.

Free PDF eBook: Corporate Blogging Guide by Blogsessive

Welcome to our new series’ first post! The “WordPress Template Tags” series is intended to bring into spotlight some of WordPress’ less common, but very useful template tags. While the contents can’t be considered a revelation to advanced WP users and developers, it can be of big help to those who take their first steps in the amazing world of online publishing using this famous blogging platform.

But enough chit chat! Here’s our first recommendation:

wp_get_archives()

Have you ever thought of how to display a list of your most recent posts? Or a list of all posts published in the last 10 days? Or 6 months? Or 2 years?
If so, after searching for a solution, you came across a plugin to help you, or used the WordPress’ standard “Recent Posts” widget.

For such a small need, you had to install one more thing, when it could have solved with one tiny line of code using the wp_get_archives() template tag.

What makes this tag so useful is the possibility to customize the result based on a few factors like: type, format, limit, code to be added before & after or post count. Since by default this template tag returns results inside of <li></li> elements, remember to always enclose it in <ul></ul>, like shown below:

Usage & Examples:

1. Display an archive of the last 6 months:

<ul><?php wp_get_archives('type=monthly&limit=6'); ?></ul>

2. Display the latest 10 posts:

<ul><?php wp_get_archives('type=postbypost&limit=10'); ?></ul>

Also, the display mode can be customized so that instead of showing a <ul> / <li> list, the archives could be displayed in a dropdown form element.

More reference: WordPress Codex on wp_get_archives()

Free PDF eBook: Corporate Blogging Guide by Blogsessive