A Simple Guide to Building a Wordpress Theme

Downloading and tweaking one of the many themes of Wordpress is all fine and good. But what happens when you want to extend your blog/site past what someone else’s theme can give you? The truth is – this is a realm where most users are terrified to go. While I understand those fears, they aren’t totally warranted. Building a Wordpress theme can be quite easy, given the right process.

I’m freaking out man!

Building a Wordpress theme can be broken down into three steps; design, front-end development, and lastly the Wordpress implementation itself. I’m not quite sure how others do it, but the following guide is a detailed look into the process I have developed for building Wordpress themes.

Design

I’ve detailed my process for building this latest version of eleven3, in that post I discussed mostly design. Starting your own theme should work the same way. It’s important to ask questions such as:

• What problems are you trying to solve?
• Who is your theme for?
• What is your sites most important content?

The word, “theme” is used for Wordpress – but it doesn’t mean that your site needs to have a theme. However, having a “theme” may help one along their way to achieving their vision. A good place to get inspired is cssremix.com, who’ve been so kind in showcasing some of my own work. And for the quick and dirty answers: use Adobe Photoshop, use pixels for measuring (if this seems strange to you, just do it and thank me later), try to make sense of Khoi Vinh’s gridding lecture, think about what parts of your site can expand and contract nicely (if you’re a beginner, keep to expanding vertical), and for imagery check out istockphoto.com. Wow, learning web design can’t can be summed up in one sentence.

Front-End Development

I’m probably stating the obvious here, but jumping into Wordpress at this point would be akin to being stinky and dumb. (-; Make your site look how it is supposed to look without any real functionality. Get it working in all browsers and upon completion – then think of Wordpress.

But how?

There are a ton of “we have layouts” sites out there. And while tempting, it’s the same thing as using a Wordpress theme and tweaking it. The only way to get a good understanding of code is simply just to code yourself. Start fresh. Here is a base I use for many of my sites – free to build from.

Personally my first step in coding a site is to lay the design and fresh HTML (use Dreamweaver, Coda, or any other code editor of choice) document side by side and hand code the structure. I know it would help to know where to start and I can only offer this advice – study the source code of the “famous” web designers, they’re critically acclaimed for a reason, they do everything thoughtfully and well.

Mmmmmm CSS Zen

The next step would be to start styling content using CSS – if you’re at this point and you’ve never seen CSS code then I’m not going to lie to you; your road to CSS Zen will be long and hard. If you are still not overwhelmed, create a new CSS document in Dreamweaver (or your preferred coding app). A first step I eventually figured out on my own (and then a punk 17 year old showed me the asterisk – j/k QD) that would have saved me a ton of headache is the clearing technique (which is frowned upon in some countries). It goes something like this:

* { margin: 0; padding: 0; }

The reason to clear the padding and margin values is to avoid all the different “inherit” values of HTML elements. To be more concrete, an <h1> tag in internet explorer may have 8px of bottom padding, whereas it may have 10px in Firefox. Why do they have any values at all? I’m not sure, it could be because HTML came along before CSS. Just ask a couple of ‘timers about spacer gifs.

Coding CSS is a mix of looking at your comp in photoshop to find pixel values (told you so) and slicing up your comp to place images in your end product. Eventually you hope to have a functioning website that looks consistent across all browsers.

Wordpress Implementation

And now for the fun part implementing Wordpress. It should be safe to assume at this point you have your Wordpress installed on your server and you have a fully functional layout working in all the major browsers. Ready, ok go!

The conies and taters

Step One

Duplicate the default theme located in wp-content/themes/default/. Copy the default folder and rename it “your-theme-name.” Make sure your duplicate is located in the same directory “themes.”

Step Two

Start transferring your HTML, CSS, and images into the theme folder. Working within your theme folder, make the following changes (don’t worry, you can reference stuff if necessary from the original default folder):

• Delete all the files in the images folder and replace with your images
• Delete all of the functions in functions.php
• Delete all of the css (except for the commented out header) in style.css and then paste your own CSS in its place.
• Change the information at the top of style.css to reflect you and your new theme.

Step Three

Save a small screenshot of your comp/design (300pxX240px) and save it in your theme folder as screenshot.png – this will help you switch to the theme in your Wordpress presentation options. Here is my theme screen shot for this site.

Step Four

Begin to think of your coded HTML as seperate components – a header, a sidebar, a footer, and then content. And if you are just a little bit quick, you may have jumped ahead and seen files in the folder called just that – header.php, sidebar.php, footer.php – but what about content? Well content is the one thing that changes from page to page, while the others are static and don’t change. So really, content is index.php, archive.php, search.php, page.php, and single.php. These files have a little bit of explanation here.

Step Five

It’s a copy and paste job. Copy your header code that should be on every page and put it underneath all the code in header.php. Look at the code in header.php and see what makes sense for you to have in your own header code. Things like the php between the <title> tag and the call for the style sheet first come to mind. Do the same thing with your footer and sidebar.

Step Six

Read this article about “The Loop” and then open up index.php. You will see the code that loops through each entry pulling the values requested – the_time being the time, the_title being the title, and so on and so forth. Copy the HTML from your main page entry and paste it bellow <?php endwhile; ?>. Then copy the different php snippets from the old HTML loop that you need and when finished delete the old entry html from just below <?php while (have_posts()) : the_post(); ?> down to <?php endwhile; ?> and place your new HTML loop in there.

If there is any other structural stuff that belongs on this page that isn’t in the header, footer, or sidebar add it in the necessary places as well. Continue to flush out the other content pages using the same methods.

Step Seven

Upload your new Wordpress theme folder into the wp-content/themes/ directory and login into Wordpress. If you have done everything right – you should see your screenshot and name of your theme. Click it and then visit your website – you should see your theme on the site.

That’s it!

Conclusion

Building a Wordpress is simple if you already know how to design, code HTML and CSS, and FTP into sites. In this post I outlined my own process – not any sort of “official” Wordpress process. I’m sure there are folks out there would think of my copying and pasting of the folder and subsequent files as “cheating.” Honestly though, when I am working – I am shooting for efficiency and long-term maintainability. I know in building within the structure set forth by the good folks at Wordpress – I will be ok well into the future.

If you have questions about any of this – feel free to leave a comment and get a dialogue going, there is no such thing as a dumb question. This is meant to be a simple guide for those who are interested in Wordpress or Web Design in general.

This was filed under CMS(s), CSS, Education, How To, Web Design, XHTML and has received 23 Comments » - Read them or you could decide to skip this article entirely.