Those of you who are serious about your CMS based website may have considered developing a custom WordPress theme for your CMS. Throughout this tutorial I will design and implement a theme for WordPress using just Photoshop and a text editor – to follow this tutorial I recommend you have as least beginner design experience and intermediate HTML / CSS knowledge. While the theme creation process varies between Content Management Systems, this tutorial should relate easily to other Content Management Systems.
Creating a Design Structure
Before getting started on a design, you should list which elements you will include in your design – I will base my design on the structure of the WordPress Default Theme. After looking at the structure of that theme I can see that my design must include: a title, a header image, a content column, a sidebar and a footer. In the thumbnail on the left I have outlined these elements, you may notice that I also outlined the Pages area because I have decided to create a navigation bar instead of the list.
Now that you know which elements to include you can start roughing out your initial ideas, proportions and positioning. Displayed to the left is my rough structure – it is very simple and is just there to act as placeholders for the design we’ll create soon.
You can see how this initial sketching relates to the final design by looking at the Theme Demo.
Choose a Color Scheme
The color scheme of your website or theme directly reflects on its quality so make sure to select a good one. If you’re not confident in selecting your own colors, you may find the following resource useful; Color Hunt.
When selecting your colors remember to choose a contrasting color for the text as it is important for the text to be easily readable. The colors I selected are displayed to the left (the blank square is actually the color white).
Designing the Theme
As creating the design in Photoshop is quite a long section I’ve split it into a separate tutorial – Designing a WordPress Theme.
Displayed to the left is my final design. When designing your theme there is only two restrictions; you should include the same elements as the default theme and you should only design what you are able to code.
Either follow the tutorial I mentioned above or create your own design before the next section (Coding the Theme).
Coding the Theme
Since we’re basing our theme on the default WordPress theme we will start by copying the /wp-content/themes/default/ folder then rename it to the name of your new theme. I will rename mine to ‘1andOnly’ so my new folder is /wp-content/themes/1andOnly/ and it includes the same files as the default theme.
I can’t go into much detail about coding your specific layout as the code will vary greatly between designs. Although luckily, coding your theme is quite simple if you have a good knowledge of HTML and CSS – the only files you need to edit are style.css, header.php, sidebar.php, footer.php, screenshot.png and /images/. The file names I listed are quite self explanatory – e.g. editing header.php will change the structure of the header and title. The most important file to edit is style.css, almost everything is changed from within this file including: heights and widths, font styles and backgrounds. While coding your theme, I highly recommend you edit the existing styles rather than create new ones as the 20 other theme files make references to these styles so if you change a class name you have to change all of the references to it as well.
Once you have finished coding your theme, check it for consistency in all major browsers such as IE 5.5, IE 6, IE 7, Firefox 1.5 and Firefox 2.0. If the theme displays correctly in all browsers, take a screenshot of it and resize the screenshot to 300*225 then save that file as /wp-content/themes/ThemeName/screenshot.png. Now your theme should be ready to use, if your theme is at /wp-content/themes/ThemeName/ just visit the Presentation -> Themes section of the admin panel and your theme should be listed there.
One thing that you may not have expected is that the theme’s Title, Description and Author are edited within style.css file. There’s a comment at the top of the file where you edit this information.
If you plan on releasing the theme to the public, you might like to add a link to your website in the footer, this can be a decent source of traffic for your website and will also have SEO benefits.
Distributing your Theme
If you do decide to release your theme to the public you will want to display it in the popular theme listings, my favorite is Theme Viewer. Another useful method of distribution is in blog posts; you may have seen posts titled like ’50 Nice WordPress Themes’, if a blogger likes your theme they might add your theme to their list and if they don’t include it you can still leave a comment linking to your theme.