Editing WordPress Templates
October 10, 2008 – 2:01 pm
Almost everything you need to know about WordPress is documented at http://codex.wordpress.org – but it’s not well organised and it can be practically impossible to find what you need, unless you stumble across it by chance – even if you know what you’re looking for!
Of course, if you’re just starting out trying to work out how to create your own web design using wordpress, you won’t know what what you need to read, so you’ve got no hope of finding anything useful! Here’s a bit of a rundown on the basics of how wordpress design works – to get you started. This article is based on a few emails i wrote to help someone out – so it may be a bit more rough and ready than it would have been if i’d originally written it in one piece as a blog post.
The best way to start is to copy one of the included themes (“default” and “classic”) – in the wordpress/wp-content/themes directory – and modify it. You could download a theme that’s close to what you want, and modify that – but some of the downloadable themes aren’t particularly well written and you’ll start off on a sounder base if you begin with one of the included ones.
The way the themes work is the page is split between several files – usually header, body, and footer. In the default theme, for example, there’s header.php, index.php, and footer.php. When you go to the home page, index.php is loaded. index.php then loads header.php to show the top part of the page, does whatever it’s going to do to show the body part of the page, and then loads footer.php for the bottom of the page.
In index.php it loads sidebar.php in the relevant place to put a single sidebar on the left hand side (as far as i remember). I haven’t looked, but you’ll probably find that sidebar.php doesn’t really do much, as the sidebar contents are setup from the Design–>Widgets page. But sidebar.php should just call that. It will probably have some default entries, which will disappear once you add a widget.
There’s no need for a theme to have multiple files – apart from convenience and flexibility. You could create a theme with just index.php and style.css . However, most wordpress themes also include other files – for instance a template for single posts. Have a look at a few themes and try and work out how they work.
You must have the style.css file. And you must edit the comment section at the top, to change the theme’s name – if you don’t it won’t show up in the theme editor as a separate theme, as it uses the theme name in the top comment. Almost all the CSS stuff for wordpress goes in style.css – although there are a few plugins that have their own style sheets.
There are a lot of template tags available – which you can find information on at http://codex.wordpress.org/Stepping_Into_Template_Tags
Those template tags do database related stuff mainly. If you look at index.php, you should be able to work out the relationship between the tags and the data you can see on the page when it’s displayed in the browser.
You could, for example, move the sidebar from right to left by moving the sidebar tag from index.php into header.php and putting it into a div that’s floated in the right way to create a sidebar. Then widgets you select in the widget setup page will appear in that sidebar. Useful widgets are a list of pages and the text one (which you can put a bit of html in, etc. You could add a second sidebar if you wanted – but i’m not going to go into how to do that here, you can download a theme with two sidebars and find out how to do it yourself!
If you want to use wordpress for a static site, rather than a blog, you need to set it to display a static page as the homepage on the “Reading” page of the “Settings” tab.
You create the pages by writing them in the editor using “write new page”. There’s a distinction between “pages” and “posts” – pages are static, posts are blog posts, for example, that are added to regularly. If you don’t want a blog on the site, don’t try and use posts at all.
You can edit the theme files in the theme editor, but it’s much better to edit them using a web page editor, such as Bluefish.
The menu of pages can be set up to display pages in any order – but you set that up on the page itself, in the page order tab near the bottom of the page editor page. Low numbers first high numbers last.
With the home page, i tend to not put a title on it, because you don’t usually want a title on the home page. But you can give it a title first and let it create a permalink name for that page and then delete the title. Turn permalinks on (in Settings somewhere), as it’s better for search engine optimisation. I always set the permalink format to /%year%%monthnum%%day%-%postname%
because that’s the way i like the post names to appear (in blog pages). But it’s good to have proper URLs for pages, rather than index.php?p=1
or whatever it uses. So turn on permalinks anyway.
You’ll want to install a few plugins:
* Statpress – which gives useful statistics about visitors.
* Google XML sitemaps – which produces and nice sitemap which google likes. It also notifies google when pages change.
* WP Security Scan – to make the security of your site is as good as possible.
* Secure-Contact – for a contact form.
* reCAPTCHA – if you’re going to have a blog and want people to be able to comment but don’t want to get spam.
* AskApache Password Protect – to increase security for admin stuff.
* NextGEN Gallery is better than the built in gallery for photos.
* Lightbox – looks like a good photo plugin, but i haven’t got round to trying it yet.
* All in One SEO Pack – helps with search engine optimisation (a little bit).
(You can find all of these in the plugins section of the wordpress site.
I’d recommend installing the “Web developer” plugin for Firefox – or, at least the “Aardvark” plugin. They both have their uses, and i used to use only aardvark, but now i use the web developer toolbar almost exclusively, as it shows things that firefox doesn’t.
In particular, the function of the web developer toolbar that you want to use is Outline–>Outline Current Element. When you turn that on, it gives you instant information about the css structure of the page, by just moving the mouse pointer over the page. It shows the boxes where the divs etc are and, in the toolbar itself, it shows the elements and their classes and IDs. It’s very useful for working out how a page that someone else has put together is structured. It’s also extremely useful to find out how a page you put together yourself is structured – for various reasons, but partly because it’s a lot easier than hunting through the html or php code!
With most plugins, you just unzip them in the plugins directory and that’s it. But some of them are packaged with the intention that you can unzip them on your local machine and then upload a directory (inside the top level package directory) to the server. Usually there’ll be a readme file and a directory inside the zip file. You need to move that internal directory up into the plugins directory and then delete the original enclosing directory.
You should make sure you update wordpress every time there’s a new version, to make sure your site is as secure as possible. This is a bit of a hassle, but it can be made easier. On the wordpress site, there’s a step by step guide, but it’s not very clear.
What i normally do is to extract the files from the latest version, rename the new wordpress directory to, for example, “wp-2.6.2” and put it in the same directory as the site wordpress directory. Then copy the relevant parts of wp-content from the old version to the new version. Copy .htaccess files from the old wordpress directory and the wp-admin directory (if they’re there, which they should be). Copy wp-config.php from the old wordpress directory.
Then i disable all plugins (if i remember), rename the old wordpress directory to, for example, “wp-2.6.1”, rename the new one to “wordpress”, re-enable the plugins, and check if the site’s working.
If there’s a problem, i can easily swap directories again while i work it out. This approach requires minimal downtime – and it leaves me with the old wordpress installation intact as a backup.
However, i’ve recently discovered that if you download the tar.gz package of the new wordpress version, you can just untar it in place and it works. Obviously it’s a good idea to back up the old installation first. The downside of doing it this way is that if any files have been removed between versions, the old ones won’t be overwritten and will still be floating around. This probably isn’t a big deal in the short term, but it’s a good idea to do an update the other way every now and then – maybe each time there’s a new major version.
An important thing to remember for security, when you’re installing wordpress for the first time, is to immediately set up an account in your name with administrator privileges (in the “Users” tab), log out as admin, log in as you, and delete the admin user.
Small, perhaps obvious point but perhaps it’s worth noting – you can’t select a static page as the front page unless you’ve already created a page first.
Yeah, it is worth mentioning. Thanks.
The section about updating WordPress is obsolete as of version 2.7 – now it’s just a simple matter of clicking on a link in the Dashboard!