How To Create A Custom WordPress Theme
It can’t be denied that for a serious business web site, regardless of whether or not it is done with WordPress, a custom theme design will always be preferable to a stock template.
I posted similar information on the wordpress.org forum and people have asked me to elaborate. I am posting it here so that it can be edited later.
The first step is to have a basic understanding of web site design and a program with which to lay out your design. I prefer Photo Shop because it allows me to turn layers on and off to isolate graphics and to create variations on the theme that can easily be turned on or off. Once I have something that I want the client to see, I save it as a JPG file.
This is a beta site for a startup company. After trying several comps, the client chose this one:
My next step is to code the design as a static web page, using the same stylesheet that I plan to use for my theme. I usually start with the stylesheet from the WordPress Default theme and modify it as needed. If your design doesn’t work as a static page, it is probably not going to display correctly in WordPress either. You can see my static page here:
http://johnnasta.com/altr/template.html
Note that the menu, sidebar, and body text areas are just placeholders at this point, but I am able to verify that the basic structure and CSS are working. It helps to assign DIV IDs that are commonly used by WordPress, such as #page, #sidebar, #footer, #content, etc.
The next step is to try your design as a WordPress theme. Simply copy everything from the header.php file of the WordPress Default theme up to and including the <body <?php body_class(); ? >> tag and replace what is in your static HTML file. Also add the <?php wp_footer(); ?> tag just before the </body> tag at the end of the template, and save it as index.php in your theme folder.
Now upload your new theme and test it. The menu, text, and sidebars are still placeholders, but you can see if your basic CSS structure holds up in WordPress.
Assuming that worked, it’s time to start dividing your theme into sections. Generally, everything up to (but not including) the #content DIV is saved as header.php. You can copy index.php and sidebar.php files directly from the default theme and edit them as necessary. Note that if you have any tags between the sidebar & footer divs in your template, they will have to be added to index.php. For example, if you have your sidebar & content in a container div, your index.php may have to end with:
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
instead of:
<?php get_sidebar(); ?>
<?php get_footer(); ?>
You can also copy functions.php from the Default theme. The only part of it you really need to keep is the top where the sidebar is registered:
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
}
Save everything from the #footer div down from your original template as footer.php.
At this point you can upload your new index.php, sidebar.php, header.php, footer.php, and functions.php and view your site. You can avoid obliterating previous versions of your theme by uploading new versions into a different folder name (e.g. mytheme_v1-0, mytheme_v1-1, etc.) and changing the version number in the stylesheet each time. You can also copy other theme files from the Default theme, such as comments.php, comments-popup.php, search.php, archive.php, single.php, page.php and modify as needed, or you can write your own. It’s important to understand the WordPress template hierarchy if you are doing this.
Once you’ve got your basic theme working, you can decide whether you need any custom templates for individual pages, posts, categories, etc. If your home page is going to be a static page with a separate template, name that file front-page.php. If it is the only page using that template you won’t need to divide it up into header, sidebar, footer, etc.
Here are some themes that I have developed based on the WordPress Default theme:
AltResources
Artists-N-Order
Strega Salem
Significant Self
The Vincent Nasta Foundation
Shirley & The Mastics
This is just the beginning of theme development, and this information mainly applies to simple two-column themes. There is certainly more to the story. If I can clarify any of this information, please leave a comment. Thanks!
This article copyright © John Nasta 2011 – All Rights Reserved
You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.
