We continue porting code over from our static mockup to our WordPress index.php page. We tweak "the loop" a bit to output just what we want.

We get down far enough on the page where WordPress functions like get_sidebar() show up. Predictably, it behaves a lot like get_header() works. It goes and gets the sidebar.php file and plops it's content into the page right where that function is.

We delete quite a bit of code that was us simulating markup that we get from elsewhere and replace it with functions that end up outputing the same markup. For instance, a whole bunch of markup that made the poll area goes away and we put in wp_polls() which is a function that spits out all the stuff needed to show the poll in our actual WordPress template.

Before getting too excited and looking at our work, we move onto the footer.php file and clean that up. The big important task here is that we need to close any elements that we opened in the header.php file but didn't close. In our case, it's just one, the opening tag for <div class="page-wrap"> needs to be closed.

We link up the right scripts in the footer, delete a bunch of v9 specific stuff, and tie up loose ends.

When we do go look at the page, it turns out there are a few display weirdnesses that we have to deal with. We spend the whole end of the video debugging these issues, which turn out to be new places we need to be careful about clearing floats and closing tags.


  1. User Avatar
    Permalink to comment#

    What is the call called that you use to display items or an item after a certain number of posts?

    • User Avatar
      Chris Coyier
      Permalink to comment#

      There is no specific “call.” There is a thing in WordPress called “The Loop.” It’s literally a PHP for loop. I set a variable called $i to 1 and increment it up by 1 each iteration of the loop. Then also during the loop I check if $i == 2 output those ads if it’s true. Nothing fancy, just logic.

  2. User Avatar
    Permalink to comment#

    Ok thanks, I was just wondering if there was a snippet in Digging Into WP for it

  3. User Avatar
    Josh Eaton
    Permalink to comment#

    Another thing to consider for your home page is moving away from query_posts to using new instances of WP_Query. The current conventional wisdom is that you should never use query_posts as it runs an additional SQL query, making your site less efficient. I’ll leave it up to others to do a better job of explaining why:

    Andrew Nacin’s “You Don’t Know Query” Slides
    When to use WP-Query, query_posts and pre_get_posts?

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.