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.
Looking for a free WordPress theme to get started fast? We have some great ones for you to choose from!
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.
1 |
/*
|
2 |
Theme Name: Typography Paramount
|
3 |
Theme URI: http://www.sixshootermedia.com/
|
4 |
Description: An image-less template focusing on Typography.
|
5 |
Author: Sam Parkinson
|
6 |
Author URI: http://xseria.com
|
7 |
Version: 1.0
|
8 |
.
|
9 |
General comments/License Statement if any.
|
10 |
.
|
11 |
*/
|
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.
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> |
3 |
<head>
|
4 |
<title>-</title> |
5 |
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
6 |
<link rel="stylesheet" href="css/1.css" type="text/css" media="screen,projection" /> |
7 |
|
8 |
</head>
|
9 |
|
10 |
<body>
|
11 |
|
12 |
<div id="wrapper"> |
13 |
|
14 |
<div id="header"> |
15 |
|
16 |
<p class="description"> |
17 |
|
18 |
An imageless template focusing on Typography. |
19 |
|
20 |
</p>
|
21 |
|
22 |
<h1><a href="#">Typography Paramount</a></h1> |
23 |
|
24 |
<ul id="nav"> |
25 |
|
26 |
<li><a href="#">Link Here</a></li> |
27 |
|
28 |
<li><a href="#" class="active">Link Here</a></li> |
29 |
|
30 |
<li><a href="#">Link Here</a></li> |
31 |
|
32 |
<li><a href="#">Link Here</a></li> |
33 |
|
34 |
<li><a href="#">Link Here</a></li> |
35 |
|
36 |
</ul>
|
37 |
|
38 |
</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.
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes() ?>> |
3 |
<head profile="http://gmpg.org/xfn/11"> |
4 |
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title> |
5 |
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> |
6 |
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen,projection" /> |
7 |
|
8 |
<?php wp_head(); ?> |
9 |
|
10 |
</head>
|
11 |
|
12 |
<body>
|
13 |
|
14 |
<div id="wrapper"> |
15 |
|
16 |
<div id="header"> |
17 |
|
18 |
<p class="description"><?php bloginfo('description'); ?></p> |
19 |
|
20 |
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1> |
21 |
|
22 |
<ul id="nav"> |
23 |
<?php wp_list_pages('sort_column=menu_order&title_li='); ?> |
24 |
</ul>
|
25 |
|
26 |
</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.
1 |
<div id="footer"> |
2 |
|
3 |
<!-- Please leave this line intact -->
|
4 |
<p>Template design by <a href="http://www.sixshootermedia.com">Six Shooter Media</a><br /> |
5 |
<!-- you can delete below here -->
|
6 |
|
7 |
© <?php the_time('Y'); ?> <?php bloginfo('name'); ?><br /> |
8 |
<a href="<?php bloginfo('rss2_url'); ?>">Grab the feed</a></p> |
9 |
|
10 |
</div>
|
11 |
|
12 |
</div>
|
13 |
|
14 |
< ?php wp_footer(); ?> |
15 |
|
16 |
</body>
|
17 |
</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.
1 |
<?php get_header(); ?> |
2 |
|
3 |
<?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.
1 |
<div id="content"> |
2 |
|
3 |
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> |
4 |
|
5 |
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> |
6 |
|
7 |
<?php the_content(); ?> |
8 |
|
9 |
<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> |
10 |
|
11 |
<?php endwhile; else: ?> |
12 |
|
13 |
<h2>Woops...</h2> |
14 |
|
15 |
<p>Sorry, no posts we're found.</p> |
16 |
|
17 |
<?php endif; ?> |
18 |
|
19 |
<p align="center"><?php posts_nav_link(); ?></p> |
20 |
|
21 |
</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.
1 |
line-height: 30px; |
