3 WordPress Theme Tips

When I launched the current theme for this blog, I wanted to experiment with what WordPress is capable of.   previously all my themes have been fairly standard, a home page which lists a certain number of posts, a separate page for displaying search results and/or categories and a page for viewing a single post.   The same as 95% of blogs out there.

This time, however, I wanted to push myself a bit further.   When I set the goals for the redesign, I know I would have to learn some new techniques, and break away from my own WordPress comfort zone.   In the process I found just how versatile WordPress can be.   And I learnt allot, so much in fact, that I thought I’d share it with you.   So in this post I’ll cover three of the goals I set myself for the redesign, and how I achieved them in WordPress.

Separate Home Page

Believe it or not, this domain has been around for a long time.   The blog, however, is less than a year old.   As the blog has developed, and the purpose of the site changes, I found myself not utilising the root of the site as best as I could.   In fact, I was touting services I could no longer perform.   So with that in mind I set out to better use the root of the domain, and integrating it into the blog.

This is a technique that’s being used be an increasing number of bloggers.   It provides some great opportunities for diversifying the site while still remaining consistent with look, feel and features.   The key to this is having the pages outside of the blog directory, in the case of this site anything sitting outside of the oakinnovations.co.uk/blog directory, act as if they are inside the blog.   WordPress makes this incredibly easy.

You have to do two things.   Firstly, you have to include a file from the WordPress directory.   This ensures all the WordPress functions that are used within a theme are accessible and available.   Secondly, you have to call the WordPress theme header (get_header).   The code to so this is below:

<?php
define('WP_USE_THEMES', false);
require('Path/to/wp-blog-header.php');
?>
<?php get_header(); ?>

As you can see, WordPress does all the heavy lifting.   With this code in your page you can use all the WordPress functions as you would in any other template file, such as your single.php file. It really is that simple.

Links and Pages Together

I can see the logical separation between Links (or Blogroll as WordPress calls it) and Pages.   But for this theme I wanted them to exist together, i wanted them to be seamless.   So looking across the top of this theme you’ll see links to pages, and links to external sites.   This is mostly to facilitate the fact that I will be adding pages to the site that will lie outside of the normal WordPress structure (see above), which would cause difficulties for readers if they were separate from the WordPress pages.

There’s no real trick or magic to this, it’s just about working with that WordPress gives you.   Essentially you have to call the “wp_list_pages” and “wp_list_bookmarks” functions with the right parameters, and then wrapping it in appropriate HTML.   This is the code I used:

<ul id="pagesList">
                 <!-- List static pages, WP Pages and WP Links/Bookmarks/Blogroll -->
                 <li><a href="http://www.oakinnovations.co.uk/">Home</a></li>
                 <li><a href="<?php bloginfo('url'); ?>">Blog</a></li>
                 <?php wp_list_pages('title_li='); ?>
                 <?php wp_list_bookmarks('categorize=0&title_li='); ?>
</ul><!-- pagesList -->

What happens here is, I start an un-ordered list and add two items, one for the site root and one for the blog homepage.   Then I use the “wp_list_pages” function to print out a list of links to pages, when calling this function I pass a parameter which prevents WordPress from adding a title to the list, allowing it to be incorporated into an already opened list.   Likewise I call the wp_list_bookmarks” function and tell that to output without a title and also tell it not to arrange the links into categories.   I then close the un-ordered list.   Job done, and it works a treat.

Alternate Post Styles

The last technique I used was to change the style of posts based on the number of other posts on the page.   This is most evident on the Blog’s Homepage.   In order to reduce duplicate content, increase click through rates but still provide quick access to content, I decided to only show excerpts of posts on this page.   The one exception to this is the latest post, which is displayed in full.

To do this you really have to dig in to “The Loop“.   That mysterious beast which seems to control everything in WordPress.   The Loop is quite simple really.   All it does it cycle through all the available posts for that page and provide data for each in turn.   So for a single page it will only provide one post, for the homepage it will display how ever many you defined in your dashboard (default is 10).   My approach to this is quite simple.   The first challenge to overcome is knowing which iteration of The Loop you are currently on.   So I set a “count” variable and increment it at the end of each loop.   Then, within the loop itself, I add conditions to ensure that different processing is performed for different iterations.   The basic code goes like this:

<?php

$count = '0';

if ( have_posts() )  : while ( have_posts() )  : the_post();

if ($count == '0') {

//  Do Something for the first post

} else {

//  Do something for the subsequent posts

}

$count++;

endwhile; else:  ?>
<p><?php _e('Sorry, no posts matched your criteria.');  ?></p>
<?php endif;  ?>

And that’s the base of The Loop I use on the blog homepage.   By using this count method it’s possible to do a whole bunch of different things, and enter into increasingly complex variations of The Loop.

I hope you found this post usefull.   I’m currently working on a new design that builds upon some of these techniques, extending them quite a bit.