Skip to content

June 11, 2010

10

Create a stunning WordPress template (theme) from scratch

Illustration 14: The template can be styled with backgrounds and pictures

Create WordPress template

Here I tell you in a simple way how to create a fully functional WordPress tempate, or theme, that we also call it.
Start with installing a standard wordpress blog on a hosted server, on your own server, or on you’r local computer using wamp or xamp (Instructions for how to install and configure Xamp or Wamp). Benefits with using a local installation as Xamp or Wamp is that you do not have to move the files to internet with a FTP program every time you have changed something in your theme-files. The disadvantage is that it is more difficult to set up the wordpress installation and you can not use the wordpress installation right away for starting to publish articles, you will have to get a webhotel anyway when you want to go live with your website. I often order the webhotel and install wordpress there, starts to make my theme there, integrate it with plugins and multilingual configurations right away if that is needed. I choose to not show the website for google before it is as ready as it needs to be for people and searchengines to find some interesting information there.

Install WordPress

A lot of you already know how to install wordpres, then, skip this chapter and go right away to the next one, or read this one more time for refreshing your memory. (instructions for installing wordpress)

Theme building stones

The simpliest theme of all only needs two files, an index.php and a style.css file. The php-file describes how the theme is built and gathers information (article and page content) from the wordpress database, and the css-file describes how to present the information in a visual way (the design of the site).

Illustration 1: The wordpress template file structure

Illustration 1: The wordpress template file structure

So what do the additional files do?
Page.php describes what a single wordpress page looks like.
Single.php describes what a single wordpress post looks like.
Archive.php describes what an archive-page looks like.
Search.php describes what search results on the internal search looks like, and so on.

But you do not actually need these files. If the file is not there, WordPress uses the Index.php for showing also pages and single posts and everything else on the site.
The Header and Footer.php is used on every page if they exist, many plugins needs the files to work well, so it’s good to have them in the template. We will make them, but first we’ll make index.php to include what’s later gonna be in them. The sidebar.php presents the sidebar(s). There will also be a Functions.php that handles some basic functions that is needed in the template. But we’ll start with the most important files index.php and style.css.

Get started with building the theme

By now you have installed wordpress. Create some dummy content, some articles and pages, so that there is something to show on your site all the time as long as we are making the theme (Instructions how to create content in wordpress). Fill also in th blog name and the slogan, we will show them in our theme, even if you also can disable them later if you want to.

Create an empty index.php file with a texteditor or website editor, such as notepad++, sharepoint designer or dreamweaver. We will use dreamweaver in this tutorial. Create also a empty style.css file.
Fill in the basic information that wordpress needs for showing content. In the css-file, fill in info about your theme like this:

Illustration 2: This is how the css should look. Info about the theme surrounded with /* */

Illustration 2: This is how the css should look. Info about the theme surrounded with /* */

This text does not in any way tell the browser what the theme should look like, but it tells wordpress that this is a theme, gives it a name and a description, and tells which version it is. Fill in what you want here and save the css.

Following picture shows what the basic template file (index.php) looks like. More about the data in the file here. Download the file here and name it index.php if you do not want to write all this yourself (smart thing to do, indeed).

Illustration 3: This is how the basic index.php looks

Illustration 3: This is how the basic index.php looks

When you have made these two files, you can upload them to the themes folder on your server. It goes under wp-content/themes/yourthemename/. When you have uploaded it to that directory, go to the wordpress admin panel. There, click “Appearance”, and then “themes”. Now you see your simple theme there and can activate it by clicking “Activate”. Then, go to your site in a browser, your site will now have your new theme, and it will look something like this:

Illustration 4: This is what your fresh template looks like unstyled.

Illustration 4: This is what your fresh template looks like unstyled.

Not that fancy, but you see your blog name, description and posts. Next step is to add more parameters to the index file for making it more functional and nice-looking. But first we can check how the browser reads the output of your template file, right-click at your site, and choose “view source”. You will now see a view that looks a little like the one that you made in your text editor, but not exactly the same. All the <? php ?> tags has disappeared and been replaced with content from the wordpress database.

Illustration 5: The source for the site looks a bit like the one you wrote in your text editor

Illustration 5: The source for the site looks a bit like the one you wrote in your text editor

Now you see that everything that we want to be dynamic, content that you write in the wordpress admin panel, is gathered by calling for it in the template files with php.

Extending the theme

Now go back to index.php and start filling in some data that will make the theme better. Let’s add some data about the post. Fill in the following after the line <? php the_content(); ?>

Illustration 6: This postmeta will show who has written the post, in which cateogory it is posted, and how many comments it have.

Illustration 6: This postmeta will show who has written the post, in which cateogory it is posted, and how many comments it have.

Save the file and upload it again, refresh your browser, and see the change. Under each post is now info about the post. If you make categories and assign a post to that category, it will show that instead of “uncategorized”. If you click on a post title you get to the post, and it looks like the front page, but with only that post. I assume that you have more than one dummy-post in your blog, unless you have that, make some. For getting back to front page from a single blogpost, click on the blog name, that is also a link in this basic template. See the index file as it looks now:

Make divisions

Make a div “wrapper” surround everything you have in your body in index.php, write <div id=”wrapper”> after <body> and close the div in the end of the document by writing </div> before the </body> tag. The blog will not look any different in the browser yet, but if you click view source again, you will see that all the content now is surrounded with the wrapper div.

Now add another div around the blog name and description, <div id=”header”> right after <div id=”wrapper”> and </div> just after <h3><?php bloginfo(‘description’); ?></h3>. This will surround the name and the slogan with a div that we can style in a way so it fits every page on the site. Your index file will now look like this: (index_step_2.txt). Again, no visual difference when checking the site in the browser. We will still add some more div:s before we start to style them.

Next step is to add a navigation div, we want a navigation field under the header. Write the following after the closing div for the header: (or download the new index.php with navigation here.)

Illustration 7: this adds a div "navigationlist" and fills it with a list that contains links to "home" and to every page on the site

Illustration 7: this adds a div "navigationlist" and fills it with a list that contains links to "home" and to every page on the site

If you check your site in the browser now, you will see a uggly list of the pages on your site right under your tagline. If you do not have pages on your site, go into the admin panel and make some. It now looks something like this:

Illustration 8: Your site does have navigation now

Illustration 8: Your site does have navigation now

Your index.php looks like this now: (index_step_3.txt). Next step is to make div:s around the posts and the postmetadata. Add <div id=”container”> right after the closing div for the navigation list, and close the container right after the end of the content loop. This will wrap everything below the navigation into the container-div for separate styling. Now put <div class=”post” id=”post-<?php the_ID(); ?>”> before the <h2><a href=”<?php the_permalink… , this will give every post a div with the class “post”, and a unique ID like post-1, post-2, and so on. This way you never get duplicate ID:s, but still get duplicate post-classes for styling every post to look the same. Close this div in top of <?php endwhile; ?>. Put <div class=”entry”> before the line <?php the_content(); ?>, and close the entry div before <?php endwhile; ?>. Put a <div id=”footer”> in top of the wp_footer call, and close it after it. It will still be inside of wrapper, but outside container. You can also write some fancy copyright-text in the footer div if you want. It will show on every page on your blog. Your blog should now look like this:

Illustration 9: No colors will show, i only put them there for you to see the different elements

Illustration 9: No colors will show, i only put them there for you to see the different elements

The code of the index php will look like this: (index_step_4.txt). The next and last step before starting with the fun styling is to add sidebar support to your theme. For this we will have to make a new file named functions.php. Make that and write this into it:

Illustration 10: The functions.php file tells wordpress that your theme is supporting sidebars and how to show the sidebar items (widgets)

Illustration 10: The functions.php file tells wordpress that your theme is supporting sidebars and how to show the sidebar items (widgets)

Save the file in the same place as your theme files and upload them. You find the functions.php file as text here: (functions.txt). Now go back to your index.php and write this after the closing of the container div and before start of the footer div:

Illustration 11: This will call for the sidebar 1 that you made in functions.php

Illustration 11: This will call for the sidebar 1 that you made in functions.php

Upload both the functions.php and the index.php to the server. Nothing will show, because, you have no widgets yet. Go into the admin pages again and click “appearance”, and then “widgets”. Drag some widgets to the new area “sidebar1” thet we just made by coding! I put “recent posts”, a textfield and a calendar to sidebar1, and clicked on save. Whatever widgets you put on the site they will show. Now we see the sidebar with widgets on the site, but it is under the posts. It looks like this:

Illustration 12: Now we have all elements that we need for our simple blog. It works already.

Illustration 12: Now we have all elements that we need for our simple blog. It works already.

If you need the files they are here: functions.php, index.php (index_step_5.txt) and style.css.

Styling the site

Now, lets get to the fun parts of making the theme, styling it to be as fancy as we want. If you know html and css you propably already know what we are gonna do, we are going to add the same div:s that we made in the index file to the css file and give them styling parameters. This is not hard, you will be able to follow even if you haven’t done css before. Everything we do from now on will show us big differences in the design of the page, so this is the fun part of theming.

So, let’s start with adding some parameters to the body of the site. I will paste the code here and explain it, so it is easy to just copy and paste it to your css. The explanations are between /* */ -signs so they will not affect the functions of the file. Of course you can erase the explanations if you want. Start writing or paste this under the couple of rows that’s already in the style.css.

The code of the css:

body{

font-family: Arial, Helvetica, Georgia, Sans-serif; /* Sets the font on the site to Arial, and Helvetica if user do not have arial */

font-size: 12px; /* sets the font to be 12 pixels high */

vertical-align: top; /* The top of the element is aligned with the top of the tallest element */

background-color:#f6f6f6; /* sets the background color to be light grey */

color: #333; /* sets the font color to be dark grey */

}

body, h1, h2, h3, h4, h5, h6, blockquote, p, a, ul, li {

margin: 0;

padding: 0;

}

/* sets the margins and paddings to zero for every element on the site */

Now you see some changes on the site, all texts are arial, and the background is gray, the texts are aligned to the center of the screen.

Let’s continue with the css.

#wrapper{

margin: 50px auto 0 auto; /* auto on left and right margins centers the wrapper. 50px from the top */

width: 900px; /* sets the width for the wrapper to 900 pixels */

text-align: left; /* aligns the text inside the wrapper to the left side */

background-color:#fefefe; /* sets the background color of the wrapper to light grey */

border:#FFF medium solid; /* sets a medium solid white border around the wrapper */

}

Now the wrapper div is centered, and all the content of it is nice aligned to the left side of the element. Much better already. Some bullets are on the outside of the div, but we’ll fix them!

We’ll now continue with the headings:

h1{

font-family: Verdana, Helvetica, Sans-serif; /* sets the font for heading 1 */

font-size: 24px; /* sets the text size for heading 1 */

padding: 10px 0 10px 0; /* makes ten pixels of space in top of and under the heading */

}

h2{

font-family: Verdana, Helvetica, Sans-serif;

font-size: 18px;

padding: 10px 0 10px 0;

}

h3{

font-family: Verdana, Helvetica, Sans-serif;

font-size: 14px;

padding: 10px 0 10px 0;

}

h4{

font-family: Verdana, Helvetica, Sans-serif;

font-size: 13px;

padding: 10px 0 10px 0;

}

h5{

font-family: Verdana, Helvetica, Sans-serif;

font-size: 12px;

padding: 10px 0 10px 0;

}

h6{

font-family: Verdana, Helvetica, Sans-serif;

font-size: 10px;

padding: 10px 0 10px 0;

}

a:link, a:visited{

text-decoration: none; /* deletes the underlines from the links */

color: #336699; /* sets the link colors to be blue */

}

a:hover{

text-decoration: underline; /* puts a underline to the links when the mouse is over it */

color:#0C0; /* sets the link color to be green when the mouse is over it */

}

.navigationlist {

width:900px; /* sets width of navigationlist div to 900 pixel */

background: #69C; /* sets the background of navigationlist to blue */

float:left; /* Floats it to the left */

clear:both; /* Clears any other float that we later will make in the header */

}

.navigationlist ul {

padding-top: 8px; /* Sets p pixel space over the navigationlist */

padding-bottom:8px; /* Sets p pixel space under the navigationlist */

float:right; /* Float the navigationlist to the right */

}

.navigationlist ul li{

display:inline; /* displays the list items besides each other instead of under each other */

font-size:18px; /* sets font size to 18 for the menu items */

padding-right: 20px; /* sets a 20 pixel space to the right of each item */

}

.navigationlist ul li a{

color:#EEE; /* sets the color for the links in navigation next to white */

}

If you look at your site now, it is starting to look like a website. We’ll still do something to the header and to the content, sidebar, and footer divs. Next step is to make the sidebar and the content to be besides of each other. That’s made by floating the container to the left and the sidebar to the right. You can float both left also, then the one that appears higher in index.php will be the most left one. We break the floatings in the footer by adding clear:both to it in the css. You can now style the container paragraphs and heading as you want, and everything else also.

#container{

float: left;

width: 600px;

}

.sidebar{

float: right;

width: 240px;

background: #eeeeee;

margin-left: 10px;

padding-left:10px;

padding-right:10px;

}

#footer{

width: 900px;

background-color:#f6f6f6;

clear:both;

}

Now checking the site in the browser will show the sidebar to the right and the content to the left. We’ll still style the header, pictures, comment-form, and some more things before we go on with making the additional files. If you wonder why there’s somethimes #-signs and sometimes points(.) in the css, i can tell you. The #-sign is for styling div:s that has an ID, and points are for the div:s with a class. A ID can only be used once on a page while a class can be used multiple times (that’s why the “post” div is styled with the class attribute). I upload the whole style.css here, check it or copy it for getting the styling ready (styling never gets ready, you always find something to make better). With this css the site now looks like this:

Illustration 13: The site looks much better after some styling in the css. But there's much more you can do!

Illustration 13: The site looks much better after some styling in the css. But there's much more you can do!

You can upload your own header picture, it goes in a folder “pics” in the template folder, just make it the same size as mine, or define another width and height for the header in the css (detailed explanation of changing header picture for templates here:). I also added a background image to the site and did some more small changes in the css-file. Before we go on we go on with making the other files, you can download the four files we have here: functions.phpindex.php and style.css. Pictured used are here: background.png and snowheader.jpg (goes into a folder named “pics” in your template folder). With the background picture the site should look a little like this:

Illustration 14: The template can be styled with backgrounds and pictures

Illustration 14: The template can be styled with backgrounds and pictures

The additional template files

You have now seen that you can use the theme with only the files that we have made now, but if we want blog-page, static pages, and single article-pages to look different from each other, we must make some more files. When you checks a single post, wordpress looks in the template folder for post.php, and shows the post due to what is in that. But if it does not find it, it shows the post according to how index.php wants to show it. The making of the additional files is mostly copying and pasting from the index file.

Making the header and footer files

go into index.php, copy everithing from top down to where the container-div starts. (do not include the container-div).

Illustration 14: copy the content that will be the same on every page.

Illustration 14: copy the content that will be the same on every page.

Paste all this into a new file named header.php and save it. Then go back to index.php and remove the code that you have copied, and instead of it, write in <?php get_header(); ?> . This will search for the header in the template folder and insert it here when the site is shown in the browser.

We will now do the same thing with the footer, go to index.php, go to the bottom of the file, copy everything from the footer-div down to the bottom of the site (include the footer div), paste it into a new file named footer.php, and delete it from the index.php. Remember to insert <? php get_footer ?> instead of it, so wordpress understands to look for it. Now you have a much shorter index file, and that is good. Less code to mess up. Upload the files. These things we just did do not affect how the site appears in the browser. Download the index.php, header.php and footer.php

Making single.php

Copy everything that is in index.php and paste it into a new file named single.php. In this one we are going to include a comment-form, so that you are able to comment on the articles in the blog. After the end of the entry-div, but before the end of the post-div, insert a call for the wordpress comments-template <?php comments_template(); ?>. This will insert a comment form and the existing comments under every article, but not on the front blog page (the code is in single, not in index, I think you understand this now). We can also style the comment form as we want by adding a comments.php to the template, but we do not do that now (Go to that post). We’ll now stick to WordPress own comment form.

We can also put a link to next and previous post here in single php if we want, a link to the previous post looks like this: <?php previous_post_link(‘&laquo; %link’) ?> and a link to the next post looks like this: <?php next_post_link(‘%link &raquo;’) ?>. Put them in top of the post, under the post, under the comments, or wherever in the single.php you want them to appear. You can also put more things into single.php, like another sidebar and things like that. (read more about adding multiple sidebars)

Making page.php

Once again, copy everything in index.php and paste it into a new file named page.php. I do not want the commenting-possibility on pages, just on posts, therefore I remove the comment_template call from page.php. Also, I do not want to show any categories or writer for pages, so I remove everything in the postmetadata on page.php. If you want the “edit”-button to be there you can leave that there, it will only show for the admin and the publishers that have access to it anyway.

Archive.php and category.php

These files should look like page.php, but instead of the tag <?php the_content(); ?>, there should now be <?php the_excerpt(); ?>.  This will show only a few rows of each post when looking at a category or archive page. This makes you see a better overview of your posts. Save the files and upload them.

With the possibility to make pages, posts, blog, and categories differ from each other, we can make the template much more search engine friendly. If you are interested in that, you should read this article about search optimizing your wordpress template.

Download:

Download whole the template that we made in this lesson here: simple-easy-to-learn.zip, it includes all the files that we have been working with here, and the two pictures. Put it in wp-content/themes/ and activate it.

Read more from Create templates
  • Buy Tramadol

    useful information. Great theming instructions!

  • Pingback: Guide for installing wordpress | Professional WP Templates()

  • seanbelly

    This is a very helpful tutorial, can’t wait to try it out.

  • Pingback: Customizing permalinks or url for wordpress | Professional WP Templates()

  • http://www.vijayinfo.in web design company

    Thanks for u r information

    its very useful

  • Pingback: New theme for NGE (Nordic Ground Engineering) | Professional Wordpress Themes()

  • Toni Crocker

    Great writing! I want you to follow up on this topic…

  • Pingback: SEO pressor plugin for OnPage optimization | Professional Wordpress Themes()

  • http://zqp.me/ Brad

    I have been a PHP developer for some time and done a ton of CSS lately but have had little experience with WordPress.  I have been using wordpress a little bit for the past few months but haven’t really dove into the workings and this article was fantastic for that.

    Shows how simple it is to create a wordpress theme.  Thanks

  • http://zqp.me/ Brad

    There are a couple of things that I would change in the CSS which is a good basic thing to teach in todays web world and that is using dynamic widths.  I changed the wrapper to have a width of 90% (and you can do a max/min width on this per design) and then gave nav/header/footer/etc 100% within the wrapper.  This will help to fit various screen sizes or when people are wanting to multitask with multiple windows open.