How to know whether you are editing a page or a post?

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.


<div class="pages">
  <a href="#">title</a>
  <?php whatever the page title code ?>
<div class="posts">
  <a href="#">title</a>
  <?php whatever the posts title code ?>

then the css is easy:


All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment