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].

improve

1. Make your sidebar tabbed

sidebartabs

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

footer3column

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

featuredcontentgallery

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/w:auto/h:auto/q:mauto/f:avif/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/w:auto/h:auto/q:mauto/f:avif/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/w:auto/h:auto/q:mauto/f:avif/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/w:auto/h:auto/q:mauto/f:avif/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

socialmedia

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]

37 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Top 15 Resources For Starting A WordPress Blog
March 10, 2013 1:17 am

[…] 10 Tips to Improve Your WordPress Theme […]

Ryan S
May 11, 2012 2:39 pm

Great article thanks for sharing, other help me a lot, but I think first we should consider is the social sites 😉

lcd television usa
February 14, 2011 1:26 am

Thank you for good theme.

commercial wordpress themes
September 1, 2010 12:10 pm

This will improve my wordpress blog a lot. Thx for all those usefull tips and tricks.

The Ultimate Roundup of WordPress Tutorials, Themes and Guides
May 13, 2010 9:21 pm

[…] 10 Tips to Improve Your WordPress Theme – A great rundown of theme customizations that make your site more user-friendly. […]

(Anti) Social-Lists 7/26/2009 - (Anti) Social Development
February 23, 2010 2:39 pm

[…] 10 Tips to Improve Your WordPress Theme – Here are 10 ideas for spiffing up your WordPress theme. I’m not sure if I agree with all of theme but it’s worth taking a look at. […]

John
January 16, 2010 2:58 pm

great imput. Thanks I love changing themes and this will help for sure.

300+ Resources to Help You Become a WordPress Expert | LeVoltz - iPhone Games, Engineering Projects, Wordpress Themes
November 30, 2009 4:28 pm

[…] 10 Tips to Improve Your WordPress Theme – A great rundown of theme customizations that make your site more user-friendly. […]

Blog – Velagapati - 300+ Resources to Help You Become a WordPress Expert
September 23, 2009 9:07 pm

[…] 10 Tips to Improve Your WordPress Theme – A great rundown of theme customizations that make your site more user-friendly. […]

Blog – Velagapati - 300+ Resources to Help You Become a WordPress Expert
September 23, 2009 9:07 pm

[…] 10 Tips to Improve Your WordPress Theme – A great rundown of theme customizations that make your site more user-friendly. […]

Free WordPress (Magazine/Framework/Bloggy/Tech Blog) Theme: Biblioteca | WPShout.com
September 15, 2009 5:59 am

[…] 10 Tips to Improve Your WordPress Theme {23} […]

Sid
September 14, 2009 10:19 pm

Nice review book marked it could add more to the list..
.-= Sid´s last blog ..Firefox 3.5.3-Direct links and portable =-.

KENNETH LIM // Top 15 Resources For Starting A WordPress Blog
September 10, 2009 4:22 pm

[…] 10 Tips to Improve Your WordPress Theme […]

rick
September 3, 2009 4:05 pm

Great post…just bookmarked! I was especially pleased to read about the widgetized footer..Thank you.
.-= rick´s last blog ..Saltwater on the Road =-.

Create An In-Post (Theme) Options (Meta) Box in WordPress | WPShout.com
August 24, 2009 3:01 pm

[…] With that, we’re finished creating our in post options! The download for the code is available at the top of the post. This is a brilliant, simple and effective way to improve your WordPress theme. […]

Bingo
August 3, 2009 1:34 pm

A great resource to use for future upgrades of my website/theme. #1, 2, 9 will be implemented ASAP

Added feed in GR
.-= Bingo´s last blog ..Ladbrokes nya expert på bingo =-.

Couteau Suisse N°43 la série des trouvailles
July 31, 2009 6:37 pm

[…] 10 Tips to Improve Your WordPress Theme | WPShout.com […]

joyologo design shop 2.0
July 31, 2009 6:00 pm

great tips for nice wp themes, thanks..
.-= joyologo design shop 2.0´s last blog ..premium news wordpress theme =-.

WordPress tips och resurser via Twitter | wpxl
July 31, 2009 7:27 am

[…] 10 Tips to Improve Your WordPress Theme – 10 tips för att förbättra sitt WordPress tema. […]

Dmitriy
July 30, 2009 9:54 am

What single tool do you use to stick your design to CMS?

Jaspal Singh
July 29, 2009 6:30 pm

Wonderful post, really helpful to improve wordpress blog.

Hilmy
July 29, 2009 6:29 pm

I was on the look out for tabbed sidebar and found it here, excellent!
Also fall in love with widgetized footer and some others. Great compilation and thanks a lot.

Scott
July 29, 2009 6:29 pm

Great post, I love the tabbed sidebar. Subscribed to your site. I’ve got a question, though: in #5, why don’t you just advise people to use one of the existing social media plugins? I’m using “Sociable” and it seems to work fine…???

Richard
July 24, 2009 8:07 am

Just whatI wanted … a way to create these features without the use of plugins. Many thanks for spotting the target!

Matthew Kettlewell
July 29, 2009 6:28 pm
Reply to  Richard

I’m all over the Twitter and Social Media icons… (Number 10 & 5 )

Great post with lot’s of great links to other resources.

Thanks

Matt Kettlewell

Ashely Adams : Sticker Printing
July 24, 2009 7:30 am

Now this is really a nice and useful post. I have already bookmarked for future references. These tips are very helpful in improving wordpress blog. The idea of widgetized footer is great. And thanks for mentioning the “plugins installed”; they are really irritating at times.

Isaac | Go Blogger (dot) net
July 24, 2009 6:29 am

Interesting points. But I guess it is too techie for me. I’m more into content stuff.

10 Tips to Improve Your WordPress Theme | WPShout.com « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit
July 24, 2009 1:50 am

[…] 10 Tips to Improve Your WordPress Theme | WPShout.comwpshout.com […]

Raymond Selda
July 24, 2009 1:21 am

These are really nice tips Alex. I learned something new from most of the tips you’ve posted here. I will definitely check this post again. Thanks for sharing.
.-= Raymond Selda´s last blog ..How To Make a WordPress Theme Using Starkers =-.

Chris
July 23, 2009 2:59 pm

Some good tips. Thank you for sharing!

Rishabh Verma
July 23, 2009 1:51 pm

Nice tips to jazz up the wordpress themes, they are very useful to even hack the existing themes.

Jaspal Singh
July 23, 2009 9:33 am

Wonderful post, really helpful to improve wordpress blog.
Thanks for sharing.
.-= Jaspal Singh´s last blog ..Open Source Learning Management System LMS Tools For Online Education =-.

Hilmy
July 22, 2009 10:33 pm

I was on the look out for tabbed sidebar and found it here, excellent!
Also fall in love with widgetized footer and some others. Great compilation and thanks a lot.
.-= Hilmy´s last blog ..Seven Sure Steps To Online Business Success =-.

DDlinks
July 22, 2009 7:07 pm

great tips to apply thank u
.-= DDlinks´s last blog ..avast – free antivirus protection =-.

How to: Use Thumbnails Generated by WordPress
July 22, 2009 3:25 pm

[…] of ten brilliant tips that I shared yesterday on my blog – display images on your blog’s homepage without any custom fields or any additional […]

Sumesh
July 22, 2009 1:53 am

Good post, I’ve bookmarked for future refererence, I found featured content gallery and homepage thumbs useful (and new).
.-= Sumesh´s last blog ..Lost and Taken: Free, copyright-free stock textures =-.