Creating a WordPress Theme from HTML: Part 2 Tutorial

Converting an HTML template into a WordPress theme can be a daunting task, but with the right guidance, it can be a breeze. In part one of this tutorial, we covered the basics of converting an HTML template into a WordPress theme. We learned about splitting HTML templates into PHP files, putting them back together, styling, and naming WordPress themes. In this second part, we will take things up a notch and cover a few more areas to help you create a fully functional WordPress theme.

Configuring Images and JavaScript Files

If your original HTML template had images, you probably noticed that they stopped showing after chopping up the template into PHP files. This is because PHP works differently from HTML. To fix this issue, you need to modify the code a bit. For instance, if you had a logo in your header section like so:

your_logo_alt_text

You will need to replace it with the following code in the header.php file:

your_logo_alt_text

Template Files

Template files control how your website will be displayed on the web. Templates get information from your WordPress’ MySQL database and translate the same into HTML code that is displayed in web browsers. Template files are the building blocks of WordPress themes.

WordPress utilizes template hierarchy to generate the right file (and content) when a visitor clicks on a category link. The hierarchy is as follows:

1. WordPress looks for a template file that matches the category ID.

2. If the category’s ID is unavailable, WordPress will look for a template file named category-2.php.

3. If category-2.php is unavailable, WordPress will go for a generic category template file such as category.php.

4. If this template file is unavailable as well, WordPress will look for a generic archive template such as archive.php.

5. If the generic archive template does not exist, WordPress will fall back on the main template file, index.php.

Other template files include home.php or index.php, front-page.php, single.php, single-{post-type}.php, page.php, category.php or archive.php, author.php, date.php, search.php, and 404.php.

Template Tags

Template tags are used within your blog’s template to display information dynamically or otherwise customize your blog. In our previous tutorial, we met a few template tags such as get_header, get_sidebar, get_footer, and bloginfo. In this section, we will add a few more template tags to our newly-created WordPress theme.

To modify the opening HTML tag, we will include a lang attribute using the language_attributes tag like so:

The above code will generate the following:

To include links to your pingback URL and RSS feed in your head, add the following code to your header.php:

” rel=”pingback” />

To pull in stylesheets and JavaScript files required by your plugins, add the following code before saving your header.php file:

To add page titles to your WordPress theme, add the following code to your header.php file:

<?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?>

Creating a Screenshot For Your Theme

Creating a screenshot for your theme is very easy. Just create an image using your favorite image editor or take a screen grab of your theme. Ensure your image is 600px wide and 450px high. Save the image as screenshot.png in your theme folder. Save all changes, compress your theme folder into a ZIP archive. Upload the theme and activate it to see your new changes.

Conclusion

Converting an HTML template into a WordPress theme can be a challenging task, but with the right guidance, it can be a breeze. We hope this tutorial has offered you deeper insight into creating a WordPress theme from static HTML. To learn more about WordPress theming, check out the extensive Theme Development library at WordPress or the shorter Templates Section at WordPress Codex. Happy creating!

Stay in Touch

spot_img

Related Articles