How to Design WordPress Themes

The first thing you should consider when learning how to design WordPress themes is whether or not you know how to use cascading style sheets or CSS for short. CSS is the core glue that determines how any WordPress theme looks and without this basic knowledge, you’ll have a lot of difficulty. If you’re new to CSS, fear not, we can offer some solid advice.

The best way to design WordPress themes (spoken as someone with about 50 WP sites under my belt) is to actually use another template as your base. Search through the free templates directory at and find a template that is pretty close to your design style. Download it and install on your test site. While each template is unique, they usually have the same core structure. To test editing your first theme, try using the default TwentyTen template that installs with WP itself.

Almost all WordPress themes are built in the following manner — an index, page and single post template that inserts the header, sidebar and footer PHP files. Header files usually have some degree of customization to them, linking to the stylesheet, with custom layout elements for the logo or branding elements. Almost all of the sidebar WP3 themes are the same, while the footer php files also have a bit of customization to them. Changing these files can be fairly easy if you know basic HTML. Just make sure to save frequent backups so that you can backtrack one step in case you make a mistake. You can usually make some basic HTML and CSS structural changes to these files without too much effort.

The majority of your work is going to be in the CSS file. This is where you’ll set your colors, font sizes and general spacing. One easy way of finding out which particular style is responsible for a specific setting is to use the Firebug extension for Firefox. This will help you quickly figure out which elements is responsible for a particular design element in the theme you are trying to customize.

In the CSS file you can create settings for background images which is how you’re going to set up the design for almost all of the theme. Unless a design element is embedded within the page content itself, all of your design elements will be set in the CSS file. Slice your graphics in Photoshop, then set appropriate widths and heights to the DIV tags in your CSS file and you’re on your way!