Create a WordPress HTML5 Template from a responsive website Part 2

Welcome to the second part of my tutorial on how to create a WordPress HTML5 template from an existing website. Be sure to read the first part before continuing here.

We have created a new HTML5 WordPress template that currently displays our home page including a menu, that can be customized through WordPress and three new posts for our slider content boxes. The next step is to create new layouts for posts and pages. As explained in the previous part of this tutorial the navigation items “About”, “Contact” and “Portfolio” would link to pages while the “Read more” links would rather link to posts. Check out the live demo of what we will be creating.

For our posts we might want to display the post content with a sidebar next to it. That sidebar should contain a list of our categories, recent comments and a tag cloud showing the most used tags (just like I did for Lingulo). Let´s start by creating a new file single.php which will contain the layout for our posts. Copy the whole content from our index.php file and paste it into the newly created single.php file. We will adapt this file now and remove the parts we don´t need on our posts.

Feel free to keep any parts you would like to be seen on your posts. In our example however we would like to have a completely different layout for our posts than for our index page and therefore we remove the whole content and add only two sections. To do so remove all code from our single.php file except of the get_header() and get_footer() functions. Now let´s add two new sections, the first one is our main content (we use the HTML5 article tag for that). The second section would be our sidebar. HTML5 has a special tag for sidebars, the aside tag which we will use. So let´s create those two sections and give each a class, I chose the classes post-content for the article and sidebar for our sidebar.

In order to separate the content in our sidebar we also add a div for each section (tag cloud, categories and latest comments). I chose to use the div tags in this case rather than section tags because the sidebar content is simply not important enough to be wrapped by a section tag. The section tag should only be used when the content is part of the document´s outline which is not the case for our sidebar content.

In the post-content article we add the WordPress loop (we have already talked about the loop in the first part of this tutorial). That way we have access to the post content, post title and so on of the current post.

<article class="post-content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1>
<?php the_title(); ?></a></h1>
<?php the_content(); ?><?php endwhile; endif; ?>
</article>

Inside the loop we add our main heading h1 showing the title of the current post. We can do that using the function the_title() which displays the title of the current post. Just after the h1 heading we add the function the_content() to show the content of our post. Since WordPress automatically adds p tags around our texts we do not need to add a container around the the_content() function.
This basic code will now display the title and the content of our posts. Next let´s add our sidebar content.

It is best practive to not add the sidebar content directly into the single.php file. We rather outsource the sidebar into a separate file called sidebar.php. Create that file now and cut the code we have added to our aside element pasting it into the newly created file. Add the function get_sidebar() into the aside element in our single.php file. That function will take care of including the sidebar content. The whole single.php file should look like this now:

<?php get_header(); ?>
<article class="post-content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1>
<?php the_title(); ?></a></h1>
<?php the_content(); ?><?php endwhile; endif; ?>
</article>
<aside class="sidebar">
<?php get_sidebar(); ?></aside>
<?php get_footer(); ?>

Now let´s add some code to our sidebar.php file. We already have three div for our three sections of the sidebar. In the first div we would like to display all categories. The function wp_list_categories will do exactly that. It will display all categories as li items. You can pass some arguments to the function, check this out to find out more. We will add the arguments orderby=name&order=ASC&title_li= in order to make WordPress order the categories by name in an ascending order (first categories which start with an “A”, then with a “B” and so on). By default WordPress adds a heading “Categories” to our category list. To remove that we used title_li= setting the title to nothing.
Since the function wp_list_categories returns li elements we need to wrap the function with a ul tag. The first div should now look like this:

<div>
<h2>Categories</h2>
<ul>
<?php wp_list_categories('orderby=name&order=ASC'); ?></ul></div>

Let´s move on to the next part of our sidebar, the tag cloud. WordPress offers a function wp_tag_cloud which displays tags depending on their frequency. So if a tag has been used more than another one then it will be displayed larger. You can define lots of things by passing arguments to the function. Check out all the arguments here. We are only going to use the argument number which defines the maximum number of tags we would like to display. The code for your tag cloud should look like this now:

<div>
<h2>Tag Cloud</h2>
<p class="tag-cloud">
<?php wp_tag_cloud('number=30'); ?></p></div>

The last part of our sidebar should show the three most recent comments. WordPress offers the function get_comments() which returns an array of comments. We can of course again pass some arguments to the function, check them out here. We will add two arguments, the first one status=approve makes sure only approved comments will be displayed. The second argument number=3 defines that only three comments should be returned.

<div>
<h2>Recent comments</h2>
<?php $comments = get_comments('status=approve&number=3'); ?>
<ul>
<?php foreach ($comments as $comment) { ?>
<li>
<a href="<?php echo get_permalink($comment->comment_post_ID); ?>#comment-<?php echo $comment->comment_ID; ?>"> <?php echo strip_tags($comment->comment_author); ?>: <?php echo wp_html_excerpt( $comment->comment_content, 35 ); ?>... </a></li><?php } ?></ul></div>

The first step is to define a variable $comments which holds the array returned by the get_comments function. Then we start an unordered list and loop over the comments. Inside each loop we create a li element with a link inside. The link should redirect the user to the post in which the comment has been written. We use the function get_permalink giving it the ID of the post in which the comment has been written as argument. get_permalink will take care of displaying the absolute path to the post. That is not enough however since we would like to link directly to the comment. You can do that in WordPress by adding the comment ID with a hashtag just after the URL of the post. For example: http://www.lingulo.com/tutorials/php/create-wordpress-template-html5-responsive-website links to the first part of the WordPress tutorial. If we would like to link to some comment we simply add #comment-ID to the link where ID is the ID of the comment. So http://www.lingulo.com/tutorials/php/create-wordpress-template-html5-responsive-website#comment-513 would link directly to the comment with the ID 513.

Knowing that we simply add #comment-<?php echo $comment->comment_ID; ?> after the get_permalink function. As link text we would like to display an excerpt of the comment (the first 35 letters). We can do that using the function wp_html_excerpt passing the comment content as well as the length at which the comment should be cut as arguments.

Now that we have our sidebar content let´s begin styling our posts. You can style them however you would like to. I would like the post-content and the sidebar to be centered on the website. To achieve that I will wrap both with a container with the class post-container. Then I will center that container and let both the post-content as well as the sidebar float inside it. I will not go into detail about how to create the CSS code for our post layout. Feel free to play around to find the best layout for your posts. If you can´t think of any layout this is my very basic CSS code without any fancy styling.

Now that we have created a layout for our posts let´s move on to creating a layout for the pages. To build a layout for pages we need to create a new file called page.php. You can make the layout look however you want to but I will for the sake of simplicity create the same layout like the post layout without the sidebar. This is the very basic CSS code I used for WordPress pages.

If you add some content to your pages now you should be able to see the title of your post with the content below. We will now add some more content to our pages. In our portfolio page we might want to display a gallery showing our latest works. I tested lots of different gallery plugin but none of them were really good to integrate in our current design. However there is one plugin called “Image Gallery” by HugeIT which seems to be really good. To install that plugin simply go to “Plugins -> Add new” in the left sidebar of your WordPress admin section. Then search for “huge it image gallery” and click on “Install”. You will be asked to enter your FTP password in order for WordPress to be able to install the plugin on your server. When you have installed the gallery plugin click on “Huge IT Gallery” in the sidebar and then click on “Add New Gallery” to create a new gallery. You can now change the gallery layout and add all the images you would like to use. You can use my royalty-free image search engine Open-Image.net to find images for your page. When you are finished you need to add that gallery to your portfolio page. To do so simply edit that page and then click on the “Add Gallery” button. Now choose the gallery you have just created and save your page.

Next let´s add a contact form to our contact page. In WordPress this is done in 1 minute using a plugin like “Contact Form 7”. Install that or a similar plugin just like you installed the gallery. After you have activated the plugin you should see a menu item “Contact” in the left sidebar. Click on it and create a new form or edit the existing one. Since the existing one is good for our case we can simply use that one. Copy the shortcode of your form and add it into the contact page.

Because of the css code we added to our input fields the background color of the input fields is currently equal to the background color of our page. To change that we can add some CSS code to our style.css file overwriting the colors for all forms inside a div with the class .wpcf7. This would be my CSS code for the forms.

We have created layouts for our pages and posts now. Let´s add some more functionality to our home page and do some further changes in order optimize your website for search engines.

As you know on our home page we have a little search box inside an orange box. Right now that search form does not have any functionality. With WordPress however it is fairly simple to add a search function to your website that will search any posts and pages and displays the results. In order to implement a search function we first need to add a new file called search.php. That file will contain the layout of the results page of a search. So if a user enters a search term he/she will be redirected to the search.php file which then outputs the results of the search. Let´s create that file now and add the following code:

<?php get_header(); ?>
<div class="page-container">
<?php if (have_posts()) : ?>
<div class="searchresults">Results for <strong><?php echo $s ?></strong></div>
<?php while (have_posts()) : the_post(); ?>
<div class="page-content">
<div>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_content('Read More'); ?></div></div></div>
<?php endwhile; ?>
<?php else : ?>
<div class="page-content">
<h1>We are sorry</h1>
<p>Unfortunately your search did not return any results. Please try searching for a different search term.
</div><?php endif; ?></div>
<?php get_footer(); ?>

We would like the search results to be displayed similar to our page layout without a sidebar. To do so we again use the .page-container. Then we add a .searchresults div which displays “Results for “. We can use the variable $s to display the search term. Next we start the loop and tell WordPress that while there are results to display it should display those results. So if nothing has been found for a search term WordPress will directly go into the else case.

While there are results we would like to display a .page-content wrapper with the h2 heading of the post or page that has been found. The heading should be a link redirecting to the post or page. To do so we can again use the_permalink() to display the link and the_title() to display the title of the post or page. Then we create another wrapper with the class .entry which contains the content of the post or page. WordPress will automatically cut the content if you have added a “more” link inside the post or page (to do so click on the “more” button when creating or editing a post or page at the point where you would like WordPress to cut the content). We also pass the text of the “Read More” link displayed after the excerpt. In the else case we simply display a “No results found” text. Now you only need to add some styling for the search page, I used these two rules.

We also need to adapt the search form in our index.php file. The action of our form should be either empty or the base URL of your WordPress install. The method should be get. Then give the text input field an argument name with the value “s”.

You should be able to search for a term and see the results found for the term.

We now have successfully integrated the HTML5 website we have built in the previous tutorials into WordPress. The next step for you would be to install some really useful plugins which will help you get a better ranking in search engines and improve page speed.

My personal preference as a SEO tool is Yoast WordPress SEO. You should install this plugin and be sure to get at least an “OK” for every post or page (yellow circle), better try to get a Good (green circle). To achieve this you need to provide a good focus keyword for your posts and pages as well as a good title and meta description. Be sure to only use each focus keyword once, don´t repeat focus keywords in multiple posts/pages. Also try to add that focus keyword into your title and into the content.

So let´s say your focus keyword is “pug food” then your title should contain that term, for example “Best tested pug food”. The same applies to your meta description. Be sure it has the right length and contains the focus keyword at least once. In your content the focus keyword should appear as often as possible.

Next go to Settings -> Permalink and choose “Custom structure”, then insert this: /%category%/%postname%/. That way instead of your posts having an URL like http://www.example.com?p=43 they rather have an URL like http://www.example.com/dog-food/best-tested-pug-food. It is important for search engines to have the focus keyword inside the URL name and I found this to be the best URL structure.

Next install the plugin “Google Analytics by Yoast” which takes care of adding your Analytics code into every page or post. The best part is: you can define that admins or moderators should not be counted. That way you have a good overview over your visitors without counting your own page impressions (and it´s better than blacklisting your IP using a filter).

The last plugin that everybody needs is “W3 Total Cache”. Using that plugin you can make your website a lot faster. The plugin will take care of caching your content, that way when a user visits your website he will see the cached version. No database requests are needed to retrieve the content.

That´s it for now, I might be adding some content to this tutorial later. Is there something missing I didn´t talk about or do you have other questions? Please add a comment below.