Creating your own WordPress template is not as complicated as you may think. A lot of people suggest to use the default template and modify that. Personally I disagree. If you’re capable of writing your own HTML markup and CSS then all you need to know are the template tags and the wordpress loop. The only theme file I would recommend copying is the comments.php file, and I’d recommend using the Classic theme’s file, not the default one.
You can create the design however you want. Work out how you want the main elements of your blog to be (posts, category list, pages, archives list if you want it, comments etc). Take your design and, ignoring any theme for the time being, code your design up into HTML and CSS. The only thing to bear in mind with your markup is the following:
You can split your new page up into at least 3 maybe 4 sections. You have your header, containing the generic top content shown on every page, footer, the generic bottom content on every page, your sidebar, if it doesn’t/cannot fit into the header or footer, and the main index page that contains everything which doesn’t fit into these files. Each of these files must be called header.php, footer.php and sidebar.php and index.php.
In your index.php file you need to insert the following tags inside PHP tags:
This will then set up the index file to pull in the header, sidebar and footer in the relevant places.
Around your post we need to add the loop code. Right before the post starts (eg. the opening div tag that surrounds the post), insert the code
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
Then after your post markup close the loop using
<?php endwhile; endif; ?>
You will then want to add the following tags to help construct the dynamic post:
There are also plenty of other tags you may want to use. A couple of more popular ones are
If your design is quite simple and your single post page is virtually identical to the front page then you may want to just have the index.php theme file power both pages. If so then you’ll also need to add the following tag just before the closing loop code that you added earlier:
<?php comments_template(); ?>
This will then pull in the comments.php file, which as mentioned earlier, I recommend you just copy the comment.php theme file from the Classic theme, and we can look at modifying that later.
To define your theme and make WordPress recognise it, you need to add the following to the top of your CSS file (which you need to call style.css).
Theme Name: Put Your Theme Name Here
Theme URI: Put Your Site Address Here
Description: Give it a short description
Author: Your Name Here
This information is read by WordPress and when you’ve uploaded your new theme (into its own directory under wp-content/themes/) and go to Admin – Design, you’ll see your theme as an option to be selected. If you want a thumbnail displaying too then create a screenshot of the theme and add it into your theme directory with the filename of screenshot.png or screenshot.jpg. This will also be automatically displayed by WordPress.
Next week I’ll write about how to edit your header, footer and sidebar files, ready to then set your theme live.