Category: WordPress

Improving Mail Deliverability in WordPress with Amazon SES

Out of the box, WordPress doesn’t always do a great job of sending mail. This isn’t necessarily its fault – web server and DNS configurations matter a lot when it comes to sending high deliverability messages. Ensuring deliverability is especially important when it comes to eCommerce sites, but even a single missed lead capture form can cost your company a great sum in lost potential revenue. It’s an embarrassment when your legitimate mail gets in customers spam box.

One of the easiest and most reliable ways to improve your deliverability is by implementing a third-party mail sending service like Amazon SES. Although AWS in general can be quite confusing, once you’re set up, it just works. Since it’s a pay-as-you-go service, you will only be billed for messages you actually send. Most low-volume sites will cost less than a dollar per month.

So here’s how to set it up!

  1. Sign up for AWS if you do not have an account already.
  2. Set up a billing method to pay for the services you use.
  3. Navigate to the SES configuration panel, click on Domains, and press Verify a New Domain.
  4. Enter the domain you’d like to send mail from, and check Generate DKIM Settings. Press Verify This Domain to start the verification process.
  5. You will be shown a TXT record to set to verify your domain. You will also be shown three CNAME records to set up DKIM. Add all four of these records to your DNS configuration, and Amazon will periodically check to see when they’re all set up.
  6. You will also need to set up SPF at this time. If you already have an SPF record, add include:amazonses.com somewhere before the end (~all or -all). If you do not have an SPF record, you can add the following to only permit sending from SES: v=spf1 include:amazonses.com -all. There is more official information about SPF available here.
  7. Generate SMTP credentials in SES by clicking on the domain, and then selecting SMTP Settings on the left. Press Create SMTP Credentials and you will be walked through creating a special IAM user to only access Amazon SES for this domain. When you are shown your Access Key ID and Secret Key, save these as they make up your SMTP login.
  8. Open a support ticket using this form to request Production access to SES. Until Amazon removes the default limitation on your account you will not be able to send mail outside of your domain. Make sure not to force SMTP mail on WordPress until you’re notified you’re out of the sandbox, or messages will not be sent.
  9. On your WordPress site, install and activate WP-Mail-SMTP which will permit you to route WordPress mail over SMTP. Under Options -> Email, select Send all WordPress emails via SMTP. For the SMTP host, enter the region-specific hostname displayed on the SMTP Settings page in SES. You can use port 25, 465, or 587 in case one is blocked on your server. Select Use TLS Encryption, and enter your Access Key ID as your username and the Secret as your password. You are also encouraged to force a from address that matches the domain you are sending from.
  10. Use the Send a Test Message functionality to try out your new SES implementation. If the debug output starts with bool(true) – your message was sent successfully!

Fix Broken “Mixed Content” WordPress 4.4 srcset (Responsive Images)

One of the newest features (and one of the coolest) to be introduced to WordPress core lately has been “responsive image support”. What does this really mean? To be specific, WP implemented the HTML5 <img> srcset (“source set”) attribute.

When it works properly, this attribute solves a couple common problems in web development. By providing the browser with a list of pre-scaled image resolutions it can choose from, a device can intelligently request the best image for the current screen resolution. If you’re using one of the currently supported browsers on a high-resolution screen, it should automatically opt to use one of the larger images specified in srcset. I’ve been doing a lot of testing on my Nexus 6P, which is nearly 520 PPI. You can really tell the difference on screens like that.

Here’s the problem. If you’re using HTTPS with WordPress, but it isn’t in your SITEURL or HOME variables, you will likely end up with plain old HTTP srcset paths. Visiting the site on unencrypted HTTP will work just fine, but the problems show when you try HTTPS. Suddenly, and only on devices that support and choose to use the srcset, most of your images will fail to load. This is called “Mixed Content” – loading insecure resources from a secure page. It’s a pretty bad thing to do, and because of the security hazards, almost all browsers will completely block requests like this to unencrypted HTTP from an HTTPS session.

So, yeah, great – browsers block your responsive images. You could go all-HTTPS, or go all-HTTP, but their is an option for your particular instance.

What do you do?

Solution A: filter wp_image_calculate_srcset and do an easy-peasy str_replace( ‘http://’, ‘https://’ ) making *all* your srcset images SSL. Use this for CloudFlare support.

add_filter( 'wp_get_attachment_url', 'set_url_scheme' );
add_filter( 'wp_calculate_image_srcset', function($sources) {
 $filtered_sources = array();
 foreach($sources as $source_key=>$source) {
  $source['url'] = str_replace('http://','https://', $source['url']);
  $filtered_sources[$source_key] = $source;
 }
 return $filtered_sources;
});

Solution B: filter wp_image_calculate_srcset and attempt to detect the protocol the page was requested with, then only rewrite to https if the page was loaded securely as well. This is nice if it works in your configuration since you don’t incur any HTTPS overhead loading images on an unencrypted page. However, it will not work with CloudFlare. If you’re using CloudFlare, you should make sure HTTPS is on and use Solution A.

add_filter( 'wp_get_attachment_url', 'set_url_scheme' );
add_filter( 'wp_calculate_image_srcset', function($sources) {
 $page_protocol = ( !empty( $_SERVER['HTTPS'] ) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443 ) ? "https" : "http";
 foreach ( $sources as $size => $source ) {
  if ( stripos( $source['url'], $page_protocol ) !== 0 ) {
   // we can't find the current page protocol at the beginning of the srcset...
   $new_url = str_replace( $source_protocol . '://', $page_protocol . '://', $url );
   $sources[$size]['url'] = $new_url;
  }
 }
 return $sources;
});

Solution C: update siteurl and home to start with https://. This will make your whole site SSL. Please make sure your certs and redirects are all okay before doing this, or there’s a good chance you’ll lock yourself out of your install.