Skip to content

After Content CTA (code snippet)

CTA (Call To Action) is an important element of all websites. You can put it in most viewed and best converting locations across your website.

One of the best places to put CTA is after page/post content. Because you provide value with your article and ask to take action after user reads it. Users who want to get more value from you will follow your call to action.

Code snippet is a way of adding CTA after post content for WordPress websites.

Watch tutorial on YouTube.

Code snippet

Simple version

add_filter('the_content', 'veppa_after_content_cta_simple');
function veppa_after_content_cta_simple($content){
	// skip pages that part of some CTA. (thank you page, cta page itself)
	// use page ids or slugs here
	$arr_skip = array(12401, 12407, 13211, 13252);
	if(empty($arr_skip) || !is_page($arr_skip)){
		// Use regular HTML: title, text, image, form, button, links etc. 
		$content .= '<p>—</p>
		<h3>Your Call to Action Title</h3>
		<p>A brief, compelling sentence or two about why the user should take action. Highlight the benefit they will receive.</p>
		<p><a href="#your-link-here" target="_blank">Get your offer now!</a></p>';
	}
	return $content;
}

Preview

Simple CTA example after content in WordPress generated using code snippet.

This is screenshot of simple CTA after content. CTA will match your theme style and blend in with your content naturally. Design may be different for your WordPress theme.

Advanced version

add_filter('the_content', 'veppa_after_content_cta');
function veppa_after_content_cta($content){
	// skip pages that part of some CTA. (thank you page, cta page itself)
	// use page ids or slugs here
	$arr_skip = array(12401, 12407, 13211, 13252);
	if(empty($arr_skip) || !is_page($arr_skip)){
		$content .= '<!-- noindex --><!-- veppa_after_content_cta --><div class="ctact_wrap" data-nosnippet></div><!-- /noindex -->';
	}
	return $content;
}

add_action('wp_footer', 'veppa_after_content_cta_footer',99999);
function veppa_after_content_cta_footer(){

	// different color, background variations for CTA box
	$colors = array(
		'#004085' => '#E8F4FF', 
		'#1A5400' => '#EAF4E0',
		'#920000' => '#FFEBEB',
		'#4C006C' => '#F6EFFF',
		'#8C4B00' => '#FFF7EB'
	);

	$colors_css = '';
	$i=0;
	foreach($colors as $k=>$v){
	$colors_css .='.ctact.ctact-c'.$i.'{color:'.$k.'; background: '.$v.';} .ctact.ctact-c'.$i.' .h2{color:'.$k.';} .ctact.ctact-c'.$i.' .btn{background-color:'.$k.';}';
	$i++;
	}

	// choose one cta color variation
	$colors_js_class = '';	
	if(!empty($colors)){
	$colors_js_class = " ctact-c'+(Math.floor(Math.random()*". (count($colors)) ."))+'";
	}	

	?>
	<!-- <div class="ctact_wrap"></div> -->
	<style>
		.ctact{color:#31708f; background:#d9edf7; text-align:center; border-radius:1rem; margin:1rem 0; padding:2rem;} 
		.ctact .h2{color:#31708f; font-weight:900;}
		.ctact p{margin:1rem 0; line-height:1.5;}
		.ctact .btn{background-color:#31708f; color:white;}
		<?php echo $colors_css; ?>
	</style>
	<script id="snippet-cta">
		function veppa_cta_differ(){
			// put your CTA text and links here
			var cta_arr = ['<div class="ctact<?php echo $colors_js_class; ?>">'
				+ '<p class="h2">Your Call to Action Title</p>'
				+ '<p>A brief, compelling sentence or two about why the user should take action. Highlight the benefit they will receive.</p>'
				+ '<p><a href="#?utm_source=internal&utm_medium=display&utm_campaign=cta" class="btn btn-lg" rel="nofollow noopener" target="_blank">Get your offer now!</a></p>'
				+ '</div>'
			];
			var ind = Math.floor( Math.random() * cta_arr.length );

			var elements = document.querySelectorAll('.ctact_wrap');
			for(var i=0; i<elements.length; i++){
				elements[i].insertAdjacentHTML('beforeend', cta_arr[ind % cta_arr.length]);
				ind++;
			}
		} 
		setTimeout(veppa_cta_differ,20);
	</script>
	<?php
};

Preview

Advanced CTA example after content in WordPress generated using code snippet.

This is a screenshot of advanced CTA with custom styling. It will stand out from your content and grab attention.

Features:

  • Multiple colors.
  • Multiple CTAs (variation for a/b testing or completely different CTA).
  • Shows different CTA even if page is cached.
  • Grabs attention by standing out from the content.

Instructions for both CTAs

  • Replace title, text, button text, destination URL in code snippet with your own.
  • Use your own UTM tracking parameters.
  • Add “landing page” and “thank you page” ids to $arr_skip array.

FAQ

Why you need code snippet to add content after post?

“After content” is valuable place for getting attention of engaged users. In WordPress there is no widget location that targets “after content” area by default. For this reason in order to add some custom content after each post we can use code snippet.

What is CTA?

CTA is a “Call To Action”. It is a next logical step that you offer to your audience. This can be various actions that will benefit you and your readers.

For example: subscribe to your newsletter, download pdf, register an account, buy your product, contact you, call you by phone, book an appointment, follow on your account on social media etc.

Where else to add CTA?

Apart from under content area you can add CTA to the top of your home page, sidebar, footer, inside your articles, top menu etc. Add it strategically. Do not use multiple CTAs. Avoid annoying your visitors by adding it in too many places on a single page.

How to track performance of a CTA?

To track clicks on CTA links and buttons use UTM tracking parameter.

For example like this.

?utm_source=your-source&utm_medium=display&utm_campaign=your-compaign

Then you can view sessions sent with this link in your Google Analytics or with looker studio template.

More about UTM medium and traffic channel grouping.

On which pages do not show CTA?

Do not show this general under content CTA on lading pages and thank you pages. Because landing page will have its own CTA. And thank you page is shown when you complete a Call to Action. So do not confuse users with another CTA.

Will this CTA be blocked by Ad Blockers?

No, because I do not use any identifiers that can classify this CTA as an ad.

Will advanced CTA code snippet show different version even when page cached?

Yes, because in advanced snippet CTA content is generated by JavaScript. When page cached JavaScript will still execute and show different CTA with different color on each page refresh. This works because JavaScript is dynamic even on cached or static pages.

Is this better than adding CTA text under each post manually?

Yes, because code snippet will add CTA for all posts automatically.

Imagine having more than 10 pages in your WordPress website. You can add and update CTA for all pages at once (automatically) by editing this code snippet. Instead of manually (one by one) changing CTA inside every page.

Additionally with code snippet you can add more content types like newsletter forms, adsense ads, custom CSS, custom JavaScript, iframe, custom HTML etc.

What to avoid using in after content CTA?

Avoid any code that slows down your page load. Because this CTA will load on all your posts and pages. Any slow loading content will affect all your pages.

For example avoid any third-party dependency JavaScript or iframe like captcha, share button, counter etc.

If you want to use newsletter form with external captcha then better to make separate landing page for that form and link to it in your after content CTA.

Make sure to test your page speed before and after adding CTA.

Check this video to improve your page load time. 

What is the best CTA for my website/blog?

Here are some criteria for having best performing CTA for your blog:

  • Be very specific, so users will know exactly what they get when they click. For example instead of general “Sign up for my newsletter” use specific lead magnet like “Get free checklist to [do exactly what you want to achieve]”.
  • Make an irresistible offer. Users should feel that it is exactly what they want. Make sure that your offer is well aligned with your website content and your ideal client. View CTA types based on user intent.
  • Chose best converting offer like lead magnet with free item. Do not try to sell most expensive item in your CTA.
  • Make sure that your CTA is super easy to get. Remove unnecessary steps and form fields as much as possible.

I am currently offering “Free PDF checklist to speed up a WordPress website” in my after content CTA. It is a lead magnet for subscribing to my newsletter. This way I get people only interested in my niche that want to speed up their WordPress website.

Content on my website and in my YouTube channel is also about WordPress speed optimization. So my CTA is naturally complementing my content.

—

What is next:

★ Related Posts ★

Leave a Reply

Your email address will not be published. Required fields are marked *