Make WordPress Core

Opened 9 years ago

Closed 4 months ago

Last modified 8 weeks ago

#35164 closed enhancement (fixed)

Singular body class and main post post class

Reported by: danielpataki's profile danielpataki Owned by: audrasjb's profile audrasjb
Milestone: 6.8 Priority: normal
Severity: normal Version:
Component: Themes Keywords: has-patch has-unit-tests commit has-dev-note
Focuses: Cc:

Description

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.

Attachments (3)

post-template.diff (749 bytes) - added by danielpataki 9 years ago.
Adds the singular body class and the main-post post class
frontend.png (114.1 KB) - added by raj198 4 months ago.
35164
wp-singular-class.png (100.5 KB) - added by shailu25 4 months ago.
wp-singular-class

Download all attachments as: .zip

Change History (32)

@danielpataki
9 years ago

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

#1 follow-up: @peterwilsoncc
9 years ago

  • Component changed from General to Themes
  • Version trunk deleted

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

#2 in reply to: ↑ 1 @danielpataki
9 years ago

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.

Last edited 9 years ago by peterwilsoncc (previous) (diff)

#3 @swissspidy
9 years ago

  • Keywords has-patch added

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.

#4 @johnbillion
9 years ago

  • Milestone changed from Awaiting Review to 4.5

#5 @johnbillion
9 years ago

  • Owner set to johnbillion
  • Resolution set to fixed
  • Status changed from new to closed

In 36112:

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

Adds tests

Fixes #35164
Props danielpataki, johnbillion

#6 @danielpataki
9 years ago

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 :)

#7 @eceleste
9 years ago

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.

This ticket was mentioned in Slack in #core by jorbin. View the logs.


9 years ago

#10 @ocean90
9 years ago

  • Keywords needs-patch added; has-patch removed
  • Milestone changed from 4.5 to Awaiting Review

Reverted in [37249].

#11 @SergeyBiryukov
9 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

This ticket was mentioned in Slack in #core by ocean90. View the logs.


9 years ago

#13 @peterwilsoncc
9 years ago

Any interest in:

  • is-singular
  • wp-singular

or some such?

#14 @johnbillion
9 years ago

  • Owner johnbillion deleted
  • Status changed from reopened to reviewing

#15 @poena
6 months ago

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

#16 @peterwilsoncc
6 months ago

@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...

#17 @poena
5 months ago

  • Milestone set to 6.8

This ticket was mentioned in PR #8077 on WordPress/wordpress-develop by @poena.


5 months ago
#18

  • Keywords has-patch has-unit-tests added; needs-patch removed

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

This ticket was mentioned in PR #8107 on WordPress/wordpress-develop by @rinkalpagdar.


4 months ago
#19

Trac ticket: #35164

---
This adds a "singular" class to a single page using body_class().
https://github.com/user-attachments/assets/17db29a2-a430-4504-ae52-a2b8bb6ba7d1

@audrasjb commented on PR #8107:


4 months ago
#20

Closing in favor of #8077.

#21 @audrasjb
4 months ago

  • Owner set to audrasjb

#22 @audrasjb
4 months ago

  • Keywords commit added
  • Status changed from reviewing to accepted

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.

#23 @raj198
4 months ago

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.✅
Last edited 4 months ago by raj198 (previous) (diff)

@raj198
4 months ago

35164

#24 @shailu25
4 months ago

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
4 months ago

wp-singular-class

#25 @audrasjb
4 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

#27 @audrasjb
4 months ago

  • Keywords needs-dev-note added

This should be mentioned in the Themes devnote.

#29 @JeffPaul
8 weeks ago

  • Keywords has-dev-note added; needs-dev-note removed

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

Note: See TracTickets for help on using tickets.