Advertisement
Theme Development

Creating a WordPress Theme From Static HTML: Adding a Loop

by

In the first three parts of this series, you learned how to prepare static HTML for WordPress and to create a theme by splitting your HTML file into a set of template files and editing the stylesheet. You then uploaded your theme to WordPress and activated it.

The theme still isn't displaying any content you add via the WordPress admin however; to do that you need to add a loop to your template files.

At the moment your theme only has one main template file - index.php - so you'll add a loop to that.


What You'll Need

  • Your code editor of choice
  • A browser for testing your work
  • Image software for saving your screenshot in the right dimensions
  • A WordPress installation, either local or remote
  • If you're working locally, you'll need MAMP, WAMP or LAMP to enable WordPress to run
  • If you're working remotely, you'll need FTP access to your site plus an administrator account in your WordPress installation

1. Adding a Page in WordPress

I'm going to assume that you already know how to use the WordPress admin to add a page. I'm going to create a page called 'Home', add some dummy content to it and then edit the 'Reading Settings' in WordPress so that this is the home page, rather than the blog post listing.

I'll use the content from my static site as the content for my new page, except I won't add the first, full-width image to the content - you'll learn how to add an image like this to your theme as a featured image in Part 10 of this series.

So go ahead and create a page, include some images if you like, and edit the 'Reading Settings' page so your new page is the home page.


2. Adding a Loop

Having created your new page, visit your site's home page again. You'll find that nothing has changed - WordPress isn't displaying the content of your page. That's because you need to add a loop to tell it to do so. The loop will pull in the page content from the database and is what makes WordPress work.

Open your index.php file. After the opening of the .content div and before the opening <article> tag, add the following:

<?php while ( have_posts() ) : the_post(); ?>

Now after the closing </article> tag, add:

<?php endwhile; ?>

The first piece of code you added starts the loop. It checks if there is a post or page to display and then opens up the first post or page.

If you're on an archive page, it loops through all the relevant posts, either the latest posts on the main blog page or the posts in a given category on a category page.

The second piece of code ends the loop so that WordPress can move on to displaying content such as the sidebar and footer.


3. Classes and IDs for the Article

The opening <article> tag can have classes and an ID which are automatically generated by WordPress. You can then use these at a later date to target CSS on that post or page if you wish to do so.

Find the opening <article> tag:

<article class="post" id="01">

Edit it so it reads:

<article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>">

The two functions you've added are:

  • the_ID() - this adds a class to the article element which is the unique ID reference for the post or page being displayed
  • post_class - this adds a series of classes to the article element including the post category, post type and more

So you can use the ID to target a specific post with CSS, and the class to style all posts in a certain category the same way, for example.


4. Adding the Page or Post Title in the Loop

The next thing to display on your post or page is the title. In the existing code, this is a static title inside an <h2> tag. Find the line of code which reads:

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

Edit it so it now reads:

<h2 class="entry-title"><a title="<?php printf( esc_attr__( 'Permalink to %s', 'compass' ), the_title_attribute( 'echo=0' ) ); ?>" href="<?php the_permalink(); ?>" rel="bookmark">
	<?php the_title(); ?>
</a></h2>

This adds two things:

  • A link to the post or page itself (using the_permalink() ). This is useful on archive pages to allow users to click on a link to the post's own page
  • The title of the post or page, which will automatically be populated by WordPress

5. Adding Post Metadata

The first section element inside the loop is for post metadata - specifically the date and author of the post.

Find this line of code (or all of the code inside that first section element: it may be different in your theme):

Posted on 5 November by Rachel McCollin

Replace it with:

Posted on <?php the_date(); ?> by <?php the_author(); ?>

You've added two template tags:

  • The date the post was published, using the_date()
  • The author of the post, using the_author()

6. Adding the Post Content

The most important thing is to make sure the post or page content is displayed and you do this using one simple template tag - the_content().

Find the section with the class .entry-content and delete its contents. Replace these with the the_content() tag so the whole section looks like this:

<section class="entry-content"><?php the_content(); ?></section><!-- .entry-content -->

7. More Post Metadata

In my design, there is more post metadata after the post or page content. This is optional, but here I'll use it to display a list of categories associated with the post. You might choose to miss this out of your theme depending on your design and your use of categories or tags.

Delete the contents of the final section with the .entry-meta class and replace them so the whole section reads:

<section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
	<span class="cat-links">
		Categories: <?php echo get_the_category_list( ', ' ); ?>
	</span>
<?php endif; ?></section><!-- .entry-meta -->

It's worth taking a moment to work through this code as it's the longest snippet of PHP you've added so far.

  • The opening line checks the number of categories assigned to the post using the if statement and if this is more than zero, runs the rest of the code.
  • It then opens a span element and lists the post categories inside it, using echo get_the_catgeory_list(). The echo is important as without this the get_the_category_list() function wouldn't actually display the list, it would just access the list and do nothing with it.
  • Finally the endif statement closes the if statement so WordPress can move on to the next piece of code.

Finally, save your index.php file, return to your browser and refresh the home screen. This should have changed slightly, as shown below:

creating-wordpress-theme-from-static-html-site-loop-added

As you can see, the following items are shown:

  • The page title
  • The date and author
  • The content of the page
  • The category list is not displayed as this is a page not a post, and categories don't apply to pages by default. You'll see an example with the category list displayed later in the series
Note that the featured image isn't displayed yet - you'll fix that in Part 10 of this series.

Summary

Your theme is now well on the way to being a fully functioning theme. It has a loop in place to display content added via the WordPress admin as well as a set of template files. The next step is to edit the header.php file to include an essential action hook and some more template tags.


Resources

Related Posts
  • Code
    Theme Development
    Custom Controls in the Theme CustomizerTheme customizer custom control 400
    In the last article, we explored the advanced controls available in the Theme Customizer, and how to implement them. We’re going to look at how to create our own custom control, allowing you to choose which Category of Posts are displayed on the home page. To get started, download version 0.6.0 of our Theme Customizer Example.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Creating an Archive TemplateCreating wordpress theme from html 400
    If you've been working your way through this series, you now have a functioning theme with two page templates. The steps I've demonstrated to this point are: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Creating a Page TemplateCreating wordpress theme from html 400
    So far in this series, I've shown you how to create a fully functioning WordPress theme from static HTML. We've covered the following steps: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file. At the moment, your theme only has one template file for displaying content—the index.php file. A powerful feature of WordPress is the ability to use template files for different kinds of content.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Preparing the MarkupCreating wordpress theme from html 400
    Last year I did a small (and admittedly very un-scientific) survey among other WordPress developers. What I wanted to know was this: When they built their first WordPress theme, how did they do it? Did they hack an existing theme or did they start with their own static HTML and turn it into a theme? The majority of people I spoke to used the second approach - they were all experienced frontend developers who had built sites using HTML and CSS, and found it easiest to take their existing HTML files and convert them to a theme. Two of the people I spoke to were lecturers or teachers, and told me that this is the approach they use with students. So in this series I'm going to show you how to do just that.Read More…
  • Code
    Theme Development
    How to Create a Homepage With Multiple Listings Using Custom QueriesFrontpage custom queries preview 400
    WordPress gives you a couple of built-in options for your website's front page: a display of your most recent blog posts or a static page of your choice. But what if you want to create something a bit more interesting than that? If your site has a lot of data using categories, taxonomies or custom post types to organize it, you might want to display data of more than one kind on your homepage. The good news is that you can do this using a custom template for the homepage. In this template you write a number of custom queries to list the data in the way you want to. In this tutorial you'll learn how to do the following: Create a custom homepage template for use by your theme Include four queries in that template to display different kinds of data, including three custom queries The queries will list standard posts plus one custom post type registered for this project, called 'animal'. You can find the template file with the four queries in the code bundle.Read More…