Search
Are you promoting multiple service or product offers? If so, wouldn't it be great if you had a way to easily add a specific call to action to specific posts?
In this post, I'll show you 3 ways to add a dynamic call to action to your blog posts and make the traffic that you're already driving to your articles more effective by displaying relevant call to actions in any and every post that you want.
Just adding a line of text to the end of the post. Sure this way works fine but as you know, most people don't actually read the entire article, they are skimming and scanning looking for exactly the thing they clicked to your page for.
A call to action in plain text will just blend in to the rest of the article and your readers brain will most likely skip over it and your call to action will go unnoticed by the majority of your site traffic.
What's are some ways that we can get more site traffic to notice your call to action?
Make it more noticeable.
Let's look at 3 ways to build a call to action that stands out and how we can use it on multiple posts to promote different service or product offers.
A reusable block is something that we can create once and then save it to use on other posts or pages. Essentially, we're building a template and then have the ability to make the text interchangeable depending on what action we want visitors to take on each individual post.
You can create the reusable block in any post or page with gutenberg.
Start by clicking on the Toggle block inserter.
Choose the Stack option as this will allow you to place each new element below the previous one, creating a neat and organized layout.
Next, click on Justify items center. This will center all the contents within the group.
Next go to Styles and then Background.
Click on Gradient and add your gradient.
Now let's change the text color. Click on Text, and then select White.
Now, it's time to add the call to action text. Click on Add block, and then select Heading. Insert your desired Call To Action text here. Click on Change text alignment and then choose Align text center.
Finally, let's add a button to your CTA block. Click on Add block and select Buttons then type in your button text. To change the button styles, click on Styles then navigate to Background, and select Outline to give the button a stylish white outline.
You may have noticed that ole Guttyburger doesn't give us options to add spacing for whatever reason. To add spacing all you have to do is add a spacer element to the top and bottom. I used 25px of space on both.
Now the block is designed, here's how mine looks.
Click on Block: Stack CTA
Click on the 3 vertical dots to find Options
Click on Create pattern
Type "Call to Action"
Click on CATEGORIES
The category step is optional but I put mine is posts.
Click on Posts
Uncheck Synced
You're going to wanna uncheck synced so that each one can be unique. Syncing them would be easier if you know you only have 1 CTA and you'll only need to update it in the pattern and it'll show up everywhere it's used.
Lastly, click on Create
After you create your pattern, you'll see it in the block inserter and you can then use this anywhere you want and be able to change the call to action text and button to match whatever product or service you're offering.
Imagine having custom fields in your post editor that enable you to input call-to-action text and button labels. This feature would automatically insert a pre-designed call-to-action in your posts, displaying it only when the relevant data is provided.
For our use case, we don't need the pro version so this implementation will cost you nothing unless you'd rather someone implement it for you. In that case, contact me for help.
Once ACF is installed, create a new field group and name it CTA Manager.
Click on Field Groups
Click on Add New
Type "CTA Manager"
Type "Call To Action"
Click on Add Field
Type "CTA Button Label"
Click on Add Field
Click on the drop down and select link
Type "CTA Button Link"
Select Link URL
Click on Save Changes
Your field group should look like this:
Now we need a way to inject the data from the input fields into the single.php template which is the template responsible for rendering all posts.
In a SFTP client connect to your site and navigate to the Themes directory to find your child theme. Click and edit functions.php. You can also use the file manager from your host dashboard or access the functions.php file directly in WordPress at Appearance > Theme File Editor
Paste this code into the functions.php
function display_cta_after_content($content) {
// Get values from ACF fields
$cta_text = get_field('call_to_action');
$cta_button_label = get_field('cta_button_label');
$cta_button_link = get_field('cta_button_link');
// Check if the fields are not empty
if ($cta_text && $cta_button_label && $cta_button_link) {
ob_start();
?>
<div class="cta-box">
<h2 class="cta-text"><?php echo esc_html($cta_text); ?></h2>
<a href="<?php echo esc_url($cta_button_link); ?>" class="cta-button"><?php echo esc_html($cta_button_label); ?></a>
</div>
<?php
$cta_content = ob_get_clean();
return $content . $cta_content; // Append CTA to the content
}
return $content; // Return original content if fields are empty
}
// Hook the function to 'the_content' filter
add_filter('the_content', 'display_cta_after_content');
The PHP Code automatically adds a customizable Call to Action section to the end of each WordPress post. It retrieves post specific text and link information from custom fields created with the Advanced Custom Fields (ACF) plugin. The function checks if these fields are filled; if they are, it generates the corresponding HTML for the CTA, which includes the main text and a button with a link. The function is hooked into the content output process, and makes sure that the CTA appears right after the post content only if the post has input data in the custom fields.
This code is designed to work with traditional WordPress themes. Full Site Editor themes may experience issues. If that's the case for you, try a different approach that utilizes short codes. It may add an extra step but will work in most all scenarios.
Here's the modified code that utilizes shortcodes. The set up is exactly the same but instead of the code above, you'll add this:
function display_cta_shortcode() {
// Get values from ACF fields
$cta_text = get_field('call_to_action');
$cta_button_label = get_field('cta_button_label');
$cta_button_link = get_field('cta_button_link');
// Check if the fields are not empty
if ($cta_text && $cta_button_label && $cta_button_link) {
ob_start();
?>
<div class="cta-box">
<h2 class="cta-text"><?php echo esc_html($cta_text); ?></h2>
<a href="<?php echo esc_url($cta_button_link); ?>" class="cta-button"><?php echo esc_html($cta_button_label); ?></a>
</div>
<?php
return ob_get_clean();
}
return ''; // Return empty if fields are not filled
}
// Register the shortcode [display_cta]
add_shortcode('display_cta', 'display_cta_shortcode');
This method is also better if you don't want it directly at the bottom of the post content, using the short code you can just add it wherever in the post you want.
Whichever method you decide to use, the final step of this set up is to add the styles for the CTA, if you're using SFTP or the File Manager in your host dashboard, add the styles to your style.css in your child theme. You can also add this directly through the WordPress dashboard in Appearance>Customize>Additional CSS
.cta-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom right, #8e9eff, #a4b1ff);
padding: 25px 0;
border-radius: 8px;
text-align: center;
}
.cta-text {
margin: 0 0 15px 0;
color: #ffffff;
}
.cta-button {
border: 2px solid white;
background: transparent;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background 0.3s, color 0.3s;
}
.cta-button:hover {
background: white;
color: #8e9eff; /* Change text color on hover */
}
Say you just finished a new lead magnet and created a blog post to promote it and get opt-ins.
In the post that you want to add the CTA to, fill in the fields that we created to input the CTA text, Button Text, and Button URL.
If you implemented variation 1, that's it.
If you implemented variation 2, then add a short code block in gutenberg where you want to display the CTA using the shortcode [display_cta].
*This CTA was added with the Gutenberg reusable block, see how I can add multiple in the same post? It's a huge perk with using the first solution.
The last method we're covering is a pop up or slide in box that displays on a specific post.
To do this in a way that most anyone can implement within the parameters of their site set up, let's use a plugin.
I won't go into finding the best option, let's just go for functional, reliable and one that I have personal experience using.
That plugin is called Hustle by WPMU Dev.
This plugin is developed and maintained by a reputable company that produced multiple other highly used and highly rated plugins. It's one of the most used plugins for it's functionality and as I mentioned above, I have used it before.
Install and activate it.
Once it's installed, you have a couple options whether you want to create a pop-up or a slide in box. I prefer the slide-in box so I'll choose that.
One of the reasons why I like using this plugin is that the user interface is very intuitive. Once you create the pop-up or slide-in box, all you have to do is go from top to bottom.
I'll explain the important stuff but the content and design customizations will be up to you to explore and tinker with to.
Starting from the Content tab, fill in all details needed for your CTA.
In the Appearance tab, I'm changing the layout to compact just based on preference and I'm leaving fonts to be inherited by my theme.
I'm also customizing the following color settings
The only property I changed is to make all the text white.
For spacing, on the Content Container dropdown, I'm putting 75px padding on the left and right.
On the Visibility tab, this is how conditions work with this plugin. You want to choose Show when Any of the following conditions match.
Click Add Condition.
In our use case, we want to show on specific posts. So we'll choose post from the list of conditions, then you'll see a new field that says type the name of your post. When you click in that field, you can type the beginning of your post title or select from the dropdown list. You can choose any amount of posts you want so this will work great if you want to promote something on multiple posts.
That's it for this tab, next is the behavior tab.
The first setting in this tab that we want to configure is the trigger. Here we can select when we want the slide-in box to display for users. You should choose the best trigger for your specific scenario.
For mine, I want to promote a digital product to people who have already demonstrated behavior that indicates they are reading useful information. Since my call to action is promoting a digital product related to the post, I want to show the pop up once they reach a point where the contents of the slide-in box actually make sense.
So I'm going to choose the scroll trigger and set it to 50% scroll which is roughly around where they already have been informed about the option that my digital product extends.
Why doesn't the timed trigger doesn't make sense in my case?
At the default of 3 seconds, the user probably hasn't even made the decision whether or not the info they're reading is actually relevant to them, sticking a banner in their face to distract them from that isn't going to help in any way.
I can certainly extend the delayed trigger longer like 30 seconds to give them time to read enough for the CTA to make sense but why do that when I have an option that is more accurate?
If they scroll past 50% of the page that's a pretty strong indicator that they're at least interested in the post enough to read or scroll to the halfway point of the article. The CTA would then have the best chance to be relevant to the user.
The next setting I want to configure in this tab is the slide-in position. By default, it's in the bottom center, I want it on the bottom left.
That's it! At this point just publish and test the trigger works as it should on the post.
The hustle plugin also has a really cool feature that lets you track views and conversions in the backend. I love this feature to measure how well the the CTA is performing.
Here are some general guidelines for help deciding which option will work best for you.
If you want to include multiple CTAs in the same post you can use option 1 or you can use a combination of option 1 and option 2.
If you want really don't want to mess with the technical side of your blog or don't want to pay someone to do it for you, option 1 is best.
If you have a custom theme that doesn't use gutenberg, option 2 or 3 is your best bet. The only downside is you cannot add multiple CTAs to the same post.
If you're promoting a specific service or digital product, option 3 will be great and you can track performance with this method.
Don't even want to mess around with creating your own gutenberg block? No worries! There's another way to get pre-designed call to action blocks without doing them yourself by installing a block library plugin.
These plugins add pre-built blocks to gutenberg so you can choose one that you like and swap out the text in them.
Most options are going to be overkill and contain alot of bloat and unused items but on the flip side, you'll then have more options for other elements that you can use.
My general rule of thumb is to not include any unnecessary plugins if you can help it which is why I explained the best options you can use without adding alot of excess bloat to your website.
