WordPress Theme Guide

How do you turn html into a WordPress Theme?

This article is geared towards students and is intended to be a refresher for when you need to translate HTML designs into a WordPress theme in a hurry. My assumptions are that you know enough HTML and PHP to work with WordPress and that you just need to be guided through the steps.
First we start with creating a new folder in the wp-content/themes folder to contain all of our WordPress theme and all of the files mentioned in this article. Our first file in our new WordPress theme is going to be style.css in the root folder you just created. This file is the heart of any theme, containing your custom css stylings and a header comment that credits the author, names the theme and points to your email and/or website.


The following is an example style.css file header comment. This comment is required and tells WordPress about your custom theme.


Next, create functions.php in the root of your and start it with the following code. This code adds your stylesheet to the output of the wp_head() function, and registers our sidebar widget area


Next create your index.php from the index.html of your design to provide a default template for your site. Replace your content with the relevant php tags. The following is a minimal example that breaks everything into div tags with id attributes all set for styling:

You now need to fill in the blanks of your template by chopping up your design’s index.html into a header, a footer and a sidebar. Save these files as header.php, footer.php and sidebar.php.


This is the top of the final rendered html documents. it should contain your <!doctype> tag, your <head> tags and usually your top navigation or banner.


This is the bottom of your site and should contain copyright info and the wp_footer(); function


This is a widget area in sidebar form. you registered this widget in functions.php above.

As a final note, custom page themes can be created by copying index.php and adding a comment to the top of the file.

The following is an example custom home page with a blog roll designed to work with Zurb Foundation 5’s grid system which I teach to my students. This is


Finally screenshot.png is an image that should be a screenshot of your theme in all it’s glory. WordPress will show this image on the Appearance->Themes page.

The above is the bare minimum you need to put together for a theme in the classes I teach, and should function as a crash course in building a WordPress theme from an html design. Of course WordPress theming is a deep rabbit hole with a lot of options and limitless possibilities, I encourage you to read the WordPress Codex! To get more in depth, check out the codex article on the matter.

Notice: Use of undefined constant WP_PB_URL_AUTHOR - assumed 'WP_PB_URL_AUTHOR' in /app/wp-content/plugins/adsense-box/includes/widget.php on line 164

Notice: Use of undefined constant WP_PB_URL_AUTHOR - assumed 'WP_PB_URL_AUTHOR' in /app/wp-content/plugins/adsense-box/includes/widget.php on line 164

Notice: Use of undefined constant WP_PB_URL_AUTHOR - assumed 'WP_PB_URL_AUTHOR' in /app/wp-content/plugins/adsense-box/includes/widget.php on line 164
Please wait...


Want to be notified when a new article is published? Enter your email address and name below to be the first to know.