How to Modify WordPress Themes - Overview of Parts

Written by: newyorkwebdesign • Edited by: Michele McDonough
Updated May 19, 2010 • Related Guides: Wordpress | Wordpress Theme | CSS

Blogging needn't be visually boring. Beneath WordPress's deceptively simple layout lies the ability to create a sophisticated blog design. WordPress basic theme structure is built to be powerful. I'll walk you through the basic theme modifications needed to make your blog rock!

WordPress Theme Structure

There are two basic parts of every WordPress page which includes the XHTML page and the CSS (Cascading Style Sheet). At minimum, there are three basic building blocks of the WordPress XHTML theme page; HEADER, CONTENT, and FOOTER. Topmost is the HEADER which contains the beginning of your XHTML page coding; the <DOCTYPE> declaration, <TITLE>, <HEAD>, <BODY> and the first bit of coding which comprises the top of your new WordPress blog. These page parts are visible to the world though in the backend lies the WordPress template system that is extremely simple, bringing the building blocks together to assemble the complete page.

Templates, Tags and Queries

WordPress templates are like containers which when assembled build a completed page. Each WordPress template contains PHP syntax which can accomplish a number of important functions. The XHTML coding is interwoven within the PHP templates which uses WordPress' powerful core functions to display a dynamic blog, chock full of useful information for your readers. These functions are implemented via "tags" which retrieve various information including data from the WordPress server's MySQL database. There are many different tags (or shortcuts) which can be used to display anything as simple as the current time or a complex condition based data. In addition to the myriad of template tags, custom select queries can used to pull specific data recordsets and custom fields from your posts. With the risk of getting into the many intricacies of variables, conditional statements, and functions, I'll keep it simple.

CSS for Stylish Blogs

Cascading Style Sheet design plays an important role for how your WordPress blog looks. While the templates control the overall content and functional aspects of your blog, the CSS gives you full control over the aesthetics of your website's User Interface. Both the frontend and admin areas are CSS dependent, so you can even change the way the administrative sections appear. Using style sheets you can make the default theme look entirely different, changing virtually every aspect of its appearance. So, if the templates are like containers, then the CSS is the packaging with the fancy wrapping and bow. There are a number of excellent "real time" CSS editors available to help familiarize you with proper CSS coding. Check out Stylizer and CSSfly livedit to start with. You'll be a style sheet designer in no time!

Backup Before In Case You Break

Backup the original file/s before your start editing: Before you change any template file, remember to either backup the entire theme folder that you have decided to edit, or create individual backups of the files you've edited. For instance if you decide to edit the index.php file, then rename the original file as index.php~ [index.orig, indexBK.php] or anything you wish. This way, if you break the coding in the new index.php file you can always restore the original file. There is no reason not to make backups and you'll be very thankful you did when the inevitable "error" appears.

Keep Good Records

Comment your changes: When you start hacking one of WordPress' default themes (WordPress Classic or WordPress Default), remember to always comment the changes you've made. Commenting (or recording notes) of changes are important in troubleshooting; So that when you return to that template or style sheet you'll know what you're mucked with and then you can revert back to the original if necessary.