Title: Insert HTML into post (without jQuery)
Last modified: August 30, 2016

---

# Insert HTML into post (without jQuery)

 *  [ibhhvc](https://wordpress.org/support/users/ibhhvc/)
 * (@ibhhvc)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/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)

 *  [Hassan Akhtar](https://wordpress.org/support/users/khaxan/)
 * (@khaxan)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/insert-html-into-post-without-jquery/#post-6686807)
 * 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](http://php.net/manual/en/function.str-replace.php).
 * You could also use the [explode](http://php.net/manual/en/function.explode.php)
   function to break the content into pieces and then insert your content after 
   one or more pieces.
 *  Thread Starter [ibhhvc](https://wordpress.org/support/users/ibhhvc/)
 * (@ibhhvc)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/insert-html-into-post-without-jquery/#post-6687007)
 * 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');
       ```
   
 *  [Hassan Akhtar](https://wordpress.org/support/users/khaxan/)
 * (@khaxan)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/insert-html-into-post-without-jquery/#post-6687008)
 * 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](https://wordpress.org/support/users/ibhhvc/)
 * (@ibhhvc)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/insert-html-into-post-without-jquery/#post-6687010)
 * 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?
 *  [walvinmedia](https://wordpress.org/support/users/walvinmedia/)
 * (@walvinmedia)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/insert-html-into-post-without-jquery/#post-6687043)
 * 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](https://wordpress.org/support/users/ibhhvc/)
 * (@ibhhvc)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/insert-html-into-post-without-jquery/#post-6687050)
 * 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.

## Tags

 * [html](https://wordpress.org/support/topic-tag/html/)
 * [php](https://wordpress.org/support/topic-tag/php/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 6 replies
 * 3 participants
 * Last reply from: [ibhhvc](https://wordpress.org/support/users/ibhhvc/)
 * Last activity: [10 years, 7 months ago](https://wordpress.org/support/topic/insert-html-into-post-without-jquery/#post-6687050)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics