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

Partially one amongst this tutorial, we lined the basics of fixing an HTML template proper right into a WordPress theme. Within the occasion you’re the tiniest bit curious, we found a few points about splitting HTML templates into PHP info, inserting them once more collectively, styling and naming WordPress themes. Truly, we found a lot, and you may wish to familiarize your self with the concepts we lined in our first tutorial to have the benefit of this second serving. In proper now’s put up, we’ll take points a notch bigger. We’ll cowl a few additional areas so chances are you’ll create a very purposeful WordPress theme. So, with out further ado, proper right here we go.

Configuring Images and JavaScript Info

Within the occasion you had images in your genuine HTML template (index.html), you probably noticed they stopped displaying after chopping up the template into PHP info. Don’t worry the least bit, it’s merely the best way during which PHP is. For instance, within the occasion you had a model in your header half like so…

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

…you’ll want to fiddle with the code a bit. The code I will reveal in a second will help browsers to hunt out your model (or each different image) in your images folder, which is (or have to be) a subfolder of your theme’s essential itemizing. So, to point out your model inside the header half, open the header.php file and alter the above code with the following:

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

The get_template_directory_uri() function returns the url in your theme itemizing. SO within the occasion you add your model into an images folder, then the code will seize that model.

Uncover any distinction? Clearly, this piece of code will restore your model solely. To restore totally different images, you’ll want to rewrite their codes in comparable development. Simple peasy stuff.

Permit us to switch on to JavaScript. In case your HTML website utilized JavaScript, create a folder named js and place your scripts there. It’s possible you’ll identify them inside the header.php file using the following code:

<script type="textual content material/javascript" src="<?php echo get_template_directory_uri(); ?>/js/occasion.js"></script>

The above code makes use of occasion.js as an illustration. Don’t overlook to interchange that half with the title of your JavaScript file.

In spite of everything within the occasion you’re making a theme for an additional individual, then you definitely definately truly should load your js info with wp_enqueue_scripts. Checkout AJ’s posts on together with JavaScript to WordPress themes for extra info and options.

Template Info

Partially one amongst this tutorial, we talked about four elementary template info particularly index.php, header.php, sidebar.php and footer.php. Template info administration how your website shall be displayed on the web. Templates get information out of your WordPress’ MySQL database and translate the an identical into HTML code that is displayed in internet browsers. In several phrases, template info are the establishing blocks of WordPress themes. To get a larger understanding of templates, permit us to delve into an thought usually referred to as template hierarchy.

We’ll use an analogy. If a buyer clicks an a category hyperlink (i.e. hyperlink to a category) akin to, WordPress makes use of template hierarchy to generate the right file (and content material materials) as outlined beneath:

  • Firstly, WordPress will seek for a template file that matches the category ID
  • If the category’s ID is, for instance, 2, WordPress will seek for a template file named category-2.php
  • In Case category-2.php is unavailable, WordPress will go for a generic class template file akin to class.php
  • If this template file is unavailable as successfully, WordPress will seek for a generic archive template akin to archive.php
  • If the generic archive template does not exist, WordPress will fall once more on the first template file, index.php

That’s how WordPress templates work, and you need to use these info to customize your WordPress theme to suit your needs.

Completely different template info embrace:
residence.php or index.php Used to render the weblog posts index
front-page.php Used to render static pages or latest posts as set in entrance internet web page exhibits
single.php Used to render a single put up internet web page
single-{post-type}.php Used to render custom-made put up varieties e.g. if post-type was a product, WordPress would use single-product.php
internet web page.php Used to render static pages
class.php or archive.php Used to render Class Archive index
creator.php Used to render the creator
date.php Used to render date
search.php Used to render search outcomes
404.php Used to render server 404 error internet web page

That’s solely a quick itemizing, there are a whole lot of totally different WordPress templates. The topic of templates is a gigantic one, and one of many easiest methods to find methods to play with template info is by finding out the in depth Theme Progress library at WordPress. Alternatively, chances are you’ll study the shorter Templates Half at WordPress Codex.

Template Tags

Seeing that we merely launched Template Info, it is solely trustworthy to say an element or two about template tags, and the place they play in WordPress theming. In accordance with, “…template tags are used inside your weblog’s template to point out information dynamically or in another case customise your weblog, providing the devices to make it as specific individual and engaging as you may be.”

In our earlier tutorial, you met a few template tags akin to get_header, get_sidebar, get_footer and bloginfo. Inside the following half, we’ll 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. Within the occasion you haven’t, proper right here is the code:


The DOCTYPE declaration gives which suggests to your HTML code. With that out of the best way during which, permit us to switch the opening HTML tag. We’ll embrace a lang attribute using the language_attributes tag like so:

<html xmlns="" <?php language_attributes(); ?>
The above code will generate the following:
<html xmlns="" lang="en-US">

With the DOCTYPE declaration and language_attribute tag in place, your theme’s building is legit and browsers will understand your code. In case you’re making a theme for a weblog, its essential to place hyperlinks to your pingback URL and RSS feed in your head. In your header.php, add the following code:

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

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

<?php wp_head(); ?>

The above wp_head tag will pull in stylesheets and JavaScript info required by your plugins. Within the occasion you cross over this tiny piece of code, your plugins could not work as desired. With that out of the best way during which, permit us so as to add internet web page titles to our WordPress theme using – as quickly as as soon as extra – the bloginfo tag. In your header.php file, add the following code:

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

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

Making a Screenshot For Your Theme

Everytime you uploaded your check out theme the first time, you could possibly have noticed it lacked a screenshot inside the WordPress Theme Panel. It appeared drab, notably within the occasion you had totally different themes with vibrant screenshots. Nevertheless worry not, making a screenshot in your theme might be very simple. Merely create an image using your favorite image editor (e.g Adobe Photoshop) or take a show display screen seize of your theme. Assure your image is 600px intensive and 450px extreme. Save the image as screenshot.png in your theme folder. Save all changes, compress your theme folder proper right into a ZIP archive. Add the theme and activate it to see your new changes ?

Download The WPSaviour App Now

Related posts
BlogWordPress Security

WordPress SEO Tutorial (From Beginner to Advanced)


How to Highlight Author’s Comments in WordPress


How to Separate Trackbacks from Comments in WordPress


How to Display Today’s Date in WordPress?

Pay in your preferred currency
Indian rupee