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 make money online!

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

This step by step tutorial will help you create your website with WordPress 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 Namecheap. I have hosted over 20 sites with them so far for individuals, church organizations and businesses as a freelancer …

Low cpc adsense list 2017 URLs to block for Adsense & increase earnings

Low cpc adsense list 2017 URLs to block for Adsense & increase earnings

How do I block lower paying ads (Low cpc adsense list 2017 URLs) on AdSense? Does it help to improve CPC & RPM for the site?What ad networks should I block in Google AdSense's "Allow and Block Ad Networks" to maximize the earning?How can I unblock all of the Advertiser URLs (Low cpc adsense list 2017 URLs) at one time in Adsense?
How can I block Low cpc adsense list 2017 URLs?Step 1: Click on the Allow & Block Ads button on the left hand side of your adsense dashboard.Step 2: Click Advertisers URLsStep 3: Copy and paste the list of Low cpc adsense URLs below in the empty boxStep 4: Click Block URLs to block all  Low cpc adsense URLs [caption id="attachment_353" align="aligncenter" width="282"] 2017 list of Low cpc adsense URLs[/caption]
CONGRATULATIONS! It is done.
Low cpc adsense list 2017 URLs to block for adsense and increase earningsYou can subscribe to re…

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 the 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 managing content.

AKAMAI TECHNOLOGI…

GETTING INTO E-COMMERCE AND STARTING A NEW ONLINE BUSINESS

As described in How to Establish a Successful OnlineBusiness or Blog in 5 Stepsand throughout other books in the MoneyMaster Tutorials series, it is a terrific time to be an entrepreneur. The availability of cheap computer hardware, free or inexpensive software, and high-speed Internet access has created a powerful base from which to launch a new business and expand or transform existing ones.



How to Establish a Successful OnlineBusiness or Blog in 5 Stepsprovides a complete guide on how to start an online business. The following example of Mark Zuckerberg’s Facebook describes some of the steps involved in setting up a successful e-business.



FACEBOOK: MAKING A BUSINESS OUT OF FRIENDSHIP
Facebook founder and CEO Mark Zuckerberg has been named Time’s “Person of the Year” for 2010. Time said Zuckerberg was chosen “for connecting more than half a billion people and mapping the social relations among them; for creating a new system of exchanging information; and for changing how we all live …

Best web hosting service providers

There are several webhosting Companies out there, but only two can be shortlisted on my list for their efficiency and credibility with my company sites in the past years. That is, Namecheap.com for being the best domain name registrar and OrangeWebsite.comfor being the best hosting platform.




#1:Namecheap.com
Namecheap is the Domain Name Registrar with the BEST Customer Service. No doubt over 2 million customers trust them with nearly 5 million domains! Apart from being the undisputed  number 1 domain registrar, Namecheap also offer reliable web hosting services.

Click here to view hosting plan.


#2: OrangeWebsite.com

Since the establishment of the company in 2009, OrangeWebsite has been offering high-quality and secure web hosting solutions to its customers worldwide. Although the company data center is located in Iceland, they have clients from over 100 different countries. The award-winning customer support team and its skilled specialists are online 24 hours every day, 365 days a year to…

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

Warning:  This is a very long post. So, grab your cup of coffee and sit back tight or simply click here to download this post as an eBook in any format of your choice in order to read when you can.

TOP 7 DIRTY TRUTHS YOU MUST KNOW ABOUTWEB HOSTING SERVICE PROVIDERS
www.kumerictso.blogspot.com
©2016 Kum Eric Tso Published by Saint Ket Publishers
All rights reserved. This is protected under International Copyright Law. No Part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanized, photocopy, recording or otherwise without the prior permission of the author in writing.



INTRODUCTION
My name is Kum Eric Tso. I’m the CEO of BORN TO REIGN GROUP and the founding president of Voice of Dominion Ministries Int’l. I run quite a number of successful blogs online including moneymastertutorials.com. I wrote this eBook to denounce certain unethical activities in the web hosting industry and to help those who are just stepping out into …

Questions you might be asked when proposing a website

Once you've been asked to create a website and you sit down with the person or committee for whom you'll be working, be prepared to answer the following common questions.
Q: "Why should our church or organization bother with the building and upkeep of a website? We've gotten along fine without one so far!"


A: No ministry that relies on communication should be left in the dust as the world starts relying on the Internet more and more. It's the ultimate communications tool. It's a handy resource that can make available just about everything that the church or organization wants to offer the public, and over-all this can be accomplished much more cheaply than postal mailings and other methods of communication.




The website should become a serious tool that people rely on over and over again in large numbers. Otherwise, putting the church or organization on the Web will be just a temporary fad. This year: "Gee, isn't this nice; we're in Cyberspac…

Web secret revealed!

Download a free copy of this book today and avoid clumsy mistakes in choosing a web host for your business.


As the CEO of BORN TO REIGN GROUP with 60% of our investments in the internet and as a seasoned blogger, I wrote this eBook to denounce certain unethical activities in the web hosting industry and to help those who are just stepping out into the web building adventure to tread cautiously.



You agree with me that most online businesses are not always what they claim to be…

This is exactly true with almost all the web hosting services. Most online users, who step into web hosting without the right information, end up learning the wrong way. This eBook is written to help you avoid falling into some of the dirty tricks played by web hosting companies.


But if you’ve already been out there, then, you must have had your own fill of disappointment, delays, technical malfunctions, blacklisting, falsified services, spam, hacking and what have you?

Most hosting service providers tend to lull…