How to customize a post page for a particular category

  • Dani Weymouth

    (@dartists)


    10 years ago

    Hey all. I am trying to customize all the post pages for a particular category but making all the links red. The category page itself is working but I can’t get the individual posts to change. I’ve tried everything I can think of.

    See: http://seaninconcert.com/2014/03/rush-ipod-setlist-challenge/ which should look like: http://seaninconcert.com/category/rush/.

    The css so far is:

    .category.category-rush.category-7 a, .category.category-rush.category-7 #sidebar .widget-container h3, .category.category-rush.category-7 #footer-widgets .widget-title, .category.category-rush.category-7 #footer-widgets a
{color:red !important; }

.category-rush a,
.category-rush h3,
.category-rush .widget-title,
.category-rush #sidebar .widget-container h3,
.category-rush .navbar .nav>li>a,
.category-rush #footer-widgets .widget-container h3,
.category-rush #footer-widgets li,
.category-rush #footer-widgets h3,
.category-rush #footer-widgets a
{color: red !important;}

    `

    Any ideas?

Viewing 3 replies - 1 through 3 (of 3 total)
  • stephencottontail

    (@stephencottontail)

    10 years ago

    The reason nothing happens is because of your HTML structure. For example, your last rule targets any <a> tag that’s contained within an element with the id “footer-widgets” that’s contained within an element with the class “category-rush”. Nothing on your page matches that. I think the easiest way to fix this is to filter body_class() so it adds the appropriate slug. Make a child theme and put this in your functions.php:

    add_filter('body_class','add_category_to_single', 10, 2);
function add_category_to_single($classes, $class) {
	if ( is_single() ) {
		global $post;
		foreach((get_the_category($post->ID)) as $category) {
			// add category slug to the $classes array
			$classes[] = "category-" . $category->category_nicename;
		}
	}
	// return the $classes array
	return $classes;
}
    Thread Starter Dani Weymouth

    (@dartists)

    10 years ago

    Thanks for the suggestion. Can you explain what the code above actually does? What is the 10, 2? What is the correct way to call all links on post pages with the category Rush?

    stephencottontail

    (@stephencottontail)

    10 years ago

    The way the code works is that it modifies the body_class() function (which your theme should be calling), which is the function responsible for adding various HTML classes to your <body> tag, which can be targeted for styling via CSS rules. The “10” gives the priority of this function (with lower numbers being executed first), in case a plugin or other function also tries to modify the body_class() function, and the “2” means the function passes two arguments.

    The function itself says that if we’re looking at a single blog post, then activate the global $post variable, which contains all sorts of information about the blog post being viewed. Then, for each category that the post was assigned, add category- plus the category name to the output of body_class().

    The end result is that your <body> tag will have the class category-rush, which will make the CSS rules that you posted work.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to customize a post page for a particular category’ is closed to new replies.

Tags