By Email newsletters fall into the “necessary evil” category, in my opinion. I use them here on this blog, and I have clients who want and/or need them for their websites, but what a pain to get working right, especially with WordPress.
Yeah, I know, I could use, and have used, MailChimp or one of the other heavy hitters, but I’m stubborn enough to want this to work with WordPress, and not have to depend on an email service like MailChimp.
MailPoet, SendPress, or Sendy?
I’m going to stick my neck out and say that the only real contenders in the WordPress email newsletter arena are MailPoet (formerly Wysija) and SendPress. You don’t have to agree with me on that one, but this is my blog. 🙂
I currently use MailPoet on this website, though their security snafu in mid-2014 didn’t make me too happy. Everybody makes mistakes, and to their credit they fixed that problem in a timely manner.
I purchased, tried, and still want to like SendPress. Neither MailPoet nor SendPress follows the WordPress admin API very well, but I think SendPress does a better job than MailPoet with their admin. The guys behind SendPress seem motivated, though their version iterations come and go in waves, which is to be expected with a group of guys who also have day jobs – can’t blame them for that! My main problem with SendPress is that their version releases tend to be buggy, and while they usually push out a fix in a short time, I need something I can use with paying clients that’s more dependably professional.
Sendy seemed like a good stand-alone, separate-from-WordPress option. I purchased and installed it on my server, set it up for one of my ecommerce clients, worked up a responsive template, and sent out an email campaign. I have no complaints with how Sendy performs, but it doesn’t integrate (yet?) with WordPress, and that is still a problem.
Needed to make a decision
My current client project is for a large corporation that sends out press releases, SEC filings, and other items on a regular (monthly?) basis, and they’ve asked about notifying their investors via email when these items are published. That project is quickly drawing to a close so I needed to make a decision, and after weighing all the pros and cons, I finally chose MailPoet for this project.
MailPoet does a good job of setting up and sending automatic emails (newsletters) for posts and other custom post types. In this case I set up three different email lists, one each for regular posts and two custom post types. Nice!
Then I started testing the emails and, as I expected, they were not “responsive,” meaning they didn’t look so good on my Android phone, and they looked even worse on my wife’s iPhone 6. MailPoet has been saying for a year or two now that responsive templates are coming, though I can’t imagine why it would take so long to integrate. Time to dig in to the code and see what we can do about this.
Easier than I expected it to be
There is (was) a thread on the MailPoet UserVoice forums that has to do with the lack of a responsive email template, and one of the commenters listed all the files she had to modify to achieve a responsive template. The problem with this approach, as you probably know, is that your modifications won’t survive a plugin update. As I write this post MailPoet is currently at 2.6.15.
I wanted to make this easy on my future self, so after looking through the plugin and reading some code, I selected email_template.html, made a few changes, sent out a test email, and there it was, a mostly responsive email. I say mostly because if you want to do a better responsive job with images you should probably modify the css.html file too.
What needs to change
MailPoet thinks, or thought, that an email should be 600 px wide, no matter what device the email is being viewed on. I, and many others, disagree. So what you’ll need to change are six instances where they set the table width at 600, and change those to 100%. You’ll also want to change style=”min-width:600px;” to style=”max-width:600px;width:100%;” in the td tags, and add max-width:600px; to the main table tag inline style.
Images can be dealt with, more or less, by adding max-width:100%; to the img rule in css.html.
I’ll include the modified email_template.html and css.html files in their respective Gists in this post. You can just copy my code over to your files, though it wouldn’t hurt to read through the code, see what changed, and file it away in your memory.
The two files that need to be modified are:
wp-content/plugins/wysija-newsletters/tools/templates/newsletter/email/css.html
wp-content/plugins/wysija-newsletters/tools/templates/newsletter/email/email_template.html
The Caveat: There had to be one, and it is that I’m using the default email theme. If you’re using something else, you may need to alter these directions. In other words, your mileage may vary.
Bonus: What about HTML tables in the emails?
My client occasionally sends out financial data in their press releases, using HTML tables, and those really needed to be in the emails also. MailPoet was stripping out the table, tr, td, and th tags, and fortunately they provide a filter to alter what is stripped out of your emails. That filter is mpoet_strip_tags_ignored, and you can find it in wysija-newsletters/helpers/articles.php. As a bonus I’ll include a Gist for that too.
The HTML tables aren’t responsive, but I’m okay with that at this point since the majority of the time there won’t be tables in the emails.
Add the filter code to a core functionality plugin (best choice), its own plugin, or functions.php.
The Code
Gist – Modified pseudo-responsive MailPoet email_template.html
Gist – Modified MailPoet css.html
Gist – Filter MailPoet tags not being stripped
Thank you, thank you, thank you! I cannot tell you what a lifesaver this fix is for me. Worked like a charm. You are a wonderful person for sharing.
Glad to hear it Casey, and you’re welcome!
Well, this did not work, actually. I am wondering what I am doing wrong. We want a wider newsletter, so I changed all the 600s to 900s in this file, but it is still 600. I can’t find out where the app is forcing this width. Any ideas?
Thanks,
Mia
Hi Mia,
It sounds to me like you missed a 600 somewhere in the file. You can send that file to me using my contact form and I can take a look.
Alternatively, do you have a URL for the preview version of the email?
John
Hi John,
Actually, it was ok. I had misnamed the file. That is why it was not rendering. Now it is showing at 900 width in the browser. In the editor inside of wordpress it still is showing at 600 width.
One question: I am not sure how to implement the above filter, to keep the tags from being stripped…
how do we add the code to a core functionality plugin (whatever that is), or what file do we put it in?
Thanks for these tips,
Mia
Hi Mia,
A core functionality plugin is simply a plugin that contains code that adds the functionality the website needs to function (work). The idea behind that plugin is to not include that functionality in a theme’s functions.php file, which will change if the theme is ever changed.
But if you are not familiar with creating plugins, adding the code to (the end of) your theme’s functions.php file is probably the better way to go.
John
Hello John,
Thank you so much (merci beaucoup), good job. I was using acymailing on joomla, who it is responsive too (better) heavy solution, but i’m tired of joomla !
From France.
You are welcome! One thing I’ve never regretted is moving away from Joomla and to WordPress. Hope it goes well for you!
John
This works a treat, many thanks! I also find it baffling that MailPoet has taken so long to make their templates responsive, but in the meantime this is a terrific fix.
As my theme contains images in the header and footer, I had to modify my header_template.html and footer_template.html as well, in order to make the images responsive. All that is required is to remove the height and width properties and style declarations in the header / footer img tags.
Much appreciation!
You’re welcome, Kay! And thanks for adding the additional info for the header and footer!
John
Thank you, Kay! I was having the same problem and your comment helped me too!
Hi john, I kind of have a slightly different issue with mailpoet. I added a new field to the default fields (email, name) on the subscription form I created, copied all the codes and pasted on my homepage (one after the other) but the form doesn’t show, instead the code(s) show up where I Want the form to. I use a theme called “responsive” and don’t want to use Widget. Is there a way to fix this please.
Hi fabbz,
Actually, this is a completely different issue, but I’ll give it a try. Which type of code are you trying to add to your home page for this form? HTML, PHP, iframe, or shortcode?
If you’re doing this from a WordPress page, then you should be using HTML or the shortcode – HTML in text mode, shortcode in either text or visual mode. If you’re doing this in a page template, then you should be using PHP. Don’t bother with the iframe.
John
This looks great. I’m about to test it out but first I need to ask… Do I need to edit the plugin file directly or can I modify the classes in my child theme custom css?
The obvious reason being that I want to retain the changes after I update the plugin.
Any thoughts?
Hi Jordan,
You’ll need to edit the plugin files (2) directly, and repeat the edit each time MailPoet updates. Or alternatively just keep copies of the modified files and upload them to the server after MailPoet updates.
These edits have nothing to do with your child theme or its CSS. What you’re editing are the files that generate the emails that get sent out.
It would be great to not have to redo these edits after MailPoet updates, but unfortunately they didn’t build the plugin in such a way as to make that possible, as far as I’ve been able to find.
John
It works perfectly, thank you. Just one question, how do I change the font-size for my mobile devices? It is a little bit small now at the size of 14px. Viewing the newsletter on my computer is okay, but its a bit too small.
Any recommendations?
Hey Brad,
If you look in the css.html file included in the blog post, at around line 18 I had added a rule to increase the font size to 15px, which you can edit as needed.
John
thank you so much for the trick..
it looks so nice in mobile devices and responsive in default templates,but whenever I include some recent article,it increase a bit and in your mobile you have to zoom-back a little or hold right and left to see whole articles with pictures.
what would be the clue to do it right responsive ?
Hi Mehran,
You’re welcome! If you could send me the email in question I might be able to see what the problem is. john [at] blackhillswebworks dot com
John
Hi,
Did you find any way to do this process without editing the plugins core files?
Cheers.
Hi Nirmal,
No, and I don’t think it’s possible based on how the current version of MailPoet is built. And hopefully this fix will be no longer needed when 3.0 is released. Someday. 🙂
As it is now, there are only two files that need to be edited, and I keep a copy of each on my computer and then FTP them to the server after I update MailPoet to a new 2.x version.
John
Hi John,
Thanks for your quick response.Much appreciate.I was bit conduced is it ok to edit those core files that all.
Cheers
I’ve been working my way through all the files in order to try and make all images fully responsive. I’ve removed width and height attributes from table elements, changed all height values to “auto”, all widths to “max-width”, and added width:100%; as well. I’m getting pretty close!
Hi John,
I tried your solution, it works for the fonts and the text, but then the header image appear distorted.
I tried to change some values but nothing.
Could you help me?
I can send to you my css and email template files.
Hi Alessio,
Before you send the template files, why don’t you send me an email that has the issue you’re describing? You can forward that email to john [at] blackhillswebworks [dot] com.
John
Hey John,
I sent you 2 emails with the two different settings (original and modify), please let me know. The sender is the email from my website.
Sorry for the late reply, but I didn’t get the notification of your answer.
Thanks for your help
~Alessio
Alessio,
I just looked at the source code for those emails you sent, and I think what you need to change is to use smaller images, something in the 200-300 px width range.
If you really need to use a larger image in your email header, you’ll probably have to modify the file that generates that header (header_template.html).
You could also try changing the CSS for images to img {max-width: 100% !important;} so that it overrides the inline style in your image HTML.
John
Thanks John,
if I use smaller images (200px) would it have a bad resolution on hi-dpi devices?
I think it is already set at 100% max-width…
HERE my header template in /tools/templates/newsletter/email:
Alessio,
How your images look depends on their resolution (quality) and not on their width.
And you’re right about max-width being 100% – I was just suggesting adding !important to that declaration to hopefully override the inline style for your images.
John
Bonjour,
“The two files that need to be modified are:
wysija-newsletters/tools/templates/newsletter/email/css.html
wysija-newsletters/tools/templates/newsletter/email/email_template.html”
I do not find these two files. I have :
w-content/uploads/wisija/themes/default/style.css
Whre are these two files please
Thank you
Bonjour Ciginfo,
You can find those files in the wp-content/plugins/wysija-newsletters directory.
John
Hi John,
It all seemed so easy, (copy and pasted your code into the two files), and it even looked awesome in the Word Press Mail Poet Newsletter Preview, but when I “sent” it I got this barrage of code at the top (below) and it still wasn’t responsively “centering” (portrait) on my Android phone. ???
** code removed for sake of space **
Got ride of the spurious code problem, but still not responsively centering in portrait mode (Android)
???
Hi Hutch,
Glad to hear that you’re making progress! If you can send me (forward to me) the email in question I can take a look and see if I can help. […]
John
uh…email address? And do you have an Android phone to test?
Hey John,
You seem to know your stuff, and I on the other hand am completely new the newsletters in general. I was looking to start one ASAP for our nonprofit organization and could use some guidance because I do not even know what image sizes are for the logo area. Could you reach out to me via e-mail for assistance?
Hi John,
Wonderful work! Is this method still working with the updated MailPoet (2.7.3) though? My newsletter no longer seems to be mobile responsive.
Your input would be very much appreciated.
Hi Hiro,
Still working on 2.7.3, as far as I know. Did you remember to re-upload the css.html and email_template.html files after updating MailPoet? That’s the downside of this method, and seems to be unavoidable since MailPoet didn’t give us any filters or hooks to make this a “permanent” fix.
John
Thanks John for the quick reply. I did upload those two files after updating the plugin. Is it possible that newsletters created with default setting (i.e. before uploading the files) never become email-responsive, even if your files are uploaded afterwards?
Hiro,
If you’re referring to newsletters that have already been mailed, then yes. Once the email goes out you can’t do anything else to change it. But if the newsletter is created and not yet mailed, then I think it would still use the updated files to generate the actual responsive email.
John
John,
Thanks for the feedback! I found out why my newsletters were not responsive even after updating the plugin with your files. Adding a URL link to a photo made the newsletters unresponsive. So my solution was to apply a URL link to a word (or words), instead of applying a URL link to a photo. Then the newsletters became responsive again!
Hiro,
Linked images are not responsive? That is interesting, and I might have to investigate as to why that is happening. Thanks for letting us know what you found out.
John
Thank you for this amazing quick-fix haha. I got very close, but I just can’t seem to figure out how to get the images to get 900px (instead of 600). Could you please help me out with that?
I just read that linked emails are not responsive and that you are investigating it. Should’ve scrolled down haha. Thanks for checking in to this.
Blessings
Hi Shahin,
If I understand your question correctly, you should be able to edit the modified email_template.html and change each occurrence of “max-width: 600px;” to “max-width: 900px;”
John
Yes that was correct. I have changed every 600 to 900. The only problem is that the images keep retaining their own (mailpoet) size. I have tried changing the ‘img’ attribute in the CSS, but to no avail. Any help would be very appreciated
Shahin
Shahin,
Send me one of the MailPoet newsletter emails you’re working with and I’ll try to take a look and make suggestions. john at blackhillswebworks dot com
Ahh, yes. The max-width declaration doesn’t change the size of the images, it only allows them to display up to that size assuming that their original width is at least that size. So a 600px image will still only display as 600px, even if the max-width declaration for images is 900px.
You “could” add “width: 100%;” to the img declaration along with the max-width that’s already there, but then your 600px images will be pixelated and not looking too good.
John
Ah that would be a nice fix. The point is that Mailpoet automatically scales the images to that size when imported in a newsletter. So it all comes back to mailpoet again. I just hope they launch 3.0 soon, with responsiveness.
Thank you for the tips!
Cheers
Shahin,
You know, looking again at the code for the newsletter you sent me, it seems that MailPoet is using a cropped or thumbnail image rather than the original image that you uploaded. For example: /wp-content/uploads/2016/10/nieuwsbri=
ef_okt_2-600×174.png. If you were using the original image it would look like this: /wp-content/uploads/2016/10/nieuwsbri=
ef_okt_2.png.
I compared that with some newsletters that I created in the past and they used the original images rather than thumbnails.
So, it may be that you are selecting the wrong image when inserting into your newsletter. MailPoet’s image selector is rather clunky, so that’s a very good possibility.
Just an idea to look into.
John
Hi John, thank you so much for your trick (and work)!
I’ve used it for my kid’s school newsletter. It looks nice on Android, so I assume it will be ok on other devices, too. There is only one detail that I would like to fix. The right margin is three times the left one, and it would be nice if the space could be used by the newsletter instead.
Can I send you a test mail from the website?
Thank you!
Hi Masha,
If you haven’t got this fixed yet, you can send the test email to me at john [at] blackhillswebworks [dot] com.
John
Now that it is January 2017, MailPoet 3 Beta is out. The display is better in my Android as it fits the width fine in both portrait and landscape orientations. I am using 16 px font size for the text, and it is easy to read in my phone. However, I still cannot enlarge or shrink the size as I read it. I therefore would qualify their claim of “responsive templates.” Also, in my wide-screen laptop, the newsletter takes up only half the width of the screen, though it is nicely centered. And if I make my window too small, I have to scroll horizontally.
So I will soon try out your fix (after I learn the right way to build a custom core functionality plugin, which I need to know sooner or later anyway).
Thanks so much!