It's time to actually get into moving our design into WordPress. Might as well start top-down and start with the header. Other than just being a logical place to start, it means we'll be looking at things like the <head> and getting the right resources loading.

We split our screen into two halves, the static mockup project open in Sublime Text 2 on the left and the WordPress site on the right. This way we can look line-by-line and make sure we move everything over OK.

Where we end up, the site still looks like a mess, but that's expected. The correct markup isn't in place yet. But we can see that we're on the right road.


  1. Scott Lyttle
    Permalink to comment#

    Can anyone share further how the body_class() function works?

    The codex explains that it outputs a bunch of classes like the following:

    class=”page page-id-2 page-template page-template-default logged-in”

    That doesn’t seem to line up with the CSS Chris wrote earlier where he was targeting a body class of .snippets or .deals to highlight his menu item.

    How can this body_class() function be used to only highlight the current pages menu item?

    • Scott Lyttle
      Permalink to comment#

      I should elaborate to ask how can the body_class() function be used to only highlight the current pages menu item when it is not you controlling the website. What if the client added a new page and menu item named. How can that be automatically highlighted when active if there is no CSS for it?

    • Huw Rowlands
      Permalink to comment#

      Hi Scott,

      Try the CSS-Tricks forums – plenty of helpful folks over there that’ll clear it up for you.

    • Josh Eaton
      Permalink to comment#

      @Scott, you have to write a function in functions.php to add the correct class to the body_class filter, it won’t do it automatically. You just have a basic if statement that determines if the correct page is being loaded, then add the correct body class through that filter.

  2. Kelvin Alfonso
    Permalink to comment#

    Hey Scott,

    You don’t have to depend on the body class. I call up menus like this

    wp_nav_menu( array('container' => '', 'theme_location' => 'main' ) ); 

    Then use css to call on the current item

    .main-menu .current-menu-item{//some CSS}

    An example can be found on Falls Village Marshmallow

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.