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

To a limited extent one of this instructional exercise, we secured the essentials of changing over a HTML layout into a WordPress topic. In case you’re the littlest piece inquisitive, we took in a couple of things about part HTML layouts into PHP records, assembling them back, styling and naming WordPress topics. Truly, we took in a great deal, and you will need to acclimate yourself with the ideas we shrouded in our first instructional exercise to appreciate this second serving. In today’s post, we will take things a step higher. We will cover a couple of more ranges so you can make a completely practical WordPress topic. In this way, right away, here we go.

Also Read: How To Create A WordPress Theme from HTML Part 01

Configuring Images and JavaScript Files

On the off chance that you had pictures in your unique HTML format (index.html), you likely saw they quit appearing in the wake of cleaving up the layout into PHP documents. Try not to stress by any stretch of the imagination, it’s simply the way PHP is. For example, in the event that you had a logo in your header segment like so.…

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

you should play around with the code a bit. The code I will uncover in a minute will help programs to discover your logo (or some other picture) in your pictures organizer, which is (or ought to be) a subfolder of your subject’s primary registry. Along these lines, to show your logo in the header segment, open the header.php record and supplant the above code with the accompanying:

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

The get_template_directory_uri() work gives back the url for your topic registry. SO in the event that you include your logo into a pictures organizer, then the code will get that logo.

See any distinction? Clearly, this bit of code will settle your logo as it were. To settle different pictures, you should modify their codes in comparative design. Simple peasy stuff.

Give us a chance to proceed onward to JavaScript. In the event that your HTML site used JavaScript, make an organizer named js and place your scripts there. You can call them in the header.php record utilizing the accompanying code:

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

The above code utilizes example.js as a representation. Keep in mind to supplant that part with the name of your JavaScript document.

Obviously in case you’re making a subject for another person, then you should stack your js records with wp_enqueue_scripts. Checkout AJ’s presents on including JavaScript WordPress subjects for more data and tips.

Template Files

To some degree one of this instructional exercise, we said four essential layout documents to be specific index.php, header.php, sidebar.php and footer.php. Format documents control how your site will be shown on the web. Formats get data from your WordPress’ MySQL database and make an interpretation of the same into HTML code that is shown in web programs. As such, format documents are the building squares of WordPress subjects. To improve comprehension of formats, let us dive into an idea known as layout progressive system.

Firstly, WordPress will search for a layout record that matches the classification ID

In the event that the classification’s ID is, for example 2, WordPress will search for a format record named classification 2.php

In the event that classification 2.php is inaccessible, WordPress will go for a nonexclusive classification format record, for example, category.php

In the event that this format record is inaccessible too, WordPress will search for a non specific chronicle layout, for example, archive.php

In the event that the non specific chronicle format does not exist, WordPress will fall back on the principle layout record, index.php

That is the way WordPress formats work, and you can utilize these documents to tweak your WordPress subject to suit your requirements. Other layout documents include:

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 presented Template Files, it is quite reasonable to say some things about layout labels, and the part they play in WordPress theming. As per WordPress.org, “… format labels are utilized inside your blog’s layout to show data progressively or generally alter your blog, giving the devices to make it as individual and intriguing as you seem to be.”

In our past instructional exercise, you met a couple format labels, for example, get_header, get_sidebar, get_footer and bloginfo. In the accompanying area, we will add a couple layout labels to our recently made WordPress subject. I am expecting you’ve effectively incorporated the DOCTYPE affirmation in your header.php record. On the off chance that you haven’t, here is the code:

<!DOCTYPE HTML>

The DOCTYPE affirmation offers intending to your HTML code. With that off the beaten path, let us alter the opening HTML tag. We will incorporate a lang property utilizing the language_attributes label 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 presentation and language_attribute tag set up, your topic’s structure is genuine and programs will comprehend your code. On the off chance that you are making a subject for a blog, its essential to place connections to your pingback URL and RSS channel in your mind. In your header.php, include the accompanying 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 see how we utilized the bloginfo tag to incorporate the RSS channel (‘rss2_url’) and pingback (‘pingback_url’)? Before sparing your header.php document, include likewise the accompanying code:

<?php wp_head(); ?>

The above wp_head tag will pull in templates and JavaScript documents required by your modules. On the off chance that you forget this small bit of code, your modules won’t not act as craved. With that off the beaten path, let us add page titles to our WordPress topic utilizing – by and by – the bloginfo tag. In your header.php document, include the accompanying code:

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

The main label wp_title will include the title of your page or post and the second label bloginfo(‘name’) will include your blog name. Since your WordPress topic has page titles, we should make a screenshot for our subject, repackage the topic and take a rest?

Creating a Screenshot For Your Theme

When you transferred your test topic the first occasion when, you probably saw it did not have a screenshot in the WordPress Theme Panel. It looked dreary, particularly on the off chance that you had different subjects with beautiful screenshots. In any case, stress not, making a screenshot for your subject is simple. Simply make a picture utilizing your most loved picture editorial manager (e.g Adobe Photoshop) or take a screen get of your topic. Guarantee your picture is 600px wide and 450px high. Spare the picture as screenshot.png in your topic envelope. Spare all progressions, pack your topic organizer into a ZIP chronicle. Transfer the subject and enact it to see your new changes

Conclusion

I need to trust this second instructional exercise offered you more profound understanding into making a WordPress topic from static HTML. Sooner rather than later, I will acquaint you with different parts of WordPress theming, however meanwhile, I have arranged the accompanying assets only for you: