Applying styling to a specific WordPress page


If you find this free website useful – why don’t you support this with a donation? It is easy…. read more ….

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

Find WordPress post id

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

WordPress Page or Post ID element

 

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

body.postid-505  div.breadcrumb {display: none;}

 


Leave a Reply

Your email address will not be published.