WordPress is the world’s favorite blogging software. It powers more than 68 million websites worldwide and is used by publishers like New York Times, Reuters and CNN. One of the reasons for WordPress’ immense popularity is its easy theming capabilities. Almost anyone with a bit of HTML and CSS knowledge can create a gorgeous WordPress theme.
In this post, we will learn how to create a WordPress theme from an existing HTML file.
[Note:This post assumes that you have some familiarity with HTML, CSS and WordPress, although you don’t need to know PHP].
Struggling to build your website? Learn how to build an online business website with WordPress in this course!
How WordPress Works
Before we can delve deeper into converting a HTML page into a WordPress theme, we need to understand how WordPress actually works.
As you might know, WordPress is based on PHP and MySQL. MySQL is the database backend while PHP is a server side scripting language. All your content is stored in a MySQL database, which can be called on by passing a PHP function.
As an analogy, consider PHP to be your favorite dog and all your content to be a pile of tennis balls. Every time you give a command – ‘fetch’ – PHP runs out and retrieves a ‘stick’ (i.e. some particular content).
To understand how this works, open up your WordPress installation, head to the Appearance -> Editor, and take a look at your theme’s Main Index Template (index.php) file. There will be some code enclosed within PHP tags calling on the header, like this:
<?php get_header() ?>
This PHP tag basically tells WordPress to retrieve all the content for the website header.
Now if you open Header.php, you will find a link to the website stylesheet:
<link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo(‘stylesheet_url’); ?>” />
Here, <?php bloginfo(‘stylesheet_url’); ?> is an in-built WordPress function that directs PHP to retrieve the blog’s default stylesheet, usually stored as Style.css in the root directory.
As you must already know, the stylesheet is the key to controlling how your website looks and feels. HTML is just the skeletal system of your website; CSS is the muscles and fat and clothes that makes it complete.
With that out of the way, we can now create our own theme from scratch.
Creating Your Own WordPress Theme from HTML
To create our own WordPress theme, we will use WordPress’ default TwentyTwelve theme. We will also need a copy of the HTML document that needs to be converted to WordPress. For editing the file, we will use Notepad, though you can also use any other text editor like NotePad++ or even a web editor like Dreamweaver.
Laying the Foundation: Files and Folders
Create a new folder on your desktop. Name it whatever you want your theme to be called, such as ‘UdemysAwesomeWPTheme’.
Now create two blank text files in the folder. Name one style.css, the other index.php (make sure to save as ‘All Files’ in Notepad).
style.css will serve as the primary CSS file for the theme. Index.php is the equivalent of Index.html used in HTML pages. This will also hold all the code for the main content of the page.
To help WordPress identify your theme, include the following information within a comment block in the style.css file:
Enclose this information within block comments (/*…*/)
Master CSS with this CSS Prep Course from Udemy.
Setting up CSS
Make sure that TwentyTwelve is the active theme. Then, navigate to Appearance -> Editor in your WordPress admin panel and open the style.css file. Copy the content of this file to the style.css file you created in the theme folder on your desktop. This will serve as the style foundation for our WordPress theme that we can edit later.
Setting up PHP Files
If you open the WordPress theme editor, you’ll find that each theme is divided into separate elements such as Header (header.php), Sidebar (sidebar.php), Main Index Template (index.php) and Footer (footer.php). This is the most basic structure of any WordPress theme which we will follow in our theme as well.
First, divide your HTML code into a header, sidebar, content area and footer. You may have already used identifying <div> tags to divide these sections in your HTML code.
Next, create three additional files in your theme folder. Name them header.php, sidebar.php and footer.php.
Copy the content of each of the HTML sections into their respective PHP files (Header section goes into header.php, Sidebar into sidebar.php, Main Content into index.php, etc.).
Next, log in to your WordPress admin panel and open up the theme editor. Open the header.php file and copy all the PHP code (i.e. code within the <?php…?> tags) and paste it into your newly built header.php file BEFORE the HTML.
Do the same for index.php, sidebar.php and footer.php – copy the PHP code from the TwentyTwelve theme and paste it into their respective PHP files in your theme directory. Make sure that you paste the PHP code before the HTML.
This is the barebones structure of our WordPress theme. We can now call on individual elements in our index.php file to create an entire page.
Fetching Page Elements
Remember how we talked about PHP being able to ‘fetch’ content with a simple function? We will now use this ability to put our theme together.
Open the index.php file that you created in your theme folder. Add the following code to the top of the file, just after the <body> tag:
<?php get_header(); ?>
This code utilizes a built-in WordPress function to fetch and display all the code from the header.php file. We will use this same code to get content for the sidebar and footer.
Add the following code to the bottom of your index.php page, just before the </body> tag:
<?php get_sidebar(); ?>
<?php get_footer(); ?>
There you have it – your first WordPress theme!
But wait. This theme is basically just a blank page at the moment. We will now add content to it using WordPress’ famous ‘loop’ function.
WordPress utilizes a string of code called ‘The Loop’ to pull content from a database and display it within a theme. After installing the loop function, you can effectively start blogging in your shiny new WordPress theme.
To use the loop, add the following code into your index.php file. Make sure to paste the code in the <div> that you’re using to hold all your main content:
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<div><?php the_time( ‘M j y’ ); ?></div>
<h2><a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
<div><?php the_author(); ?></div>
</div><!–end post header–>
<?php if ( function_exists( ‘add_theme_support’ ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?>
<div><?php comments_popup_link( ‘Leave a Comment’, ‘1 Comment’, ‘% Comments’ ); ?></div>
</div><!–end post footer–>
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
<div><?php next_posts_link( ‘Older Entries’ ); ?></div>
<div><?php previous_posts_link( ‘Newer Entries’ ); ?></div>
<?php else : ?>
<?php endif; ?>
You don’t have to understand this code (that will come later). Just make sure that you copy it as-is in your main content div.
You’ve now built a fully functional WordPress theme that can pull and display content from a database. The only thing left to do is to activate the theme.
Open up your favorite FTP client and log in to your website directory. Navigate towp-content -> themes folder. Upload your theme folder to this folder. Once the upload is finished, log in to your WordPress admin panel and open the Appearance -> Themes tab. Your theme should be visible here. Click on ‘Activate’ and enjoy your very first custom WordPress theme!
Take your WordPress theming skills to the next level with this course on Building Custom WordPress sites from Scratch.
What are your favorite WordPress theming tips and tricks? Share them in the comments!