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.

Comments

  1. User Avatar
    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?

    • User Avatar
      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?

    • User Avatar
      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.

    • User Avatar
      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. User Avatar
    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

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

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag