Support » Fixing WordPress » Insert HTML into post (without jQuery)

  • I’d like to insert some HTML code into the middle of posts that have a specific tag.

    So far, I’ve done well inserting the code right before the post content begins, but I’d like to place the code lower down, in the middle of the post content.

    I know jQuery can do this easily. Is this my only option or can my PHP code be tweaked and get the same results?

    Here is my code so far (in my child functions.php file):

    function insert_custom_content($content) {
    	if( is_singular() && is_main_query() && has_tag('custom')) {
    		$new_content = '<p>My custom content</p>';
    		$content = $new_content . $content;
    	}
    	return $content;
    }
    add_filter('the_content', 'insert_custom_content');
Viewing 6 replies - 1 through 6 (of 6 total)
  • Maybe you can add a placeholder like %MY_CUSTOM_CONTENT% in your post and then replace it with the intended content using PHP’s str_replace.

    You could also use the explode function to break the content into pieces and then insert your content after one or more pieces.

    Thread Starter ibhhvc

    (@ibhhvc)

    Thanks for the tip. Here’s what I ended up putting in single.php:

    function custom_filter($content) {
    	if (! has_tag('custom')) { // exclude any post without "custom" tag
    		echo $content;
    		return;
    	}
    
    	if(is_main_query() && ! is_admin()) {
    
    		$custom_content = 
    
    							'<div><p>content</p></div>';
    
    		$paragraph = explode ('</p>', $content); // separate post content into paragraphs
    		$firstp = $paragraph[0]; // select first paragraph
    
    		preg_match('/(<img.*?>)/', $firstp, $image); // select image tag in first paragraph
    		$custom = '<div>{$disclosure_content}</div>'; // add disclosure content
    
    		$remainder = preg_split('/(<img.*?>)/', $firstp); // select first paragraph content after image
    
    		if ($image) { // if image exists in first paragraph
    		echo $image[0]; // print image
    		echo $custom; // print disclosure
    		echo '<p>'; // open new paragraph
    		echo $remainder[1]; // print remaining first paragraph content
    		}	
    
    		else { // if image does not exist in first paragraph
    			echo $custom; // print disclosure
    			echo $firstp; // print first paragraph
    		}
    
    		$therest = implode('', array_slice($paragraph, 1)); // select remaining post content
    		echo $therest; // print remaining post content
    	}
    }
    add_filter('the_content', 'custom_filter');

    Looks good. Just a few tips:

    – Instead of echoing the $content and returning nothing you should just return $content. That’s how filters work, you return the modified (or unmodified) value.

    – Perhaps there should be a check in there that makes sure that there are paragraph tags in the content. Otherwise the function will throw errors.

    Thread Starter ibhhvc

    (@ibhhvc)

    I see. Thanks for those tips.

    I’ve replaced the first “if” construct with:

    if (! has_tag('Disclosure') || strpos($content,'</p>') == false) {
    		return $content;
    	}

    But now the filter does not display any content if this first construct evaluates as false. If I leave it as:

    if (! has_tag('Disclosure') || strpos($content,'</p>') == false) {
    		echo $content;
                    return;
    	}

    Then it does display content. What am I missing?

    You had me curious so I played around with this a bit. Thought I would share what I ended up with. It’s a mix of the above two codes modified to fix excerpts breaking on the homepage.

    function insert_disclosure($content) {
    	if( is_singular() && is_main_query()) {
    
    		$paragraph = explode ('</p>', $content); // separate post content into paragraphs
    		$firstp = $paragraph[0]; // select first paragraph
    		preg_match('/(<img.*?>)/', $firstp, $image); // select image tag in first paragraph
    
    		$custom = '
                       <div>This is my disclosure</div>
                   ';
    		$content = $custom . $content;
    
    		$remainder = preg_split('/(<img.*?>)/', $firstp); // select first paragraph content after image
    
    		if ($image) { // if image exists in first paragraph
    		echo $image[0]; // print image
    		echo $custom; // print disclosure
    		echo '<p>'; // open new paragraph
    		echo $remainder[1]; // print remaining first paragraph content
    		}
    
    		else { // if image does not exist in first paragraph
    			echo $custom; // print disclosure
    			echo $firstp; // print first paragraph
    		}
    
    		$therest = implode('', array_slice($paragraph, 1)); // select remaining post content
    		echo $therest; // print remaining post content
    	}
    
    if (is_home() || is_front_page()) {
    	return $content;
    }
    
    }
    add_filter('the_content', 'insert_disclosure');

    Remember to add your first “if” construct back, I had to get rid of it to test because I didn’t have any tagged posts.

    Not sure why return $content; isn’t working there, it works fine elsewhere in the script. I did not have a chance to play with it.

    Hope that helps a bit, especially if you’re using excerpts on the home page.

    Thread Starter ibhhvc

    (@ibhhvc)

    Looks great. I’m dropping this into single.php so don’t have to worry about the homepage.

    Here is my final version. The only change is adding do_shortcode to $content since it was stripping shortcode out:

    function disclosure_filter($content) {
    
    	if (! has_tag('Disclosure') || strpos($content,'</p>') == false) { // exclude any post without "Disclosure" tag or any '</p>'
    		$content = do_shortcode($content);
    		echo $content;
    		return;
    	}
    
    	if(is_singular() && is_main_query() && ! is_admin()) {
    
    		$content = do_shortcode($content);
    
    		$disclosure_content = "<div>This is my disclosure</div>";
    
    		$paragraph = explode ('</p>', $content); // separate post content into paragraphs
    		$firstp = $paragraph[0]; // select first paragraph
    
    		preg_match('/(<img.*?>)/', $firstp, $image); // select image tag in first paragraph
    		$disclosure = '<div class="show-more-wrap disclosure-wrap"><img class="show-more-button" src="'. home_url('/images/icons/warning2.svg') . "\"><p class='show-more-button'>Advertising Disclosure</p>{$disclosure_content}</div>"; // add disclosure content
    
    		$remainder = preg_split('/(<img.*?>)/', $firstp); // select first paragraph content after image
    
    		if ($image) { // if image exists in first paragraph
    		echo $image[0]; // print image
    		echo $disclosure; // print disclosure
    		echo '<p>'; // open new paragraph
    		echo $remainder[1]; // print remaining first paragraph content
    		}	
    
    		else { // if image does not exist in first paragraph
    			echo $disclosure; // print disclosure
    			echo $firstp; // print first paragraph
    		}
    
    		$therest = implode('', array_slice($paragraph, 1)); // select remaining post content
    		echo $therest; // print remaining post content
    	}
    }
    add_filter('the_content', 'disclosure_filter');
    
    genesis();
    ?>
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Insert HTML into post (without jQuery)’ is closed to new replies.