10 tricks to make your WordPress theme stand out

There are a ton of WordPress themes out there these days, so it can be hard to get your theme noticed. The solution? Use the ten tricks listed in this post to make your theme stand out from the crowd.


After just releasing my first WordPress theme, NomeBlog, I thought I’d share the experience I’ve learnt with you guys on CatsWhoCode.

The problem: there are so many WordPress themes out there these days that it is hard to get noticed and stand out from the crowd.

The solution: create a WordPress theme that has so many unique features users will be bending over backwards to get hold of it! In this post I’m going to show you ten tricks to make your theme stand out from the very large crowd.

1. Show latest posts in the sidebar

This is something that is quite easy for the user to do themselves, but I find it a very useful feature to build into any theme. It is also very simple and easy to do. Just open up the sidebar.php file and insert the following code to display the four latest posts in an unordered list:

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

2. SEO your <title> tag

Making your theme ‘SEO ready’ is another necessity. One of the ways you can make your theme more ‘SEO friendly’ is be customising your <title> tag. The code below will make your <title> tag dynamic, changing depending on which page you’re on. For example, if you’re on the home page it will display ‘Blog Name | Blog Description’, on a blog page: Post Name | Category Name | Blog Name or on an archive: Blog Name | Archive | Month, Year. That is just naming a few. Check out the source below for the full list.

<?php if ( is_home() ) { ?><? bloginfo('name'); ?> | <?php bloginfo('description'); ?><?php } ?>

<?php if ( is_search() ) { ?>Search Results for <?php /* Search Count */ $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(''); echo $key; _e(' — '); echo $count . ' '; _e('articles'); wp_reset_query(); ?><?php } ?>

<?php if ( is_404() ) { ?><? bloginfo('name'); ?> | 404 Nothing Found<?php } ?>

<?php if ( is_author() ) { ?><? bloginfo('name'); ?> | Author Archives<?php } ?>

<?php if ( is_single() ) { ?><?php wp_title(''); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name; | <? bloginfo('name'); ?><?php } ?>

<?php if ( is_page() ) { ?><? bloginfo('name'); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name;  ?>|<?php wp_title(''); ?><?php } ?>

<?php if ( is_category() ) { ?><?php single_cat_title(); ?> | <?php $category = get_the_category(); echo $category[0]->category_description; ?> | <? bloginfo('name'); ?><?php } ?>

<?php if ( is_month() ) { ?><? bloginfo('name'); ?> | Archive | <?php the_time('F, Y'); ?><?php } ?>

<?php if ( is_day() ) { ?><? bloginfo('name'); ?> | Archive | <?php the_time('F j, Y'); ?><?php } ?>

<?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><?php single_tag_title("", true); } } ?> | <? bloginfo('name'); ?>

3. Change the default gravatar

This hack will really make your theme stand out. Give your users the option to change the default gravatar that is shown to users without a gravatar.

You’ll need to tell your theme’s users how to get this set up. Check out the NomeBlog release page for details how to. It isn’t too complicated, it is just this post is getting long enough anyway! In a nutshell, you need to upload a .gif image, of about 100px by 100px to your theme directory.

Open up your functions.php file and paste the folowing code:

<php if ( !function_exists('fb_addgravatar') ) {
	function fb_addgravatar( $avatar_defaults ) {
		$myavatar = get_bloginfo('template_directory').'/gravatar.gif';
                //default avatar
		$avatar_defaults[$myavatar] = 'Exciting new gravtar';

		return $avatar_defaults;
	}

	add_filter( 'avatar_defaults', 'fb_addgravatar' );
}

Source – (I’ve customised it a tad, originally from) WPEngineer.

4. Display related posts

This is a great little feature to have in your theme that saves the theme user using yet another plugin! It displays related posts based on tags, simply disappearing if there are no tags.

<!-- this displays related posts, based on tags. If there are no tags, then it'll disappear. Magic!-->
<?php if( function_exists('the_tags') )

//for use in the loop, list 5 post titles related to first tag on current post
$tags = wp_get_post_tags($post->ID);
if ($tags) {
echo '<h2>Related Posts</h2> ';
$first_tag = $tags[0]->term_id;
$args=array(
'tag__in' => array($first_tag),
'post__not_in' => array($post->ID),
'showposts'=>5,
'caller_get_posts'=>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<ul> <li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li></ul>
<?php endwhile; }}?>

Source – customised for the  NomeBlog theme, originally from WPRecipes.

5. Display ‘login’ tab to only users logged in

This hack will make your like easier, whether you’re building a theme or not. What we’re going to do here is display a login tab on the navbar to users logged in. You’re probably thinking that is totally pointless, but bear with me, it isn’t. When I say login, I mean a link to /wp-admin/, not wp-login.php. As long as you stay logged in via a cookie, this little hack will give you quick access to the admin backend. You can take this further than just the admin section – say you only want to show yourself the feedburner stats, then wrap the feedburner code with the code below and only you will be able to see it. The things you could do are endless.

To clear up: this code will display display a link to the /wp-admin/ section to users already logged in.

<?php if (is_user_logged_in()) { ?><a class="hoverBtn" href="<?php echo get_option('home'); ?>/wp-admin/">Login</a><?php } ?>

Source – NomeBlog theme

6. Twitter support

With Twitter’s exploding popularity,even if you’re not on Twitter (I am!) Twitter integration is quickly becoming essential to include in any theme. With this next hack we’re going to create a TinyURL link and then add a ‘share on Twitter’ link to put at the bottom of blog posts. After that we’re going to display our latest Tweets in the sidebar.

First thing to do is create the TinyURL. To do this, we’l need to add the following lines to the functions.php file:

function getTinyUrl($url) {
    $tinyurl = file_get_contents("http://tinyurl.com/api-create.php?url=".$url);
    return $tinyurl;
}

Next, we’re going to create our ‘send to Twitter’ link, integrating the TinyURL we’ve just made, which we can do with the following code:

<?php
$turl = getTinyUrl(get_permalink($post->ID));
echo 'Share on Twitter: <a href="http://twitter.com/home?status=Reading this -  '.$turl.'" title="Send a link to this article on Twitter" target="_blank">Send a link to this on Twitter</a>
'
?>

Finally, we’re going to display our latest Tweets in the sidebar. To do so, we just need the following code (you’ll need to customise it so it fits with your theme):

<?php

// Your twitter username.
$username = "TwitterUsername";

// Prefix - some text you want displayed before your latest tweet.
// (HTML is OK, but be sure to escape quotes with backslashes: for example href=\"link.html\")
$prefix = "<h2>My last Tweet</h2>";

// Suffix - some text you want display after your latest tweet. (Same rules as the prefix.)
$suffix = "";

$feed = "http://search.twitter.com/search.atom?q=from:" . $username . "&rpp=1";

function parse_feed($feed) {
    $stepOne = explode("<content type=\"html\">", $feed);
    $stepTwo = explode("</content>", $stepOne[1]);
    $tweet = $stepTwo[0];
    $tweet = str_replace("&lt;", "<", $tweet);
    $tweet = str_replace("&gt;", ">", $tweet);
    return $tweet;
}

$twitterFeed = file_get_contents($feed);
echo stripslashes($prefix) . parse_feed($twitterFeed) . stripslashes($suffix);
?>

Source – WPRecipes – 1, 2 and 3.

7. Auto-image resizing with shortcodes

This next trick is a user favourite. It really is essential, and is also very easy to do. To resize images, we’ll need an image resizing script. There are two main options: one is the one used in Darren Hoyt’s Mimbo, timthumb or the (more advanced) script on which timthumb is based, phpthumb. Personally, I’d go with phpthumb for the more advanced features. Check out the demo page to see everything it can do.

Now you’ve chosen your script, we’re going to create a shortcode so that users can easily make use of the auto-image resizing. Assuming you’re using phpthumb, you’ll need to open up your functions.php file and paste the following code:

function imageresizer( $atts, $content = null ) {
return '<img src="/THEMEURL/phpthumb/phpThumb.php?src=' . $content . '&w=590" alt="">';
}
add_shortcode('img', 'imageresizer');

What this code does is create a shortcode that will resize an image, using phpthumb to 590 pixels wide. Now we’ve created our shortcode, to resize an image in a post, we can use the function we just created:

[img]IMAGE URL[/img]

. It is easiest if you just upload an image the way you normally do into a post and then enter the html view and copy the image source into the shortcode.

Source: Nometech, WordPress Codex

8. Get homepage images without a custom field

When the first magazine themes arrived a couple of years ago, custom fields were the big thing that drove them. Trouble is, everyone hates filling them out. Thankfully, it is very easy to circumnavigate the need for custom fields with a piece of functions.php code. We’ll also be resizing the image, using phpthumb, the which was used in the example above.

// Get URL of first image in a post
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];

// no image found display default image instead
if(empty($first_img)){
$first_img = "/images/default.jpg";
}
return $first_img;
}

All that is left to do is display the image on the homepage, which we can do with the following code:

<img src="<?php bloginfo('template_url'); ?>/phpthumb/phpThumb.php?src=<?php echo catch_that_image() ?>&w=200" alt=""/>

The image will be resized to 200 pixels wide.

Source – WordPress Support Forums

9. Enhance and auto complete search

Theme developers often overlook search, so make sure you don’t!

First thing we’re going to do is display the number of results for the search, which we can do with the following code:

Search Result for <?php /* Search Count */ $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(''); _e('<span class="search-terms">'); echo $key; _e('</span>'); _e(' &mdash; '); echo $count . ' '; _e('articles'); wp_reset_query(); ?>

Next thing we’re going to do is auto complete search. This is a great little feature to have in your theme, so it is well worth aking the time to implement it (plus make sure you read CSSJockey for the full details. Link below). First thing we need to do is get hold of jQuery and the jQuery auto-complete plugin. You can get them from jQuery.com and Bassistance.de. Upload them to your theme directory and add the following lines of code to the header.php file:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery.autocomplete.pack.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/jquery.autocomplete.css" media="screen" />

Next thing to do is attach some jQuery to the search box and that is it!

<script type="text/javascript" src="<?PHP bloginfo('template_url'); ?>/jquery.autocomplete.pack.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/jquery.autocomplete.css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
var data = '<?php global $wpdb; $search_tags = $wpdb->get_results("SELECT name FROM $wpdb->terms"); foreach ($search_tags as $mytag){ echo $mytag->name. " "; } ?>'.split(" ");
$("#ID_OF_SEARCH_INPUT_BOX").autocomplete(data);
})
</script>

Make sure you insert the ID of your search box.

Source – ProBlogDesign, CSSJockey

10. iPhone support

I’ve had a couple of people email me saying how much they like the iPhone integration in NomeBlog, as it isn’t something you’d normally expect to find in your theme. Lucky for you guys, I’ve done the hard work for you! It is a bit harder to implement this directly into your theme, but I’ll run you through this anyway.

First thing we need to do is tell WordPress that iPhone/iPod Touch users need to see the special version of your site, and to do this we’ll need the iWPhone plugin, from ContentRobot. But we won’t actually use the download from their site – instead head over to Nometech, where you can download the customised version and customised theme. You could integrate the plugin into your function.php, but I’m against that for features not everyone is going to use – it could slow down the site and if something goes wrong the user might not think to look in the functions.php file.

Whichever way you do it, plugin or functions.php, we’ve now directed iPhone/Touch users to a special version of our site, located at /wp-content/themes/inomeblog/. All that is left to do is upload the iNomeBlog theme to the /themes/ directory and it’ll work. The theme that comes with the plugin as standard doesn’t look too great, so I’ve customised it a bit so it looks nicer. Head over to Nometech for a couple of screens.. iPhone support isn’t totally integrated into the theme, but easy enough for the user to do. Add this feature to your theme and it’ll really make your theme stand out.

Source (which you’ll need for the download) – Nometech

And finally…

The only thing you need now is a theme with most of that built in! That is what I’ve done: check out my new (free) theme, NomeBlog.

If you’ve enjoyed this post then please do take a look at Nometech.com, by new blog. If you’re on Twitter too then new followers are always welcome!

Have you released a new theme or integrated some of the features above? Leave a comment and tell the world!