Community Forums › Forums › Archived Forums › Design Tips and Tricks › Add Body Class Based on Top Level Menu Item
Tagged: class menu body
- This topic has 8 replies, 2 voices, and was last updated 10 years, 5 months ago by David Chu.
-
AuthorPosts
-
November 13, 2013 at 3:56 pm #72778kennypressParticipant
Hi, just wondering if there is already some code snippet or example of adding a unique class to the body tag for all pages/items that are under a specific top-level page/menu item?
We usually think of sites in 'sections' based on the top-level menu items, which generally match top-level pages (we keep pages & menus completely synced in regards to order & hierarchy). Our sites are more page-driven than post-driven, like a traditional CMS.
But we often like to give each 'section' a unique style or color element. So the only way to efficiently do this is to have all pages & other items that fall under a specific top-level menu item assigned the same unique class to the body tag (e.g, 'parent-menu-id').
- Any examples of this already exist?
Thanks!
November 14, 2013 at 8:37 pm #73059David ChuParticipantHi,
I get all kinds of kookie requests such as having every page be different colors. 馃檪 in WordPress, there are tons of classes that you can hang your CSS on, so I can do that easily, no matter how silly! 馃檪 Let's say I do absolutely nothing special. I just looked at a page on my site that's under a parent Page, and here are just a few of the classes on the body:page page-id-65 page-child parent-pageid-61
So you could use the last one to target every child of that page. Just do some CSS using that class, and problem solved. Or just edit any Page or Post. Go to the bottom of the screen, and you'll see a place where you can put in a custom body class. That's a bit more manual than the first idea, but still not too bad.
If you mean is there some bit of code that could add a body class to everything under one doc, well, you could, but with the above possibilities already there, I would never bother.
Dave
Dave Chu 路 Custom WordPress Developer – likes collaborating with Designers
November 14, 2013 at 8:54 pm #73064kennypressParticipantThanks for the reply. Sorry, I had seen that 'parent-page-##' class, but it only works for one level deep menus. Any sub-subpages would pick up their direct parent's ID, not the top-level.
So I was just hoping that with the popularity of Genesis and all the snippets that exist, someone may have gone one-step beyond that so it would list the top-most menu parent ID.
It would need to be automated so that any pages/menus added by the client, regardless of the depth, would still pick up any 'parent' styling by default. The client would never know to add custom classes or anything special (and shouldn't need to).
And it's not that uncommon of a design standard to give certain 'sections' a bit of a more unique style. Not drastic changes, but maybe a highlight color is different, background image is different, etc. Like having a boys & girls section to your store site, they don't need to (and shouldn't have to) be identical in styling. We used to work primarily in Joomla, and something like this wasn't too tough to pull off. Just new to Genesis and trying to see if it already exists so we can use any existing standards where possible.
Thanks again!
November 15, 2013 at 9:04 am #73142David ChuParticipantAs far as I know, there's nothing all automated and plugin-ish for that, unless maybe Bill Erickson has something. If I saw enough demand for that, I could bang out a plugin for that without too much fuss.
In the meantime, I can give you a recipe. The rest is up to you.
In my article, I use normal everyday WordPress functions to examine parentage.
Then all you have to do is adapt that concept for these body class Genesis functions.
Have fun,
D
Dave Chu 路 Custom WordPress Developer – likes collaborating with Designers
November 15, 2013 at 4:15 pm #73292kennypressParticipantThanks for the tips David. This was more what I was looking for. I would just add the code to our functions file for the base child theme we're creating so it could be there for all sites we create. It does no harm to have the additional classes.
I'll look over your examples and try to piece it together. Unfortunately, PHP is not my strength (which is why I wanted to see if something already existed). But we can have a developer help if we need.
I found this which is pretty close, just uses the parent slug. But it does 'trickle down' to all subpages. Not sure of pros/cons to using the slug instead of a page or menu ID, though.
But I'm sure someone who knows PHP well could put everything together pretty quickly.
Thanks.
November 15, 2013 at 6:05 pm #73317David ChuParticipantFollowing my own instructions, I hacked this together in minutes. This can go in your functions.php. It's so small, it's not really worth making a plugin.
add_filter( 'body_class', 'sp_body_class' ); function sp_body_class( $classes ) { if( is_page() ) { $parents = get_post_ancestors( get_the_ID() ); $id = ($parents) ? $parents[count($parents)-1]: $post->ID; $classes[] = 'top-parent-' . $id; } return $classes; }
Enjoy,
DavePS: if you use this, show us a link to your work after it's done. 馃檪
Dave Chu 路 Custom WordPress Developer – likes collaborating with Designers
November 15, 2013 at 7:37 pm #73324David ChuParticipant... and version 2.0. This is slightly cleaner because we don't want a "chopped off" class on the root. It checks for whether it found a parent.
add_filter( 'body_class', 'sp_body_class' ); function sp_body_class( $classes ) { if( is_page() ) { $parents = get_post_ancestors( get_the_ID() ); $id = ($parents) ? $parents[count($parents)-1]: $post->ID; if ($id) { $classes[] = 'top-parent-' . $id; } } return $classes; }
Dave
Dave Chu 路 Custom WordPress Developer – likes collaborating with Designers
November 15, 2013 at 7:56 pm #73328kennypressParticipantWow, this is great David, thanks! It would definitely be handy to know PHP, but I've got my hands full with staying on top of design and advanced front-end coding.
This should do the trick. We'd still need to include a secondary declaration on styles for the top-level 'landing page' if we were displaying that as well (e.g., '.page-id-2' as well as '.top-parent-2'). But at least it would be possible.
This should work for most standard situations. Hopefully it can help someone else too if they order a site/pages into 'sections'. It's important to note that it follows page order not menu order, but we always keep those in-sync so our breadcrumbs and side split sub-nav links work properly as well.
The only thing that might have to be figured out on occasion is if we need to add a custom post type or something else into a 'section' along with pages, as I'm assuming those would not pick up the hierarchy of the pages. But we'll cross that bridge when it comes up.
Thanks again. Much appreciated.
November 16, 2013 at 9:26 am #73404David ChuParticipantGreat!
Yeah, I got frisky. I'll write an article on my blog about it shortly. 馃檪 My code is actually not Genesis at all, it's just straight WordPress code. So it's usable on any WordPress theme. If you just changed the literal wording of the class, you could make it match the top level item's class - I thought of that as I was testing it. I KNOW you can handle that much PHP! 馃檪You are right about custom post types requiring additional coding to make this type of stuff happen. Funny stuff occurs with them in menus, like not taking on the "current" class when you're "there". That takes additional pretty fancy code, last time I checked.
I haven't explored it, but one could also do a similar thing with Categories, as they use hierarchical structures, too.
Dave
Dave Chu 路 Custom WordPress Developer – likes collaborating with Designers
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.