• Hi, thanks in advance to those who shall help. I’m going crazy with trying to make the caption of the images visible, at least in the post page (it would be great in the home too). I use wp 4.7.3 with newser theme. I tried by adding this code

    if ( ! function_exists( 'the_post_thumbnail_caption' ) ) {
     function the_post_thumbnail_caption() {
      global $post;
      $thumbnail_id    = get_post_thumbnail_id($post->ID);
      $thumbnail_image = get_posts(array('p' => $thumbnail_id, 'post_type' => 'attachment'));
       if ($thumbnail_image && isset($thumbnail_image[0])) {
        return '<div class="front-caption">'.$thumbnail_image[0]->post_excerpt.'</div>';
       } else {
         return;
       }
     }
    }

    to the functions.php file of the child theme directory, but it doesn’t work. Onestly I’m not a wp programmer but usually I’m able to get what I want. Any hint? Thanks again

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator bcworkz

    (@bcworkz)

    The solution depends on what functions your theme calls to display the featured image. If the_post_thumbnail_caption() were called, your solution may have worked. I think most themes end up calling the_post_thumbnail(). If you theme does, even indirectly, or by calling the cousin get_the post_thumbnail(), then you can hook the filter “post_thumbnail_html”. Append your preferred caption HTML to the passed string and return the entire HTML.

    The featured image along with your added caption will now appear where ever one of those functions are called. Use CSS to style the caption as needed to get it looking right.

    you can add the caption to a featured image, including some html wrapper to mirror the default caption html code, (without having to edit the code in each of the templates) by adding a filter function into functions.php of your (child) theme;

    example code:

    // filter to show caption, if available, on thumbnail, wrapped with '.wp-caption thumb-caption' div;
    // show just the thumbnail otherwise
     
    add_filter( 'post_thumbnail_html', 'custom_add_post_thumbnail_caption',10,5 );
     
    function custom_add_post_thumbnail_caption($html, $post_id, $post_thumbnail_id, $size, $attr) {
     
    if( $html == '' ) { 
      
        return $html;
      
    } else {
      
        $out = '';
      
        $thumbnail_image = get_posts(array('p' => $post_thumbnail_id, 'post_type' => 'attachment'));
      
        if ($thumbnail_image && isset($thumbnail_image[0])) {
      
            $image = wp_get_attachment_image_src($post_thumbnail_id, $size);
     
            if($thumbnail_image[0]->post_excerpt) 
                $out .= '<div class="wp-caption thumb-caption">';
      
            $out .= $html;
      
            if($thumbnail_image[0]->post_excerpt) 
                $out .= '<p class="wp-caption-text thumb-caption-text">'.$thumbnail_image[0]->post_excerpt.'</p></div>';
       
        }
     
        return $out;
       
    }
    }
    Thread Starter fablar

    (@fablar)

    Hi, thanks everybody who helped. Hi tried by adding the code but it still doesn’t work. Here is it tho whole functions.php code of the child theme in use. Anyone knows what’s wrong with it? Thanks again, very appreciated.

    <?php
    // Exit if accessed directly
    if ( !defined( 'ABSPATH' ) ) exit;
    
    // BEGIN ENQUEUE PARENT ACTION
    // AUTO GENERATED - Do not modify or remove comment markers above or below:
             
    if ( !function_exists( 'child_theme_configurator_css' ) ):
        function child_theme_configurator_css() {
            wp_enqueue_style( 'chld_thm_cfg_separate', trailingslashit( get_stylesheet_directory_uri() ) . 'ctc-style.css', array( 'newser-weather','newser-theme-styles','newser-style','newser-style','newser-responsive','newser-color' ) );
        }
    endif;
    add_action( 'wp_enqueue_scripts', 'child_theme_configurator_css' );
    
    // END ENQUEUE PARENT ACTION
    
    // filter to show caption, if available, on thumbnail, wrapped with '.wp-caption thumb-caption' div;
    // show just the thumbnail otherwise
     
    add_filter( 'post_thumbnail_html', 'custom_add_post_thumbnail_caption',10,5 );
     
    function custom_add_post_thumbnail_caption($html, $post_id, $post_thumbnail_id, $size, $attr) {
     
    if( $html == '' ) { 
      
        return $html;
      
    } else {
      
        $out = '';
      
        $thumbnail_image = get_posts(array('p' => $post_thumbnail_id, 'post_type' => 'attachment'));
      
        if ($thumbnail_image && isset($thumbnail_image[0])) {
      
            $image = wp_get_attachment_image_src($post_thumbnail_id, $size);
     
            if($thumbnail_image[0]->post_excerpt) 
                $out .= '<div class="wp-caption thumb-caption">';
      
            $out .= $html;
      
            if($thumbnail_image[0]->post_excerpt) 
                $out .= '<p class="wp-caption-text thumb-caption-text">'.$thumbnail_image[0]->post_excerpt.'</p></div>';
       
        }
     
        return $out;
       
    }
    }
    Moderator bcworkz

    (@bcworkz)

    Works for me. It may be there, but is hidden by other elements. Locate a post that has a featured image whose media entry has a caption defined. Use your browser’s developer tools to examine the featured image of that post. In the HTML inspector, the caption should appear directly below the img tag. Click on the ‘p’ tag surrounding the caption, then edit CSS in the CSS inspector until the caption appears how and where you want it. Copy whatever new CSS you determined to where ever your theme accepts custom CSS. The customizer perhaps? If there is no place at all, there are plugins that allow you to add custom CSS.

    If there really is no caption below the img tag and you’re sure one is defined for the image, your theme apparently is not using the_post_thumbnail() function or one of its cousins. Find out what function it is using, locate the function declaration, and see if there is a filter you can use. If not, you will need to alter the template code to use the_post_thumbnail(). Altered templates should be contained in a child theme. You will likely need to make other adjustments by changing how the featured image is output.

    Thread Starter fablar

    (@fablar)

    Hi, thanks again to those who kindly helped. What if I try to let the caption show only in the post page? Which file should I modify with coding? single.php? Or another? And… does anyone have a code to suggest?
    Again, highly appreciated ??

    Fabio

    Moderator bcworkz

    (@bcworkz)

    You can edit the same callback function to conditionally add the caption based on any criteria you like. When you say “post page”, do you mean any page with posts — archives, categories, tags, etc.? Or only single post pages? If the former, get the post object with the passed post ID and check if $post->post_type == 'post'. If the latter, in addition to checking post type, is_single() must be true.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘show image caption on the featured image’ is closed to new replies.