The Blog

Creating Custom WordPress Themes: Part 1 – Identify Your Theme

Posted on 02/10/10 in blog, development about development, tutorial, wordpress

Have you ever wanted to create your own WordPress theme? If you know HTML, CSS and PHP, you’re already 80% of the way there. The rest deals with WordPress syntax, mainly the loop, and the little customizations that make your theme professional. I’m not going to show you how to code a theme – like I said before, that’s basic HTML, CSS and PHP knowledge. What I am going to show you, is how to set up a theme, with a custom admin interface, and how to deal with needing separate styles and templates.

Create Your Theme “Skeleton”

Every WordPress theme must have the core files included or WordPress won’t even recognize it and will break if activated. Instead of redoing these files every time, I suggest going a simpler and quicker route – create your own skeleton files. To do this, I simply copy and paste the “default” theme folder and rename it to whatever you want to call your theme, for example “my-theme”. The default theme includes a relatively simple design, which makes it quick and easy to delete all the theme CSS, images and identification. You can save this to your computer, or just redo the steps every time, since it takes less than 5 minutes to do.

Identify Your Theme

Of course, you can leave your theme in the default folder and build it from there. However, I don’t recommend this for a few reasons:

• Every time you do a major WordPress upgrade, it will override your files in the “default” theme folder.
• The preview, title of the theme and identification will all still say “Default”

So now that we have the skeleton of “my-theme” ready, before we code any design into the theme, we’ll need to identify it. This changes what it looks like in the admin section, under Appearance > themes. For example, one of my client’s themes looks like this in the backend: As you can see, it includes the client’s name AND it has a link back to my site. Looks very professional and if anyone decides they love that theme and want to know who did it – all they have to do is look at the source of the CSS file to do it. To do this, open up your style.css (should be blank now) and at the very top, type: /* Theme Name: My Super Cool Theme Theme URI: http://www.amberweinberg.com Version: 1.0 Description: This theme will rock your socks off! Author: Amber Weinberg Author URI: http://www.amberweinberg.com */ Of course, replace the information with yours. Check the backend and viola! How pretty?

Show a Nifty Preview

Of course, whether you’re building themes to sell on ThemeForest, or for just one client who will probably never change it, we still don’t want to confuse them. So let’s help ‘em out by showing a pretty little thumbnail next to your theme info ( see pic above). Simply resize your theme PSD or design to 300 x 225 and save it as screenshot.png to the same directory as your style.css, not in your image folder. Refresh your theme page under admin and it should update automatically. Pretty cool, huh?

Make sure all your templates are identified

Let’s make sure our templates stay nice and organized, and identified, so no one gets confused whose awesome theme this really is. On top of each template file (index.php, single.php, archives.php) add this: <?php /** * @package WordPress * @subpackage My_Cool_Theme * /?> While not critical, or even necessary, it’s still a nice custom touch.

Theme is a Go

At this point, you should now be ready to code your theme and implement it into WordPress. It basically works the same way as every other site, with header, footer and middle templates. Have a question about WordPress that’s not covered? Ask it and I’ll make Part 3 for reader questions!

All Parts to Creating Custom WordPress Themes

• Stay tuned for tomorrow for Part 2 : Custom Templates, where I’ll talk about what the templates are, what they do, and how to have different ones.
• Stay tuned on Friday for Part 3: Reader Questions on WordPress Themes. Go ahead and ask any WordPress theming questions and I’ll answer them!

About the author
Amber Weinberg specializes in clean and semantic XHTML, CSS and WordPress development. She has over 10 years of coding experience and is pretty cool to work with. Amber is available for freelance work, so why not hire her for your next project?

Tweet