How to create a WordPress theme: A guide for the design-challenged non-geek

I love minimalist designs with great colors. No, that isn’t accurate, make that: I now love minimalist designs with great colors. I used to love putting everything but the kitchen sink in my blog template, hence my previous fascination with three-column themes-to get more screen space for buttons, listings, banners and what have you.

I’ve gone through a lot of WordPress themes, customizing one after another. I decided to simplify my blog design after buttons and stuff that depended on other services and servers delayed loading of my blog pages. I also thought that the clutter of having all these buttons and stuff was getting in the way of the content, and the AdSense clicks. My current minimalist design proves me right on this one.

When I set out to use a minimalist design, I had planned on choosing one of the hundreds of ready-to-deploy WordPress themes out there but at the back of my mind, I had this plan of eventually creating my own theme. I went through designs submitted to the Open Source Web Design site, hoping to spot a great one and then getting a link to the WordPress port of the template. I did spot a great-looking minimalist design, Plain 1.0 by James Koster, but I couldn’t find a WordPress port. I liked the design so much that I decided to attempt porting it to WordPress myself.

I found turning a CSS-based design into WordPress theme to be easy. I am not a geek and I do not have formal training on CSS, HTML or PHP. What I did was I read up on CSS in sites such as MaxDesign. I also went through the WordPress Codex, reading about template tags and files and while I was porting the theme, I went through the template files of themes like K2 and Phoenixrealm to look at how its coders did things.

Here are the steps I took in turning the Plain 1.0 design template into a WordPress theme.

Design

As I said earlier, I found a design to work on by browsing through open source web templates at OSWD. There are other sites that offer free designs out there. If you feel particularly adventurous, you may want to start from scratch, using as foundation CSS-based layouts offered in sites such as this collection of CSS layouts by Layout Gala.

Back to Plain 1.0, here’s a link to the download page for the template.

As you can see from the zip file, it uses an external CSS stylesheet. If the design you choose uses an external stylesheet, just rename the file into style.css. If it uses an internal stylesheet, just copy everything and save it into an external file. Place the following into the first part of your stylesheet.


/*
Theme Name: Name your design
Theme URI: your web address
Description: Include a short description here
Version: Your version number
Author:
*/

After saving the stylesheet, view the HTML file to study how the page is laid out. We’re going to cut the HTML up and reassemble it into template files. Here’s a trimmed version of the Plain 1.0 HTML file, I left only one blog article and one link in the sidebar but if you want to view the whole file, you can either download the zip file or go to its OSWD listing to view the source.






Plain 1.0



Hello and welcome to Plain version 1.0. This is a simple web site template maximising the use of css and xhtml. Whitespace is used in abundance to really push its importance in web design. Navigate the page via the menu at the top of the page, or the links underneath this paragraph.




After studying the HTML file of your chosen design, mark points in breaking the code up for placement in the various WordPress theme files. Here’s how I did it with Plain 1.0

Header
I took out this part of the code and saved it as header.php



Plain 1.0


I chose to cut it up to this point because I wanted to just hard-code the next part of the code, which calls the logo and the introduction text, into the main index file. This way, I can choose to display the logo and the introduction text only in the main blog index and not in the article pages. Yes, you can do it with conditional WordPress template tags, but I’m still having problems with this and I need to read up more on the topic.

The first thing to change is the call for the CSS file, so I changed:

into:

I then changed the title tags to this:

<?php wp_title(''); ?> <?php if ( !(is_404()) && (is_single()) or (is_page()) or (is_archive()) ) { ?> at <?php } ?> <?php bloginfo('name'); ?>

What this does is place the blog post title before your blog name. This format helps you in search engine rankings, SEO experts say.

After that, I added a link to the RSS and Atom feeds and my site’s favorites icon. I copied this part of the code from the K2 header.php file.

I also copied the function for Matt’s Asides but I haven’t gotten around to using it. I also added, again copied from K2, this :



For the menu div, I just replaced the links there with links to pages I wanted to appear in the menu item. You can make WordPress automatically place your pages in the menu but I wanted more control in the things that appear in the top bar. I don’t want all pages I created in WordPress to appear there.

For the header div part, the code that calls the blog title and tagline, I replaced it with:

You can choose to just enter your blog title here and link it to the home page but I wanted to share my theme with others who may be interested in using it that’s why I had to use the template tag for the code above.

Intro and logo

For the introduction and the site logo, I chose to just encode it in the main.php template since I wanted it displayed only in the blog’s main page.

Side bar
I copied this part of the template and saved it as sidebar.php:

I then replaced its content with the template tags for the recent posts and recent comments. I choose to keep this area of the blog lean. I took out buttons for blog rankings, Technorati and Site Meter and place these in the footer. This is because this file is called before the main content div and delays caused by the slow loading of the external blog services would delay the display of the blog posts.

(Next Part: the rest of the template files)

Support this blog and independent reporting on Cebu

31 responses

  1. i’m a minimalist fan too, but i prefer monotone colors instead of bright ones, plus, i’m creating my own minimalist theme right now. it aint that hard, i suppose but i’ve been reading a lot from wordpress.org, like you, i do not have a concrete background with PHP and CSS but creating a wordpress theme is possible. 😉

  2. sounds simple while reading… kaya ko kaya? hehehe

  3. Connie,
    Kaya mo yan, you’ve already customized a lot of themes. Start with a finished design first, there are a lot of great open source web templates out there that still haven’t been ported to WordPress. Try OSWD.org. I’m practicing with finished designs first but my goal is to eventually start one from scratch. 🙂

  4. Jeff Cole Avatar
    Jeff Cole

    Hi Max

    I was disappointed not to be able to find the ‘Next Part: the rest of the template files’ anywhere on your site. And did you ever post the files on your site?

    Regards

    Jeff

  5. Jeff,
    Will finish this if not this week then by next week. I\’m working on an even easier way to customize WordPress themes. I\’ll package the theme files up, I had wanted to customize it even further but work distracted me 🙂
    Max

  6. Jeff Cole Avatar
    Jeff Cole

    Max
    Thanks I look forward to your themes package.
    Jeff

  7. liked ur tutorial on dreamweaver editing.

    just a little suggestion- u could make the adsense ads stand out with black as the colorof the link and green for the URL. the present color, though blends in with the blog color is ‘invisible’. just try changing the color to black or blue and check if ur earnings improve…

    cheers

  8. I tried it, but it doesn’t work, what should I change? 🙁

  9. Kai,
    Which part didn’t work? Cand you add more details to what your problem is with the code? Maybe, I can help you.

  10. thanks max Avatar
    thanks max

    Thanks Max for this great tut,
    where is part 2 at buddy? i desperately needed it. thanks.

  11. Hello! I am going to try and use your instructions to make this http://www.madisoncody.com/index.html into a layout to use for my WordPress blog.

    Wish me luck!

  12. You really made my day. I have been digging through WordPress Codex to get a clue or two about theme development to get me started and couldn’t find a good starter’s guide. Your simple guide really did the trick.

  13. Ben Jacob Avatar
    Ben Jacob

    Thanks for the turtorial.
    This is very helpful to the nOObs like me….

  14. Awesome theme. Is there any way to only publish blurbs (summary) with links on the main page rather than entire articles?

    Regards

  15. After i read wordpress theme tutorial on official page, this comes to me like a fresh air, this is a well documented tutorial, i bookmark this tutorial. And some links on this page is realy helpfull for newbies (expacially for CSS starters.)
    Thanks again.

  16. I want to learn also how to make wordpress themes… Hope I can make it….

  17. Excellent article. It’s the best one I’ve found on the web on this topic. It’s clear and doesn’t assume I know a bunch of stuff I don’t know. Thanks!

  18. Hi, was this ever released or completed…

    thanks, it was helpful but I would love to see the rest of it…..

  19. Thanks for providing the information for a complete newbie like me. Do you help people to create theme for a fee?

  20. wordpress quickstart guy,
    I can help you turn a CSS/HTML design into a WordPress theme if you buy me one of the items on my Amazon wishlist. 🙂

  21. Hi Max, does your offer still stand? I need someone to turn a Photoshop composite into a WordPress theme. You can get Moleskines locally from avalon.ph. If you want, I can buy one for you. 🙂

  22. Nice post..very useful. I like minimalist WordPress design too. Thanks.

  23. Hi Rico,
    Thanks for the link to Avalon.ph. Their prices are cheap, no? I might buy a few there. Have you bought from Avalon?

    I can quickly convert a CSS/HTML template into a WordPress theme but your needs are more difficult because what you have is a Photoshop composite. I’d need to convert the graphic file into an HTML page and then convert it again into a WordPress theme. But we’ll see.

    Can you send me a flattened and resized image of your composite? I can look at it and see how complex the layout is so that I can give you a feedback whether I’d be up to the task, seeing as I’m launching a site soon (which might interest 🙂 because you’re a blogger).

  24. Yep, I’ve bought from avalon.ph. Free delivery (if I remember correctly), and it takes up to 3 days at the most. Basta, you can’t go wrong with the prices!

    I’ll email you something soon. 🙂

  25. Great to see this kind of tutorial.

    Me too I created my own WordPress theme as it wouldn’t be “acceptable” for a web designer to just use something already done, so I took the decision of creating my very own WP Theme based on the type of style I usually use on websites. Contrarily to yours, I did opt to create only 3 files (didn’t divide them through header/footer). I should have done that from the start, but the deadline was tight, so here we go… let’s divide the huge index.php file 🙂

    So “kids”, learn the lesson from me and start with divided files from scratch! You might need to have them divided later, like me.

    This is a good article for me to add to my tutorial section so I guess i’ll just add a link to you there!

    Good luck with your site!

  26. hmm, sounds simple. I have always wanted to make my own theme, but have limited knowledge about html and those css.

    I’ll try this out and let you know. Thanks!

  27. This tutorial looks great. I think I might try it out when I get home.

  28. I luv minimalism too, but many folk think it implies no eye candy. Wrong!
    It’s the art of saying more using less.
    Have you seen WordPress Remix theme? It’s a WYSIWYG template offering countless conbinations.

  29. Sounds simple, I’ll try it

  30. Hi,
    You did a great job writing down here a lot of good information.
    I’m not an expert in php and your advices really help.
    Now, I want to change my default wp theme (on my new blog) in just one way: I want every post from index and achieve pages to has (read more) by default. Let’s say, they will can read only the first paragraph, or first 50 characters or something like this… not entire post in index.
    I really don’t like when the people can read with just one click on my home page, all (10) latest posts.
    Can you help me with this?
    I really appreciate!
    Ken.

  31. I am still trying to find out how to port my own xhtml into a wordpress theme. I have been trying for weeks, and just cannot get it right. I am ultra cheap and don’t want to fork out a lot of money, but if someone wants some quick cash let me know. I would like to get this done soon and not put it off any longer.

Leave a Reply

Your email address will not be published. Required fields are marked *