No, don’t hardcode the ID’s for pages in your CSS. You might want to use the same styles elsewhere, or if the stylesheet is cached for users, they might not immediately see your changes you push up if you don’t version the stylesheet. Not only that it makes deciphering your styles just that much harder in the long run!
Yes the terminology can be a bit confusing if you’re not used to WordPress. A page actually is a post technically as are a lot of other things. If your page template includes a call to post_class() – then the classes from core would be outputted on the tag that makes use of post_class(). This can be useful to target the display of a particular post type/format, or conditionally adding your own classes to it with a filter for different displays in different contexts.
There’s several ways to target the elements based on where they come from, and how you want your styles to carry over in WordPress.
In your situation, yes you could hardcode the IDs, but I wouldn’t really say it’s a good choice – but that’s just my opinion. If your plan is to create the new content, and eventually once it’s done you will be removing the old content page which uses the same template – then it’s probably best to create a new page template with a new name altogether in the mean time. A body class would be applied for you to use for specific styles on that template, so you would write your CSS definitions namespaced for that:
.page-template-your-custom-template .entry-header img,
.page-template-your-custom-template .entry-header img {
width: 100%;
left: 0;
}
You would then know that you are styling specifically things for that template, and won’t confuse yourself in the future. You don’t have to run back to the admin to see what page template something is using, and reading your stylesheet will make more sense.
Just like post_class() method, there’s also a body_class() method which adds classes to the body element. The other option would be to conditionally add a body class to the page, so you can take care of it that way.
Take for example:
Working from the top down, probably in your theme’s header.php there’s a method body_class() on <body>.
You could add your own classes to this with the body_class filter, and then check for the page ID you want to manipulate with is_page() in your functions.php file – for example:
function theme_namespace_your_body_class( $classes ) {
if ( is_page( array( 111, 222 ) ) ) {
$classes[] = 'your-custom-body-class';
}
return $classes;
}
add_filter( 'body_class', 'theme_namespace_your_body_class' );
Now instead of writing out something like this:
.page-id-111 .entry-header img,
.page-id-222 .entry-header img {
width: 100%;
left: 0;
}
You stylesheet would have:
.your-custom-body-class .entry-header img {
width: 100%;
left: 0;
}
So once you’re all done with your modifications, if you ever need to apply these styles to other pages, posts, templates or whatever – you can simply modify that method above to include other page ID’s or use a variety of WordPress conditionals to apply those same styles elsewhere depending on the context.
Additionally if someone has the stylesheet cached, you’re not forcing yourself to update your stylesheet version number with each minor change you’re doing to bust the cache. Your PHP code is dictating what classes to apply and saying this is how this page, post, or whatever should be structured, while your stylesheet remains a stylesheet controlling how things in those contexts should actually appear.
From that top level, the same exact things can be done moving deeper on the post_class() level, and use something like is_single() to check if the post in the query is for the IDs you want to include the class on that element for. Take for instance this:
function theme_namespace_your_post_class( $classes ) {
if ( is_single( array( 111, 222 ) ) ) {
$classes[] = 'your-custom-post-class';
}
return $classes;
}
add_filter( 'post_class', 'theme_namespace_your_post_class' );
Now your element using the post_class() method will conditionally have that class included for those post IDs.
Just like creating a new page template – you can do this for posts. You could create a file like your-custom-post-single-post.php and designate it’s for just posts to use:
<?php
/*
* Template Name: Your custom template
* Template Post Type: post
*/
Or maybe you want the same template to be able to be used for pages and posts:
<?php
/*
* Template Name: Your custom templatee
* Template Post Type: post, page
*/
You should definitely look into the WordPress template hierarchy as you expand upon your theme, and what works best for you might be a completely different solution, but that will definitely help guide you on what things belong where, and how to better structure your theme. Looking at a starter theme such as _s, or even any of the twentywhatevers to see how they structure things, is also a good way to see some of the best practices and methods of doing thing.
This all doesn’t mean it’s absolutely forbidden or a bad practice to use page or post IDs for styles, but I believe in 99% of those situations it’s not necessary.