The question:
I have different styles applied to pages (I hide the title for them) and posts (I don’t want to hide the title here, but style the date of the post). I want to style them differently, which ist possible on the site itself. But in the editor I don’t seem to have the possibility to distinguish between pages and posts.
There is no css-class in an upper element which indicates whether I am editing a page or a post which I could use in my css.
How can i know what I am editing in the editor – a page or a post. It’s driving me crazy – there must be a way to know this.
The Solutions:
Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.
Method 1
You can use the admin_body_class
hook to add your own CSS classes. For example (if you’re using Gutenberg):
function pb_admin_body_class($classes) {
$screen = get_current_screen();
if (!$screen->is_block_editor()) {
return $classes;
}
$post_id = isset($_GET['post']) ? intval($_GET['post']) : false;
$post_type = get_post_type($post_id);
if ($post_type) {
$classes .= $post_type;
}
return $classes;
}
add_filter('admin_body_class', 'pb_admin_body_class');
Method 2
The html code must be prepared for it.
For example different classes for the use of css.
example:
<div class="pages">
<a href="#">title</a>
<?php whatever the page title code ?>
</div>
<div class="posts">
<a href="#">title</a>
<?php whatever the posts title code ?>
</div>
then the css is easy:
.pages{display:none;}
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0