If you want to learn how to create an email newsletter template using WordPress you came to the right place. Before we get started let's make sure you fully understand what I'm trying to teach. The end results will give you a WordPress page template that is designed to be used as an email newsletter template by importing your URL with email newsletter software such as GroupMail that is responsive to email clients such as Gmail or Outlook on any device such as mobile or tablet so it will display nicely. But wait there is more – this template displays the most recent posts from any RSS feed so the email newsletter is already finished, just waiting to be sent. That explanation is a lot to take in, so it might be best if you look at the live example.
If you're reading this sentence that means you're ready to make an email newsletter responsive RSS parser template, so without further ado, let's begin.
Creating the Page Template
- Open a new file in the text editor of your choice. Before you start save your file as page-responsive-rss-newsletter.php. Most importantly start the file name with ìpageî so it organizes nicely on your hosting account and no breaks because servers hate that.
- At the top of the new file began by telling WordPress the name of our page template, which will display in the WordPress page template drop-down menu.
<?php /* Template Name: Responsive RSS Newsletter */ ?>
- Next, add the viewport meta element inside the
<head>to trigger the browser to render the page at a more readable scale. Browsing the web on a smartphone you'll notice how websites are scaled to fit within parameters of the device, which makes for a lot of zooming in and out. This is for the user's convenience since most websites do not have a mobile site. So, I used<meta name="viewport" content="width=device-width, initial-scale=1,">so the width of the device will be used as the width of the viewport and disable the initial scale. Since the auto-zoom can really mess up your layout elements I usedmaximum-scale=1, user-scalable=0which will remove the zoom functionality altogether so the user cannot resize the layout. This will lock the design to the parameters of the device. When you're combining the more readable scale meta tag and locked auto-zoom tag you get the below results:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
- Let's make the
<body>not have any spacing/padding around the edges, to do this add the margin propertymargin:0. Plus, WebKit (the browser rendering your HTML emails on the iPhone, Android and other devices) has a great feature where it will automatically adjust text size as the viewport changes to give you the best reading experience, I recommend turning off font resizing; to do this add the property-webkit-text-size-adjust:none.<body style="margin:0; -webkit-text-size-adjust:none;">
- Create a header graphic that is as large as 900px in width, that way the graphic doesn't look pixelized on a widescreen monitor and looks clean on a mobile device. But remember to compress the graphic as much as possible, so it doesn't take too long for the user to display the images inside the email client. Also, don't add any alt or title properties inside the
<img>tag or it will show as the teaser inside the subscriber's inbox. To make sure the header graphic displays nicely on any device add a width of 100%, as you can see in the example.<img border="0" src="images/header.jpg" width="100%"><br>
- Now let's retrieve an external feed and parse it by using WordPress
fetch_feedfunction by pasting the below code in your<body>. This makes the template worth the work. The RSS parser will display the most recent posts from any RSS feed, so when you are ready to send your newsletter the newest stories are already populated, so no extra work is needed to fill your email newsletter with content. This trick is accomplished by importing your URL using email newsletter software such as GroupMail, but I'll get to this later. What this template offers is similar to Feedburner, it builds your email newsletter for you, with your newest content. But, instead of Feedburner sending it out automatically with possible errors or content that you're not wanting in the newsletter, this template helps you quickly send your email newsletter with the option of editing before sending.<!-- RSS Parser --> <?php if(function_exists('fetch_feed')) { include_once(ABSPATH . WPINC . '/feed.php'); // the file to rss feed generator $feed = fetch_feed('http://rss1.smashingmagazine.com/feed/'); // specify the rss feed $limit = $feed->get_item_quantity(3); // specify number of items $items = $feed->get_items(0, $limit); // create an array of items } if ($limit == 0) { echo '<div>The feed is either empty or unavailable.</div>'; } else { foreach ($items as $item) : ?> <!-- How the RSS posts display --> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="border-bottom:#2591c7 solid 1px; border-top: #54b9ec solid 1px; background:#3ca7dd" width="1%"> </td> <td width="90%" align="left" style="padding:12px; border-right: #e1e1e1 solid 1px; border-bottom:#CDCDCD solid 1px; border-top: #FCFCFC solid 1px; background: #f5f5f5;"> <!-- Title and hyperlink --> <div style="margin-top:0; margin-bottom:0px; padding-top:0; padding-bottom:0;"><a target="_blank" href="<?php echo $item->get_permalink(); ?>" alt="<?php echo $item->get_title(); ?>" style="color:#4E4946; text-decoration:none; font-size:100%; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:normal; font-weight:bold;"><?php echo $item->get_title(); ?></a></div> </td> <td width="9%" align="center" style="background: #eeeeee; display: table-cell; vertical-align: middle; border-bottom:#CDCDCD solid 1px; border-top: #FCFCFC solid 1px;"><a target="_blank" href="<?php echo $item->get_permalink(); ?>" alt="<?php echo $item->get_title(); ?>"><img src="images/mobile-open-button.gif" border="0" /></a> </td> </tr> </table> <!-- End of post display --> <?php endforeach; } ?> <!-- End of RSS Parser -->In order for the above code to work make sure the feed.php file is in the correct location:
include_once(ABSPATH . WPINC . "/feed.php").Second, add your RSS feed
$feed = fetch_feed("http://rss1.smashingmagazine.com/feed/").Third, enter the amount of posts you'd like to show
$limit = $feed->get_item_quantity(3).Next, change your error message
if ($limit == 0) echo '<div>The feed is either empty or unavailable.</div>'.Now the fun part, designing how the posts show up. Since this template is designed for all devices including mobile it's important we stick with a one column format for best results. Two columns is acceptable, but know it would be harder to read on a smaller device such as an iPhone.
To create the responsive design start off with a
<table>with 3 columns totalling a width of 100%.<table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td width="1%"></td> <td width="90%" align="left"></td> <td width="9%" align="center"></td> </tr> </table>
It's simple I know, but it works. A user can rescale their browser and get a nice looking responsive design based off the 100% width. Too many email clients (Gmail) don't support CSS3 media queries, which is how you can apply different stylesheets for a responsive display, so it is safer to have inline stylesheets instead of external. Keep in mind the supported HTML and CSS that works in most popular email clients. That way the design will be responsive on all devices and email clients.
The first column at 1% width is solely for design purposes. Adding a background color and border color helps give you a nice looking design.
<td style="border-bottom:#2591c7 solid 1px; border-top: #54b9ec solid 1px; background:#3ca7dd" width="1%"> </td>
The second column is where the title is, taking up 90% of the width. The title is a clickable hyperlink to the original post. To show the RSS feed title use the PHP code
<?php echo $item->get_title(); ?>. To get the permalink use the PHP code<?php echo $item->get_permalink(); ?>.You can display a description from the feed
<?php echo substr($item->get_description(), 0, 100); ?>, but keep in mind the layout may break depending upon the RSS feed you're using. And unfortunately you can't display any images from your feed, even if your feed offers it. A solution may be to install a WordPress plugin.<td width="90%" align="left" style="padding:12px; border-right: #e1e1e1 solid 1px; border-bottom:#CDCDCD solid 1px; border-top: #FCFCFC solid 1px; background: #f5f5f5;"><div style="margin-top:0; margin-bottom:0px; padding-top:0; padding-bottom:0;"><a target="_blank" href="<?php echo $item->get_permalink(); ?>" alt="<?php echo $item->get_title(); ?>" style="color:#4E4946; text-decoration:none; font-size:100%; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:normal; font-weight:bold;"><?php echo $item->get_title(); ?></a></div></td>
The third column at 9% width displays a 44x44 button that hyperlinks to the original post (Apple says that the average finger tap is 44x44). This gives the user a current app design trend with another clickable option to read the story. Again, remember to compress your graphics as much as possible.
<td width="9%" align="center" style="background: #eeeeee; display: table-cell; vertical-align: middle; border-bottom:#CDCDCD solid 1px; border-top: #FCFCFC solid 1px;"><a target="_blank" href="<?php echo $item->get_permalink(); ?>" alt="<?php echo $item->get_title(); ?>"><img src="images/mobile-open-button.gif" border="0" /></a></td>
That's it, template is finished. But, don't be afraid to take it further by adding a footer section with social media, generic contact information and an unsubscribe link. Just remember to keep the width at 100%.
Uploading Your File
Since the page template is finished upload the file to your FTP host in your installed theme folder. For example: wp-content/themes/theme-folder.
Creating the WordPress Page
Log in to WordPress and make a page. When making the page remember to change the template to the "Responsive RSS Newsletter" option in the drop-down menu. For a title, it's not important to have an SEO friendly title, because the template is designed specifically for a newsletter, but since the template is responsive it will still look ok online. Hit publish to make the URL live, so you will be able to copy and paste the URL into your newsletter software.
Importing Your URL to Your Newsletter Software
Open your email newsletter software. I use GroupMail to get the job accomplished, but almost any other newsletter software will do the trick. Create a new message and look for the import web URL option. It may say something different depending upon the software, but the idea is to take a website and turn it into a newsletter simply by importing a URL.
The results will give you a responsive content ready email newsletter that will work on most email clients that is a great Feedburner alternative. No having to add content to the newsletter, no having to mess with the design, it's ready to go. But what's nice, before you send the newsletter you do have the option to edit the content, so there are no errors or content that you're not wanting in the newsletter.
Now that you're finished, test out how the responsive design displays by minimizing your browser or viewing it in The Responsinator.
Comments