Menu Close

WordPress Tutorial: How To Create A WordPress Theme From HTML (Part 2)

default

In part one of this tutorial, we covered the basics of converting an HTML template into a WordPress theme. If you’re the tiniest bit curious, we learned a few things about splitting HTML templates into PHP files, putting them back together, styling and naming WordPress themes. Really, we learned a lot, and you will want to familiarize yourself with the concepts we covered in our first tutorial to enjoy this second serving. In today’s post, we will take things a notch higher. We will cover a few more areas so you can create a fully functional WordPress theme. So, without further ado, here we go.

Configuring Images and JavaScript Files

If you had images in your original HTML template (index.html), you probably noticed they stopped showing after chopping up the template into PHP files. Don’t worry at all, it’s just the way PHP is. For instance, if you had a logo in your header section like so…

<img alt="your_logo_alt_text" src="images/logo.jpg" />

…you will need to play around with the code a bit. The code I will reveal in a moment will help browsers to find your logo (or any other image) in your images folder, which is (or should be) a subfolder of your theme’s main directory. So, to display your logo in the header section, open the header.php file and replace the above code with the following:

<img alt="your_logo_alt_text" src="<?php echo get_template_directory_uri(); ?>/images/logo.jpg" />

The get_template_directory_uri() function returns the url for your theme directory. SO if you add your logo into an images folder, then the code will grab that logo.

Notice any difference? Obviously, this piece of code will fix your logo only. To fix other images, you will need to rewrite their codes in similar fashion. Easy peasy stuff.

Let us move on to JavaScript. If your HTML website utilized JavaScript, create a folder named js and place your scripts there. You can call them in the header.php file using the following code:

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/example.js"></script>

The above code uses example.js as an illustration. Don’t forget to replace that part with the name of your JavaScript file.

Of course if you’re creating a theme for someone else, then you really should load your js files with wp_enqueue_scripts. Checkout AJ’s posts on adding JavaScript to WordPress themes for more info and tips.

Template Files

In part one of this tutorial, we mentioned four basic template files namely index.php, header.php, sidebar.php and footer.php. 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. In other words, template files are the building blocks of WordPress themes. To get a better understanding of templates, let us delve into a concept known as template hierarchy.

We will use an analogy. If a visitor clicks an a category link (i.e. link to a category) such as http://www.yoursite.com/blog/category/your-category/, WordPress utilizes template hierarchy to generate the right file (and content) as explained below:

  • Firstly, WordPress will look for a template file that matches the category ID
  • If the category’s ID is, for instance 2, WordPress will look for a template file named category-2.php
  • If category-2.php is unavailable, WordPress will go for a generic category template file such as category.php
  • If this template file is unavailable as well, WordPress will look for a generic archive template such as archive.php
  • If the generic archive template does not exist, WordPress will fall back on the main template file, index.php

That’s how WordPress templates work, and you can use these files to customize your WordPress theme to suit your needs. Other template files include:

home.php or index.php Used to render the blog posts index
front-page.php Used to render static pages or latest posts as set in front page displays
single.php Used to render a single post page
single-{post-type}.php Used to render custom post types e.g. if post-type was a product, WordPress would use single-product.php
page.php Used to render static pages
category.php or archive.php Used to render Category Archive index
author.php Used to render the author
date.php Used to render date
search.php Used to render search results
404.php Used to render server 404 error page

This is just a short list, there are many other WordPress templates. The topic of templates is a big one, and the best way to learn how to play with template files is by reading the extensive Theme Development library at WordPress. Alternatively, you can read the shorter Templates Section at WordPress Codex.

Template Tags

Seeing that we just introduced Template Files, it is only fair to mention a thing or two about template tags, and the role they play in WordPress theming. According to WordPress.org, “…template tags are used within your blog’s template to display information dynamically or otherwise customize your blog, providing the tools to make it as individual and interesting as you are.”

In our previous tutorial, you met a few template tags such as get_header, get_sidebar, get_footer and bloginfo. In the following section, we will add a few template tags to our newly-created WordPress theme. I am assuming you’ve already included the DOCTYPE declaration in your header.php file. If you haven’t, here is the code:

<!DOCTYPE HTML>

The DOCTYPE declaration gives meaning to your HTML code. With that out of the way, let us modify the opening HTML tag. We will include a lang attribute using the language_attributes tag like so:

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>

The above code will generate the following:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">

With the DOCTYPE declaration and language_attribute tag in place, your theme’s structure is legit and browsers will understand your code. If you are creating a theme for a blog, its important to place links to your pingback URL and RSS feed in your head. In your header.php, add the following code:

<link title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" rel="alternate" type="application/rss+xml" /><link href="<?php bloginfo('pingback_url'); ?>" rel="pingback" />

Did you notice how we employed the bloginfo tag to include the RSS feed (‘rss2_url’) and pingback (‘pingback_url’)? Before saving your header.php file, add also the following code:

<?php wp_head(); ?>

The above wp_head tag will pull in stylesheets and JavaScript files required by your plugins. If you leave out this tiny piece of code, your plugins might not work as desired. With that out of the way, let us add page titles to our WordPress theme using – once again – the bloginfo tag. In your header.php file, add the following code:

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

The first tag wp_title will add the title of your page or post and the second tag bloginfo(‘name’) will add your blog name. Now that your WordPress theme has page titles, how about we create a screenshot for our theme, repackage the theme and take a rest?

Creating a Screenshot For Your Theme

When you uploaded your test theme the first time, you must have noticed it lacked a screenshot in the WordPress Theme Panel. It looked drab, especially if you had other themes with colorful screenshots. But worry not, creating a screenshot for your theme is very easy. Just create an image using your favorite image editor (e.g Adobe Photoshop) 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

I want to believe this second tutorial offered you deeper insight into creating a WordPress theme from static HTML. In the near future, I will introduce you to other aspects of WordPress theming, but in the meantime, I have prepared the following resources just for you:

Happy creating!

View Source
Posted in WordPress