[Solved] WordPress category/post color menu

Question

A lot of it depends on how your theme is set up, but here’s a general overview:

1. Ensure that you are using the body_class() function

Check you theme’s header.php and ensure the body tag looks something like:

<body <?php body_class(); ?>>

This will automatically add a bunch of classes to your body tag, including classes depending on which category archive page you are viewing.

2. Use a filter to add category classes to single posts

Insert the following function into your theme’s functions.php file:

function my_body_class_add_categories( $classes ) {

    // Only proceed if we're on a single post page
    if ( !is_single() )
    return $classes;

    // Get the categories that are assigned to this post
    $post_categories = get_the_category();

    // Loop over each category in the $categories array
    foreach( $post_categories as $current_category ) {

        // Add the current category's slug to the $body_classes array
        $classes[] = 'category-' . $current_category->slug;

    }

    // Finally, return the $body_classes array
    return $classes;
}
add_filter( 'body_class', 'my_body_class_add_categories' );

This will also add the category classes to single posts.

3. Add classes for pages

The body_class() function can also be filtered to add classes for page slugs. Add the following to functions.php:

function my_body_class_add_page_slug( $classes ) {

    global $post;

    if ( isset( $post ) ) {
        $classes[] = $post->post_type . '-' . $post->post_name;
    }

    return $classes;

   }
   add_filter( 'body_class', 'my_body_class_add_page_slug' );

This will add the class page-title to the body.

4. Style as you please

This will vary according to your theme’s markup, but it will be along the lines of:

.td-header-main-menu {
    background: blue; // The fallback colour for all pages
}

.category-showbiz .td-header-main-menu {
    background: red;
}

.category-sport .td-header-main-menu {
    background: yellow;
}

.category-shendetsi .td-header-main-menu,
.page-shendetsi .td-header-main-menu {
    background: green;
}

Conclusion

That should give you the general idea; we can’t give you more specific instructions without seeing the website itself or know which theme you’re using.

Accepted Answer