Okay, so currently, my menu is partially working. Here is my website. Home, Projects, Contact, Shop, and Support all have current navigational highlighting. I am using the same exact code, switching out the class names, for Blog and Forums, and yet, they do not highlight when you are on their respective pages. I can not figure out why. Also, if I select Feel Good Candy or Leaflet from the drop-down menu, it highlights the entire menu, beginning with Projects and ending with Leaflet. I need it to highlight the selected menu li and also highlight Projects, but not the other unselected menu li. Any suggestions?
Here is my CSS code for the menu styles:
/*
MENU STYLES
*/
.header-home a,
.page .header-home a,
.header-projects a,
.page .header-projects a,
.header-blog a,
.page .header-blog a,
.header-forums a,
.page .header-forums a,
.header-contact a,
.page .header-contact a,
.header-shop a,
.page .header-shop a,
.header-support a,
.page .header-support a {
color: #7B0046;
}
.header-home a:hover,
.page .header-home a:hover,
.header-projects a:hover,
.page .header-projects a:hover,
.header-blog a:hover,
.page .header-blog a:hover,
.header-forums a:hover,
.page .header-forums a:hover,
.header-contact a:hover,
.page .header-contact a:hover,
.header-shop a:hover,
.page .header-shop a:hover,
.header-support a:hover,
.page .header-support a:hover {
color: #FFFEF2;
}
body.page-feelgoodcandy ul#main-navigation li.header-projects li.header-leaflet a:hover,
body.page-leaflet ul#main-navigation li.header-projects li.header-feelgoodcandy a:hover {
color: #7B0046;
}
ul#main-navigation li a:hover,
body.page-home ul#main-navigation li.header-home a,
body.parent-slug-projects ul#main-navigation li.header-projects a,
body.page-blog ul#main-navigation li.header-blog a,
body.page-forums ul#main-navigation li.header-forums a,
body.page-contact ul#main-navigation li.header-contact a,
body.page-shop ul#main-navigation li.header-shop a,
body.page-support ul#main-navigation li.header-support a,
body.default ul#main-navigation li.header-home a,
body.page-feelgoodcandy ul#main-navigation li.header-projects a,
body.page-leaflet ul#main-navigation li.header-projects a,
body.page-feelgoodcandy ul#main-navigation li.header-feelgoodcandy a,
body.page-leaflet ul#main-navigation li.header-leaflet a {
color: #FFFEF2;
}
The help you guys give me is always greatly appreciated.
I'm just wondering why are you targeting each a within navigation, like so:
.header-home a,
.page .header-home a....
Wouldn't...
#main-navigation li a {
color: #7B0046;
}
take care of all the links within ul element with id of main-navigation. Then you could do hover, like so:
#main-navigation li a:hover {
color: #FFFEF2;
}
Are you generating main navigation via WordPress or are you hard coding? There should be a class of .current-menu-item and .current_page_item applied to corresponding link, when clicked.
Okay, so I looked at the body class on the two pages that are not working. I now know why they are not working, but I question how to actually use the data I discovered. For the Blog, I get this:
<body class="post-hello-world">
So, if I change my code to reflect this body class, my CSS would look like this:
body.post-hello-world ul#main-navigation li.header-blog a {
color: #FFFEF2;
}
Which is all fine and dandy, but that does me no good if I create another post. The body class will then change to the most recent post and I would have to change my CSS code all over again.
Similarly, my Forums currently has this as a body class:
So, just for kicks to see if I was understanding everything, I changed my CSS to this:
body.forum-general-forums ul#main-navigation li.header-forums a {
color: #FFFEF2;
}
And it works. But alas, if I make a new forum, the body class will change once more. How do I ensure that my body class will equal blog or forums for simplicity's sake? I would really appreciate some help on this. Thank you in advance!
Edit #1:@AlenAbdula, sorry, I did not see your message. Targeting #main-navigation instead of each individual item is probably more logical. I will try it out. Also, @chriscoyier suggests against using a class of .current in his tutorial here, which is where the method I am using originates from.
Edit #2:@AlenAbdula, thank you for the suggestion about targeting the #main-navigation li a instead of writing each one out individually. Now, I just need to figure out this current navigational highlighting.
@TheDoc, and yet it is (as far as I can tell). I do not see anything else being called in the body though. This is how my body and its class are being called:
<body <?php body_class(); ?>>
And this is what appears when I view the page source on Blog:
Okay, I killed the slug function, now it is giving me this:
<body class="">
Here is the page if you want to see it for yourself. How am I supposed to use a blank body class? Also, this disabled current navigational highlighting for all of my pages, but I do realize I need to remove "page" from the body class definition in my CSS.
If you go to wp-includes/post-template.php on line 316 there is a function get_post_class that should be generating classes you need. For some reason this is not returning anything. You either changed some settings or something is broken. Did you add any custom functions to your functions.php file?
I did it. Now, the highlighting works for both "Home" and "Blog" because they are receiving the proper body class. How do I accomplish this with a static page on "Home" and moving my posts to "Blog?" Does this require extra PHP?
The body_class should return classes that belong to specific page/post regardless if you have latest posts or static page selected.
Something is not working or you have configured settings/templates incorrectly.
I've tested with clean install of WordPress along with blank themes from HTML5 Reset and Bones.
You can try using conditional statementis_front_page() to check if user is on Front Page then just output corresponding classed to the body. But this should not be necessary, body_class() should take care of this...
I just installed a fresh version of Starkers, only copying over the style.css and header.php. In Starkers, they differentiate between header.php and html-header.php. So, the only things I copied over were styles and the menu basically. And it is still not giving me a body class for Blog. You can see here for yourself. So, I do not know what is causing it.
Edit #1: I just removed style.css and it is still not giving me a body class. So it has to be something in the header.php. Hrm. Let me remove that and see if it does anything.
Edit #2: Nope. It still does not have a body class even if I replace header.php. Suggestions? Do I need to reinstall WordPress in its entirety?
Wait, wait... the body_class() is a WordPress function. It has nothing to do with CSS file. It simply outputs page, post, environment details to body html element so that you can target them in your style sheet. These "classes" are predefined by WordPress.
But something is keeping it from producing a body_class() for Blog, correct? So, how do I go about figuring this out? Sorry, that escalated quickly. I just hate to think something is fundamentally wrong with code that I had no hand in to begin with.
How is your theme structured? Are you using any custom templates for your blog? Are you altering something via filters/hooks in your functions.php file?
It is a basic Starkers theme with no custom templates. And I do not know what filters/hooks are, so I doubt that would be the case. I have only added one PHP function to functions.php, which I promptly commented out when this whole situation started.
Okay, I replaced the wp-admin and wp-includes, no luck thus far. I will read the article now.
Edit: I read the article. In order for me to use that article's method, I would first need a body class, which I do not have. I find it very strange that every page is producing an unique body class except for /blog/, simply because I am using a static page for home. This is very frustrating.
I created a new page, named it "Blog," and set the permalink to: http://www.happynakedpeople.co/blog/. Then I went to Settings > Reading under administrator and set my home page to a static page called /home/ and my blog was set to /blog/. Also, I should mention that /forums/ is also not creating an unique body class. But those are the only two pages that are doing so. Every other page seems to work fine.
So, I am able to target the forums by using a class of bbPress, but "Blog" is most definitely completely blank. Hrm.
Edit: Also, while everyone is still figuring out that problem, I have another problem with my menu. When you select a single "child" from the drop-down menu, it highlights the "parent" and other "child" at the same time. I need it to only highlight the selected "child" and "parent," but not the other "child." Did that make any sense?
I've managed to replicate what you've done on my local setup with Starkers and the issue is with the creation of Blog page and setting it up as static for your posts.
I'm getting blank body class also.
I would just use one of the conditional statements and output custom class for blog that you can target.
I finally caved and decided to put my blog posts on my home page (although, I am still going to spice things up a bit more than my previous attempts). I am glad that you were able to replicate it and found the bug report. I was really starting to think I had done something horribly wrong with my code.
Now, onward to the next problem with my menu. When I select "Feel Good Candy" or "Leaflet," it highlights the entire ul chain. It also highlights "Projects," but I actually want that to happen so that people know they are within "Projects" when viewing the "Feel Good Candy" or "Leaflet" page. Any suggestions?
And I have run into a third minor problem. In "Forums," I have a separate forum for each project. Welp, because my menu items and forum URLs end with the same characters (either /feelgoodcandy/ or /leaflet/), it highlights the accompanying menu item. So, you end up with "Forums" and "Projects" highlighted. Now, I know I could just change the name of the forum, but is there a savvier way to get around this?
@AlenAbdula, thank you for your wonderful help thus far!
Okay, my menu, code-wise, is one of the only things I do not know how to do. I really need some advice on how to control the highlighting in the ul chain. You can see for yourself what is happening, here. If you select either Feel Good Candy or Leaflet, it highlights Projects, Feel Good Candy, andLeaflet. If you are following along, one of those does not belong, depending on what you've clicked. Again, any suggestions would be greatly appreciated as I know very little about this highlighting issue.
I would need to add theme support for menus. A fresh download of Starkers v4.0 does not provide such things. I am just afraid of how I would go about styling the menu once it has been generated in WordPress. I don't really know that much about menus. I mean, I understand that there are uls (un-ordered lists) and lis (lists), but I guess it is time to learn the in's and out's of menu-making. But as with anything WordPress, I am sure it is not as horrible as I imagine it to be. I feel like a pest on these boards for the most part, so I try to keep my nagging to a minimum. But if I do it the way you have mentioned, I am sure I am going to have questions.
You already have functionality built in. All you have to do is generate the menu, look at the code, figure out what elements/classes/ids are there and just apply current functionality to appropriate elements.
Don't worry about asking questions! It's the reason this place exists.
It's always hard before it's easy. Don't get frustrated.
Okay, I added add_theme_support( 'menus' ); to functions.php and I now have the ability to make a menu. I made a menu, but then I look under Theme Locations and it says:
Your theme supports 0 menus. Select which menu appears in each location.
The only option is to hit Save, which does nothing. So, I went into codex and found this:
If your current theme does not support custom menus, you will need to add your new menu via the Custom Menu widget in the Appearance Widgets Screen.
And that finally lead me here, which seems to be pushing the fact that widgets should be used in a sidebar. But I don't want a sidebar, I want a menu. Help?
Edit #1: Okay, I found a thing called register_nav_menu and it says it automatically registers custom menu support for the theme, therefore I do not need to call add_theme_support( 'menus' );. So, I added that to functions.php and Theme Locations now says, "Your theme supports 1 menu. Select which menu you would like to use." I selected the menu I had created and hit "Save." I reload my website and I do not see it anywhere. I think I am missing a crucial step. Hrm.
Edit #2: Okay, so I did some further looking in codex and I saw this: "Use wp_nav_menu() to display your custom menu." Which lead me here. I can not seem to figure out how to give it a theme location. When I go under Parameters > $theme_location, I see this: "The location in the theme to be used--must be registered with register_nav_menu() in order to be selectable by the user." So, there is something I must select (other than the menu), right? 'Cause I am not seeing that option. Here is a screen capture of my wp-admin when dealing with menus.
Edit #3: Okay, I was having a derpy moment. I didn't remember seeing you say to include the wp_nav_menu code. So, I have added the code to an ul that is inside of a div using all of the names I used previously. And it looks pretty good. It is all the way to the right for some reason, but all my styles are working and I am using the wp_nav_menu. Also, I added .current-menu-item { color: #FFFEF2; } and it does not seem to be doing the highlighting. I checked to see if "current-menu-item" was indeed being called in the class of the menu items and it is. So, I have made it this far. I need you, @AlenAbdula, to give me the final push!
Okay, so currently, my menu is partially working. Here is my website.
Home,Projects,Contact,Shop, andSupportall have current navigational highlighting. I am using the same exact code, switching out the class names, forBlogandForums, and yet, they do not highlight when you are on their respective pages. I can not figure out why. Also, if I selectFeel Good CandyorLeafletfrom the drop-down menu, it highlights the entire menu, beginning withProjectsand ending withLeaflet. I need it to highlight the selected menuliand also highlightProjects, but not the other unselected menuli. Any suggestions?Here is my CSS code for the menu styles:
The help you guys give me is always greatly appreciated.
I'm just wondering why are you targeting each
awithin navigation, like so:Wouldn't...
take care of all the links within
ulelement withidofmain-navigation. Then you could do hover, like so:Are you generating main navigation via WordPress or are you hard coding? There should be a class of
.current-menu-itemand.current_page_itemapplied to corresponding link, when clicked.Okay, so I looked at the body class on the two pages that are not working. I now know why they are not working, but I question how to actually use the data I discovered. For the Blog, I get this:
So, if I change my code to reflect this body class, my CSS would look like this:
Which is all fine and dandy, but that does me no good if I create another post. The body class will then change to the most recent post and I would have to change my CSS code all over again.
Similarly, my Forums currently has this as a body class:
So, just for kicks to see if I was understanding everything, I changed my CSS to this:
And it works. But alas, if I make a new forum, the body class will change once more. How do I ensure that my body class will equal
blogorforumsfor simplicity's sake? I would really appreciate some help on this. Thank you in advance!Edit #1: @AlenAbdula, sorry, I did not see your message. Targeting
#main-navigationinstead of each individual item is probably more logical. I will try it out. Also, @chriscoyier suggests against using a class of.currentin his tutorial here, which is where the method I am using originates from.Edit #2: @AlenAbdula, thank you for the suggestion about targeting the
#main-navigation li ainstead of writing each one out individually. Now, I just need to figure out this current navigational highlighting.post-hello-worldshouldn't be the only class that is showing on the body if you're using the body_class() function.@TheDoc, and yet it is (as far as I can tell). I do not see anything else being called in the body though. This is how my body and its class are being called:
And this is what appears when I view the page source on Blog:
And that is all it says. Hrm.
That tutorial was posted in 2009.
WordPress has since integrated much better navigation handling.
What happens when you add a page or blog post... do you have to edit your templates to add corresponding code?
@AlenAbdula, I just created a test post and this is the body class:
So, yes, I would have to change my code each time I do a new post, which should not be how things are done.
Something is not right if that's the case. When you go to the blog page, you shouldn't be getting the slug of the first post.
Maybe try killing the slug function you added to functions.php.
@TheDoc is right. I just tested on my local install. Out of the box WP has these classes applied to it's body.
When logged into admin:
When logged out:
And when clicking on Sample Page, you get:
on navigation list items.
Okay, I killed the slug function, now it is giving me this:
Here is the page if you want to see it for yourself. How am I supposed to use a blank body class? Also, this disabled current navigational highlighting for all of my pages, but I do realize I need to remove "page" from the body class definition in my CSS.
If you go to
wp-includes/post-template.phpon line 316 there is a functionget_post_classthat should be generating classes you need. For some reason this is not returning anything. You either changed some settings or something is broken. Did you add any custom functions to yourfunctions.phpfile?http://codex.wordpress.org/Function_Reference/body_class
Wait. I just checked your site again and it works. It's just not getting generated on
blogpage.Could this be because I am using a static page as my home page and a separate page called "Blog" for my blog page?
Aaaah could be.
In your WordPress settings (I think under 'Reading'), select your 'Blog' page as your Home and 'Home' as your 'front-page'.
I did it. Now, the highlighting works for both "Home" and "Blog" because they are receiving the proper body class. How do I accomplish this with a static page on "Home" and moving my posts to "Blog?" Does this require extra PHP?
The body_class should return classes that belong to specific page/post regardless if you have latest posts or static page selected.
Something is not working or you have configured settings/templates incorrectly.
I've tested with clean install of WordPress along with blank themes from HTML5 Reset and Bones.
You can try using conditional statement
is_front_page()to check if user is on Front Page then just output corresponding classed to the body. But this should not be necessary,body_class()should take care of this...I am using Starkers. I wonder if this is a known error for it or if I did something I should not have. Hrm.
Just tested Starkers out of the box and it works both as static page and latest posts
Alrighty then. Ugh. I guess it is time for me to figure out what I did to it to make it not work. Thank you, @AlenAbdula.
I just installed a fresh version of Starkers, only copying over the
style.cssandheader.php. In Starkers, they differentiate betweenheader.phpandhtml-header.php. So, the only things I copied over were styles and the menu basically. And it is still not giving me a body class for Blog. You can see here for yourself. So, I do not know what is causing it.Edit #1: I just removed
style.cssand it is still not giving me a body class. So it has to be something in theheader.php. Hrm. Let me remove that and see if it does anything.Edit #2: Nope. It still does not have a body class even if I replace
header.php. Suggestions? Do I need to reinstall WordPress in its entirety?Wait, wait... the
body_class()is a WordPress function. It has nothing to do with CSS file. It simply outputs page, post, environment details tobodyhtml element so that you can target them in your style sheet. These "classes" are predefined by WordPress.You could add custom classes, like so:
But something is keeping it from producing a
body_class()for Blog, correct? So, how do I go about figuring this out? Sorry, that escalated quickly. I just hate to think something is fundamentally wrong with code that I had no hand in to begin with.How is your theme structured? Are you using any custom templates for your blog? Are you altering something via filters/hooks in your functions.php file?
It is a basic Starkers theme with no custom templates. And I do not know what filters/hooks are, so I doubt that would be the case. I have only added one PHP function to
functions.php, which I promptly commented out when this whole situation started.Ok lets do this:
All plug-ins have been deactivated (there was only one active plug-in: bbPress) and there is still no body class on
/blog/.How about, re-uploading the
wp-adminandwp-includesfolders from a fresh download of WordPress...Remember to back up before! Just in case.
This might help too: http://wpshout.com/body_class/
Okay, I replaced the
wp-adminandwp-includes, no luck thus far. I will read the article now.Edit: I read the article. In order for me to use that article's method, I would first need a body class, which I do not have. I find it very strange that every page is producing an unique body class except for
/blog/, simply because I am using a static page forhome. This is very frustrating.How did you set up your blog at
/blog?I created a new page, named it "Blog," and set the permalink to: http://www.happynakedpeople.co/blog/. Then I went to Settings > Reading under administrator and set my home page to a static page called
/home/and my blog was set to/blog/. Also, I should mention that/forums/is also not creating an unique body class. But those are the only two pages that are doing so. Every other page seems to work fine.I take that back. "Forums" is producing an unique body class, here:
So, I am able to target the forums by using a class of
bbPress, but "Blog" is most definitely completely blank. Hrm.Edit: Also, while everyone is still figuring out that problem, I have another problem with my menu. When you select a single "child" from the drop-down menu, it highlights the "parent" and other "child" at the same time. I need it to only highlight the selected "child" and "parent," but not the other "child." Did that make any sense?
Help?
I've managed to replicate what you've done on my local setup with Starkers and the issue is with the creation of Blog page and setting it up as static for your posts.
I'm getting blank body class also.
I would just use one of the conditional statements and output custom class for
blogthat you can target.Also check out this Bug from Starkers https://github.com/viewportindustries/starkers/issues/16
I finally caved and decided to put my blog posts on my home page (although, I am still going to spice things up a bit more than my previous attempts). I am glad that you were able to replicate it and found the bug report. I was really starting to think I had done something horribly wrong with my code.
Now, onward to the next problem with my menu. When I select "Feel Good Candy" or "Leaflet," it highlights the entire
ulchain. It also highlights "Projects," but I actually want that to happen so that people know they are within "Projects" when viewing the "Feel Good Candy" or "Leaflet" page. Any suggestions?And I have run into a third minor problem. In "Forums," I have a separate forum for each project. Welp, because my menu items and forum URLs end with the same characters (either
/feelgoodcandy/or/leaflet/), it highlights the accompanying menu item. So, you end up with "Forums" and "Projects" highlighted. Now, I know I could just change the name of the forum, but is there a savvier way to get around this?@AlenAbdula, thank you for your wonderful help thus far!
Okay, my menu, code-wise, is one of the only things I do not know how to do. I really need some advice on how to control the highlighting in the
ulchain. You can see for yourself what is happening, here. If you select either Feel Good Candy or Leaflet, it highlights Projects, Feel Good Candy, and Leaflet. If you are following along, one of those does not belong, depending on what you've clicked. Again, any suggestions would be greatly appreciated as I know very little about this highlighting issue.Why are you making this so difficult for your self?
Just generate the menu via WordPress.
Then include it in your template:
<?php wp_nav_menu(); ?>This will get generated. (CodePen, with more info)
You might also need to add theme support for menus, and you can add multiple menus too.
I would need to add theme support for menus. A fresh download of Starkers v4.0 does not provide such things. I am just afraid of how I would go about styling the menu once it has been generated in WordPress. I don't really know that much about menus. I mean, I understand that there are
uls (un-ordered lists) andlis (lists), but I guess it is time to learn the in's and out's of menu-making. But as with anything WordPress, I am sure it is not as horrible as I imagine it to be. I feel like a pest on these boards for the most part, so I try to keep my nagging to a minimum. But if I do it the way you have mentioned, I am sure I am going to have questions.You already have functionality built in. All you have to do is generate the menu, look at the code, figure out what elements/classes/ids are there and just apply current functionality to appropriate elements.
Don't worry about asking questions! It's the reason this place exists.
It's always hard before it's easy. Don't get frustrated.
Okay, I added
add_theme_support( 'menus' );tofunctions.phpand I now have the ability to make a menu. I made a menu, but then I look under Theme Locations and it says:The only option is to hit Save, which does nothing. So, I went into codex and found this:
And that finally lead me here, which seems to be pushing the fact that widgets should be used in a sidebar. But I don't want a sidebar, I want a menu. Help?
Edit #1: Okay, I found a thing called
register_nav_menuand it says it automatically registers custom menu support for the theme, therefore I do not need to calladd_theme_support( 'menus' );. So, I added that tofunctions.phpand Theme Locations now says, "Your theme supports 1 menu. Select which menu you would like to use." I selected the menu I had created and hit "Save." I reload my website and I do not see it anywhere. I think I am missing a crucial step. Hrm.Edit #2: Okay, so I did some further looking in codex and I saw this: "Use wp_nav_menu() to display your custom menu." Which lead me here. I can not seem to figure out how to give it a theme location. When I go under Parameters > $theme_location, I see this: "The location in the theme to be used--must be registered with register_nav_menu() in order to be selectable by the user." So, there is something I must select (other than the menu), right? 'Cause I am not seeing that option. Here is a screen capture of my wp-admin when dealing with menus.
Edit #3: Okay, I was having a derpy moment. I didn't remember seeing you say to include the
wp_nav_menucode. So, I have added the code to anulthat is inside of adivusing all of the names I used previously. And it looks pretty good. It is all the way to the right for some reason, but all my styles are working and I am using thewp_nav_menu. Also, I added.current-menu-item { color: #FFFEF2; }and it does not seem to be doing the highlighting. I checked to see if "current-menu-item" was indeed being called in the class of the menu items and it is. So, I have made it this far. I need you, @AlenAbdula, to give me the final push!@mintertweed I'll go over your reply soon and respond in detail. Been busy today.
If you switch to default theme, create the menu, then switch back to Starks theme, menu should be there. That's how I did it in my local example.