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) then on a new line put a link to the rss feed (
bloginfo('name'); ?><?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.
Test it out in that new theme previewer that been put in the latest WordPress, after
looking around there only seems to be an issue with long titles, easily fixed by
adding the following to #content h2 in the style sheet.
line-height: 30px;
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Sam Parkinson
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Breezi Comming Soon page - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Great Tutorial, thanks ^^
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.
This tutorial very useful
This is the simplest (working) tutorial I have found, thanks!
beautiful tut, i love nettuts
!!!
That’s good explanation, thanks for the lesson very much.
Nia
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.
i like this tutorial, i planning design my theme wordpress.
It is a good information to guide how to use it.But it is difficult for me to understand it,I want to build one,but i don’t know how to start with them.
I need this tutorial to design my blog, thanks for it.
this is the most simplified, most helpful, and most folksily-worded tutorial amongst the myriad of intricate and convoluted tutorials that sit around, otherwise useless, on the internet. This one truly stands out. Thank you.
Finally….. I can make my own wordpress template. Thank you for the great tutorial
Thank you very much, all the important things i needed to know.
I have modified a design of mine to make it now a wordpress them according to your instructions.
he problem for me is: the current theme that I want to replace is still showing the home page, even though I removed all the posts and removed the folde from wp-content > themes in my cpanel File Manager.
The current Heading is displayeed there saying no posts availabele and meanwhile W3 validator will not answer the validation request for the new style.css file
Would you have any suggestions — would be appreciated. Thanks Jim R.
1. I’m new to wordpress
2. I have a custom theme that worked before being modifying to wordpress – it now has been modified to wordpress as you instruct.
3. the dashboard > new themes > upload loads the zip file but there are problems
4. I am unable to validate the css file but I have checked carefully and believe all the files are accurately compiled and coded
5. under such circumstances, what course of action would you recommend for me to overcome the problems, should I call in a wordpress consultant?
Thanks
When it comes to CSS validation tools I am a non-believer. Validation would work great if it wasn’t for Internet Explorer.
Adhere to CSS best-practices and thoughly test your CSS across multiple browsers and systems.
When working CSS I would highly recommend Dreamweaver CS4 and Firebug.
Hi very nice tutorial.
What are the supported browsers?
Thanks for this tutorial and others like it. They make participation in web development, as such, possible and accessible to peoples like me without other resources. Yay! to open source learning.
this is cool, this is what we want dude……
very simply and very fast tutorial, thanks for shared…
Line 14 of the footer code is:
remove the space:
want some more training
this tutor use for powerful help…
Bravo!
Thanks bro, great tutorial. Its very helpful
nice article and thx for sharing..
ok…thank you……nice info