Singular body class and main post post class

[danielpataki]

I think it would be pretty useful to be able to style all singular posts with one selector. I thought it might be a good idea to output ".singular" using the body_class() function. This would allow people to target all singular pages.

In addition, detecting the main post on the page would be useful if someone had some related posts on a singular page. So the class ".main-post" could by added using the post_class() function.

I'm using this method via hooks in a theme so I can say: .singular .main-post {} which allows me to style posts and pages with one selector and give a default look to all custom post types.

[danielpataki]

Adds the singular body class and the main-post post class

[peterwilsoncc]

I'm +1 for singular, it's added by twentyeleven and twentyfouteen so the need is demonstrated.

My reading of is_main_query is it will always be true in the body, and if it isn't it's likely an indication the pre_get_posts filter should be used. If it isn't true, it will have been altered in code at which point a body_class filter can be used.

-1 on main-post

[danielpataki]

Replying to peterwilsoncc:

My reading of is_main_query is it will always be true in the body, and if it isn't it's likely an indication the pre_get_posts filter should be used. If it isn't true, it will have been altered in code at which point a body_class filter can be used.

You're completely right, good point! The feature would still be useful if we could detect the post output by the main query. For example: I would like my single post and single page titles to be centered. However, if I retrieve related posts below, I wouldn't want them to be centered. Hence:

 css
.singular .main-post .entry-title{
   text-align:center;
}

That said, I agree that this may not be a big issue. If there is a related posts section underneath that would likely have a wrapper class which you would use to style things anyway.

[swissspidy]

Thinking the same as @peterwilsoncc, +1 on singular, -1 on main-post as I don't think it can be done in a reliable way.

[johnbillion]

In 36112:

Themes: Add singular to the list of body classes when viewing a single post object.

Adds tests

Fixes #35164
Props danielpataki, johnbillion

[danielpataki]

Awesome, thanks everyone for your input! I still think main-post would be a great addition, although I see why it can't be done reliably. Do you think it would be worth creating a separate ticket for it, perhaps for further down the line?

Also, would .main-post be helpful? In my mind it would solve some problems, but I wouldn't call myself a master of HTML and CSS architecture so perhaps I'm over-thinking this :)

[eceleste]

This change broke the TwentyEleven theme, which made its own assumptions about a body_class called singular (see 36510). The fix for this is probably adjusting TwentyEleven. But I wanted to leave a pointer here over to the ticket noting this issue.

[SergeyBiryukov]

Follow-up: #36510

[ocean90]

Reverted in [37249].

[peterwilsoncc]

Any interest in:

• is-singular
• wp-singular

or some such?

[poena]

I searched using wpdirectory.net and there are 11 themes in the theme directory that use is-singular, but none that use wp-singular.

[peterwilsoncc]

@poena In that case, it's probably safer to go with the wp- given the last attempt to add the class broke sites already using the existing class. Also, WP using the wp prefix on things is a good thing in my not so humble opinion...

Themes: Add wp-singular to the list of body classes when viewing a single post object.

wp-singular includes a wp prefix to reduce conflicts with existing classes.

Updates test_singular_body_classes in Tests_Post_GetBodyClass to include the new CSS class.

Trac ticket: https://core.trac.wordpress.org/ticket/35164

Trac ticket: #35164

---
This adds a "singular" class to a single page using body_class().

Closing in favor of #8077.

[audrasjb]

Hello there,

I tested the PR on both a classic and a block theme.

• It correctly adds wp-singular body class to single posts, pages and custom post types singular posts but doesn't add it to other screens.
• Unit tests updates are looking good to me.
• I found ​one occurrence of wp-singular in a plugin, but it is a false positive.
• I found ​7 occurrences of wp-singular in themes, but all are false positive.

I think we are good to go with the proposed implementation.

[raj198]

Test Report

Description: This report validates whether the indicated patch works as expected.

PR Tested: ​https://github.com/WordPress/wordpress-develop/pull/8077

Environment

WordPress: 6.8-alpha-20250103.035904
PHP: 7.4.31
Browser: Chrome 131.0.0.0
OS: Windows
Theme: Twenty Twenty-Five 1.0
MU Plugins: None activated

Actual Results

• Issue resolved with patch.✅

[raj198]

35164

[shailu25]

Test Report

Description: This report validates whether the indicated patch works as expected.

PR Tested: ​https://github.com/WordPress/wordpress-develop/pull/8077

Environment

WordPress: 6.8-alpha-20250103.035904
PHP: 7.4.31
Browser: Chrome 131.0.0.0
OS: Windows
Theme: Twenty Twenty-Five
MU Plugins: None activated

Actual Results

• ✅ Issue Resolved With Patch.

[shailu25]

wp-singular-class

[audrasjb]

In 59689:

Themes: Add wp-singular to the list of body classes when viewing a single post object.

The wp-singular class includes a wp prefix to avoid conflicts with existing classes. This changeset also updates the Tests_Post_GetBodyClass PHPUnit test to include the new CSS class.

Props danielpataki, peterwilsoncc, swissspidy, johnbillion, eceleste, poena, audrasjb, raj198, shailu25.
Fixes #35164.

committed in https://core.trac.wordpress.org/changeset/59689

[audrasjb]

This should be mentioned in the Themes devnote.

[JeffPaul]

Note that the dev note for this is ​drafted and part of the Miscellaneous Dev Note.

[JeffPaul]

This has now been published as a section in the ​Miscellaneous developer changes in WordPress 6.8 dev note post.