Close

Layers Help & Support

Layers 2.0.10 Update

Layers 2.0.10 Update

Removing the Envato Marketplace listings.

  • Fixed Image Ratio button in the Post widget
  • Removed redundant Envato Market listings

UPDATE LAYERS View on GitHub

How to Style Specific Posts or Pages Differently

How To  Tutorials  Last Updated: Time to Read: 3 minutes

General Use: Whether you are looking to create an art-directed experience on your blog or magazine website, or just want to change simple things like header color, menu link color, or a font on specific posts or pages, in most cases you need to use CSS.

Developers: Technical limitations in the WordPress customizer make it difficult to develop reliable customization options that appear for and affect a single post separately from others. Instead, you can achieve post or page-specific options through Custom Meta, explained in this guide.

Layers offers you two other areas, the CSS panel in the customizer explained here (where you add global styles), and the Advanced option in your widgets explained here (where you add widget-specific Custom CSS). This article covers how to use post-specific Custom CSS that allows you to achieve a great deal of detailed customization at the post or page level.

To target a specific page or post, you need the page or post ID.

If you want to restyle a common element on a specific page, such as links, borders or fonts,  you will need to target the page by its unique ID so the browser knows to apply your styles to just that page.  Thankfully, WordPress assigns a unique “class” to the body element of your pages to make this easier.

If you right-click the page and choose “View Source” or use the Inspector to view the HTML/source code area, locate the <body>  element to view its class names:

bodyclass

In this example, the selector for this page is page-id-82  . We could also use page-template-fullwidth-php  to affect ALL pages using that page template, but we want ONLY this page.

Using the selector in Custom CSS

Say you wanted to hide the title banner element on just this page. Using the above page id selector in combination with the class for the title banner, .title-container  , you can do that:

If you wanted to make the background/content area a different color on just this page:

You can simplify this somewhat with a plugin such as WP Post Styling, which adds a Custom CSS box to the post or page editor where you can add CSS that affects just that post or page. In this case, you do not need to determine or use the page or post ID class.

Browser Inspector

The browser inspector is a browser feature that allows you to view specific snippets of a webpage element’s HTML and CSS.  You can isolate specific elements or tags and view the corresponding CSS styles to easily test changes and copy the code for customization. All webkit browsers come with an inspector built in. For best results, do not use IE to build or test customizations.

If you have a webkit browser such as Chrome, Firefox, Safari or Opera, Inspect Element is available from the context menu and will pop up a panel in your browser showing you the markup on the left and styles on the right (shown below in Firefox). You may also access additional enhanced inspectors via Extensions for Chrome, or via the Firebug plugin for Firefox.

See How to Customize Your Site With CSS for a beginners primer

For designers and developers, check out the CSS Styling Using the Browser Inspector & Customizer  for tips on rapid restyling with the browser inspector.

Selecting a specific element (each shown on their own row) in the HTML window on the left, such as the <li>, will highlight the element in the preview to assist you in determining what is what:

inspector1

To select specific elements, you can either right-click them in the preview pane, or left-click the code in the left-hand inspector window.

The CSS styles for each element are shown on the right side, with the most dominant selector (the .class-name or #id-name) shown first.

Testing Changes

You can edit specific styles in the sidebar, or view the stylesheet to see all relates syles by clicking the link to the far right:

click_stylesheeteditstyles

Changes you make will take effect immediately to help you test and preview them. This also helps you grab the correct style selector.

To make permanent changes, copy the new/edited styles into the CSS panel, DevKit or your Post/Page Custom CSS box (if using a plugin)

Recommended Reading

Check out the following resources for further help on using the Inspector, the basics of CSS structure, or what property names to use in your styles.

Did you know?

Our friends at Jetpack are doing some incredible work to improve the WordPress experience. Check out Jetpack and improve your site's security, speed and reliability.

Jetpack