
I came across this idea while working on one of our themes that had to have different body colors for different pages, like a red body on the home page, a yellow one on the contact page, a blue one on the archives page and so on. Of course this would be easy to achieve if we were working on a website where we knew all the existing pages, their IDs or slugs and I’ll talk about this too, but today I’ll show you a different approach.
This post will teach you how to output the current menu item number (in the menu order) in the body element classes in your theme. We will then use the class to give a different background color to each page according to it’s position in the navigation menu. Note that this will work only with wp_nav_menu but can easily be modified to the fallback pages walker if a menu is not set. Permalink