[Solved] Active class on buttons in WordPress

Hello, Just wanted to say hi. This is my first post and just wanted to say I’ve been watching a lot of the videos and have a question on one. It is video #7, with the rollover buttons. Anyways I am following Chris’s post on coding a custom css for wordpress and its going really good.

So my problem is with assigning a body div id. Being I’m using WordPress, the index.php page stays the same. So how can I still accomplish this? Do I need to make actual separate pages for my main menu links, like about.php, projects.php, contact.php? Right now i have my links just go to that page post of /about/ or /projects/ or /contact/ and it work. I just cant figure out how to accomplish the active status with WordPress.

I believe the answer to your question is Yes, you would need to create the multiple pages.

Basically, you could duplicate the index.php, to create each template page that you need (about.php, contact.php, etc.)

For each page, you need to let Worpress know that they are template pages by placing code similar to this at the very beginning of the code:

Code:

< ?php
/*
Template Name: Homepage
*/
?>

Naming them consistent with the page they will generate is probably best.

-Then, in the WP admin, Click on "Pages"

-When you see your list of pages, highlight over one and click "Quick Edit" for Template, choose your corresponding template.

Also in the code of each one is where you’d want to change the body id per page.

However, an easier solution (depending on your version of WordPress could be to use the wp_list_pages function. It will add a class current-page-item to the current page automatically. Just setup your styles for that class and you are done.

Your page.php should be able to handle this very easily. First with the option at the bottom of blue642’s post. Another option would be to attach the page’s id number to the body tag, thus allowing you to add styles according to that id.

Tips

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.