Adding Custom CSS to Specific WordPress Pages

Working on a website where I want to have one background image for the homepage and then a different one for the interior pages. Pretty simple right? Well I looked through some of the .php files and page templates to see where the background was getting pulled and how it was being called on. Turns out the quickest and simplest way to achieve this is just by modifying the CSS file.

Just like you can modify specific text widgets with their own CSS you can modify specific pages with their own CSS. WordPress makes this very easy to do via page IDs. To change up the CSS of a page just call out the element and the page id, then add your custom CSS attributes as seen in this example:

body.page-id-111{
background-color:#E7E7E7;
background-position:50% 0;
background-repeat:repeat no-repeat;
border-top-color:#000000;
border-top-style:solid;
border-top-width:4px;
}

Simple, quick and unobtrusive way to make the adjustments on a per-page basis. Enjoy!

Leave a Reply

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