Apply Custom CSS rules using WordPress Page ID
Latest update: February 4, 2019 | Reading time: 2 to 3 minutesIt would be a lie to claim you never needed to change the style of a particular page and keep the rest of the website as is. Fortunately, there is an easy way to apply styling changes on a specific page using WP Page ID. You see, every WordPress post has it’s own unique ID within the installation. Technically, every post, page, and even custom types, for WordPress database are simply “posts” and can be identified by their number. To find the ID number of each post, navigate to Dashboard, chose Posts or Pages or any other post type you need and check the list.
Now, if you look carefully while moving the mouse over any item, on the browser’s bottom appears an address where the link leads to (left or right side, depending on the browser). If you look at this address, between others you should see ” …..post=xxx…..” This is the post identification number. If you are familiar with CSS you can use this identification number to create any rule and assign it to a particular page.
As an example, we’ll change the font size on the body of a page. You need to log into Dashboard and locate Theme Options > Advanced > Scripts and Style > Custom CSS. On the field, insert the following rule:
p { font-size: 26px; }
and save settings. If you check the website, you’ll notice that all fonts on body text are larger. Let’s try this again, but apply it on a specific page. Go to Dashboard > Pages and locate the page id of a page. Let’s suppose the page id is 166. Change the rule accordingly:
.page-id-166 p { font-size:26px; }
Save changes and visit the webpage. At this point you’ll notice the font size will have been altered only on the specific page.
VALID FOR ANY THEME