0

I'm a long time beginner in Wordpress theming (i do bits here and there for myself) and have a question. I run a very large website and i'm trying to redesign it (responsive etc) and have run into a problem...

Basically my content is text then a video or image underneath in every post. I am trying to position my tags underneath the text but before the media so it goes:-

  1. header
  2. text
  3. tags
  4. media

My question is would it be possible to do this.. somehow slip the tags in after the paragraphs but before the media?

Just incase it matters i have this in my Functions file to help control the embedded videos..

 /** embed modifyer */

function video_embed_html( $html ) { 
    return '<div class="innerpostvideo">' . $html . '</div>'; 
    } 
add_filter( 'embed_oembed_html', 'video_embed_html', 10 );

Thanks in advance!!

PS i can't edit every post to do this.. i have almost 10,000 posts

EDIT: I should mention the images are also links.

UPDATED: User Pat J Came up with a solution which was great but had a couple of problems. On the image post it works almost as intended except it prints the html inside the "a" tag of the img. On the Video post, it's acting kind of strange, it goes in this order:- 1, Paragraphs 2, video 3, My Custom HTML 4, Paragraphs repeated 5, Video Repeated So it's printing the content twice. His code is below:-

add_filter( 'the_content', 'wpse377076_insert_above_image', 20 );
/**
 * Inserts some HTML above a piece of media (image or video).
 *
 * @param  string $content The post/page content.
 * @return string          The filtered content.
 */
function wpse377076_insert_above_image( $content ) {
    // Checks for <img tags in the content.
    if ( false !== strpos( $content, '<img' ) || false !== strpos( $content, '<div class="innerpostvideo' ) ) {
        // Only inserts above the first image/video.
        $image_position = strpos( $content, '<img' );
        $video_position = strpos( $content, '<div class="innerpostvideo' );
        // Gets the position of the first item.
        $position = 0; 
        if ( false !== $image_position ) {
            $position = $image_position;
        }
        if ( false !== $video_position && $video_position < $image_position ) {
            $position = $video_position;
        }
        $content_up_to_first_media = substr( $content, 0, $position-1 );
        $content_after_first_media = substr( $content, $position );
        $content = 
            $content_up_to_first_media .
            '<div class="my-tags">My custom HTML</div>' .
            $content_after_first_media;
    }
    return $content;
}
2
  • In your posts, are the images added via the Media Library, or are these Featured Images that have been placed at the bottom of the post content? Do they have a specific CSS ID or class applied to them?
    – Pat J
    Oct 24 '20 at 21:13
  • Sorry for the late reply, went to bed haha! The images are from the Media Library and the videos are just Embedded Youtube / Vimeo using Oembed. I've added the class "innerpostvideo" to the Video Embeds but the images are have standard WP image classes attached .. (alignnone size-full wp-image-image ID here). Cheers
    – Jason
    Oct 25 '20 at 12:32
0

I came up with this, which seems to work.

Notes:

  • It adds the custom HTML before the very first image / media embed in a post's content; if there are more than one image / video, it'll only place the custom HTML once
  • It requires the innerpostvideo div you mentioned in your question

You can add the code to your active theme's functions.php file, or write a custom plugin.

add_filter( 'the_content', 'wpse377076_insert_above_image', 20 );
/**
 * Inserts some HTML above a piece of media (image or video).
 *
 * @param  string $content The post/page content.
 * @return string          The filtered content.
 */
function wpse377076_insert_above_image( $content ) {
    // Checks for <img tags in the content.
    if ( false !== strpos( $content, '<img' ) || false !== strpos( $content, '<div class="innerpostvideo' ) ) {
        // Only inserts above the first image/video.
        $image_position = strpos( $content, '<img' );
        $video_position = strpos( $content, '<div class="innerpostvideo' );
        // Gets the position of the first item.
        $position = 0; 
        if ( false !== $image_position ) {
            $position = $image_position;
        }
        if ( false !== $video_position && $video_position < $image_position ) {
            $position = $video_position;
        }
        $content_up_to_first_media = substr( $content, 0, $position-1 );
        $content_after_first_media = substr( $content, $position );
        $content = 
            $content_up_to_first_media .
            '<div class="my-tags">My custom HTML</div>' .
            $content_after_first_media;
    }
    return $content;
}
1
  • Wow thanks so much, this is some ninja WP coding. I tested it out but there are a couple of problems. On the image post it works almost as intended except it prints the html inside the <a> tag of the img (it's an image link, maybe i should have mentioned that sorry). On the Video post, it acting kind of strange, it goes in this order:- 1, Paragraphs 2, video 3, My Custom HTML 4, Paragraphs repeated 5, Video Repeated So it's printing the content twice. Sorry to be a pain but this is way above my skill level haha
    – Jason
    Oct 26 '20 at 12:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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