• Home
  • Cloud
    • General
    • SaaS
    • BPaaS
    • PaaS
    • IaaS
    • Other Internet Hosted Applications
      • WordPress
        • WooThemes Canvas
          • WooThemes Canvas CSS
  • About me
  • Why Badly Wired?
  • Contact

Badly Wired

Alan's technical notebook - WordPress and other stuff

You are here: Home / Cloud / Other Internet Hosted Applications / Wordpress / Applying styling to a specific WordPress page

Applying styling to a specific WordPress page

11th January 2015 by Alan Leave a Comment

Fully Managed UK Hosting - Only £1+VAT till 1st Jan 2021 on Shared, Reseller and Dedicated Hosting! .... 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 )

Fully Managed UK Hosting - Only £1+VAT till 1st Jan 2021 on Shared, Reseller and Dedicated Hosting! .... read more ....

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;}

 

[Next] Find out where to host WordPress [Read the full article…]

Filed Under: Wordpress  

About Alan

I'm Alan from Fullworks Digital Ltd, where I develop WordPress Plugins .

My day job consists of developing new code and solutions along with support my WordPress plugin user.

I started as a professional programmer in 1979 and had been involved with the IT of business technology in virtually every area that exist.

Badlywired.com is my technical notebook, my aide memoire of the many interesting facts that I come across and 'how to' recipes of things I do infrequently. As I spend a lot of time gathering parts of solutions from the internet and assembling them into my own solutions, and also just learning how to do things, this blog is one way of giving something back to the online community that has helped me extensively.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Applications
  • Cloud
    • General
    • Google Cloud
    • IaaS
    • Other Internet Hosted Applications
      • Wordpress
        • WooThemes Canvas
        • WooThemes Canvas CSS
    • SaaS
  • Code snippets
  • Discounts
  • Genesis
  • Google Apps for Works
  • Linux
  • News
  • SEO
  • Server setup
  • Services
  • Tech Tips
  • Uncategorised
  • Useful Images
  • Useful Stuff
  • WordPress Hosting
  • WordPress Plugins

Tags

background jobs beadcrumbs bind brandings Cache canvas Centos chrome css fail2ban Find firefox Flash fraud genesis gocardless godaddy Google google maps hackers internet explorer javascript KashFlow Linus linux Magento mapquest maps microsoft mysql news nohup php plugin plugins queens diamond jubilee replace SED SEO skype Varnish Virtualmin Webmin woothemes Wordpress

 

Affiliate and Privacy Notices

This site is free to use, but hopes to cover some costs through affiliate income, some products and links are affiliates and may earn the site advertising income.

Some affiliates use Cookies to track if you purchase from them, this allows them to apportion revenue to us you will need to refer to their specific privacy notices as to how you are tracked.

This site is a participant in the Amazon EU Associates Programme, an affiliate advertising programme designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.co.uk.

  • Privacy Policy

Copyright © 2021 · Badly Wired