10 tricks to make your WordPress theme stand out

by Alex Denning. 142 Comments -

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.

Guest post by Alex Denning, a Twitter fan who recently launched his new blog, Nometech.com, where he blogs about WordPress, blogging and web design.

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 (Pro), 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!

Comments (142) - Leave yours

  1. archshrk said:

    Regarding tip #5 this is very useful and convenient but you might want to consider using this on your blog’s description. Your blog title will typically link back to your home page, make your blog description link to the admin page as described in tip #5.

  2. Webstractions said:

    I think archshrk meant to say tip #2 ;)

    Regarding tip #5 and how confusing the link text displaying the word “login”, which is misleading. The linking text should read “Site Admin”, “User Admin”, or even the users logged-in name (which is kind of customary).

    To add to this tip, if the user is NOT logged in … then a link to the login page could be displayed with a simple if/then comparison.

  3. Justin Tadlock said:

    Shouldn’t #1 simply be:

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

    I just prefer 3 lines of code over 6 and not throwing off the entire page query.

  4. Alex Denning said:

    @Webstractions – if you’ve got a ton of people logging in, then sure they might find it a bit misleading, but personally, I find it really useful to be able to quickly access wp-admin from any page of my blog. As it is just me, I know what it is, but I take your point.

    @Justin – yeah. Thanks for the tip – I’ll get the post updated.

  5. smashill said:

    This is one friggin awesome list. You have any tips on how to create a random feature on the sidebar with about 3 posts out of a pool of maybe 10 articles, showing headline & a short extract?

  6. Alex Denning said:

    @Smashill – the easiest way would be to create a new category, and then pull ten random posts from that – there’s something on the WP Support forums that’ll point you in the right direction – http://wordpress.org/support/topic/164061. See one of my earlier posts about the_excerpt_reloaded which you can use to display a certain number of in the_excerpt.

  7. HASENFARM said:

    Regarding the #6 – “Twitter-Support” there is an coding-error in the line “….Reading this – .$turl.” title…..”. It has to be correct like this one: “…..Reading this – ‘.$turl.’ ” title…..”

    So it´s working for me very well!

    Great tipps by the way!

  8. Jeffro said:

    Great list of tips that WPTavern.com is using in one way or another. Also, good way to market your theme considering it has most of these tips inside of it :)

  9. JLeuze said:

    Your iPhone theme has a little problem, the pre/code blocks are breaking out of the div, stretching across the screen. I have to zoom way in to read you site.

    You need to set the overflow to scroll or hidden to keep that code under control!

  10. Alex Denning said:

    Hey everyone.

    Jean’s on holiday atm, so if you’re wondering why your comment hasn’t appeared, he isn’t around to approve it.

    I can’t update the post, but thanks to the people who have pointed out the error in tip #6 – the $turl on reading this needs ‘ ‘ around it, so it should ‘.$turl.’

    Also see Justin’s tip above for a better option than #1.

    And finally, thanks to everyone on delicious.com – this post hit the front page yesterday :D

    -Alex

  11. Jean-Baptiste Jung said:

    Hacks 1 and 6 has been updated according to what readers suggested in comments.
    Thanks to everyone who saved the post on Delicious, and of course, thanks to Alex for the best ever guest post on Cats Who Code!

  12. TNk said:

    Great content!.
    i’m having some problems with related posts (#4). for ex. if i have 3 posts with this tags:
    Post1: house, tree, white
    Post2: house, tree, white
    Post3: aeroplane, house, tree, white

    Post 3 doesnt show Post1 & 2 as related just because it have an aditional tag before the “common” tags used.

    any ideas how to make this work?
    Thanks.

    p.s: a second doubt “If there are no tags, then it’ll disappear. Magic” it still shows the tittle, xD

  13. Alex Denning said:

    @TNK – it works fine for me with multiple tags. The post title will display if the post has tags. If it’s still displaying, put the title in a separate if statement.

  14. Cristian Eslava said:

    It´s just amazing the flexibility of WordPress, it´s more than a blogging CMS. As you point here there are toom many ways of customization.

    I´ll try some of your tricks !!!

    Thank you

  15. Lester Cafe said:

    This is my first visit and try to apply this method if it is really worth it. And thanks for this tip, I wanna hear more from you though. Then share more of your ideas!

  16. Awxus said:

    Tips are very effective, Regarding link text displaying the word To add to this tip, if you’ve got people, personally I find it really useful to be able to quickly access, You have any tips on how to create a random feature on the sidebar

  17. Firany said:

    The Latest Posts widget is very important. Especialy if your front page is not very clear (which is often the case if you write long, complicated posts). This helps people get access to new posts easily, without sifting through all this graphics an headers on the front page.

  18. HASENFARM said:

    After two hours of trying to get the intelligent search-feature implemented I have to give up. No idea what´s going wrong. Everything seems to work fine: the tags are extracted but not displayed in the search-field.
    Can anybody help me???

  19. Dollar A Day System said:

    I especially agree with #4. I’m always hacking themes because there’s always something I want that’s not there. And trying to find the right spot to add some code gets a little tricky sometimes for those of us who aren’t coders.

  20. Laurent said:

    Hi!

    I would have a small question here… I still don’t know everything about wordpress…

    For #5, in what file, and where in that file, am I supposed to add the code?

    Thanks a lot!
    Laurent

  21. Website Design Conferences said:

    good tips, i think that changing the default gravatar picture really does make a difference, it shows that you’re different. i think that people who are commenting see that and know that you’ve done something to make your site unique.

  22. SEO Bookmarking said:

    Thanks for the article. I’m always looking for WordPress Tips and tricks which this article just taught me one. I have bookmarked this article over at the SEO Social Bookmarking website.

  23. Smart Boy Designs said:

    Great tips. Support for Twitter and Related posts are great features to start involving on a blog. It’s a great way to start building interactivity between readers and bloggers.

  24. Jeet said:

    Great tips. It was very generous of you to share individual tips like this. I am not too sure about generating tinyURL in php. I will put unnecessary burden on your server and slow down loading. Instead it should be done using AJAX.

  25. Mimi said:

    Honestly the first 6 tips are so common nowadays, I hardly see how it would make your theme stand out. I see those everywhere, all the time, even on the lowliest of sites. The last few are interesting, though.

  26. smashill said:

    I have been searching for some good non javascript random featured post, do you have any suggestions on where to find that or how to create one yourself?

  27. Baby Boy Gift said:

    You can take the content from your existing portfolio page and create a wordpress page with the same content. When you click “Write” inside the wordpress admin dashboard, it defaults to a new post. You can click “Page” just below “Write” to create a new page instead of a post. When you publish the page it will become part of the sites main navigation bar, too.

  28. Allan | nike dunks said:

    I love those tips and tricks which change the title, Changing Gravatar Image, and Showing 4 latest posts on sidebar. I think nobody added these functionality ever in a free theme. Although it is very difficult to find good free theme but I think that we can easily edit one to make changes.

  29. Online Forex Brokers said:

    Well I think your tips are great. Yes, I’ve seen some of them turned into plugins too, but here is way to cut down on all that clutter.

    I was actually looking for the way to do #2. I saw it on one blog and liked the way it looked.

    Not only did I bookmark this page but I copied the code to a text file and put it in my wp directory so I can actually find it when I need it!
    :)

  30. vunhome said:

    Thank you for sharing the tips. Wow! lots of thing to learn. As a new blogger, a little confuse. I have bookmarked it. Thanks again.

  31. Marian said:

    I have the same problem with #5. The comments displayed are from the last post in the similar posts list. Any solution for this?

  32. Fast food statistics said:

    I want to keep my regular subpages on my site (example: mysite.php portfolio.php,) but I want to use wordpress as well for the theme and use my own subpages instead of the wordpress pages.

  33. Baby Boy Gift said:

    You can take the content from your existing portfolio page and create a wordpress page with the same content. When you click “Write” inside the wordpress admin dashboard, it defaults to a new post. You can click “Page” just below “Write” to create a new page instead of a post.

  34. Duncan said:

    I am having the same problem as “The Molitor” mentioned in the 14th reply. The related posts script is messing with the comment functionality of my wordpress.

    Other than that, this is great list of modifications any user could use to improve their wordpress theme. I better get to work on my boring boring theme.

  35. Free iMac said:

    There is a theme that is made to be viewable for the iPhone. If you search ‘iPhone theme’ in wordpress it would be one of the first ones that come up

  36. Buffalo NY Heating Contractor said:

    I absolutely love the iphone plug-in tip. As a WP newbie, all the tips are helpful…but the whole iPhone idea seems like a home run. Instead of creating an iPhone app talking about my company, I can see how it would be a lot easier just to use a WP plugin. I’m hoping this will be a huge time saver – as well as not having to hire an iPhone app developer.

  37. gas card said:

    I’ve been looking to use a plugin that handles the #4 for me, I am a coder so I can easily copy\paste the code in the wordpress theme I have designed for my personal website, but what I wonder is… what time do you gain from hard-cording vs using the plugin to handle the Display related posts. I just wonder how much more stress does it put on the page loading using the plugin vs not.

    -Randy

  38. Silver Firefly said:

    Thanks for sharing. However, they won’t make your theme stand out from the crowd because lots of theme designers already implement most of these tips in their themes.

  39. 10 tricks to make your WordPress theme stand out | volleyball equipment said:

    [...] 10 tricks to make your WordPress theme stand out Posted by root 16 minutes ago (http://www.catswhocode.com) Jean on holiday atm so if you 39 re wondering why your comment hasn 39 t 91 sports betting champ review on may 25 2009 7 26 pm tricks to make your theme stand out wordpress tavern forum copyright 2008 2009 catswhocode com articles rss comments rss powered Discuss  |  Bury |  News | 10 tricks to make your WordPress theme stand out [...]

  40. Make Money said:

    I agree to the ten points in general. However I am not sure if #7 (auto image resizing) and #10 iphone support should be emphasized. Definitely we need decently sized images/thumbs and mobile browser support (not just iphone)

    Great post any way.

  41. The PSD Coder said:

    Although the iPhone has a considerable market share in terms of mobile browsing – I don’t think designers should necessarily ignore all other mobile browsers.

  42. Jonathan Smith said:

    Is there a way to enable image cache on #7 and / or #8?

    Been trying to figure it out but having no luck, and I notice that the phpthumb script will build the thumbnails each time its called.

  43. Kia said:

    I’m new to coding, so I like reading about any kind of tips and tricks that one can learn. Keep up with the the great work!

  44. Shine said:

    Thanks for all the great tips. I’m very new to coding but I was able to follow your suggestions and have had good results. One question. I have embedded links to youtube and blip in my posts. iWphone doesn’t recognize the links. Is there anyway to have that media show up in the iWphone theme or even just the links?

  45. Jamie said:

    This is very helpful. WordPress blogs tend to look similar with each other so every user must really work it out to make their blog interesting. Thanks for sharing your tips.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!