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. ryandolankayak
    Permalink to comment#

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

    • 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. ryandolankayak
    Permalink to comment#

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

  3. 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

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.