I’ve spent the last 24hrs getting to grips with theming for WordPress. It seems that almost every tutorial I’ve been reading starts off by showing you how the famous ‘WordPress Loop’ works (which is fair enough), but they seem to tail off and don’t show you the exact example. I’m hoping to provide a little clarity by showing the bare minimum you need so that you can start theming. I’ve tried to be as anal as possible with regards to commenting so that you know what each command is being executed.
Ok, so the basic template files you are going to need are as follows;
- style.css – the stylesheet file
- index.php – homepage
- single.php – single post page
- archive.php – archive/category page
- searchform.php – searchform file
- search.php – search results/content file
- 404.php – error page
- comments.php – comments template
- footer.php – footer content file
- header.php – header file
- sidebar.php – sidebar file
- page.php – single page file
I created all of these files (all with no content) to start off with in a folder called MyTheme in the /wp-content/themes/ folder.
OK, so you have the basic files, now it might be an idea to put osme stuff in your blog so that your files actually generate some posts, pages, etc…
I came across an excellent wordpress xml file containing the following;
- 5 pages, with full content
- 10 posts, with content, including categories and excerpts
- 21 unique tags
- 11 unique categories
- 10 unique comments
- 7 default links
- 1 post (under category, ‘Bullet List’) contains a bullet list
- 1 post (under category, ‘Numbered List’) contains a numbered list
- various lengths of posts, contents, and titles
This file can be downloaded from designwoop.com , along with the instructions on how to import the file to your blog.
Right, so now you have some content in your blog you can start building up the structure using ‘the loop’ (and it will be a *very* basic structure). For the moment we will add the following to the style.css file.
/*
Theme Name:
Theme URI:
Description:
Version:
Author:
Author UIR:
*/
This information will be used on the ‘Manage Themes’ page on your admin page.
Shows how your theme should look on Manage Themes page
We won’t edit the css until we have some sort of structure sorted out. Activate your new theme, you won’t see anything yet as your index.php file doesn’t contain anything.
At the beginning of each php file for this theme, you should include the following (just because it’s good practice if nothing else?)
<?php
/**
*@package WordPress
*@subpackage MyTheme
*/
?>
I think, logically it would be best to work on header.php and footer.php and then work on index.php.
So, we’re going to work on header.php first. This file will include everything that comes before and including the <body> tag. So it should look something like this:
header.php
If this looks a little daunting don’t panic! Lets start with bloginfo('html_type') and bloginfo('charset'). You could think of these as shortcuts?
bloginfo('html_style')– gets the HTML version of the site.bloginfo('charset')– gets the charset parameter of the site.
Don’t worry if you don’t know what these are, it’s not that important, just as long as you make sure that they are there! This next bit should be a little easier to understand. <title>, this is what will be shown in the title bar at the top of your browser.
wp_title('«', true, 'right')– will get the title of the post/page you might be viewing.bloginfo('name')– gets the name of your blog.
Now let’s look at the <style> tag, this is where the css data goes…
bloginfo('stylesheet_url')– will insert the url to the style.css file.
You will notice that after the </head> tag there’s the <body> tag, this completes the *very* basic header. Save this, we’ll come back to it later….
OptimisticGecko 