Occasionally, you may want to apply specific styling to an individual page of post. For instance you may want a custom background to apply to a very specific page or post.
This is very easy as WordPress adds default classes to the <body> tag ( see http://codex.wordpress.org/Function_Reference/body_class )
The first step is to find the relevant id. The reference above will help.
Finding the post/page id isn’t so easy if permalinks are turned on, but if you log in to admin and go and edit the page / post the URL should revealed. For instance this post is 503 which you can clearly see when editing the post.
(p.s. there are plugins or code that you can add if you want to see the post ID in wp-admin see https://premium.wpmudev.org/blog/display-wordpress-post-page-ids/ )
Once you have the id then it is matter of identifying the appropriate css selector.
WordPress automatically adds the id somewhere as a body class, for a page it is called page-id-nnn and for posts it is postid-nnn (confusingly without the hyphen for posts). In fact you can use the same approach for categories and tags too as these will all have <body> classes. ( see http://codex.wordpress.org/Function_Reference/body_class )
The best way to see this is with browser development tools that allow you to inspect elements. In Chrome it is build in (right click), with FireFox you need the Firebug add-in, in IE it is Developer Tools (F12), with Safari it is possible too ( see here )
Like this
Once you have this element you can apply your specific styling e.g. here I will hide the <div class=”breadcrumb”> using CSS for the above example
|
1 |
body.postid-505 div.breadcrumb {display: none;} |
Leave a Reply