Swap Out “Read More” for a Call to Action Button

Blogging is hard work. I get that. Building a website is hard. There are a lot of moving parts to consider. And then there’s the writing. Writing blog posts is hard. I mean, you see how often I post here. Part of it is the busy. Part of it is considering what to say. Part of it is just sitting down to actually do it.

And part of it is the distribution. Blog posts don’t just exist in one place. We share posts on social media. People read them in feed readers. And some of us share posts by email, too. It gets complicated pretty quickly. I’ve written tutorials and given presentations on RSS feeds, and authored Send Images to RSS, a plugin for making beautiful emails from blog posts.

Last year, I added a huge new feature to my RSS plugin: the ability to process excerpts. The high points are:

• the post’s featured image is added to the excerpt (or description)
• you control the length of the excerpt
• the excerpt attempts to break at the end of a sentence, rather than the middle
• a friendly “read more” link is added to the end of the excerpt

I personally just send out my entire blog post in my feed and email, but I know a lot of authors feel strongly about sharing just the excerpt (the number of people using my plugin certainly jumped once this feature was added!). So now, you have the option.

I was recently asked if it would be possible to change the “read more” link to display as a call to action (or CTA) style button instead. If you’re wondering what I mean by that, check out this email from Pippin’s plugins as an example.

We’ve got the nice big featured image, followed by the excerpt (this is a hand written excerpt, which is the best way to do excerpts if you want the most control), and then a nice, shiny button. (Note: Pippin does not use my plugin and it is not my intent to suggest that he does; I’m simply using his email as example of the type of effect we want to accomplish.)

Is it possible to do this on our own? Yes, absolutely! You can add the button to any RSS feed, but my tutorial is going to be in the context of using Send Images to RSS. I’m actually going to show you two methods. The first could be set up without Send Images to RSS; the second absolutely requires it.

Option One: Add a Call to Action Button to Your MailChimp Template

This image on the right is our goal. I did it with this option, so mostly MailChimp.

This first option requires just a bit of elbow grease in your existing MailChimp RSS template. I started with the MailChimp Design Reference on Buttons, which was good, because MailChimp thinks buttons should be in tables. So, armed with this, I ventured into my MailChimp editor.

Your first step, if you don’t have it in already, is to add an RSS Items block to your email template. The initial setting is for Excerpts, which is good, but not quite what you want. You can click the “show the markup” link to see how it’s built, and copy it, because that’s a good starting point. But you need to change the selection to Custom, so that you have full control over your output.

Once you’re on Custom, you can change everything in that block. You’ll see it’s full of MailChimp’s RSS Merge Tags, so it doesn’t look like much. What you really need to do is to click the <> (Source) button so that you’re looking at the code itself. Then use the MailChimp reference to add your button, or use this template as your starting point:

*|RSSITEMS:|*
<h2 class="mc-toc-title"><a href="*|RSSITEM:URL|*" target="_blank">*|RSSITEM:TITLE|*</a></h2>
*|RSSITEM:CONTENT|*

<table border="0" cellpadding="0" cellspacing="0" style="background-color:#2a717a; border-radius:5px;" width="100%">
	<tbody>
		<tr>
			<td align="center" style="color:#FFFFFF; font-weight:bold; line-height:150%; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px; margin: 24px auto;" valign="middle"><a href="*|RSSITEM:URL|*" style="color:#FFFFFF; text-decoration:none;" target="_blank">Read *|RSSITEM:TITLE|* on my site.</a></td>
		</tr>
	</tbody>
</table>
*|END:RSSITEMS|*Code language: HTML, XML (xml)

Notes:

• *|RSSITEM:CONTENT|* will pull your excerpt from your RSS feed. If you’re not doing your excerpts by hand, and not using Send Images to RSS to process the excerpts, your excerpt will be cut off at 55 words, unless you’ve coded it differently.
• my button is set to 100% width, and the button color matches my site. You’ll want to change the color (look for #2a717a).
• The button text comes from this block:

Read *|RSSITEM:TITLE|* on my site.

Change that to whatever you like, and keep the merge tag in if you want the button to include the post title (and support accessibility).

Make sure to preview your work and check that the button shows how you want it to! Always always always preview your emails.

If you’re using Send Images to RSS, you have one more step to do. You need to disable the “read more” link added by the plugin, because you don’t want that and the button both. It’s one line of code:

// Disable the Read More link added by Send Images to RSS
add_filter( 'send_images_rss_excerpt_read_more', '__return_false' );Code language: PHP (php)

Preview your email again and you should be ready to go!

Option Two: Modify the Read More Link in Your RSS Feed

The image on the right is from a sandbox site, using this method. So, this option is going to actually modify your RSS feed output, and it modifies the “read more” link added by Send Images to RSS. You’ll be introducing new markup into the feed, so triple check the output before committing.

First step is to log into your MailChimp account and edit your template, similar to what we did in Option One. Here’s what my template looks like:

*|RSSITEMS:|*
<h2 class="mc-toc-title"><a href="*|RSSITEM:URL|*" target="_blank">*|RSSITEM:TITLE|*</a></h2>
*|RSSITEM:CONTENT|* *|END:RSSITEMS|*Code language: HTML, XML (xml)

It’s a lot simpler in MailChimp now, right?

Second step requires you to add a function to your site, either in your theme’s functions.php file, or wherever you keep code like this. Please practice safe coding, back up your files, don’t use the WP Editor, etc. etc. We’re actually using the same filter that we disabled in Option One, but instead of disabling it, we’re completely changing its output. Because we can’t pass our site’s styles on to MailChimp for its use, we have to add in all the inline styles, same as what we did in the template above. Here’s the function:

add_filter( 'send_images_rss_excerpt_read_more', 'leaven_change_read_more_cta', 10, 5 );
/**
 * Modify the Send Images to RSS excerpt "read more" link output to be a button in MailChimp.
 *
 * @author Robin Cornett
 *
 * @param $output string        final output for "read more" text
 * @param $read_more string     "read more" text set on plugin settings page
 * @param $blog_name string     the name of your site
 * @param $post_name string     the post name
 * @param $permalink string     URL for the post
 *
 * @return string
 */
function leaven_change_read_more_cta( $output, $read_more, $blog_name, $post_name, $permalink ) {

	// set your colors here
	$button_color = '#2a717a';
	$link_color   = '#ffffff';

	// for a full width button using your Read More text, you shouldn't need to change this
	$output  = '<table border="0" cellpadding="0" cellspacing="0" style="background-color:' . $button_color . '; border-radius:5px;" width="100%">';
	$output .= '<tbody>';
	$output .= '<tr>';
	$output .= '<td align="center" style="color:' . $link_color . '; font-weight:bold; line-height:1.5; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px; margin: 24px auto;" valign="middle"><a href="' . $permalink . '" style="color:' . $link_color . '; text-decoration:none;" target="_blank">' . $read_more . '</a></td>';
	$output .= '</tr>';
	$output .= '</tbody>';
	$output .= '</table>';

	return $output;
}Code language: PHP (php)

The good news is that although this looks scary, you’re not actually going to edit any of the scary bits. The first two variables: $button_color and $link_color are all you need to touch–update them to match your branding and you’re done. This button text is going to use the “read more” text from the Send Images to RSS settings page, so you can change the button text there.

That’s it. Now instead of a subtle “read more” link at the end of your excerpt, you’ve given yourself a loud and proud call to action button. Enjoy!