Following on from the recent article on "PSD to HTML", this tutorial will look at taking a HTML/CSS template and turning it into a functioning WordPress theme. There is so much you can do when creating your own theme we couldn't nearly cover it all. So, we're going to look at how themes are structured, creation of the core files and splitting up that index.html file.
Overview - The Structure Of A Theme
The structure of a WordPress theme is fairly simple, I like to start with the CSS
file. It details everything about the theme for WordPress to use. You then have
index.php - it's simply the template file you're using with the PHP template
tags included. Included with that is header.php & footer.php,
files that are used across the whole site. Now most themes don't use just four files
and that's because WordPress allows you to use template files to layout different
content. There are the defined layout files, such as archives.php and
single.php. However you can also create your own, say, if you wanted
to make a page that had a totally different layout to the default.
Because this is such a large topic we're splitting it into a two part series - this part making a simple but functioning theme from a standard HTML & CSS template, and the second part will look at adding more of the advanced features.
I will be working on turning the great template "Typography Paramount" by Six Shooter Media into a simple WordPress theme.
Step 1 - style.css
The style sheet is the defining file of the theme for WordPress. There are a few
simple things you need to do. The first is renaming the main (if you have more that
one) file to style.css, next you need to add a bit of commenting to
the file.
/* Theme Name: Typography Paramount Theme URI: http://www.sixshootermedia.com/ Description: An image-less template focusing on Typography. Author: Sam Parkinson Author URI: http://xseria.com Version: 1.0 . General comments/License Statement if any. . */
The code above is all contained in a comment, so it won't affect the style definitions. Now I filled it out with a few details, these will be used by WordPress to display the details of the theme to admins. Make sure you add it to the top of the file with no white-spaces before it.
I've gone and renamed the style sheet file from the template, it was called 1.css.
I have also made a new folder called typography-paramount which will
be what I upload to the WordPress theme folder. Put the style sheet in this folder,
but not under another directory otherwise it cannot be seen by WordPress.
Step 2 - The Header and Footer
In this step, we're going to create the two files: header.php and footer.php.
Although they are optional both are used in most themes, they're not exactly hard
to use either.
header.php
Starting with the header, create a new file in the theme folder called header.php,
then open up index.html from the template and copy the following from
it. This will become the header and will be displayed on every page of the site,
bear that in mind when making other templates.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>-</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/1.css" type="text/css" media="screen,projection" /> </head> <body> <div id="wrapper"> <div id="header"> <p class="description"> An imageless template focusing on Typography. </p> <h1><a href="#">Typography Paramount</a></h1> <ul id="nav"> <li><a href="#">Link Here</a></li> <li><a href="#" class="active">Link Here</a></li> <li><a href="#">Link Here</a></li> <li><a href="#">Link Here</a></li> <li><a href="#">Link Here</a></li> </ul> </div>
We're now going to add the WordPress template tags to header.php, these
tell WordPress where to inject the various content into the theme. Also remember
to change that link to the stylesheet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes() ?>>
<head profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen,projection" />
<?php wp_head(); ?>
</head>
<body>
<div id="wrapper">
<div id="header">
<p class="description"><?php bloginfo('description'); ?></p>
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<ul id="nav">
<?php wp_list_pages('sort_column=menu_order&title_li='); ?>
</ul>
</div>
There's quite a lot that's been added but it's all fairly simple when you look through it. All the tags above are well documented in the WordPress Codex. I'm just going to go through what each of the functions do.
language_attributes() - Prints the language type for the <html>
tag.
bloginfo() - Used to print information about the site, the parameters
are available on the Codex, 'name' returns the title of the blog.
wp_title() - Simply returns the title of the page.
wp_head() - Prints the javascript links and other header stuff.
get_option() - Retrieves a value from the options database.
wp_list_pages() - Lists links to the site's pages, the parameters sort
the pages correctly and also stop WordPress from printing a default title.
footer.php
Create the file footer.php and copy everything in the template from
<div id="footer"> down-wards and shove it in the new file. A dynamic
footer that displays the correct year, site title and a feed link is common place
in themes, so lets add one.
<div id="footer">
<!-- Please leave this line intact -->
<p>Template design by <a href="http://www.sixshootermedia.com">Six Shooter Media</a><br />
<!-- you can delete below here -->
© <?php the_time('Y'); ?> <?php bloginfo('name'); ?><br />
<a href="<?php bloginfo('rss2_url'); ?>">Grab the feed</a></p>
</div>
</div>
< ?php wp_footer(); ?>
</body>
</html>
I've gone and changed the footer to display the copyright icon, followed by the
current year (<?php the_time('Y'); ?>) and the site's name (<?php
bloginfo('name'); ?>) then on a new line put a link to the rss feed (<?php
bloginfo('rss2_url'); ?>).
wp_footer() is what WordPress uses to add things to the bottom of the
site, more often that not used by plugins to add things like site tracking code.
Step 3 - The Core File
We're now going to create index.php
index.php
This is one of the two required files for a WordPress theme (the other being style.css),
so lets get started. Create the file and put it along with the rest, then add to
it the following.
<?php get_header(); ?> <?php get_footer(); ?>
This simply tells WordPress where to include the header.php and footer.php
files. Because this is a two part series we're going to include the creation of
the sidebar in the next article. You can either chose to leave it's div in as static
html or just leave it out which is what I will do. Add the following between the
previous two tags.
<div id="content">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<p><?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?> | <?php the_category(', '); ?> | <?php comments_number('No comment', '1 comment', '% comments'); ?></p>
<?php endwhile; else: ?>
<h2>Woops...</h2>
<p>Sorry, no posts we're found.</p>
<?php endif; ?>
<p align="center"><?php posts_nav_link(); ?></p>
</div>
This is what WordPress call the WordPress Loop. The first line of PHP starts this
loop, endwhile is the end of it. WordPress fills out the loop for each
article on the site, and if there isn't any it displays that "Woops..." content.
I've also added a navigation link that will place link's to more articles, so visitors
can take a look at older content without using the archive.
In the next article we will write up single.php, this would be what
is displayed if a visitor clicks on the title of a post. It will include the commenting
system, unlike index.php.
Review - Does it Work?
So we now have four files in out theme, assuming that you didn't forget to update
you index.php file (doh!) it should work as a simple but functional
theme.
#content h2 in the style sheet.
line-height: 30px;
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Dan September 5th
That was the fastest tutorial I have ever seen for wordpress
( )Dan September 5th
This should increase flow to Theme Forest.
( )Snorri3D September 5th
Thanks alot for that this is just what i needed a good tut about how to connect my Xhtml/css to wordpress
( )Paul Dukes September 5th
This is a great tutorial. Having just done my first Wordpress themed site, I can honestly say this is all you really need to get one going.
( )patt September 5th
splendid!
straight ahead, only the strings you need to know,
( )seems like what i’ve been looking for all my life.
Riff September 5th
@Dan
Nah, better not – if someone is gonna to create a theme for Wordpress after reading this tutorial, then ThemeForest will be overun by low-quality stuff – because it takes time and practice to learn the secrets behind theming WP, you can’t do it after one tutorial
( )yamaniac March 20th
your probably right RIff. But this is just a begginers tutorial, just to let ppl know wht to do for a theme to start working
( )benjo September 5th
Wow…this is what I have been afraid of? Thanks for making this manageable.!
( )Niklas September 5th
Nice tutorial! As always it’s easy to follow and to the point. Great for a friday fun time
( )Shane September 5th
As @Dan said, probably the quickest get yourself up and running theme tutorial I’ve ever seen.
Perhaps many people survive by hacking available themes until they’re happy with the output, but it’s great to know how to start from scratch. I’ve found that themes out there never quite have what I’m after.
Thanks for the tutorial.
( )Mike T. September 5th
this is great, i am in the process of doing wordpress for my personal site, and wanted to learn more about styling, thanks for this!
( )Max | Design Shard September 5th
Great stuff
( )Sam P. September 5th
Great to hear you like the tutorial
@Riff I’m sure there is some sort of quality control for Themes Forest, and if not there should be.
( )insic September 5th
WOW cool tutorial. Im having a hard time creating Wordpress theme before. Now here comes the nice tutorial
( )Josh September 5th
Great tutorial.
( )Ludovic September 5th
Yes, great job, very useful.
( )Joel September 5th
Wow, that was fast!
Now if you could show people how to work with sidebars, it’d be awesome.
Still waiting for that book on WordPress theming!
( )kyle September 5th
check out CSS-Tricks.com. Much better 3-Part Tutorial for building a wordpress site from scratch.
( )Patrick Lewis September 5th
This tutorial is sweet and to the point; could there be a little explanation on custom fields, to explain how you displayed the picture with the post?
( )Rich September 5th
Thanks for the great tutorial. I’m just beginning to learn how to build wordpress themes, and this helps a lot! Not to be pushing but when do you expect to publish part 2?
Thanks
( )Chris Robinson September 5th
nice tut, but this only scratches the surface of creating themes for WP
( )Dainis Graveris September 5th
Yeah, right Chris Robinson, but how you imagine to see complete wordpress tutorial here? Maybe I must give a suggestion to create WP theme creation series from scratch? That would be too good to be true, am I right?
( )Chris Reynolds September 5th
Probably one of the better, and more simple, Wordpress theme tutorials.
Nice job!
( )kyle September 5th
@Dainis Graveris – there are other places on the web you can find in depth articles for wordpress. google “wordpress 3 part tutorial”
( )Nate September 5th
Short and sweet. Thanks for sharing.
( )Tabris Chen September 5th
Very nice, dugg!
( )curtis allen September 5th
Great Wordpress tutorial. Keep up the good work.
( )Lamin Barrow September 5th
@Dan.. am agreeing with you on that but it will require deep wordpress knowledge to make it function and look good.
( )Sam P. September 5th
@Patrick Ha, it’s just a standard picture inserted into the content of the post, just put at the top an floated left, no custom fields on this simple template
@Rich I’m looking at a week, but theres a lot going on at school right now so… not too long though.
( )Sam P. September 5th
@Joel Sidebar’s coming in the next article. Feel free to wait impatiently
( )Fabryz September 5th
Thanks for posting! I started making some templates in fireworks, this will help me handling the coding step.
( )Ben Griffiths September 5th
Excellent, goes in hand with themeforest too
( )accessoire September 5th
Thank you SO much!!! I didn’t read it yet but i guess it’s a good tut as always. I’m looking for such a tutorial for thousands of years ^^!
( )chris September 5th
n1 dude! thx 4 it!
( )Brandon Kaylor September 5th
Awsome Tutorial. I am going to try this out when I get the time.
Very detailed and goes in depth.
Thanks Sam.
( )Taylor Satula September 5th
Wow that was the fastest tut to theme a wp theme on earth. Good review though
( )Jonathan September 5th
Quick and easy. Nice introduction into wordpress themes.
( )Damir September 5th
Bravo.
( )dlv September 5th
D10, excellent
( )i won’t create a wordpress theme, but like a W user i can learn more about it with this kind of “base” tutorial
thanks a lot!
adeux
Mark Abucayon September 6th
I love the outcome of this one. thank you for sharing this.
( )Orama September 6th
I actually visited this site today in hopes of finding an introductory CMS tutorial and VOILA!
( )Chad September 6th
You say “Also remember to change that link to the stylesheet.”
Mine is inside theme folder of course, and called style.css
However, nothing is getting picked up.
( )Chad September 6th
Question…
where’s the “next article” for single.php tutorial? How do we add side bar column?
( )Jad Graphics September 6th
Great tutorial. I was looking for something like this for a very long time.
I hope to use this to convert my site, http://www.jadgraphics.net to a wordpress site. Thanks again!
( )Nysuatro September 7th
You guys can read my mind. I needed this. Thanks alot
( )zamdesign September 7th
yeah, very simple way to making wordpress theme, i will try
thanks
( )Sam P. September 7th
@Chad check you code against the downloadable source, that one works for sure.
( )Dainis Graveris September 7th
@kyle thanks! That’s was more than I expected! Appreciated!
( )Jared September 7th
I’ve been looking for a tut like this one, thanks!
( )Manaswinee September 8th
Great Stuff!! fastest n easiest way..
( )Tom September 8th
Really basic guide, but it’s well done.
( )I’m waiting for more advanced hacks!
Johnny September 8th
Yes, this was a really short tut. It should’ve had another title of it. But ok to see some of the basics in Wordpress core funcs.
( )Mike Bobiney September 8th
Wordpress is a great platform for creating blog themes on as this article demonstrates.
notepad++ – good stuff
( )Hans September 9th
Thanks for a quick intro to php and wordpress! I’ll probably use it in the future to modify existing themes!
( )Jake Holman September 9th
Awesome! This is exactly what I’ve been looking for myself, need to eventually get around to skinning my own blog for my portfolio – have to give this tut a good going over later!
( )Aaron Irizarry September 9th
Brief and useful… thanks again… css-tricks.com also has a bit more in depth one that is a great resource.
Will there be more parts to this?
~ Aaron I
( )JamieB September 10th
Good stuff, I’m a newbie to wordpress but have played about with some of the themes. This article answers a couple of questions I had.
( )Andris September 10th
Thanx a lot for that. I was always looking for some good tutorial to show me how to write my own wordpresstheme, and that’s a really helpful tutorial.
( )Tom George September 10th
Excellent tut and well explained!
Would be love to see a tutorial on plugin creation.
Thanks!
( )Josh September 12th
Great tutorial…I can’t wait for “How to Be a Rockstar Wordpresser”. These posts should keep me busy until then though.
( )deniar September 17th
Wow thanks, it helps me so much
( )zen September 18th
Thanx for this nice tutorial
( )Joe September 19th
Could you have made this any harder to follow?
In step 2:
What theme folder?
What index.html are you talking about?
( )Desserts September 25th
great post, thanks for this!
( )praveen September 26th
Thnx ..was really for a newbie like me
( )keep up da gud wrk..
liquid October 1st
Great post, excellent for newbies like me!!
( )Thanks
alex October 3rd
I’ve been putting off getting into Wordpress theming for far too long
great tutorial, thanks!
( )Ken October 9th
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 – the old one is ok) 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.
Mr Bootle October 16th
Really, really, really simple, clear, quick and easy tutorial. Been hunting for something like this for a long time. Well done and thanks. I now have about 5 wordpress based sites to create!
WoO-hoO!
( )Aizat October 30th
What a very great tutorial for me to learn to create my own wp theme. tyvm
( )GeemeeTheway October 30th
Geat! I’ve been looking for something that simple so far! Good work!
( )Wrablizliar November 17th
i want to share my free wordpress theme here.
Preview:
http://www.elegantthemes.com/preview/eVid/
Download:
( )http://www.sendspace.com/file/6uv0n2
belko December 18th
fantastic tutorial, thanks
( )Westy | P H O T O N O M Y January 24th
This is good to get things started but its so tempting to use the source files and not look to much into the template tags… but god easy start thanks
( )Rezkizuka February 25th
wow, this is great. i thought i can’t start. but this is very good. so i know i can now
( )G_Lok February 27th
Um… sorry to say this but it’s not exactly ‘From Scratch’, but more like modifying existing template.
I do appreciate the initiative and the tutorial is quite useful but the truth is lacks a lot in terms of ‘creating’.
( )Sam Parkinson April 5th
Sorry if the title is a bit misleading, it is not, I admit, totally from scratch. However the whole idea about this guide is how to build a wordpress theme, not a xhtml template. To do both would repeat a lot of content already covered on this site.
( )MiK March 5th
Or you can also use a wordpress theme generator! I found this one : http://www.theme-generator.net/wordpress. You don’t need to know anything about css, html or even php. At last, it generates the zip file containing all the required files ti activate the theme in your blog.
( )Charles Clarkson April 9th
Sam,
language_attributes() defaults to ‘html’.
For xhtml documents use:
language_attributes(’xhtml’)
Thanks for a great tutorial.
( )Adam Winogrodzki April 20th
wow ! its the tutorial i was looking for !
( )AlexClarke April 22nd
Thanks for the tutorial. Very, very helpful. Especially for beginners.
( )sewu April 23rd
Thanks for nice share.. It’s really useful for me..
( )Ryan April 23rd
This made making my first template very quick. Thanks for the help!
( )chaithanya April 24th
This is a very good tutorial
( )snowflake April 26th
great tutorial…thank u so much
( )nuibam April 26th
How to create 3 column wp theme?
( )Alexandre Broggio May 2nd
nice work ^_^
( )Admiyn May 7th
after reading this post everyone may says, I got in the wordpress theme development.
( )Shahriat Hossain May 9th
Nice and clear to make a wp theme from the scratch and i will get this help to make my own theme developed , thanks.
( )Anton Agestam May 11th
Exactly what I needed! Thanks!
( )Derek May 23rd
That is one of the simplest introductions to WordPress I’ve ever read – it presents a simple, easy way to create the frame of a theme, leaving the fancy stuff like CSS and plugins to the designer.
+1.
( )arvind May 26th
hi
really it is interesting to learn beginner
thanks
Thanks
( )Lea June 10th
Hie! I’m a newbie and really trying to focus on the tutorial – so I have a q. Just at step 2, u said “We’re now going to add the WordPress template tags to header.php, these tell WordPress where to inject the various content into the theme. Also remember to change that link to the stylesheet.” <- my q, what link? I mean, you said to change that link to the stylesheet. Sorry I’m a bit slow but i know am getting there… (i think! LOL!) Thanks in advance!
( )Lea June 10th
I’m sorry – I think I get it now. The css/1.css link – sorry. My bad!
( )Nurlea June 11th
Hi again. Just wondering. Am I the only one seeing the theme/ template’s text alignment being displayed ‘ok’ when viewed using firefox but turns out to be aligned ‘center’ when viewed with IE? So sorry to be a troublesome commentator.
( )Robby Morton July 8th
Very nice. Thanks. I have been looking for a good (working) tutorial to build themes. I haven’t been able to find one that really works.
( )Thanks for this.
Justin Moser July 25th
I have a problem, I am making a theme, and using CSS to style the various different components, such as the header DIV, for which i want to use a background image. I am testing the theme locally, and am running XAMPP. all files for the theme are in my c://xampp/htdocs/wordpress/wp-content/themes/tutorial. All background images are inserted using the CSS file.
however, I have tried to use bg images in the CSS styling a few times, and none of the images are appearing…the images appear if i use a full URL from a hosted source on the net and insert that as an image directly into the php file, but obviously thats not going to work well. however, whether I use a full URL or the images/header.jpg path that dreamweaver uses, neither appears….its driving me MAD.
Ive tried uploading the theme to my server to test it online to see if it is just an issue with testing the theme locally through XAMPP but the images still dont appear…
also, one more small thing, is there a way, to get the postmetadata to appear on a single line instead of 2 lines like this:
Filed under: Album Release by admin
No Comments »
thankyou in advance to anyone that can help.
( )OneDesign July 26th
nice work , Thanks
( )kinzi21 July 28th
Nice tutorial very useful for beginner
( )nitendra August 1st
Hi it great discussion to start. Thanks for your excellent tips to create it.Now i can make a better and themes for me.
( )buat web August 10th
Thanks for making this tutorial, it really helfull to creating wordpress theme from the beginning.
David
( )Amit jaiswal August 15th
it is helpful.
thanx a lot
( )Renzo August 19th
Great Tutorial, thanks ^^
( )zefcan August 20th
This was great! Thanks for the post! Perfect for teaching the basics of WP theming.
One thing – there’s a space that sould be deleted in the footer.php code you’ve got posted, line 14, second character.
( )bisnis internet September 2nd
This tutorial very useful
( )Mo Flanagan September 2nd
This is the simplest (working) tutorial I have found, thanks!
( )ajith September 11th
beautiful tut, i love nettuts
!!!
( )ejakulasi dini September 26th
That’s good explanation, thanks for the lesson very much.
Nia
( )Web Development Greece October 10th
cool! I am thinking to use WP as a CMS for upcoming clients. The backend administration seems to be easy for inexperienced clients (unlike other CMS that have a more complicated interface).
As I recall, there is a template in WP as a guide (like blueprint) – I am searching it right now.
( )mantra uang wordpress October 26th
i like this tutorial, i planning design my theme wordpress.
( )