Customize Posts CSS
Add custom CSS for any post or page on any archive or singular template with editing and previewing in the Customizer.
Since WordPress 4.7 core has provided an Additional CSS section in the Customizer for users to add and preview custom CSS for their site (see #35395).
This plugin brings the same functionality to be able to provide custom CSS for individual posts and pages on your site. The custom CSS will be output in
style elements whenever
the_post is done. The CSS is stored in a
custom_css postmeta and Custom CSS is presented for every post that has the
custom_css post type support, which is given to all public posts by default.
This plugin has a few dependencies:
- It requires the Customize Posts plugin for adding the ability to manage and preview postmeta in the Customizer. The Custom CSS control is added to the post/page Customizer sections which this plugin adds.
- It relies on CodeMirror being in core as of 4.9-alpha. See #12423.
- It uses the
WP_Customize_Code_Editor_Controlproposed for WordPress 4.9. See #41897.
See also #38707 which proposes extending the Custom CSS editor in core with being able to edit per page CSS.
Custom CSS control appears in each post section with initial selectors for targeting post/page in post container (
post_class()) and body container (
The custom CSS appears with the post on an index page and here the
.hentry selector is key for targeting the post in The Loop.
The custom CSS also appears with the post on its singular template, and here a
body selector with an appropriate post-specific class name is useful for changing the look of the entire page.