Above is the slide deck for my WordCamp Victoria presentation entitled “10 WordPress Theme Hacks to Improve Your Site”. Unlike my regular presentation this one is entirely slides based which means if you just read the slides, you’ll get the gist of it. Below are all my code examples along with links to further information, example sites and related tutorials to give you some context. Knock yourself out!
Replace Site Title with a Linked Image
This is my number one pet peeve. When people visit a site they intuitively expect the logo or header image to be a link back to the home page, and it should be. When it’s not they (and I) get annoyed. Making your header image link back to your home page is not hard. All you have to do is wrap the header image code in a simple anchor tag that leads back to your root URL and you’re good to go. For simplicity the code looks like this:
<a title="<?php get_bloginfo( 'name' ); ?>" rel="home" href="<?php echo home_url( '/' ); ?>">
… the image code …
For a more in-depth explanation check out the tutorial Twentyten Header Image as Home Button.
Enable WordPress 3 Custom Menus
The WordPress 3 custom menu function is built into the TwentyTen theme and most newer themes, but older themes usually just have hard-coded menus. Adding WP 3 custom menus to a theme is not hard though. It requires a function call in the functions.php file and a template tag in the template file of your choice (usually header.php and/or footer.php). Here’s that code:
In functions.php:
register_nav_menus(
array(
'menuName' =>__('Menu Name'),
' primary' =>__('Primary Menu'),
'2ndMenu' =>__('2nd Menu'),
)
);
Where menuName is the identifying slug for WordPress and Menu Name is the actual displayed name in WordPress Admin.
To display a menu you can either call it based on the slug:
<?php
wp_nav_menu(array(
'theme_location' => 'primary'
));
?>
… or the name defined in the Menus admin area:
<?php
wp_nav_menu(array(
'name' => 'Menu Name'
));
?>
Menus Outside the Box
Menus don’t have to be regular boring one or two word one-line elements. Because WordPress allows HTML in the Navigation Label you can add more interesting designs like we did on the 12×12 Vancouver Photo Marathon site. On this site we added a simple span tag around the text that displays under the menu heading and then used CSS to change how it displays. Sorry, no code examples – it’s just straight up CSS and out of context it makes no sense.
WordPress 3 Custom Background Images and Colours
The TwentyTen theme introduced a very cool custom background function built right into the admin interface (under Appearance -> Background). This is not a function found in TwentyTen but a core function found in WordPress. That means you can activate it in any theme. All you have to do is call it from the functions.php file:
add_custom_background();
The function injects CSS style code right into the HTML pages which means it’ll override your theme CSS file no matter what. That in turn is why it’ll work on any theme as long as you run WordPress 3.0 or higher.
Adding Featured Image (post-thumbnail) Functionality
Featured images are great, if you know how to use them. They also do way more than just displaying thumbnails (which is why I think the function should be renamed).
To activate the function add the following code to your functions.php file:
add_theme_support( 'post-thumbnails' );
This will add the function to you Admin panel. To display the featured image (in the size you want) in your theme use one of the following functions:
<?php the_post_thumbnail(); ?>
Variations:
<?php the_post_thumbnail('thumbnail'); ?>
Custom Page Templates
Custom page templates allow you to individualize the look of different pages on your site. They can be used to create custom front pages, differentiated legal pages or even custom query pages that pull in posts from multiple categories.
A custom page template is basically a regular page template with a commented out tag at the very top that looks like this:
<?php
/* Template Name: Whatever */
?>
Custom Category Templates
Custom category templates can be used to create differentiated category index sections in a site. Some good examples are the Reeltime Videoworks show reel page and testimonials page and Design Schooled Kids’ press page.
A custom category template can be made in one of two ways. Either create a file with the name category-ID.php where ID is the ID number of the category or category-slug.php where slug is the slug for the category. These files will automatically become the category tempaltes for the defined categories.
Custom Header, Sidebar and Footer
You can also create custom headers, sidebars and footers sort of the same way. You make and call them the same way. For example if you want a custom header you create a new header file called header-custom.php and then call it using the standard get_header() function with a small difference:
<?php get_header('custom'); ?>
where ‘custom’ can be anything.
Better Context Links
One of the things that bug me about standard WordPress themes is that they display links to the next and previous posts in the single post view. These links don’t really provide a lot of value. Instead you should be displaying the two latest posts from the current category. So I made a small theme add-in you can dump into your theme for some better context. The add-in adds links to the two latest posts in the current category including the title, publishing date and short description. To install it download the related.php file here (right-click and choose “Save As” – it’s a straight up php file), add it to your theme directory and call it using the following code in your single.php file:
<?php get_template_part('related'); ?>
That’s all you have to do.