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.
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?
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?
Hi Scott,
Try the CSS-Tricks forums – plenty of helpful folks over there that’ll clear it up for you.
@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.Hey Scott,
You don’t have to depend on the body class. I call up menus like this
Then use css to call on the current item
An example can be found on Falls Village Marshmallow