4

My problem:

I'm trying to create a filter that will add the featured image of a post to the_content, so that I can have the first paragraph of the_content displayed before this image.

What I basicly want to achieve:

<p>First Paragraph of the_content</p>
<img>The Post's Featured Image</img>
<p>The rest of the_content</p>

I someone is able to help me.

Thanks in advance!

5 Answers 5

4

You can do this using the 'the_content' filter:

add_filter( 'the_content', 'insert_featured_image', 20 );

function insert_featured_image( $content ) {

    $content = preg_replace( "/<\/p>/", "</p>" . get_the_post_thumbnail($post->ID, 'post-single'), $content, 1 );
    return $content;
}

Of course, you can add options to the the_post_thumbnail() function to define which size of thumbnail you'd like to use, etc... http://codex.wordpress.org/Function_Reference/the_post_thumbnail

8
  • Hmm, it's inserting the featured image yes, but not after the first paragraph?
    – Anders
    Aug 9, 2012 at 2:23
  • Modified to re-add the closing </p> -- if you can provide a URL, I'd be happy to take a peek, otherwise can you post the actual HTML being outputted? Aug 9, 2012 at 2:28
  • Also, needs get_the_post_thumbnails and not the_post_thumbnail as the original code showed. Oops. ;-) Aug 9, 2012 at 2:32
  • Did you update with the most recent code change above? I accidentally used the_post_thumbnail when I should have used get_the_post_thumbnail, which might have caused your problem. Aug 9, 2012 at 2:38
  • Edit: Yes I did. -- Oh, hehe. Hmm well now it isn't showing the image at all. :P
    – Anders
    Aug 9, 2012 at 2:38
1

Technically the quickest solution would be to use a shortcode in your content. Otherwise you'll need a good handle on regex to dump the image between paragraphs using a filter.

Best way would be to add this to functions.php

<?php 

function featured_image($post) {
    if (has_post_thumbnail($post->id))
        the_post_thumbnail('large');
}

add_shortcode('featured_image', 'featured_image');
?>

After your first paragraph in the content just type [featured_image].

1
  • This would definitely be the quickest way yes, but the site is for a client, so I'm afraid this isn't a feasible solution.
    – Anders
    Aug 9, 2012 at 1:57
1

Note -

Using some kind of regex matching you can do this. Here's one of them. Just drop in this snippet in yout theme's functions.php file so that it will print content of variable $img just after first paragraph (i.e. after first occurrence of </p> tag) in your post content.

passing current posts thumbnail / featured image value to $img will print that image after first paragraph.

// Goes into functions.php file
// Adds $img content after after first paragraph (!.e. after first `</p>` tag)
add_filter('the_content', function($content)
{
   $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
   $img = '<img src="'.$url.'" alt="" title=""/>';
   $content = preg_replace('#(<p>.*?</p>)#','$1'.$img, $content, 1);
   return $content;
});

Modified this to append variable after first paragraph.

4
  • I had to change '$1' to '$2' to get it to show the <div>My Image html</div> after the first paragraph - I have obviously no idea why? How do I replace <div>My Image html</div> with the_post_thumbnail('post-single')? If I just insert the_post_thumbnail('post-single') it shows the image before the first paragraph unlike if I insert a random <div>.
    – Anders
    Aug 9, 2012 at 2:30
  • it worked perfect on myside, btw updated my code to show featured image.
    – Amit Kosti
    Aug 9, 2012 at 2:40
  • Yay, it worked! :) Thanks a lot (I still had to change '$1' to '$2' though.
    – Anders
    Aug 9, 2012 at 2:45
  • instead 'large' use this - 'thumbnail' also make sure you added theme support
    – Amit Kosti
    Aug 9, 2012 at 3:06
1

To customise the number of paragraphs before the featured image, I adapted the above answer and adapted the code from an ad placement solution.

To use: Add the following two snippets to functions.php and customise the numeral where indicated to control the number of paragraphs.

// Adds $featured_img and $caption after n paragraph

add_filter( 'the_content', 'insert_featured_image' );

function insert_featured_image( $content ) {
if ( has_post_thumbnail($post->ID) ) {
        if ( has_post_thumbnail($post->ID) ) {
            $caption = get_the_post_thumbnail_caption( $post );
        } else {
            $caption = '';
        }
    $featured_image = '<div>' . get_the_post_thumbnail( $post->ID, 'full' ) . '</div>'.'<div>' . $caption . '</div>';

    if ( is_single() && ! is_admin() ) {
        return prefix_insert_after_paragraph( $featured_image, 2, $content ); // The numeral here controls the number of pars. Customise it to your needs
    }
}

return $content;
}

// Parent function

function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) 
{
$closing_p = '</p>';
$paragraphs = explode( $closing_p, $content );
foreach ($paragraphs as $index => $paragraph) {

    if ( trim( $paragraph ) ) {
        $paragraphs[$index] .= $closing_p;
    }

    if ( $paragraph_id == $index + 1 ) {
        $paragraphs[$index] .= $insertion;
    }
}
 
return implode( '', $paragraphs );
}
0

This Is Simple Process to Done it. Follow Simple Step.

  • Login to Your Website and Go To Dashboard On WordPress.
  • Go To Appearance>Theme File Editor>Theme Functions (functions.php)
  • Paste This Code.
// Adds $featured_img and $caption after n paragraph
    
add_filter( 'the_content', 'insert_featured_image' );
    
function insert_featured_image( $content ) {
    if ( has_post_thumbnail($post->ID) ) {
            if ( has_post_thumbnail($post->ID) ) {
                }
        $featured_image = '<div>' . get_the_post_thumbnail( $post->ID, 'full' ) . '</div>'.'<div>' . $caption . '</div>';
    if ( is_single() && ! is_admin() ) {
            return prefix_insert_after_paragraph( $featured_image, 2, $content ); // The numeral here controls the number of pars. Customise it to your needs
        }
    }
    
    return $content;
}
    
    // Parent function
    
function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) 
{
    $closing_p = '</p>';
    $paragraphs = explode( $closing_p, $content );
    foreach ($paragraphs as $index => $paragraph) {
    
        if ( trim( $paragraph ) ) {
            $paragraphs[$index] .= $closing_p;
        }
    
        if ( $paragraph_id == $index + 1 ) {
            $paragraphs[$index] .= $insertion;
        }
    }
     
    return implode( '', $paragraphs );
}
1
  • That's exactly the same as TheWiseOldElf's code, except you've deleted the lines that set $caption, so now you're using an undefined variable. Can you explain why you've made that change - does it help? (I can't imagine it does.) Why post the same code again?
    – Rup
    May 4, 2022 at 10:03

Your Answer

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

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