Have you ever wanted a website design that was yours? Are you sick of going to blogs and seeing the same design over and over again. Know some HTML? Run WordPress? Then maybe designing your own WordPress template is for you.
It’s not as hard as you may think. Yes, WordPress’ template system is a little complex, but that’s due to the fact that it’s so powerful. Over the next week or two I will show you how you can design your very own template, and give you my personal tips along the way. The articles will be written with an assumption that you know HTML/XHTML/CSS; you just don’t know where to put it. Are you ready? Then let’s get started.
Tonight’s article will be on how to get setup. We’re going to be dealing with three main files (style.css, header.php, and footer.php). Before we start dealing with those, we should create a brand new, empty folder to save our template files in. It doesn’t matter what you call it, but choosing a relevant name to your theme will help down the road. Got that setup? Then let’s continue.
Creating style.css
The first file you’re going to want to create is style.css. In WordPress, style.css holds more than just the style information. It tells WordPress what your theme is all about. Without style.css WordPress will not acknowledge that your theme even exists, regardless of how well it’s coded.
To create style.css all you have to do is open up your favorite text editor, create a new document, and save it as style.css. Now before you close it you’re going to want to add some important information that WordPress will use. The information will be enclosed in a comment, so it does not interfere with your regular CSS. The following information is pretty self explanatory, so just fill in what applies. Add this information, including the /* and */, to the top of your style.css:
/*
Theme Name: Clean and Mean
Theme URI: http://cavemonkey50.com/
Description: The all new cavemonkey50.com v3
Version: 1.0
Author: Ronald Heft, Jr.
Author URI: http://cavemonkey50.com/
*/Creating the Header
Now that you have the basics of your theme setup, it’s time to start coding some basic parts of it. Create a new file and name it header.php. The header file will contain information that will appear on every page. You’ll want all of your <head> information in this file, and most likely you will also want your header image and menu bar. The following information will all go in between your <head> tags.
The first tag that you encounter in which you’ll want to use a WordPress tag would be the title. I recommend adding it to your template like this:
<title>
<?php bloginfo('name'); ?><?php wp_title(' » ',display); ?>
<?php if(is_search()) { ?> » Search Results for <?php echo wp_specialchars($s); ?><?php } ?>
</title>We’ll get more into what all that mean in a later article. Now that you have your title, you’re going to want some meta information and a link to your stylesheet. Most WordPress themes include the following meta tags. Just copy and paste these into your template; no editing required:
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<meta name="description" content="<?php bloginfo('description'); ?>" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_url'); ?>" />Now that you have your meta tags and stylesheet link setup, you should also add links to your RSS feeds. Now here’s where you have some options. You can include all three RSS feeds, or you can pick and choose your formats. If it was me, I would include all of them because it’s not going to hurt anything, but some people don’t like certain formats, and that’s understandable.
To add a link to your RSS 2.0 feed add this WordPress tag:
<link rel="alternate" type="application/rss xml" title="Subscribe to <?php bloginfo('name'); ?>" href="<?php bloginfo('rss2_url'); ?>" />To add a link to your RSS 0.92 feed add this WordPress tag:
<link rel="alternate" type="application/rss xml" title="Subscribe to <?php bloginfo('name'); ?>" href="<?php bloginfo('rss_url'); ?>" />Finally, to add a link to your Atom feed add this WordPress tag:
<link rel="alternate" type="application/rss xml" title="Subscribe to <?php bloginfo('name'); ?>" href=" <?php bloginfo('atom_url'); ?>" />Now that your RSS feeds are linked up, it’s time to add the final bits to the <head> tag. Finish off the head tag with these two WordPress tags. You’ll thank me later that you did.
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php wp_head(); ?>Additional Header Information
As I’ve mentioned before, it’s a common technique in WordPress templates to include your header image and any <div> tags that will wrap across your whole page. You should also include your menu bar in the header.php. The only WordPress tags that would apply here would be the tags needed to create a menu bar. Those tags would be:
<ul id="menu">
<li class="<?php if (((is_home()) && !(is_paged())) or (is_archive()) or (is_single()) or (is_paged()) or (is_search())) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>">Home</a></li>
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
</ul>I know the code can be a little confusing, but we’ll get into what those tags are doing in a later article. It should be noted that menu bars are outputted as lists, so be sure to style your CSS for your menu with that in mind. Also, the current active page will have the css class current_page_item, so you might want to keep that in mind also.
The Footer
Now that we have your header.php file done, it’s time to create your footer, which will appear at the bottom of every page. As we did before, create a new file named footer.php. The first thing that you’ll want to do in footer.php is close off any <div> tags that you opened in header.php. You might also want to add some addition information in the footer, but that’s HTML stuff, so I won’t get into it.
Now that that’s done you’ll want to add one last WordPress tag. Add this right before your </body>:
<?php wp_footer(); ?>Now proceed to close off the rest of your page with your normal HTML tags. Congratulations, you’re done for the day.
Conclusion
Now that we have the basics of our template setup, the next article will start to add the “guts” of your theme. We’re going to start with the sidebar and work from there. See you next time!
20 Comments
Thank you for this. I’ve been using Blogger (and may very well have customized my template as much as humanly possible) and I’ve been waiting for a clear set of instructions like this.
I don’t think the inclusion of the wp_list_pages in the header is a good idea for beginners. If someone wants a site with 100 Pages they will be screwed with this technique. (See the zillion questions in the forum about themes that do this…)
Otherwise it’s a great work!
moshu,
i have it in my header bc pages are different than blog posts. i have about 3 pages bc my posts go in posts.
Well, many people use WP in a different way: expecially for those that tend to go toward a CMS-like usage, the Pages feature is great for posting articles outside of the usual chronological order. Today there was a help request from a site having approx. 1,300 Pages, LOL
You can offer an optional file to be included as a horizontal menu – if they want it. Most themes don’t have that.
What I mean generally: it’s the best to offer general methods that would work for everybody in every theme, and leave the “extras” as optional add-ons.
When writing this article I didn’t specify how the menu bar was going to be used; I only gave the code that would apply. That code can then be used for a vertical or horizontal menu bar; it’s the designer’s choice. In my next article I will mention about putting that code in the sidebar if you didn’t want a horizontal menu bar.
Anyway, thanks for the great comments.
BUT: despite it being ‘so powerful’ as you put it,
wordpress is the single most overly complicated, chaotically organized, and user-fugly screwed up MESS of files and scripts I ever want to see.
Nice guide
, hope to see other parts very soon . Will surely help newbies to get their hands on basics of templating structure.
Maybe a pdf document or word document will be a great idea to implement this tutorial
in future. good luck and ya once again nice initiative.
Kaushal, when I’m done writing all of the articles, I do plan on combing them and distributing them. I just don’t know what format I’ll do it in.
Nice beginning!
Waiting for the remaining parts!
moshu,
for a CMS, a blog software is most likely inappropiate. i am experimenting with mambo for a cms website. this is for a non-profit organisation where they need an easy way for them to manage the content. i can help design the templates and such, then anyone with a browser and the passcode and do what they need. there are others such as phpnuke, but i think that is old and just plain ugly. mambo is free and has good reviews from what i read.
Jonathan, we fully agree about the difference between a blog script and a “real” CMS. What I’ve said is based on my many hours spent in the WP forum – where lately I was honoured with the moderator “title”
…
I don’t want to use WP for anything else than blogging, but people do strange things, believe me. And returning to the page_list in header: I assure you it is almost an everyday question when newbies start to use a theme that has a similar solution, and you answer it once, twice… a hundred times, and another one will come tomorrow and ask again.
Despite my ramblings the tutorial is fine!
Just to add fuel to the fire
WordPress can be a great blog-centric CMS – for small websites and if used properly. I run WordPress on my church’s website, and it works wonderfully. If the website would be larger, and had multiple pages, I would be looking at a real CMS.
I mentioned Mambo because I am in the process of redoing my synagogues website.
Currently the lady doing it now, did it in FrontPage, using their templates and having the %20 files littered though is horrible. The whole site is disgusting. I used to be on the committee, I made it entirely in Dreamweaver because at the time I was unimpressed with PHPNuke, and I am still unimpressed with it. I am giving Mambo a shot to see how it does.
Ron, looks like you used WordPress very well in this case. But for my needs, and our temple needs, a full blown CMS would be best.
Moshu,
I believe you, I seen people do amazing things where I would never think of ever doing such stuff. Not WordPress related, but things in general, even in real life., and btw, congrats on the mod honour, use it well
If you start talking about the sidebar then this plugin is the way to go;
http://flapjack.chips.jp/blog/pp/Sidebar-editor/
It takes away a lot of editing your sidebar and is very flexible.
Great start!
I’m about to head to Barnes and Noble and see about a manual on WordPress Template design. There is definitely something to css based web design that is above html, which is why I love WordPress – and it is so customizable and easy to use.
I will be reading these tutorials;
“The first thing that you’ll want to do in footer.php is close off any tags that you opened in header.php”
i don’t get it. when i make new footer.php it’s blank, how i need to close those div tags?
and it would be very kind of you if you add source code in one archive to understand what you created in this lesson.
Why is that Ron? It seems rel=”archives” is highly theoretical. I notice they’re missing from your source
I think I was more referring to the wp_head() tag, as without it most plugins will have issues.
But, you raise an interesting point. Archive links in the head section seem to offer relatively little benefit, as I have yet to see any browser or search engine take advantage of them.
Hey if you guys are interested in doing a template I have a contest going !
http://forums.digitalpoint.com/forumdisplay.php?f=94
19 Trackbacks/Pingbacks
[...] If you have been following this guide from the start, you should currently have three files completed (header.php, footer.php, style.css). If you don’t, you might want to go back and start from the beginning. [...]
[...] If you been following this guide from the start, you should now have four files of your theme completed (style.css, header.php, footer.php, and sidebar.php). If you don’t you should probably go back and start from the beginning. [...]
[...] cavemonkey50.com » Designing a WordPress Template: The Basics Nog een handige WP tutorial. (tags: wordpress design tutorial) [...]
[...] Designing a WordPress Template: The Basics » cavemonkey50.com Designing a WordPress Template: The Basics (tags: wordpress lazysheep) [...]
[...] Designing a WordPress Template: The Basics » cavemonkey50.com Designing a WordPress Template: The Basics (tags: wordpress lazysheep) [...]
[...] Designing a WordPress Template: The Basics � cavemonkey50.com [...]
[...] I’ve been looking at a couple links that will, I hope, help me to design my own template. [...]
[...] If you have been following this guide from the start, you should currently have three files completed (header.php, footer.php, style.css). If you don’t, you might want to go back and start from the beginning. [...]
[...] If you been following this guide from the start, you should now have four files of your theme completed (style.css, header.php, footer.php, and sidebar.php). If you don’t you should probably go back and start from the beginning. [...]
[...] Following the instructions from cavemonkey50, I’ve begun modifying the “WordPress Classic 1.5″ theme to fit in with my 4th July site redesign. Ok, so it’s not perfect or even finished yet, but I’ll be fine tuning it over the next two weeks to get all the kinks and crinkles ironed out. [...]
[...] Tutoriais sobre o WP são sempre bem-vindos! Temos Paul (enfoque no K2 – um tema cheio de features), Ronald, Monkey. [...]
[...] This looks useful. [...]
[...] Sat, Sep 16th, 2006 at 10:26 pm | Posted in Uncategorized If you have been following this guide from the start, you should currently have three files completed (header.php, footer.php, style.css). If you don’t, you might want to go back and start from the beginning. [...]
[...] Designing a wordpress template [...]
[...] Tutoriais sobre o WP são sempre bem-vindos! Temos Paul (enfoque no K2 – um tema cheio de features), Ronald,Monkey. [...]
[...] Designing a WordPress Template: The Basics [...]
[...] Designing a WordPress Template – CaveMonkey50.com [...]
[...] annoying. Had to figure out the individual php files before I finally understand the structure. Here’s a relatively good tutorial for the basics of [...]
[...] Tutoriais sobre o WP são sempre bem-vindos! Temos Paul (enfoque no K2 – um tema cheio de features), Ronald,Monkey. [...]