WordPress CSS Active Link

[spate1y]

Hi there!

I am making a site theme similar to CSS Tricks. I need help with active links in the menu. How do I make it so that when someone is viewing articles blog page and/or article post the article tab is selected. I need the same thing for my site’s home, videos, and forums tab.

[apostrophe]

Are you using wp_list_pages to generate your menu?

[spate1y]

No sir. Is there any option of doing it without having to use the php wp list page command?

[apostrophe]

I don’t really understand why you wouldn’t take advantage of the functionality WordPress has built into it.

I think something like this will work:

Code:

>home >videos >forums >blog

[spate1y]

Well the problem is, these are not static pages…

Home – (same as Articles)
Articles – Blog Page for all my post
Videos – Blog Page for all my videos
Forums – external link to phpBB forums

My menu is the exact same as CSS Tricks (except it doesn’t have downloads). How is Chris doing it at this site?

[apostrophe]

Why don’t you have a look?

[spate1y]

So he is using div classes:

body#home #mainNav li.articles a,
body#downloads #mainNav li.downloads a,
body#video-screencasts #mainNav li.videos a,
body#contact #mainNav li.contact a,
body#forums #mainNav li.forums a { background: white; color: #2f2626; }

Could you please explain this line to me: body#video-screencasts #mainNav li.videos a,

I think I understand what is going on but I just want to make sure.

[spate1y]

For some reason when I integrate the same code into my site and change settings to match it. Nothing happens. Any ideas?

By the way, thanks for responding to my post(s).

[Chris Coyier]

Video on setting the body ID to control current nav:
https://css-tricks.com/video-screencasts … e-body-id/

[spate1y]

Wow… I wish I had used my resources correctly.

Got it done in a flash with no problems.

Chris: May I suggest you have the code typed up in the notes for other viewers. I had to take a screenshot of the video in full screen so I could copy it into my text editor.

[spate1y]

What would you do for sub-pages? I tried what the guy in the comments recommended, but that didn’t work.

[proto25]

What is the method for achieving the same using the ‘wp_list_pages’ tag with the ‘body_class’ tag?

[Author]

Posts