Take Your WordPress Theme to the Next Level

Everyone seems to be creating WP themes for public consumption. Make yours stand out among the rest!

A note from the author

Creating themes for WordPress seems to be the “in” thing to do right now but with the sheer number of themers out there, you need to make sure your themes offers more than the others. You can differentiate your theme in 2 ways: in the visual department and in the feature set. I am going to concentrate on the feature set for today. More specifically, on the features a lot of users crave for in themes but few themes actually have.

Internationalization

One could assume all WordPress users are English and add no internationalization feature. But with the explosion of Internet connection and users recently you’ll be glad you added this feature.

Since we are talking about the theme alone, I am only going to cover the internationalization part and not the localization part.

Step 1

Open the functions.php file of your theme. If the functions.php file isn’t present, create one and add the following bit of code.

<?php load_theme_textdomain('customname'); ?>

Replace the “custom name” bit with your own text.

Step 2

Now comes the repetitive but easy part. You need to edit all the files so all the text printed must be inside gettext functions which are WP’s internationalization tools of choice. Don’t worry you’ll understand this in a bit.

Consider the following piece of code. You’d see this in a normal theme.

<li>Home</li>

Now change it to the following

<li><?php _e("Home", "<span class="&rdquo;php&rdquo;">customname</span>"); ?></li>

There! That wasn’t so hard was it? Since the emitted text is normal HTML we use the _e function after opening a PHP tag.

In case where the text is emitted directly inside a PHP tag we use the __ function. Let me show you. Below is a piece of code you’d see in a normal theme.

<?php the_content('Read more...'); ?>

This now changes to:

<?php the_content(__('Read more...', "customname")); ?>

What’s more you ask? That’s it. Your theme is internationalized, ready for the plugin of your choice or WP to translate it to another language.

Dynamic Sidebars and variations

Users love sidebars and the act of adding a million little things to it. In the face of that, it seems almost a crime to not add support for this. Here is how.

Step 1: Registering our sidebar

Open the functions.php file of your theme. If the functions.php file isn’t present, create one and add the following bit of code.

<?php
 
if ( function_exists(’register_sidebars’) )
register_sidebar();
 
?>

Step 2: The actual markup

Here is a bit of the sidebar markup in the default theme

<ul id="sidebar">
 <li id="about">
  <h2>About</h2>
  <p>This is my blog.</p>
 </li>
 <li id="links">
  <h2>Blogroll</h2>
  <a href="http://net.tutsplus.com">Net Tuts</a>
 </li>
</ul>

Now add this following snippet before any text is actually printed i.e after the unordered list is opened.

<?php if ( !function_exists('dynamic_sidebar')|| !dynamic_sidebar() ) : ?>

Your markup is now supposed to look something like this.

<ul id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
 <li id="about">
  <h2>About</h2>
  <p>This is my blog.</p>
 </li>
 <li id="links">
  <h2>Blogroll</h2>
  <a href="http://net.tutsplus.com">Net Tuts</a>
 </li>
</ul>

2 lines. Your theme is now widgetized. Users can now start adding and editing widgets straight from the admin CP.

Variations

You can do some nifty things here. What if you want to display your recent posts and comments on single pages alone? You can then register multiple sidebars and then contextually add them. Registering more than one sidebar is just as easy.

<?php
 
if ( function_exists(’register_sidebars’) )
register_sidebar();
register_sidebar(2');
register_sidebar(’3');
 
?>

Why do you have to use integers when you can use actual names? This way you need not run to the admin CP or look into the code every time to find out which sidebar is displayed where.

<?php
 
if ( function_exists(’register_sidebars’) )
register_sidebar();
register_sidebar(’single');
register_sidebar(’footer');
 
?>

You can then add them to the page like so.

<?php if ( !function_exists('dynamic_sidebar')|| !dynamic_sidebar('single') ) : ?>

Theme Options page

Letting the user set various options directly through the admin panel is a huge plus for any theme. I had my own, albeit limited, tutorial worked out when I saw the tutorial written by Dan Harper over at ThemeForest. Its much more comprehensive and feature laden than mine so I’ll just be linking to the tutorial in question.

You could do a lot of very user-friendly things using this feature. You could let the user set the number of posts returned in a search result. Or let them choose whether a welcome message is displayed in the home page.

Your imagination is the limit here. There are lots of ways this could improve your theme. You could include a lot of bells and whistles and then let the user enable/disable the features he/she wants through the control panel instead of sifting through your source code.

Gravatars

The Gravatar page says A Gravatar, or globally recognized avatar, is quite simply an image that follows you from site to site appearing beside your name when you do things. And users do like a persistent identity across all the blogs they read. So lets go implement this in our WordPress theme.

In the pre 2.x days, implementing Gravatars used to be a chore. Now that Gravatars are built-in, you need not mess around with plugins just to get it working. It is as easy as calling a single function.

<?php echo get_avatar();?>

The function returns an img tag so you need not add anything else. You can hit the Wordpress Codex to read up on all the parameters you can pass to the function.

Custom Fields

Custom fields is another of these things which people seem to rave about and yet I am completely unable to grasp why. Never-the-less, our one true love WordPress [Did I mention how much I love WP?] includes support to store and display custom fields out of the box. However, it is up to the theme developer to actually code it into the theme. Here is how.

Just like with the Gravatars, you only need a single function to display the user’s custom fields.

<?php the_meta(); ?>

Of course, there is more to custom fields and their implementation than can be covered in a part of a small article. Developers serious enough should hit the WordPress codex to get themselves acquainted with this particular part of the API. Since the custom fields are stored as a key/value pair, its trivial work to search for a specific key and if present, print its value.

This isn’t everything

These are just some of the features I see my users requesting the most. And of course, there are a ton of features I imagine I must have missed. Hit the comments section to let me know. I am all ears.



18

Comments
  • M.A.Yoosuf says:

    pretty cool hacking tip,

    hope i am the first commenter!

  • Dan says:

    I can’t imagine a theme doing very well without a widget-enabled sidebar.

    It seems absolutely necessary for a theme these days

  • Clément says:

    Thanks a lot ! Very cool !

    One question : What’s the IDE on the image with the dark background ? Love it !

    Thanks !

  • Chukki says:

    I’m writing my first “open” Wordpress Theme at the time. I think if you write your theme for yourself, you didn’t need anything of this features.

    But if you write a theme for other users for download you want to have a high compatibility to all wishes of the user.

    The most important points already named, i think. The option page for the user is an very good idea. I thougt about a free version with normal html, css, php & a “premium” version with jquery or mootools effects and a option page for colors and other configurations.

  • Ofer says:

    Hello there,

    Regarding the internationalization of themes you have mentioned, we have just released a new plugin at our site which makes the entire translation of the site much simpler, without the need to change or edit the existing theme.

    You and your readers are more than welcomed to try it and give us ideas on how to improve it even further.

    Anyhow – a very nice article, I think I’ll buy some of the tips ;)

  • Devin says:

    very nice set of tips and tricks here.

  • This will all be implemented in my next theme. Thanks! :)

  • srigi says:

    Clément >> Notepad++ has ability to tune to black theme, but you must edit colors manualy. If you want out-of-box solution, I recomend “E text editor” with lots of beatifull black themes.

  • Crysfel says:

    I just did a translator plugin for my new blog :D

  • Siddharth says:

    Thank you for the kind words.

  • Shibi Kannan says:

    Very nice collection of useful tips. I suggest theme authors to take a look at this site that links to useful similar content if you are interested in learning more about utilizing the lesser known functions behind wordpress magic

    http://wphacks.com/category/wordpress/page/3/

  • y. s. says:

    Hi,

    thanks for your post on internationalization of theme, but I must say it is still unclear to me where to put the translation of my theme ?
    Could you elaborate on the translation part ? Maybe give a concrete example ?
    Say I have a theme I have to make it international, where do I put the translation of the 30 string that come out of it ? In a pot file ? Where do I store this file ? At the root of the theme ? In wp-include ? Where ?

    It would be great if you could post on that.

    thanks,
    y.s

  • BestHelen says:

    I have found what i was looking for !!! thx )

  • iwpdesign says:

    thanks. great article.

  • Jonathon says:

    Fantastic article, you have shed light on the add’l dynamic sidebars in a way that the 20 ought tutorials. codex, and wordpress api were unable to do so. Congrats and thank you.