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.

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.

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.

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:

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):

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:

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.

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.

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:

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!