I have registered a custom post type using register_post_type('myposttype', ...). On published posts, there is a custom class that gets applied to the whole body of the page, single-myposttype. I apply css rules using this body class to make the post appear differently from non-custom post types posts.

Now that the Gutenberg editor is such a key part of WordPress, I would like to be able to add a custom body class to the editor when working on these custom post types, so that the same style rules that apply to the published post are applied during editing.

I have seen some answered questions (e.g. this one) which use javascript, however if I understand correctly they would apply to the editor for all posts and pages, not just custom post types.

2 s
2

This hook should add a single-[post_type] class to the body of the editor page.

add_filter('admin_body_class', function ($classes) { 
        //get current page
        global $pagenow;

        //check if the current page is post.php and if the post parameteris set
        if ( $pagenow ==='post.php' && isset($_GET['post']) ) {
            //get the post type via the post id from the URL
            $postType = get_post_type( $_GET['post']);
            //append the new class
            $classes .= 'single-' . $postType;
        } 
        //next check if this is a new post
        elseif ( $pagenow ==='post-new.php' )  {
            //check if the post_type parameter is set
            if(isset($_GET['post_type'])) {
                //in this case you can get the post_type directly from the URL
                $classes .= 'single-' . urldecode($_GET['post_type']);
            } else {
                //if post_type is not set, a 'post' is being created
                $classes .= 'single-post';
            }


        }
    return $classes;
}); 

Leave a Reply

Your email address will not be published. Required fields are marked *