0

This is quite a starter question. I want to change the style of all the posts in the "photos" category by adding custom CSS to the style.css file of my child theme. However, I cannot find any category tags for my posts in the source code. Therefore I can not target it. So how can I add a "photos" class to all entries that fall under the Photos category?
I am using the TwentyTwentyTwo theme with a Child theme.
Thanks!

9
  • do you mean a css class? A tag would be <tag> which wouldn't make much sense. When you say you want to style all posts in the photos category are you talking about when they appear in a list/archive or are you talking about when you've clicked on a "photo" post and are viewing it? It's not clear
    – Tom J Nowell
    Commented Apr 5, 2023 at 13:34
  • Thanks @TomJNowell for the questions. Sorry I wasn't clear. So yes, I was looking for a css class. To clarify: I have a website and on that site among different pages (Home, Contact, etc.) there is a page named Photos. That Photos page has links to 3 or more posts. These posts all have the category "photos". I'm looking for a way to be able to change the style of these posts, to avoid doing it one-by-one (eg. targeting the postid-) for each because it's not so efficient. That is why I thought there might be a way of getting a class for all the posts which are under the "photos" category.
    – Klosmi
    Commented Apr 5, 2023 at 14:24
  • I'm still unclear, e.g. if you wanted to target the class to add outline:1px solid hotpink;would it be the links on the photos page that are outlined? Or the content when you click on that link? Or the photos page itself? I understand that you have posts, but it's not clear which part specifically you want to style. A screenshot with an arrow would help enormously as your description never specifies the specific thing you want to style explicitly, only indirectly
    – Tom J Nowell
    Commented Apr 5, 2023 at 14:39
  • if it's the posts themselves once you've clicked on the link, then you should be able to target css class names that are added by WordPress to the body tag to build a CSS selector
    – Tom J Nowell
    Commented Apr 5, 2023 at 14:40
  • Sorry again for being unclear. I provided 2 images (see in the question above). The 1st is the website on the Photos page, in the middle 2 buttons. By clicking on the 1st one it directs to the Concert photos post (the 2nd image). The 2nd button goes to the Theater co-productions post. If I want to change eg. the background to blue color for all the posts I have related to the Photos page, I couldn't find the way to do that. For specific post indeed I can do that by using the ID in the body tag, like #postid-412. But for the other post I have to use another id, for newer posts do it again.
    – Klosmi
    Commented Apr 5, 2023 at 15:49

1 Answer 1

0

I managed to solve my problem.
So, the posts are using a single.html template file (in the TwenytTwentyTwo theme: /templates/single.html).
I wanted to target a category class in the <body> element of the single.html. To make that happen, I had to modify the single.html file in my Child theme by adding the following code snippet within the main wp:group block:

<!-- wp:post-terms {"term":"category"} /-->

After that, in the functions.php I added a function that adds a category class to the post's HTML <body> element on the single post pages.
(I added comments to make it clear.)

// Get posts category 
function add_category_class( $classes ) {

  // Check if the current page being viewed is a single post
  if ( is_single() ) {

  // The $post variable is set to the current post being viewed
    global $post;

  // Loop through each category of the post, add a class "category-" to the $classes array 
  // Followed by the category's slug (URL-friendly)
  // Each category associated with the current post, and the "get_the_category( $post->ID )" function is getting those categories based on the ID of the current post.
    foreach ( ( get_the_category( $post->ID ) ) as $category ) {
      $classes[] = 'category-' . $category->slug;
    }
  }

 // Return the updated body classes array
  return $classes;
}

// Add the classes to the body tag of the post
add_filter( 'body_class', 'add_category_class' );

and in the style.css I was able to target it (here the photos category is selected).

   /* Change background color for posts in Photos category */    
    .category-photos { 
      background-color: red; 
    }

That made the background red of a single post page within a a specific category.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.