1

I'm hoping to add text above the featured image box in the gutenberg editor to let people know what size of image to upload. I've pieced together how to do this for all posts, but I don't know enough to make it work for just one cpt. (in this case rt_brands).

Here's what I did: I created a plugin with a main file and a js directory. In the main file I added this code:

function rt_featured_img_enqueue_script() {   
    wp_enqueue_script( 'rt_featured_image', plugin_dir_url( __FILE__ ) . 'js/featured_img.js', [ 'wp-element', 'wp-hooks' ]  );
}
add_action('admin_enqueue_scripts', 'rt_featured_img_enqueue_script');

in the js directory I added a file named featured_img.js.

The contents of that file are:

var el = wp.element.createElement;

function wrapPostFeaturedImage( OriginalComponent ) { 
  return function( props ) {
      return (
          el(
              wp.element.Fragment,
              {}, 
              'Add a png or webm image (500x500px)',
              el(
                  OriginalComponent,
                  props
              ),
              ''
          )
      );
  } 
} 

wp.hooks.addFilter( 
  'editor.PostFeaturedImage', 
  'my-plugin/wrap-post-featured-image', 
  wrapPostFeaturedImage
);

This is serves to add the text "Add a png or webm image (500x500px)" to the featured image section on all posts, pages, and other post types.

How can I limit the code to just apply to the rt_brands post type?

1 Answer 1

2

Try this:

function wrapPostFeaturedImage( OriginalComponent ) {
    const currentPostType = wp.data.select( 'core/editor' ).getCurrentPostType();

    // Do nothing, if the post type is not rt_brands.
    if ( 'rt_brands' !== currentPostType ) {
        return OriginalComponent;
    }

    return function( props ) {
        // Your code here.
    };
}

You can also:

  • Conditionally add your filter:

    // Check if the current admin page is post-new.php or post.php, and that the
    // post type of the post being added/edited is rt_brands.
    if ( 'rt_brands' === window.typenow && 'post-php' === window.adminpage ) {
        // Add your filter, i.e. call wp.hooks.addFilter().
    }
    
  • Conditionally enqueue your script:

    function rt_featured_img_enqueue_script() {
        $screen = get_current_screen();
        if ( 'rt_brands' === $screen->post_type && 'post' === $screen->base ) {
            // Enqueue your featured_img.js script, i.e. call wp_enqueue_script().
        }
    }
    
2
  • Thank you for this! Each of these works. I think it's probably best not to even enqueue the script though if it's on the wrong post edit page. That's what I would do for a frontendscript. Do you think there's a benefit of one over the other?
    – rudtek
    Jan 24 at 5:28
  • 1
    Yep, I would do the same (i.e. load the script only when it's needed), however, the first two options can help in avoiding modifying the featured image component when the script was wrongly/mistakenly enqueued on the page, so I might also use the first option as an extra validation. :)
    – Sally CJ
    Jan 24 at 11:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.