Pieces of WordPress theme code: a repository


The great thing about open source is that you can build on what others have done. In my quest to port an open source web design into a WordPress theme, I’ve used bits and pieces of WordPress theme code that have served me well in previous designs.

I am posting these pieces of code here so that this post will serve as the repository in case I need to customize another theme. Please feel free to suggest additional code bits so that I can add it here. Just post it in the comment field and enclose it in code tags.

SEO friendly title

I got this from K2, what this does is place the title of your post before your blog name. The conditional tags take out the at, which connects the post title to your blog name when you�re, for example, in the home page. You don�t want your home page title to start with at.
<title><?php wp_title(''); ?> <?php if ( !(is_404()) && (is_single()) or (is_page()) or (is_archive()) ) { ?> at <?php } ?> <?php bloginfo('name'); ?></title>

Here’s another implementation as posted in the Dech blog.
<title>< ?php wp_title(' '); ?>< ?php if(wp_title(' ', false)) { echo ' &middot; '; } ?><?php bloginfo('name'); ?></title>

Make header image clickable

This is a tip I got from K2 to make the header image clickable. Replace the starting div tag for the header with this:
<div id="header" onclick="location.href='http://max.limpag.com/';" style="cursor: pointer;">

Optimal ad display

This will place your ad block inside your first blog post. AdSense’s heatmap shows the area within the content to be an optimal area for the display of ads. I found this solution in the WordPress forum.

<?php $showAdSense = True; ?>
before the line:
<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?>
Then insert this into the part where you want the ad to appear.
<?If ($showAdSense) { ?><div style="float:right;padding:3px;"> Ad sense code here </div><?php $showAdSense = False;} ?>

I usually insert it below the blog post headline and before the template tag that calls the blog post (the_content).

Better more link

Some templates still use just More to link to the full article. To replace this with Continue reading “title of the blog post.”

Replace the_content with
<?php the_content("Continue reading '" . the_title('', '', false) . "'"); ?>

Social bookmarking of posts

This will add links for the bookmarking of your posts in del.icio.us, Spurl and Furl as well as track incoming links from Technorati. The Sociable WordPress plugin automates this but I prefer doing it using template tags. I should update the link because I spotted one site that will allow you to submit to all these social bookmarking services.
&#183; <a href="http://del.icio.us/post?url=<?php the_permalink() ?>&title=<?php echo htmlentities(the_title()); ?>">Del.icio.us</a> &#183; <a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?t=<?php echo htmlentities(the_title()); ?>&u=<?php the_permalink() ?>">YahooMyWeb</a> &#183; <a href="http://www.spurl.net/spurl.php?url=<?php the_permalink() ?>&title=<?php echo htmlentities(the_title()); ?>">Spurl</a> &#183; <a href="http://www.furl.net/storeIt.jsp?url=<?php the_permalink() ?>&title=<?php echo htmlentities(the_title()); ?>">Furl</a> &#183; <a href="http://www.technorati.com/search/<?php the_permalink() ?>">Incoming links</a>

Loading Facebook Comments ...


  1. […] To tweak your WordPress theme even further, you might want to check my repository of pieces of great WordPress theme codes, feel free to suggest snippets that should be added there. I still have to finish the second part of my article: How to create a WordPress theme: A guide for the design-challenged non-geek. I’m thinking of finishing part 2 by next week (fingers crossed). Posted by Max Limpag Filed in Blogs, Highlights, Blog design […]

  2. ~

    Hey there.,

    Have any idea how many WordPress sites that I searched to try to figure out how to add a simple URL Click to my WP banner image?!?! Even the guy who DESIGNED the theme did not have this info on his page.,

    I only just installed WP this evening and am hacking it as I type this., all I can say is Boy do I miss being able to edit in Dreamweaver., what the heck are people thinking with this WP stuff., what a learning curve.

    Now it seems that I have to learn PHP, CSS and MySQL, all of which I have avoided for many years., oh well., time to burn my eyes out on the screen even more now.,

    THANKS for making this one piece of my job a little easier., will be checking out more of your site soon.,



  3. ~

    Hi Max;

    Yeeesh., yes., thanks., I saw that post., but I wonder., which is more time consuming and hair pulling., doing as you suggest and diss-assembling and then re-assembling the various code bits., or just going to the various files and editing there?!?!

    This all seems so archaic in the year 2007., who the heck would “design” a system (hah., some system) where the design code for one site is in ten different files and NOT viewable or editable in ONE system or piece of SW at one time?!?

    One can only hope that we will look back on this time of “design” and say,. goodness., glad that we are way past that mess! It just seems a bit overly convoluted to me., yes?



  4. AK,
    If you want just a single file to control your design, you can choose not to break it up. Include the code for headers, sidebars and footers in index.php. The breaking up of the files allows you to re-use code (i.e. header, sidebar, footer) for different sections of your WP blog: index, post entry, page, archive etc.

Leave a Reply

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

No Trackbacks.