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.

Pippin's Plugins CTA in EmailI 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

Call to Action Button in RSS EmailThis 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|*

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:

<?php
// do not include the opening tag
// Disable the Read More link added by Send Images to RSS
add_filter( 'send_images_rss_excerpt_read_more', '__return_false' );
view raw functions-01.php hosted with ❤ by GitHub

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

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

Call to Action using Send Images to RSS filterThe 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|*

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:

<?php
// do not include the opening tag
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;
}
view raw functions-02.php hosted with ❤ by GitHub

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!

Do something awesome. Tell a friend:

subscribe by email

If you're an email kind of person, that's totally cool. Go ahead and sign up here to get the latest blog entries in your inbox! No worries, I never share your address.
  • This field is for validation purposes and should be left unchanged.

Reader Interactions

Comments

  1. April 14, 2016

    Hi Robin,

    Thanks for again a great tutorial, I’ve been able to get it working and can adapt it to my own taste.

    I have decided to not use a button since my emails are presented as a simple (text only) personal email, but wanted to change the read-more-link so only the title and blogname are displayed as a link instead of the whole read-more-text (like the read-more-link yoast’s seo plugin generates).

    Although I could result the same by just not using your plugin and letting Yoast add the read-more-link, your plugin then gives me additional control on the excerpt length and removes the […] that are otherwise shown below the excerpt.

    Just doing it like mentioned above seems more natural to me, when not using a button, then making the entire sentence a link. The code you added to functions.php can easily be changed to accommodate that too.

    If using buttons, I probably only would want tot display “Lees verder” (Dutch for read more) because I didn’t like buttons that, because of the title-length, have more than one line of text in it. That can be changed off course as you have shown. I was wondering however if in that case accessibility also would play a factor, and I would have to add soms code adding the title for screenreaders like is done in some genesis theme’s?

    I am wondering something… my website is build in the Dutch language, but at some point I might want tot translate it to f.i English to accommodate both Dutch visitor as English speaking visitors. How would something like that influence f.i. an rss-feed, and the use of your plugin? Would I need a multi-site installation in that case, separating the languages, or is there some kind of localization possible with language files? Just wondering if you have any experience with such scenarios.

    Cheers, Hans

    • April 14, 2016

      Yes, modifying the “read more” text to have only part of it be a link is definitely an option, too….making the button say just “read more” while still maintaining accessibility (which is lacking if that’s all the button/link says), I’m not sure how manageable that is in this situation. It’s possible, I suppose, by tucking the post title inside yet another span, and then adding the inline styles to the span in order to hide it, but I’m thinking that’s a lot of inline styles for one poor little span.

      As far as multiple languages go, that’s a huge issue with a lot of possible solutions. Multisite is an option for sure, in which case you’ll have RSS feeds for each child site. If you opt for a plugin which manages the languages all on one site, though, I have no idea how that works with the RSS feeds. Any feed created in WP will be processed by my plugin, so if the plugin generates a new feed, the plugin will process it. Any strings within the plugin are translation ready, although the user input for the “read more” would fall outside of that, I suppose. However, in a multisite situation, I expect you would change the user input there to be language specific on each child site already. Interesting question; I’m not completely sure.

      • April 16, 2016

        Okay Robin, thanks for your thoughts on my questions.
        At the moment I’m fine, but if I go bilingual I will probably have to study it some more to get it right.
        Kind regards, Hans

  2. April 15, 2016

    I just used option 2 with a site using Mad Mimi and it works beautifully! The only thing Mad Mimi changes is it left aligned the button text.

    I’m thrilled. Thank you so much for exploring this option and making it so easy to implement!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Bars Code Check chevron-down chevron-left chevron-right chevron-up Envelope Laptop Search Times Facebook GitHub Google Plus Instagram LinkedIn Pinterest Twitter WordPress Logo Wordpress Simple