Created a Custom Post Type for speakers on the site. Each will have a separate page and an archive page, where all speakers will be displayed in the form of cards. How can I set an image for a card on an archive page? Now, in the admin panel, the box with the choice of image for the post does not appear. Although I seem to have correctly added add_theme_support('post-thumbnails', array('speakers')). What could be the problem?

function.php:

function twentytwentytwo_support() {

  // Add support for block styles.
  add_theme_support('wp-block-styles');

  // Add support for thumbnails.
  add_theme_support('post-thumbnails', array('speakers'));

  // Enqueue editor styles.
  add_editor_style('style.css');

  // Menus
  register_nav_menus(
    array(
      'menu-1' => esc_html__('Primary', 'pediatric-integrative-medicine'),
      'menu-2' => esc_html__('Footer', 'pediatric-integrative-medicine'),
    )
  );

}

endif;

add_action('after_setup_theme', 'twentytwentytwo_support');

function pediatric_create_post_type() {
  register_post_type('speakers',
    array(
      'labels' => array(
        'name' => __('Speakers'),
        'singular_name' => __('Speaker'),
        'supports' => array('thumbnail'),
      ),
      'public' => true,
      'has_archive' => true,
    )
  );
}
add_action('init', 'pediatric_create_post_type');

archive.php:

<ul >
  <?php
     $args = array(  
     'post_type' => 'speakers',);
            $loop = new WP_Query( $args ); 
            while ($loop->have_posts()) :
      $loop->the_post(); ?>
    <li>
      <a href="#">
        <div >
          <img src="/wp-content/uploads/2022/08/speaker-1.png">
        </div>
        <div >
          <p>
            <?php the_title(); ?>
          </p>
        </div>
        <div >
          <p>
            Fribourg
          </p>
        </div>
      </a>
    </li>
    <?php endwhile; ?>
</ul>

CodePudding user response：

A few items to consider:

1. Thumbnail support is enabled in your theme,
2. Thumbnail support is enabled in your Custom Post Type, and
3. get_the_post_thumbnail_url() (or some variant of it) is used to get the URL for your <img> tag.

Theme thumbnail support

Details are available on this WordPress documentation page for Featured image.

Custom post type thumbnail support

You can add thumbnail support to your custom post type by using the supports property in the call to register_post_type():

  register_post_type( 'speakers', 
      array(
        'labels' => array(
        'name' => __( 'Speakers' ),
        'singular_name' => __( 'speaker' ),
        'supports' => array( 'thumbnail' )
      ),
       'public' => true,
       'has_archive' => true,
      )
  );

Details about the supports property are available on this WordPress documentation page for register_post_type. Support for thumbnails can also be added using the add_post_type_support() function.

Use get_the_post_thumbnail_url()

The get_the_post_thumbnail_url function has this signature:

get_the_post_thumbnail_url( int|WP_Post $post = null, string|int[] $size = 'post-thumbnail' )

Note the $size parameter. It might affect how you configure your speaker-img CSS properties.

To use this function, your speaker-img code could look like this:

      ...
      <a href="#">
        <div >
          <?php $img_url = get_the_post_thumbnail_url( $loop->post->ID ); ?>
          <img src="<?php echo $img_url ?>">
        </div>
      ...

As described on the WordPress documentation page for Featured image, you can choose the thumbnail image yourself by using the Featured image option on the Add and Edit Post admin pages.