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

Pinterest

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Plain 1.0</title> <link href="css/1.css" rel="stylesheet" type="text/css" /> </head> <body> <a name="top" id="top"></a> <center> <div id="menu"> <a href="#top">home</a> <a href="#intro">introduction</a> <a href="#css">css &amp; xhtml</a> <a href="#about">about the author</a> </div> <div id="header"> <h1>plain v1.0</h1> <h2>A simple CSS &amp; XHTML web template focusing on whitespace and its importance </h2> </div> <div id="content"> <img src="images/logo.jpg" alt="Your Logo" class="logo" /> <p class="introduction"> 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. </p> <div id="sidebar"> <h1>Sub Menu</h1> <div class="submenu"> <a href="#top">Home</a> </div> <h1>Other </h1> <div class="submenu"> <a href="http://xij.p0wned.org/">Stepping Stone</a> </div> <div id="mainbar"> <h1><a name="intro" id="intro"></a>Introduction</h1> <img src="images/backgrounds/menu.jpg" alt="AN EXAMPLE IMAGE" title="AN EXAMPLE IMAGE" class="articleimg" /> <p>Hello and welcome to Plain 1.0. As mentioned earlier this is a fairly simple template, powered entirely by css and xhtml. I am also trying to make as much use of whitespace as possible. Whitespace helps keep the page looking clean and easy on the eye, whilst improving readability also. As with all my templates, a limited number of images have been used, and when they have, they've been to aid the design. This results in an easily customisable template that can be used to an array of different sites. </p> </div> </div> <div id="footer"> This is the footer. Put all your copyright info here.<br /> Page designed by <a href="http://www.sixshootermedia.com">6ix Shooter Media</a> </div> </center> </body> </html>

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
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Plain 1.0</title> <link href="css/1.css" rel="stylesheet" type="text/css" /> </head> <body> <a name="top" id="top"></a> <center> <div id="menu"> <a href="#top">home</a> <a href="#intro">introduction</a> <a href="#css">css &amp; xhtml</a> <a href="#about">about the author</a> </div> <div id="header"> <h1>plain v1.0</h1> <h2>A simple CSS &amp; XHTML web template focusing on whitespace and its importance </h2> </div> <div id="content">

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:
<link href="css/1.css" rel="stylesheet" type="text/css" />
into:
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />

I then changed the title tags to this:
<title><?php wp_title(''); ?> <?php if ( !(is_404()) && (is_single()) or (is_page()) or (is_archive()) ) { ?> at <?php } ?> <?php bloginfo('name'); ?></title>

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.
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="I entered my Feedburner address here so that readers are sent to it and I can monitor feed traffic" /> <link rel="alternate" type="text/xml" title="RSS .92" href="same here" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="same here" /> <link rel="shortcut icon" href="http://max.limpag.com/favicon.ico">

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 :
<?php wp_get_archives('type=monthly&format=link'); ?> <?php wp_head(); ?>

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:
<div id="header"> <h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1> <h2><?php bloginfo('description'); ?></h2> </div>

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:
<div id="sidebar"> <h1>Sub Menu</h1> <div class="submenu"> <a href="#top">Home</a> </div> </div>

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)

Pinterest
Loading Facebook Comments ...

57 Comments

  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. After iBlog2…

    Congratulations to all of those who spoke at the 2nd Philippine Blogging Summit! It was great to see Dean Alfar and Jonas Diego again! It was a great honor as well to be with Abe Olandres, J Angelo Racoma and Marc Hil Macalua at the Professional Blog…

  5. 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

  6. 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

  7. Max
    Thanks I look forward to your themes package.
    Jeff

  8. 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

  9. I tried it, but it doesn’t work, what should I change? :(

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

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

  12. […] design a WordPress Theme from scratch — step 3 = pull hair out […]

  13. 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!

  14. […] How to create a WordPress theme: A guide for the design-challenged non-geek (tags: wordpress) […]

  15. 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.

  16. […] How to create a WordPress theme: A guide for the design-challenged non-geek This tutorial gives an introduction on designing a minimalistic theme, based on the design of Plain 1.0 by James Koster. […]

  17. […] How to create a WordPress theme: A guide for the design-challenged non-geek […]

  18. […] How to create a WordPress theme: A guide for the design-challenged non-geek […]

  19. […] I converted it for WordPress using a technique explained by Max Limpag on his blog The Cybercafe Experiments. Max has a great posts called: “How to create a WordPress theme: A guide for the […]

  20. […] How to create a WordPress theme: A guide for the design-challenged non-geek […]

  21. […] להתחיל ג? מעיצוב ?רגז החול הבסיסי. שווה ג? להציץ במדריך לעיצוב תבניות למ?ותגרי העיצוב ולהבין ב?ופן כללי ?ת כל נוש? עיצוב התבניות […]

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

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

    Regards

  24. 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.

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

  26. 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!

  27. Hi, was this ever released or completed…

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

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

  29. 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. :-)

  30. […] Theme Development by max « FFFFound – Bilder bookmarken & sharen   […]

  31. 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. :)

  32. […] How to Create a WordPress Theme: A Guide for the Design Challenged Non-Geek from limpag.com […]

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

  34. 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).

  35. […] How to Create a WordPress Theme: A Guide for the Design Challenged Non-Geek PHP, programmazione, temi wordpress, webdesign, wordpress, wordpress themes Vota!  Loading … Condividi […]

  36. […] to create a WordPress theme: one written by Max, and another by WP […]

  37. 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. :)

  38. […] How to Create a WordPress Theme: A Guide for the Design Challenged Non-Geek from limpag.com […]

  39. 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!

  40. […] A guide for the design-challenged non-geek […]

  41. 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!

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

  43. […] How to create a WordPress theme: A guide for the design-challenged non-geek | Leon Kilat ::: The Cyb… WordPress theming is still one of those things that I keep on almost taking off the back burner. This is a pretty good overview, albeit a bit dated. (tags: css wordpress howto) […]

  44. 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.

  45. […] max.limpag.com, How to Create a WordPress Theme, a Guide for the Design-Challanged non-geek, by: no author mentioned, April 9, […]

  46. […] max.limpag.com, How to Create a WordPress Theme, a Guide for the Design-Challanged non-geek, by: no author mentioned, April 9, […]

  47. […] How to create a WordPress theme: A guide for the design-challenged non-geek […]

  48. […] How to create a WordPress theme: A guide for the design-challenged non-geek This tutorial gives an introduction on designing a minimalistic theme, based on the design of Plain 1.0 by James Koster. […]

  49. Sounds simple, I’ll try it

  50. 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.

  51. […] WordPress Codex: Theme Development; Tutorial: How to create Your Own WordPress Theme; How to Create WordPress Themes from Scratch; How to create a WordPress Template or Theme; NetTuts: How to Create a WordPress Theme from Scratch; How to create a WordPress Theme: a guide for the design-challenged non-geek […]

  52. […] WordPress Codex: Theme Development; Tutorial: How to create Your Own WordPress Theme; How to Create WordPress Themes from Scratch; How to create a WordPress Template or Theme; NetTuts: How to Create a WordPress Theme from Scratch; How to create a WordPress Theme: a guide for the design-challenged non-geek […]

  53. 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.

  54. […] How to create a WordPress theme: A guide for the design-challenged non-geek […]

  55. […] 46. How to create a WordPress theme: A guide for the design-challenged non-geek […]

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

No Trackbacks.