5 Steps to Create a Custom WordPress Theme

Tuesday, February 1st, 2011

5 Steps to Create a Custom WordPress Theme

WordPress is a very popular blog management system, and with good reason. It’s a well-documented and easy-to-use blog platform with thousands of plugins and themes, and best of all, it’s free. But if you want your blog to stand out from the other over 60 million WordPress sites, a custom theme can make a big difference.

For this tutorial, I’m going to assume you understand the basics of design, HTML, CSS, and PHP, so that I can provide an overview of the steps required in customizing a theme. Of course, we can also design and create custom WordPress themes for you.

1. Design

It’s important to have a good idea of how you want your theme to look before you start coding. If you’re new at it, you might want to rely heavily on an existing template and just change around graphics, colors, fonts, etc. Creating a mock-up of the page(s) in Photoshop is a common method for beginning the design and development process.

2. Gather the necessary files

You’ll need several files to create a theme. header.php, footer.php, style.css, index.php, etc. The easiest thing to do is to copy the default template from wp-content/themes/default to a new folder for your theme placed in wp-content/themes/. If you’re basing your design on a different template, it might be easier to copy that one and change it, though be sure to respect applicable copyrights.

3. Adjust the common files

The files header.php and footer.php are used in each page template. Sidebar.php is also included in most themes. They dictate the overall look of the site more than the other php files. They’re used as the markup for the page’s header, footer, and sidebar, respectively. Typically, the main navigation will be in the header, the credits and copyright notice will be in the footer, and the sidebar file just provides a placeholder for the items added to the sidebar in the administration panel.

4. Modify the CSS

This step will most likely be somewhat blended with the previous and next steps. Steps 3 and 5 are about modifying the structure of the site, but to make it look the way you want, you’ll need to mess with the CSS. From background images, to layout decisions, the CSS should decide everything about the look and feel of your site, while the PHP simply determines the content.

5. Adjust the specific files

Now that the overall theme is done, it’s time to modify the individual page-type templates. Each one should (and if you copied from the default template, does) contain a reference to the header and footer, and usually the sidebar. Index.php, single.php, and page.php are the ones generally required for a custom template. They are used as the default for everything without a different template (including usually the main page), the individual blog post view, and the view for a normal page, respectively. I recommend also having at least 404.php, archive.php, and if you want a search option, search.php. There are many other optional template files as well; visit The WordPress Codex for the complete list.

Hopefully this tutorial was able to get you started on a custom WordPress theme. For more detailed information, go straight to the source, the WordPress Codex. And if you think creating a theme on your own is a little much, or if you’d rather spend your time on other things, don’t worry, drop us a line and we can take care of the hard work.

About Matcha Design

Matcha Design is a full-service creative B2B agency with decades of experience executing its client’s visions. The award-winning company specializes in web design, logo design, branding, marketing campaign, print, UX/UI, video production, commercial photography, advertising, and more. Matcha Design upholds the highest personal standards for excellence and can see things from a unique perspective due to its multicultural background.  The company consistently delivers custom, high-quality, innovative solutions to its clients using technical savvy and endless creativity. For more information, visit MatchaDesign.com.

Related Tags

You Might Also Like