10 Tips to Improve Your WordPress Theme

After finishing up with the new design for [wp], here are ten tips I’ve got to improve your [themes].

1. Make your sidebar tabbed

One of my favourite features of the new [wp]design is the tabbed sidebar. How did I do it? First, I took a look at a couple of scripts, deciding on DomTabs. Next, I took a look at a tutorial on ProBlogDesign explaining one way to integrate DomTabs to get an idea of how other people are using DomTabs. After that, I integrated the code from the PBD tut and got styling! At this point in the design process, I’d styled some tabs on the PSD,  but I wanted something that’d fit in with the navigation. The solution: a three button tabbed sidebar area, using border-radius. The code is below, should you wish to use it on your site.

[css]/*Tabbed Sidebar bit*/

ul.domtabs{
float: left;
width: 300px;
list-style-type: none;
margin: 0;
padding: 0;
background: #194E84;
clear: both;
font-weight:bold;
color: #FFFFFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
text-transform: uppercase;
}

ul.domtabs li{
float: left;
display: inline;
}

ul.domtabs li a{
display: block;
padding: 2px;
text-decoration: none;
color: #fff;
}
ul.domtabs li a:hover, ul.domtabs li.active a{
background: #3B6B9C;
/*for browsers based on Mozilla – this works*/ -moz-border-radius:5px;
/*and for Safari – */ -webkit-border-radius: 5px;
/*Internet Explorer users: you won’t see anything.*/
/*But on WPShout I can get away with it as less than 5% of visitors use IE*/
float:left;
color:#fff !important;

}[/css]

And the sidebar code (using the WP-PostViews plugin):

[php]<div id=”tabbed”>
<div class=”domtab”>
<ul class=”domtabs”>
<li><a href=”#t1″>Popular</a></li>
<li><a href=”#t2″>Latest</a></li>
<li><a href=”#t3″>Tags</a></li>
</ul>
</div>
<div>
<a name=”t1″ id=”t1″></a>
<br /><br />
<?php if (function_exists(‘get_most_viewed’)): ?>
<ul>
<?php get_most_viewed(); ?>
</ul>
<?php endif; ?>
</div>
<div>
<a name=”t2″ id=”t2″></a>
<br /><br />
<ul>
<?php wp_get_archives(‘type=postbypost&limit=5’); ?>
</ul>
</div>
<div>
<a name=”t3″ id=”t3″></a>
<?php wp_tag_cloud(”); ?>
</div>
</div>[/php]

2. Create a widgetised footer that keeps visitors on the site

Widgetising your footer isn’t anything particularly new, but it is often overlooked and I really believe that you can do a lot of good with a nice footer. I won’t delve too deeply into this now as there are plenty of tutorials around (including a very good one on Nettuts), but just to stress how important the footer is, think of it this way: when someone finishes reading a post and the comments, they will probably now leave the site. Unless, that is, they come across some more interesting posts on the footer.

3. Display images on the homepage without custom fields or any additional script

This is a brilliant tip that I saw first on WebDeveloperPlus – you can use WordPress’ built in functionality to display resized images on the front page without a custom field. How do you do it? First, log in and on the sidebar select ‘Media’ under ‘Settings’. On the page you end up on, change the thumbnail size to whatever size you want and then insert the following code on your homepage:

[php]<?php
//Get images attached to the post
$args = array(
‘post_type’ => ‘attachment’,
‘post_mime_type’
=>
‘image’,
‘numberposts’ =gt; -1,
‘order’ =gt; ‘ASC’,
‘post_status’ =gt; null,
‘post_parent’ =gt; $post-gt;ID
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
$img = wp_get_attachment_thumb_url( $attachment-gt;ID );
break;
}
//Display image
}
?>[/php]

4. Create a featured content gallery with jQuery

One of the fundamentals of any ‘magazine’ theme is its featured content gallery, and the new WPShout is not without a featured content gallery, using some lovely jQuery. The featured content gallery I use was made on WebDeveloperPlus, where you can see all the code etc etc. The code is quite complex, and to WordPress-ify it you’ll need two or even three loops, so that’s a tutorial for another time, but to give you a quick idea – the first six lines will need its own loop and you’ll need a second loop for the rest of the content.

[xml] <ul class=”ui-tabs-nav”>
<li class=”ui-tabs-nav-item ui-tabs-selected” id=”nav-fragment-1″><a href=”#fragment-1″><img src=”https://iotvnaw69daj.i.optimole.com/cb:mLvy.66914/w:auto/h:auto/q:90/f:best/https://wpshout.com/wp-content/themes/NomeMag/images/image1-small.jpg” alt=”” /><span>10 Tips to Improve Your WordPress Theme</span></a></li>
<li class=”ui-tabs-nav-item” id=”nav-fragment-4″><a href=”#fragment-2″><img src=”https://iotvnaw69daj.i.optimole.com/cb:mLvy.66914/w:auto/h:auto/q:90/f:best/https://wpshout.com/wp-content/themes/NomeMag/images/image2-small.jpg” alt=”” /><span>10 Ways to Get That Elusive Magazine Look in WP</span></a></li>
<li class=”ui-tabs-nav-item” id=”nav-fragment-3″><a href=”#fragment-3″><img src=”https://iotvnaw69daj.i.optimole.com/cb:mLvy.66914/w:auto/h:auto/q:90/f:best/https://wpshout.com/wp-content/themes/NomeMag/images/image3-small.jpg” alt=”” /><span>Create An Awesome Theme Options Page</span></a></li>
<li class=”ui-tabs-nav-item” id=”nav-fragment-2″><a href=”#fragment-4″><img src=”https://iotvnaw69daj.i.optimole.com/cb:mLvy.66914/w:auto/h:auto/q:90/f:best/https://wpshout.com/wp-content/uploads/2009/07/image4-small.jpg” alt=”” /><span>Introducing WPShout</span></a></li>
</ul>
[/xml]

5. Add (XHTML) valid social media links to the bottom of posts

People often wonder why their posts aren’t being saved onto social bookmarking sites, and quite often the answer is becuase there aren’t any social media links at the bottom of posts. It’s surprisingly easy to do with a table and some nice images! A quick Google will find you an abundance of social media icons.

Anyway. Valid social media links. Jeff over at Perishable Press put together a great list of links, and here are some links to the most popular links:

Delicious:

[xml]<a rel=”nofollow” href=”http://delicious.com/post?url=<?php the_permalink(); ?>&title=<?php echo urlencode(get_the_title($id)); ?>” title=”Bookmark this post at Delicious”>Bookmark at Delicious</a>[/xml]

Digg:

[xml]<a rel=”nofollow” href=”http://digg.com/submit?phase=2&url=<?php the_permalink(); ?>” title=”Submit this post to Digg”>Digg this!</a>[/xml]

StumbleUpon:

[xml]<a rel=”nofollow” href=”http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php echo urlencode(get_the_title($id)); ?>” title=”Share this post at StumbleUpon”>Stumble this!</a>[/xml]

Reddit:

[xml]<a rel=”nofollow” href=”http://reddit.com/submit?url=<?php the_permalink(); ?>&title=<?php echo urlencode(get_the_title($id)); ?>” title=”Share this post on Reddit”>Share on Reddit</a>[/xml]

6. Use custom fields cleverly

Custom fields turn WordPress from a blogging platform into a CMS, and if you’re clever with them you can create something brilliant with them, as Chris Coyier shows in a screencast of his where he talks through an e-Commerce he’s been making. Another post worth taking a look at is one on Smashing Magazine.

This is meant to be a ‘tip’. I’d better say something meaningful. Here goes. Custom fields have great potential and when used correctly they can be the thing that makes your theme stand out from the large crowd.

7. Display the most popular posts

Mentioned in tip number one, the WP-PostViews plugin is really great plugin that allows you to easily show your site’s most popular posts. Install it and you can very quickly show off your site’s best content, and in doing so you can keep readers on your site for longer.

8. Don’t demand users have certain plugins installed!

I can’t stand it when themes come along and only work if you have plugin x installed. By all means, use an if function and enhance the [theme] if certain plugins are installed, but don’t demand they are. Plugins are for the user to decide if they want, not the theme author. Below is some example code on how you’d use an if function with a plugin:

[php]<?php if (function_exists(‘plugin_name’)): ?> ***do plugin stuff here*** <?php endif; ?>
[/php]

9. Widgetise everything

This is something that theme frameworks do very well – widgetise absolutely everything. Most [themes] will have a single widgetised area, but two, three, four? Not really. Here I’ll show you how to widgetise a number of different areas.

First, the standard widget code that you need to add to your functions.php file:

[php]if ( function_exists(‘register_sidebar’) )
register_sidebar(array( ‘name’ => ‘Widget Area 1’,
‘before_widget’ => ‘<div class=”footerwidget”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3 class=”widget”>’,
‘after_title’ => ‘</h3>’, ));
[/php]

Once you’ve got that, it’s really easy to add more widget areas – just change the name:-

[php]if ( function_exists(‘register_sidebar’) ) register_sidebar(array( ‘name’ => ‘Widget Area 1’, ‘before_widget’ => ‘<div>’, ‘after_widget’ => ‘</div>’, ‘before_title’ => ‘<h3>’, ‘after_title’ => ‘</h3>’, ));
[/php]

So. Let yourself go. Widgetise everything.

10. Integrate a Tweetmeme style Twitter button to your posts

With Twitter’s ever increasing popularity, the Tweetmeme button has become the favoured way for bloggers to promote Twitter RTs. Thankfully, it’s really easy to integrate something very similar into your WordPress theme, as is shown on WebResourcesDepot shows. You can integrate the ‘Easy RT Button‘ with the code below:

First, in the header.php file

[php]<?php if ( is_single()) { ?> <script src=”<?php bloginfo(’stylesheet_directory’); ?>/js/retweet.js”></script> <?php } ?>[/php]

And on the single.php file:

[xml]<a href=”<?php echo get_permalink(); ?>” rel=”nofollow”><?php the_title(); ?></a>[/xml]