Tips and hacks for creating your own WordPress theme

WordPress is a great blogging engine. It’s easy to get it up and running and there’s a lot of free themes available. But if you want to be a bit more creative and design your own theme or even use WordPress as a CMS (content management system), this can be easily done. The recent redesign of my website has used WordPress as a CMS. I’ve noted several useful tips and hacks that I came across while designing my theme that may come in useful.

Before using the snippets below you might want to start with the basics of designing your own theme. Check out these useful websites for step by step guides on designing your own themes and templates.

• So you want to create WordPress themes huh?
• Official WordPress codex
• How to create a WordPress theme from scratch

Referencing images in your theme

Referencing images in your stylesheet (style.css) are relative.

background:url(images/myimage.gif)

Referencing images in your html templates are absolute so use the template directory tag.

<img src="<?php bloginfo('template_directory'); ?>/images/myimage.gif" alt="" />

Full size images

WordPress 2.6 resizes your images to 500px width, even when you tick the full width option, so there’s a hack to get around this. Go to /wp-includes/media.php on line 84 and comment that line (//)

// any other type: use the real image and constrain it
// list( $width, $height ) = image_constrain_size_for_editor( $meta['width'], $meta['height'], $size );

This way instead of <img class="..." src="..." alt="" width="..." height="..." /> you will get <img class="..." src="..." alt="" />
Thanks to parisoto for this hack.

Exclude specific categories

If you want to exclude or only include specific categories, e.g. you only want your portfolio page to include posts with the portfolio category, use query posts before your loop.

<?php query_posts('cat=-2'); ?>

This would remove the category with ID 2 from the list. You can get your category IDs by hovering or clicking on them in your admin area. I noticed this can cause a pagination problem though, so if you’re paginating use the code below.

<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts($query_string . "&cat=-2&paged=$paged");
?>

Unique category templates

Just name your template file category-ID.php and this will be a specific template for that category e.g. category-2.php

Unique category single page

In your single.php template do a check to see which category your post is in, then redirect it to another template for that category.

<?php
	if ( in_category('2') ) {
  include(TEMPLATEPATH . '/single-2.php');
	}else{
	include(TEMPLATEPATH . '/single-all.php');
	}
?>

Nice page titles

Put the name of the current page followed by a hyphen.

<?php wp_title(' - ',true,'right');?>Freelance Web Design

This would return something like “Portfolio – Freelance Web Design”

Fancy tags

Set up your tags list.

<?php the_tags('<ul class="tags clearfix"><li>', '</li><li>', '</li></ul>'); ?>

This produces similar to the following HTML.

<ul class="tags">
	<li><a rel="tag" href="http://www.leemunroe.com/tags/cms/">CMS</a></li>
</ul>

Then apply some CSS to style them as you like.

ul.tags{
list-style: none;
margin:0;
}

ul.tags li{
display: inline;
}

ul.tags li{
display:block;
float:left;
padding-left:12px;
background:url(images/tag.gif) left no-repeat;
margin:0 5px 5px 0;
}

ul.tags li a{
display:block;
float:left;
height:22px;
padding:3px 12px 0 0;
background:url(images/tag.gif) right no-repeat;
}

Customise read more

Customise the “Read more” link that separates your post. In your index.php where it says:

<?php the_content(); ?>

Put the text that you want your link to say between the brackets.

<?php the_content('Read this article'); ?>

The more link has a class of ‘more-link’ so apply some CSS to style it.

.more-link{
padding:10px;
background:#3c3028;
font-weight: bold;
float: right;
}

Highlight author’s comments

Add an .authcomment style.

.authcomment{
background:#fff;
}

comments.php has a line like this:

<li class=”<?php echo $oddcomment; ?>” id=”comment…

Change it to this:

<li class=”<?php
/* Only use the authcomment class from style.css if the user_id is 1 (admin) */
if (1 == $comment->user_id)
$oddcomment = “authcomment”;
echo $oddcomment;
?>” id=”comment…

Thanks to Matt Cutts for this hack.

Archive dropdown box

After a year or more of blogging your archive list can get pretty long so shorten it down with a dropdown box.

<select name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'>
<option value=""><?php echo attribute_escape(__('Select Month')); ?></option>
<?php wp_get_archives('type=monthly&format=option&show_post_count=0'); ?> </select>

Further reading

Hopefully there’s a few useful tips in there that will save you having to figure them out for yourself. I recommend checking out the links below for further WordPress theme tips.

• WordPress theme hacks
• 10 checks to the perfect WordPress theme
• WordPress as a CMS
• The WordPress help sheet

Tweet

Related articles