Skip to content

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]

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]

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/cb:lw2N.66756/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:lw2N.66756/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:lw2N.66756/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:lw2N.66756/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]

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.

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]
Yay! 🎉 You made it to the end of the article!
Alex Denning

31 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
James McFadden
November 30, 2015 6:58 am

Is it possible to write a define statement in wp-config that only applies to one website in a multisite environment?

Basically like conditional instructions per website…

e.g. All of website allows for define ( revisions 3 ); but I wan’t one of the website’s in the multisite environment to have define ( revisions 10 ); that is setup for training.

Any help would be appreciated.

There are other define statements that we’d like to include but if it isn’t possible there’s no use asking further 🙂

Thanks!!!

Mark Simchock
November 24, 2014 5:44 pm

re: Disable the Theme and Plugin Editors

I believe this is also possible via a filter(s). It might be worth mentioning that as fyi-ish alternative.

Ionut Neagu
November 25, 2014 12:13 pm
Reply to  Mark Simchock

thanks for pointing this out Mark!

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} […]

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

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

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

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

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

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 […]

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.

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 […]

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

31
0
Would love your thoughts, please comment.x

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

20 Best Free WordPress Themes for 2024 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...