0

I have a certain category of posts (let's say the category is punk-rockers) that I would like to:

  1. be styled differently from other posts in my main loop (index.php) and
  2. have single posts (single.php) which are styled differently from my other posts.

So, there will be four different styles, in total:

  1. default loop
  2. special-category loop (e.g. punk-rockers loop style)
  3. default single post
  4. special-category single post (e.g. punk-rockers single style)

Importantly, styles #2 and #4 are also not only different from #1 and #3, but also from each other. So not only will posts of category punk-rockers look different on the main loop from the other posts, but these posts will also have single-posts whose own styling will differ, depending on if it appears in the main-loop or single post.

I know I can use the existing category class .category-punk-rockers to modify the posts of this category in CSS, but here is my problem: I'm not sure how about the easiest way to stylize them differently on the loop and the single.

I would love it if you all could tell me what you think are the most elegant selectors to use/approach to take to accomplish this.

Thanks!

Note: answers to this question use php to solve some of a somewhat similar issue with content differing (as opposed to just style), but I think if I only want to change style there might be a simpler, CSS-only approach I can use.

Improve this question
0

3 Answers 3

Reset to default
1

I'm not sure I understand the question, since the answer seems straightforward, assuming standard templates - it's conceivable that your theme does not provide the kinds of classes you are asking for, but IMO would be odd.

It is standard practice for theme writers to include the function body_class() which adds different classes to the page's html body tag, depending on what kind of post or page you are displaying. These classes include things like:

  • archive (for the archive page),
  • blog (for blog or main loop),
  • home (for home or main loop),
  • single/single-post (for single),
  • category/category-[cat-#] (for category).

Depending on which apply, you'll see different ones listed.

If you want to know what the classes are for your page you can view the source code, and look at the <body> tag at the top.

So you could use .category-punk-rockers to style punk-rockers. in general, .home .category-punk-rockers for main loop, .archive .category-punk-rockers for category archives, .single-post .category-punk-rockers for single posts, etc. Depending on what kind of widgets and extras your installation uses, you may need to create some further distinctions.

Improve this answer
10
  • in the answer i just wrote, I added the class single-post using the function post_class(). Is there a function that outputs something like that already?
    – CoderScissorhands
    Jan 19, 2017 at 17:29
  • 1
    Exactly what you get will vary with your theme's templates and possibly with plugins, but most standard themes (starting with the WP annual themes, of course) will provide those basic ones by default. Use inspection tools to see what classes are already there for you to exploit.
    – CK MacLeod
    Jan 19, 2017 at 17:42
  • Lol, that's actually what I need help with, there's too much stuff going on! I can't tell. :)
    – CoderScissorhands
    Jan 19, 2017 at 17:43
  • 1
    Seeing your answer above: Nothing wrong with adding your own custom classes: The more the merrier (as a general rule), as long as you don't inadvertently double up on class names in different positions. If you're adding your own custom classes with generic names, you may want to prefix or otherwise distinguish them: codesc-single and so on.
    – CK MacLeod
    Jan 19, 2017 at 17:45
  • 1
    Shouldn't be hard to find the body classes, they're right there near the top. You'd hardly even need to search the page source.
    – CK MacLeod
    Jan 19, 2017 at 17:47
0

In "single.php" check if is category:

is_category( 'Punk-Rockers' );

and then do

get_template_part( 'punkrockers' );

With this you can do a lot of things. Btw. this conditional tags offer a lot: https://codex.wordpress.org/Conditional_Tags

Improve this answer
2
  • Yes, but in this case I'd have to specify the category in the php files themselves and generate php files for every category. I want to use existing classes to do this, if possible, to save time. This way I could also apply the method to other categories easily. I think there is likely a CSS only solution. It would involve using a parent selector that differs between index and single. something like .index-identifying-class .category-punk-rockers and .single-identifying-class .category-punk-rockers
    – CoderScissorhands
    Jan 19, 2017 at 16:46
  • Like this: css-tricks.com/snippets/wordpress/add-category-name-body_class?
    – herrfischer
    Jan 19, 2017 at 16:47
0

I found a solution that is generalizable (meaning you can use it for other categories without needing to write specific code for each), but you do have to add a bit of code to the index.php file and the single.php file.

In your index page

instead of just: 

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

you can add the class main-index to the post by adding a parameter to the function post_class(), like this:

<article id="post-<?php the_ID(); ?>" <?php post_class('main-index'); ?>>

In your single page

instead of just: 

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

you can add the class single-post instead, using the same approach, like this:

<article id="post-<?php the_ID(); ?>" <?php post_class('single-post'); ?>>

CSS Selectors for your stylesheet:

Then you can style the post in the index using

.main-index.category-punk-rockers {/*CSS*/}

and style the single as

.single-post.category-punk-rockers {*/CSS*/}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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