By default, WordPress inserts a page ID class onto every page you create. For example, this is a typical <body> tag you’d see on a WordPress site:

So now if you want to style something specifically on that page, you simply use that selector:

That’s all handy and well and good, but sometimes it can make your CSS file extra confusing. Especially if you have a bunch of these strung together. Like so:

You might personally know what those pages are, but for anyone else who tries to edit your code – either now or in the future – they’re going to be confused. So at the very least you’d have to throw a comment in there to tell the other developers what page that is. Something like:

But again, if you have multiple ‘.page-id-xx’ classes strewn throughout your CSS file, it will start to get rather cluttered. So is there a better way to handle these page-by-page CSS styles?

Funny you should ask…

Here’s a brief snippet you can throw in your functions.php file, and it will add the page title as a class to every page:

So instead of seeing this:

You’ll see something like this (of course the actual selector will depend on your page name):

Or this:

It might not seem like the greatest thing since partially hydrogenated soybean oil, but it can be rather useful, especially when developing with a team. You’ll no longer be overrun with meaningless page-id numbers in your CSS file. You can now simply look at the selector and know exactly what page it’s referring to. Not a bad bonus for 20 seconds worth of dropping a tiny snippet into your functions file…

Okay, onwards and upwards.