How to Create Template WordPress Files

WordPress

When making a WordPress theme, once the basic HTML and CSS code has been created, you need to convert this into something WordPress can actually use. If you are ready to proceed to the next step, this tutorial will show you the right way to make template files for WordPress.

Step 1 – Understand What Template Files Are

To begin with, you need to know why you are making these files if you’re to understand what to do. Basically, WordPress requires an index.php file and style.css file to render all the necessary components.

But in modern WordPress themes, you’ll split up the index.php and include a separate set of files. These contain the data for the header, footer, and sidebar.

We are going to make a basic WordPress file with the following four files included:

• index.php
• header.php
• sidebar.php
• footer.php

Step 2 – Make Empty PHP Files

Create new files in your favourite coding editor. Do a separate one for all four. You should also have a folder with the name of your WordPress theme for organisation purposes. This should be ‘[your theme name]-demo-theme’.

Copy your stylesheet into this same folder. This is required at a later stage, but is something beyond the scope of this tutorial and irrelevant in our case.

Step 3 – Add Code to the Three Files

You don’t need any coding experience to follow this step. The code you need to add separately to each of these three files can be found below. Simply copy and paste everything in this guide and you’re ready to go. You don’t need to understand what they mean, but they will allow you to make the site you want.

Here’s the code for the header.php file:

<!-- add a class to the html tag if the site is being viewed in IE, to allow for any big fixes -->

<!–[if lt IE 8]><html class=”ie7″><![endif]–>

<!–[if IE 8]><html class=”ie8″><![endif]–>

<!–[if IE 9]><html class=”ie9″><![endif]–>

<!–[if gt IE 9]><html><![endif]–>

<!–[if !IE]><html><![endif]–>

<meta charset=”utf-8″ />

<meta name=”viewport” content=”width=device-width” />

<title>Title</title>

<link href=”style.css” rel=”stylesheet” media=”all” type=”text/css” />

<header role=”banner”>

<div class=”site-name half left”><!– site name and description –></div>

<div class=”site-name half left”>

<h1 class=”one-half-left” id=”site-title”><a title=”Title” rel=”home”>WordPress Theme Building</a></h1>

<h2 id=”site-description”>Description</h2>

</div>

<!– an aside in the header – this will be populated via a widget area later –>

<aside class=”header widget-area half right” role=”complementary”>

<div class=”widget-container”>This will be a widget area in the header – address details (or anything else you like) goes here</div><!– .widget-container –>

</aside><!– .half right –>

</header><!– header –>

<!– full width navigation menu – delete nav element if using top navigation –>

<nav class=”menu main”><?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>

<div class=”skip-link screen-reader-text”><a title=”Skip to content” href=”#content”>Skip to content</a></div>

<ul>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>Latest news</a></li>

<li><a href=”#”>Featured articles</a></li>

</ul>

</nav><!– .main –>

<div class=”main”>

Now here’s the code for the sidebar.php file:

<!-- the sidebar - in WordPress this will be populated with widgets -->

<aside class=”sidebar widget-area one-third right” role=”complementary”>

<div class=”widget-container”>

<h3 class=”widget-title”>A sidebar widget</h3>

<p>This is a sidebar widget, in your WordPress theme you can set these up to display across your site.</p>

</div><!– .widget-container –>

<div class=”widget-container”>

<h3 class=”widget-title”>Another sidebar widget</h3>

<p>A second sidebar widget, maybe you could use a plugin to display a social media feed, or simply list your most recent posts.</p>

</div><!– .widget-container –>

</aside>

This is the third chunk of code for the footer.php file:

<!-- .main -->

<footer>

<!– the .fatfooter aside – I use this to enable a screen-wide background on the footer while still keeping the footer contents in line with the layout –>

<aside class=”fatfooter” role=”complementary”>

<div class=”first quarter left widget-area”>

<div class=”widget-container”>

<h3 class=”widget-title”>First footer widget area</h3>

<p>A widget area in the footer – use plugins and widgets to populate this.</p>

</div><!– .widget-container –>

</div><!– .first .widget-area –>

<div class=”second quarter widget-area”>

<div class=”widget-container”>

<h3 class=”widget-title”>Second footer widget area</h3>

<p>A widget area in the footer – use plugins and widgets to populate this.</p>

</div><!– .widget-container –>

</div><!– .second .widget-area –>

<div class=”third quarter widget-area”>

<div class=”widget-container”>

<h3 class=”widget-title”>Third footer widget area</h3>

<p>A widget area in the footer – use plugins and widgets to populate this.</p>

</div><!– .widget-container –>

</div><!– .third .widget-area –>

<div class=”fourth quarter right widget-area”>

<div class=”widget-container”>

<h3 class=”widget-title”>Fourth footer widget area</h3>

<p>A widget area in the footer – use plugins and widgets to populate this.</p>

</div><!– .widget-container –>

</div><!– .fourth .widget-area –>

</aside><!– #fatfooter –>

</footer>

Step 4 – Populating the Index File

The next part is to setup your index.php file correctly, which requires slightly more patience. Add in the PHP functions so WordPress will add in the header, footer, and sidebar.

Begin with the following code:

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

But leave a gap between the opening header include and the sidebar include. This space is where you’ll add in extra code that doesn’t go in these areas on the site.

From here you have more code to enter. This is another long piece of code found below. Paste this into this file and you’re ready to get going.

This last piece of code should go into the Index.php file and below the get_header() file:

<div class="two-thirds" id="content">

<article class=”post” id=”01″>

<h2 class=”entry-title”>This is the title of a post or page</h2>

<img class=”size-large” alt=”” src=”images/featured-image.jpg” />

<section class=”entry-meta”>

<p>Posted on …</p>

</section><!– .entry-meta –>

<section class=”entry-content”>

<p>This is the content of the post. On an archive page it might be an excerpt of the post or you might include the entire content.</p>

<h3>Images in WordPress</h3>

<img class=”alignright” alt=”” src=”images/another-image.jpg” />

</section><!– .entry-content –>

<section class=”entry-meta”>

<h3>Post Categories and Tags</h3>

<p>In this section you can display information about the categories and tags associated with your post.</p>

</section><!– .entry-meta –>

</article><!– #01–>

</div><!– #content–>

Step 5 – What’s Next?

Next it’s your job to add in the styling requirements. This goes far beyond the scope of this tutorial, but from here you’ll need to know some CSS to proceed. We recommend contacting a professional if you’re not an expert in this field.

CSS requires you to understand the coding language, rather than just copying and pasting what someone else has done.

Conclusion

You must remember that this is the most basic form of index file. Many of the more advanced WordPress themes could have more files, with lots of different customisation options to provide users with additional functions.

If you’re looking for something specific, don’t hesitate to get in touch with a professional.

Source:

  1. http://code.tutsplus.com/tutorials/creating-a-wordpress-theme-from-static-html-creating-template-files–wp-33939
Share it!Share on FacebookTweet about this on TwitterShare on Google+Email this to someone

Our Recommended Wordpress Web Hosting Provider

WordPress

WHC.CA
Get a 50% Discount by using our link.

WHC.ca

Reliable host, with excellent customer service and an easy one-click Wordpress installation. Our recommendation to host a Wordpress blog.

Leave a Reply

Your email address will not be published. Required fields are marked *