Skip to main content
Free website traffic to your site!

Create Your Own WordPress Theme from an HTML Template

WordPress has become the most widely used blogging platform in the world, estimated to be used on a quarter of a billion websites online today.



WordPress works as a blog, but also as a straightforward content management system, ready to use with search-engine-friendly URLs and fully valid HTML and CSS.With so many sites using WordPress and only about 1,200 themes listed on WordPress.org, there are inevitably lots of sites looking exactly the same. You and your clients need to stand out, or end up being branded as “just another WordPress blog.”In this article, I’ll show you how to take an existing HTML and CSS site template and convert it into a theme for WordPress. Of course, WordPress theming is much too vast a topic to cover entirely in a single article, so I’ll provide you with some resources at the end to further your learning. It’s hoped, though, that this article will serve as a good introduction and give you a solid foundation to start learning aboutcreating your own WordPress themes.I’m assuming you already know HTML and CSS, and already have a site design that you want to adapt to WordPress. Being familiar with PHP is unnecessary, as I’ll be explaining every function you need as we use it.

WordPress Theme Basics

WordPress themes live in a folder inside the /wp-content/themes/ directory in your WordPress installation. Each theme’s folder includes a few essential components:
 
  • A main CSS file. This is just a regular CSS file, except for a few extra details at the top, which I’ll be explaining shortly. You can, of course, have more CSS files if you need to (a print style sheet, for example).
  • index.php, the main index file that WordPress loads when you’re using the theme.
The contents of the index.php page can also be split up into several other files, which would then be included in index.php. Normally, these are:
  • header.php: contains the first part of the template, usually starting from the doctype and extending to just after the page’s header (including the site and page title, and navigation elements).
  • sidebar.php: similar to the header.php file, it includes elements that appear in the sidebar. You can enable this to work with widgets in WordPress, or, if you prefer, you can enter the content directly into the theme files.
  • footer.php: normally called last in the page, and usually placed from the end of the page content through to the bottom of the web page.
  • comments.php: defines the structure of the comments section for each post. If you leave this out of your theme, the comments.php file from the default theme will be used.
There can be other PHP files, but these are optional. You can add files that provide a specific layout for certain pages, such as category pages, single posts, or posts with a given tag. It’s also common to have templates for site errors like 404s.Once you have your HTML template that you’re ready to convert—whether you’ve written it from scratch, had it designed, or bought it from a template marketplace—you can convert it into a WordPress theme in very little time.

Starting Your Theme

Ideally, before you begin, you need an installation of WordPress up and running, which is available free from WordPress.org. When you’re creating the theme, it’s easiest to work on the files locally or on a local VM, although you could also work on a web server over FTP.First, you need a folder for the theme. This needs to be created inside /wp-content/themes/ in your WordPress installation directory. It’s as simple as creating a new directory with a name related to your theme. Inside this, you’ll start off with your style sheet, which also includes some information about the theme that will be used in the administration panel later.Create a CSS file named style.css, and add the following at the top of the file:
/*Theme Name: [A unique theme name here]Theme URI: [The theme website]Description: [A description]Author: [Your name]Author URI: [Your website].[Any other comments].*/
This is a comment block (enclosed by /* and */), but WordPress reads this information and presents it on the theme selection screen in the administration interface.You need to insert content for each of these items. They’re mostly aimed at themes that will be distributed, so if you only plan to use the theme on your own site, most of the values are of little consequence. Make sure the theme’s name differs from any other themes you have installed, or it will cause problems!There’s also the option of adding a version number with the Version: label.At this point, if you’re converting an existing HTML/CSS site, it should be easy enough to copy and paste all of your style information into this file from your original template’s CSS.

index.php

Next up, it’s the index.php file. The easiestway to begin is by copying and pasting all of the content from the mainHTML file in your site template into this new file.We’ll start by replacing some of the hard-coded information in the file with dynamic content that will be generated on the fly by WordPress.WordPress has a built-in function called bloginfofor accessing all types of information about the installation and the theme. We’ll use this to fetch the style sheet URL and the location of the RSS feed. bloginfo is extremely simple to use:
<?php bloginfo('stylesheet_url'); ?>
In this example, I’ve included the style sheet URL; however, it works for a whole range of parameters including the charset, blog description, and template directory. For a full list, see the WordPressCodex.Looking at your template, you now want to replace the link element pointing to your style sheet with a line like this:
Example 1.  (excerpt)
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css"  />

Everything between <?php and?> will be replaced by the return value of the function, which in this case will be the URL pointing to your style sheet. This is perfect, because your website will now contain a line like:
<link rel="stylesheet" href="http://example/blog/wp-content/themes/style.css" type="text/css" />
important: Wax On, Wax Off
The key to building WordPress themes is to take the process we’ve just gone through and repeat it for every bit of content on your site: take your existing HTML and find the parts of it that should be included dynamically. Then find the WordPress function that will return the value you want and insert it, either between the HTML tags or inside an attribute, as we did for the style sheet URL.

Assets

Of course, your CSS file most likely references a number of images, so it’s necessary at this point to move those over to your theme directory. While there are no set rules for how you name image and other asset directories within a theme folder, it’s worth adding a new folder called assets here, which will include things like images and JavaScript files. If you prefer, you can have separateimages and js folders, but for the sake of this article, I’ll assume you’re sticking with a single assets folder. Move all your images to the new folder.You need to change any references to the old image locations that existed before the template was converted to a WordPress theme to the new locations. Find and replace works in virtually every text editor out there, and is the easiest way to achieve this. Look for references to the old path (for example, images/ up to just before the filename, including the trailing slash), and replace them with the following:
<?php bloginfo('template_directory') ?>/assets/
This will change all references to the path to the new folder your theme lives in. The assets directory is where the images are now housed.If the location of the images relative to the CSS file have changed, a quick find and replace from the old folder name to the new one should make short work of this.Now, you should have a copy of your HTML, CSS, and images all set up and working in WordPress. To check, save it and try setting WordPress to use your theme, and see what happens. You should receive a duplicate of the original HTML template, only now it’s being generated by WordPress. There should be no WordPress content in there just yet, though.

The Header, the Footer, and the Sidebar

The next task will be to split the content into the header, footer, sidebar if you have one, and the rest of the page. Bearing in mind that the header, footer, and sidebar code remains unchanged on all pages (as a general rule), start by working from the top of the
index.php
until you reach the beginning of your sidebar or your main page content (depending on which one is first in the source), and select everything from the beginning to this point. This will usually include your page title, logo, and navigation menu.Cut and paste this into a new file, and save it in the same location as your
index.php
file with the name
header.php
. The filename is important, as WordPress will go looking for this file when you ask it to insert the header in your pages. Speaking of which, let’s tell WordPress to do this. In the place of the code you cut out of
index.php
, put the following line:
<?php get_header(); ?>
code tells WordPress to include the content from your
header.php
file at that location in the page.Next, we’ll do the same for the page’s footer: cut all the footer material from
index.php
and paste it into a new file called
footer.php
, replacing it with:
<?php get_footer(); ?>
Finally, do the same action with your sidebar, saving it as
sidebar.php
and replacing it with
<?php get_sidebar(); ?>
.It’s worth checking again to see that your page is still working at this point. We haven’t made any changes, just split it up into separate files, but it’s good to verify that everything is still working.
 

Template Tags

At this point, your site is just showing static HTML contained in your template, rather than fetching live data from WordPress. It’s time to change that.In WordPress, you use template tags to tell WordPress what content to fetch and insert into a page. There’s a definitive list of them on the WordPress Codex, but if you’ve been following this far, you’ve already met a few of them!
get_header
,
get_sidebar
,
get_footer
, and
bloginfo
are all template tags.These tags can be added to any PHP file within the theme, so a good place to start is at the top of your site, with the
header.php
file.Let’s start at the very beginning of the file. The
Doctype
can remain as is. The opening html tag can include a lang attribute, and WordPress provides this with the
language_attributes
template tag. So, we can replace the html tag with:
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>
This will generate an attribute along the lines of:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
If you’ve included any scripts, it’s worth moving them to the
assets
folder, and changing any references to them as you did for the images. If you used a global find/replace to modify the image paths, it’s possible that the script paths were modified as well, though you’ll still need to move the JavaScript files themselves.For blogs, it’s a good idea to include links to your RSS feed and pingback URL in your head, as these will be automatically recognized by many browsers. Both of these links can be added using the
bloginfo
by including these lines:
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /><link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
With that done, you now need to include the
wp_head
tag. This tag will pull in any JavaScript files or style sheets required by the WordPress plugins you’re using. This is vital, as those plugins may fail to function as intended. All you needis the line:
<?php wp_head(); ?>
The final element in the HTML head is the page title. Most WordPress themes use some variation of the following:
<title><?php bloginfo('name'); ?> <?php wp_title('-'); ?></title>
This will include the name of the blog, which can be defined in the WordPress settings, followed by the page title. For example, if the page is a single article, it will show the article’s title. The
'-'
in brackets is the separator, which will be placed before the
wp_title
content if (and only if) there’s a title to display. This means that the title of my blog’s home page will be “My Blog,” whereas the title of an article on my blog will be “My Blog: Article Title.” WordPress is smart, and will only include the separator if it’s needed.Still in the
header.php
file, we’ll now move onto the body tag. This part will vary more depending on the structure of your template, but work through it andlook for any content that should be pulled in from WordPress. For example, if the website title appears in the code as
<h1>My Blog</h1>
, it should be replaced with
<h1><?php bloginfo('name'); ?></h1>
.The template tags you’re most likely to need at this point are:
  • get_option('home');
    : the URL of the blog’s home page
  • bloginfo('rss2_url');
    : the URL of the blog’s RSS feed
  • bloginfo('description');
    : the description of the blog, as defined in the WordPress settings
As with the other template tags we’ve seen, these need to be put inside
<?php ?>
tags; they can sit anywhere inside the PHP file, even inside your HTML tags.Moving your site’s navigation into WordPress can be a bit trickier. There are template tags that can provide you with lists of categories or lists of pages, which you can then use to create parts of your navigation. The template tags are
<?php wp_list_categories(); ?>
and
<?php wp_list_pages(); ?>
, and will provide you with lists of hyperlinks that you can style as you would a static navigation list. However, sometimes you need your pages to appear in a specific order, or you need to exclude certain pages. Much of this is possible by passing certain parameters to
wp_list_pages
. To learn more about how to manipulate this tag, read up about it on the Codex.Moving on, if you’ve included a sidebar you’ll want to include some other elements, like links to categories and pages, or a tag cloud. Even if your layout has no sidebar, there may be other areas of the theme where it would be sensible to add these tags.

Widgets

If you plan on releasing your theme to the wider community, it’s important that you widgetize the sidebar. Widgets are chunks of content that can be added to predefined areas in a theme via the WordPress administration panel. For example, you could have a widget area at the top of your sidebar, where the blog owner could easily add a list of pages or an arbitrary block of HTML. Widgets are beyond the scope of this tutorial, but you can read more about them on the WordPress Codex.Other tags you may like to add to your sidebar include (again wrapped in
<?php ?>
tags):
  • wp_list_authors();
    : lists all the blog’s authors as li elements. If they have authored posts, their name will be a link to a page showing all their posts.
  • wp_list_bookmarks();
    : outputs the links that have been added in the Links section of the administration panel, and is also wrapped in li tags.
  • wp_tag_cloud();
    : displays a cloud of all the tags that have been added to your posts.
Your footer section should be easy to handle now that you have a feel for template tags. If you need to output content we haven’t covered here, be sure to look for an appropriate template tag in the Codex. Remember to close any tags that are open in your
header.php
file, such as body or any wrapper divs.As you’ve worked through this, you probably tried viewing the page at various points to test it. Whether or not that’s the case, when you view the page now, it should include all the content being pulled from WordPress, except the main body of the page.

The Main Blog Content

Now that we’ve defined the content for the header, footer, and sidebar, it’s time to turn to our page’s core content. We’ll now go back to our
index.php
file and implement the WordPress Loop. The Loop is the mechanism WordPress uses to cycle through the posts that are to be displayed on a given page, and output the content for each of them.It begins like this:
<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
These two lines check to see if any posts have been provided. Depending on which page you’re viewing, different posts will be available. For example, on the main blog page, a certain number of the most recent posts will be shown. If you’re viewing a specific post, then only that post will be provided to the Loop. For category, tag, or author pages all posts belonging to that tag, category, or author will be shown.With those two lines in place, we’re now inside the loop. We now need to instruct WordPress to execute a few lines of code individually for each post in the set. For example:
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2><small><?php the_time('F jS, Y') ?> by <?php the_author() ?> </small>
This example section begins with an h2 tag containing the post title, which is linked to that post’s page. Beneath this, the post time and author are listed, wrapped in the small tags. There are a number of new template tags here, and many others you can use to customize your template to display the HTML you want for each. Here are some of the more common ones:
  • the_permalink()
    : the URL of the permanent hyperlink to the post.
  • the_title()
    : the post’s title.
  • the_time('F jS, Y')
    : displays the post’s date in “January 1st, 2010” format. To format the date differently, replace
    'F jS, Y'
    with another PHP date format string.
  • the_author()
    : displays the name of and links to the archive for the user who wrote the post.
  • the_content()
    : inserts the post content. There’s no need to place this inside
    <p></p>
    tags, as this will be done automatically.
  • the_category()
    : displays the name of and links to the archive of the post’s category.
The easiest way to make your post display match your existing template is to cut and paste your template’s sample content code inside the WordPress loop. Then insert the appropriate template tag into each part of the post’s HTML. Once you’ve included everything you want, it’s time to end the loop with
<?php endwhile; ?>
. This runs once all the posts have been processed. Ideally, it should be followed by some navigation controls:
<div class="navigation">  <div class="alignleft"><?php previous_posts_link('&laquo; Previous Entries') ?></div>  <div class="alignright"><?php next_posts_link('Next Entries &raquo;') ?></div></div>
Each page displays a certain number of posts, as defined in the WordPress settings. These controls will allow your visitors to navigate back to older posts with Next and Previous links. The parameter passed to
previous_posts_link
and
next_posts_link
(the string in parentheses) the text to be used for the link.At this point, note that the
while
structure has been closed, but the
if(have_posts())
is still open. I need to elaborate on this a little. It’s possible that a page will have no posts to display (for example, your home page before you’ve added any posts, or an archive page for a month in which no posts were published.) In those cases,
if(have_posts())
will evaluate to
false
, so none of the template code you’ve just written will be run.For those cases, you’ll want to provide some fallback content. So,we first need to define the
else
condition, and thenclose the
if
statement with PHP’s
endif
keyword:
<?php else: ?><p>Sorry, there are no posts to display.</p><?php endif; ?>
For this example, we’ve simply added a paragraph telling the that there were no posts found for the page. You could also add a box or links to other parts of your site, to help visitors find their back to the content they’re looking for.

Other Pages

In our simple example,
index.php
is being as the template for every page on the site. But if you want to modify aspect of the template only on a specific page (or group of WordPress lets you do that easily. All you need to do is
index.php
with more specific template files. example, you can create a
single.php
file, and template will be used for single post pages instead of
index.php
file. Similarly, there
category.php
(for category
search.php
(for search results),
home.php
(for the home page), and a number of othertemplate files you can create to customize each separate area of yoursite.

What’s Next?

If you’ve followed along with this entire tutorial, you have:
  • imported the content from your HTML template into your WordPress theme files
  • changed the references to images, JavaScript files, and similar within your code
  • copied all the CSS files, JavaScript files, and images into your new WordPress theme’s directory
  • included a few bits of code to tell WordPress where the different pieces of content go
  • added some menus and links that WordPress puts together automatically
  • begun familiarizing yourself with the WordPress loop and the ideas behind WordPress theming
There’s a lot more to creating a WordPress theme than what I’ve been able to cover here, of course. I hope I’ve whet your appetite to learn more.

Comments

Popular posts from this blog

How To Create A Website In 10 Minutes Step by Step Guide

How to create a website in 10 minutes: This step by step tutorial will help you create your website with WordPress in 10 minutes. How to create a website in 10 minutes Requirements: Technical skills: none Money: $10 or less if you sign up by clicking the links in this post .  Time: 10 minutes of actual work, maybe some waiting time here and there. It’s pretty so easy! Just like many people out there, I used to think starting your own website has to be really difficult and require special skills or lots of money, but guess what! I found out that creating your own website is as cool as playing around some buttons on Facebook. It’s actually fun. I now create websites as if I'm playing a video game.  Unlike in the yesteryears, you don’t have to learn any coding and all what not in order to create really sweet and wholesome websites. There are lots of web hosting service providers that help you get the job done pretty quickly. I personally use Nameche

Convert any website layout or template into a Drupal theme - easily!

Convert any website layout or template into a Drupal theme - easily!     Theming for Drupal is not actually as hard as you may think. Certainly there are more advanced areas of theming possible with Drupal, which may or may not be necessary depending on the needs of your site or whether there are subtle defaults which you wish to change (and which you can learn about if and when they become necessary for your site). Creating the "overall theme" for your site though is very simple. A Drupal theme is nothing more than a standard website layout, with a few bits of PHP code added in certain places, which you can simply copy/paste into place in order to call up Drupal's "dynamic" content and features in those spots. If you learn better visually, videos are available which cover much of the same information that will be illustrated here:  Acquia Webinar . Contributed/downloaded themes are more complex than "your" theme needs to be You may

TOP 7 DIRTY TRUTHS YOU MUST KNOW ABOUT WEB HOSTING SERVICE PROVIDERS

TOP 7 DIRTY TRUTHS YOU MUST KNOW ABOUT WEB HOSTING SERVICE PROVIDERS

BREAKING NEWS: President Mugabe Dies At 93

The longest serving President of Zimbabwe, Robert Gabriel Mugabe is reportedly dead. Last night, it appeared that the Zimbabwean Godfather, Robert Gabriel Mugabe died after all frantic efforts to wake him up proved futile. An autopsy will fully confirm the cause of death, but the best guess at the moment is a massive prostate cancer which he had been battling for a while now. State officials have not yet released the name of his immediate heir but from the look of things, his wife could probably assume his position temporary before proper arrangements are made. He left behind four children, namely; Bona Mugabe, Robert Peter Mugabe Jr., Chatunga Bellarmine Mugabe, Michael Nhamodzenyika Mugabe, and surviving spouse, Grace Mugabe. Robert Gabriel Mugabe born 21 February 1924 was the longest serving President of Zimbabwe, serving since 22 December 1987. As one of the leaders of the rebel groups in opposition to white minority rule, he was elected Prime

CONTENT CREATION, DELIVERY, AND MANAGEMENT

Content is the text, images, sound, and video that comprises Web pages. Creating and managing content is critical to website success because content is what a visitor is looking for at a website, and content is what the website owners use to sell the site, the product or service, and the company that stands behind the site. A successful Internet presence has always been about effective delivery of the information the visitor wants—“Content is king!” The following example illustrates the role content plays in successful online business operations and the key aspects of creating, delivering, and managing website content. For details, see How to Establish a Successful Online Business or Blog in 5 Steps . What is content management? Content Management is t he process of adding, revising, and removing content from a website to keep content fresh, accurate, compelling, and credible. Let’s see the success story of Akamai Technologies in creating, delivering and manag

How to make money online!

8 Reasons why your business NEEDS a professional website!

Like many small business owners, you may believe your business cannot benefit from having a website or that a website is not within your budget. Or maybe you think because you don’t use a computer, neither do your potential customers. These are misconceptions. These 8 reasons show why your company NEEDS a professional website, no matter what size your business. 1. YOUR SMALL BUSINESS WILL GAIN CREDIBILITYToday, more and more consumers use the internet to search for the products or services they need. Your small business will gain credibility by having a website. Without one, potential customers will go to your competitors that do. If you already have a website but it is "home-made", having it professionally redesigned will provide your business with a professional image which will inspire even greater confidence. For home-based businesses, this is particularly beneficial since you do not have a store front to promote your products or services. 2. A WEBS

Converting HTML Sites to WordPress Sites

Converting HTML Sites to WordPress Sites In the beginning (of the web) all websites were made with nothing but text and static HTML. Now though, over 20 years later, the web is a much different place. Websites are much more complex. They provide richer and more enjoyable experiences for site creators and visitors alike. Check it out, the world’s first website! See it live  here . This is in large part thanks to open source projects like WordPress. Which, over the last ten years or so, has succeeded in its core mission to democratize online publishing (and a lot more in the process) so that anyone with a WordPress install and the right theme/plugins can have a modern website with advanced design and functionality. No coding–not even HTML!–required. This is Divi by yours truly, Elegant Themes. This is one of the most advanced WordPress themes on the market today. And it requires zero coding ability to use! This is why to avid WordPress users like myself, it’s almos