WP Dev Life

A Journey through WordPress

Migrating from Font Awesome 4 to 5

by

Today I was working with a custom genesis theme that a customer had created for one of his clients, but none of his icons were showing. There was only a square box. This was pretty perplexing to me. Everything in the code looked correct. Icons were being called properly, and the CSS files were properly enqueued, and showing in the browser. The issue turned out to be a change that Font Awesome made in version 5. 

Previously whenever utilizing an icon, the class would be something like class=”fa fa-instagram”. This is how the icons were being called in the theme code I was looking at and from everything I knew it was right. I checked the encoding of the database and created a new child theme. I even went so far as to not enqueue via WordPress and use the dirty @import statement. I downloaded the files locally and installed them on the site. Nothing I attempted was getting the icons to display. Only version 4 of Font Awesome worked. I was dead set on getting this resolved.

I decided to go to the WordPress.org plugin support forum  for the Better Font Awesome plugin to see if there were other reported issues for the latest font. The issue turned out to be related to the different styles of icons that Font Awesome now provides. 

Font Awesome allows for Solid, Regular, Light and Brand type of icons. Instead of using the fa class when loading the icons, you need to specify fas for solid, far for regular styling, and fal for light icons. If you’re going to be utilizing social media brands such as Instagram, Facebook, Youtube, etc. then you need to use the fab class. For example, if I wanted to load the Instagram icon, I would use <i class=”fab fa-instagram”></i>  to load the icon. Any non brand icons are able to utilize the other three icon styles. 

It is important to be aware of this change before updating any files that may be enqueuing Font Awesome version 4 to 5. At time of writing the latest version is 5.1.1. For a full list of icons, features, or to get Font Awesome Pro check out their website! 

Improve your Workflow with WP CLI

by

There exists within the WP CLI the scaffold command which allows you to easily create the base file and folder structure of some common WordPress features, like Plugins, post-types, or a theme based on Automattic's _s. If you're going experimenting with the new Gutenberg Editor slated for a Core Release in 5.0 there's also the block generator. If you don't currently utilize Boilerplates such as WPPB then using the scaffold feature of WP CLI can definitely help speed up your workflow

What does it do?

There's multiple sub-commands for the scaffold command.

wp scaffold block – Generate the PHP, JS, and CSS files for creating your own Gutenberg block. I would definitely recommend this as a starting point for diving into creating custom blocks, especially since Gutenberg is slated for WordPress 5.0.

wp scaffold child-theme – If you use a framework such as Genesis, or Divi, or any other theme but need to get a child theme setup rapidly without manually copying/pasting files or creating them from scratch then this should shave some time off the initial setup.

wp scaffold plugin – Get a decent head start on developing a new plugin. I personally prefer using the WordPress Plugin Boilerplate because it gets setup for Object Orient Programming utilizing classes, so it gives you an even better headstart than scaffolding one.

wp scaffold plugin-tests – This will generate files for your plugin to run PHP Unit Testing on.

wp scaffold post-type – Whether you're needing to get some post types added to your theme or for your plugin this command will generate all the necessary PHP code to register, and add a Custom Post Type to your plugin or theme, or just output the PHP code onto your Terminal for you to copy and paste it into a specific theme or plugin file.

wp scaffold taxonomy – Similar to the post-type command, this generates the PHP code necessary to setup custom taxonomies faster than having to manually type everything out, or saved somewhere as a template and then having to search and replace the necessary fields.

wp scaffold theme-test – Just like the plugin-tests this generates PHP Unit Test files around your theme.

wp scaffold _s – This works exactly like downloading a fresh file for Automattic's Starter Theme Underscores or more simply put _s. You can pass all of the same arguments on the command line as you fill out on their website. It would be great to see WP CLI change the plugin scaffold command to use the WPPB setup that I've mentioned before, as their generator site works exactly the same as the _s website. If you need to create new themes and you prefer working with raw code starting from the bottom this is your best asset. I would like to see the addition of being able to choose some kind of CSS framework to add by default such as Bootstrap or Foundation as that could save additional time.

Wrapping it up.

For the full list of commands and more documentation I recommend reading over the Developer Handbook page.

Hopefully you find some usefulness to the scaffold command. Most local environments such as Wocker, or VVV will contain implementations of the WP CLI that are fully featured. Some web hosts that grant CLI access may turn off the scaffold command, but that's due to developers scaffolding and programming locally before pushing things up with Git or another kind of development tool. WP CLI should be a part of any developer toolkit and can help speed up your workflow as you become more comfortable with it. 

Improve WP Search with ElasticSearch

by

AWS has all kinds of amazing features that you can couple with your WordPress site. We’ve covered using the Simple E-mail Service for sending your WordPress e-mails and this time around we’ll be covering using the ElasticSearch service and 10up’s ElasticPress plugin. In my testing this greatly improved the search functionality and lessened the load on the web server’s MySQL instance. Note: Using ElasticSearch will increase your AWS bill.

Creating Your ElasticSearch Cluster

For the purposes of this article we’ll be utilizing some smaller-tier instances as noted above, this service does incur compute charges. Once you’re at the ElasticSearch Console create a New Domain.

On the next screen you’ll put in a domain, this doesn’t need to be your actual domain name but The name must start with a lowercase letter and must be between 3 and 28 characters. Valid characters are a-z (lowercase only), 0-9, and – (hyphen).

Last time I set this up, I think ElasticPress complained about using ElasticSearch 6.0, so choose 5.5. 

To get good health you’ll want to utilize more than 1 instance. So we’ll go with 2 for now. You may need more depending on the amount of search traffic that your site gets. I’ve chosen the t2.small instances for now and this should be good for testing purposes in your staging environment. In production I would maybe add a few more instances or go with a larger EC2 instance type.

On the next page we’ll setup the Access Policy based on your server’s IP address to ensure that no one outside of your IP address can modify any indexes or delete any data.

Choose Public Access in the first section, and then in the Access Policy dropdown choose “Allow access to the domain from specific IP(s)” to configure an Access Policy. 
Review the settings and then confirm to begin the process of creating the cluster. This usually takes about 10 minutes.

Configuring ElasticPress

While your ElasticSearch cluster is spun up now is a good time to setup the ElasticPress plugin. If you have SSH access that allows you to git clone you can run git clone https://github.com/10up/ElasticPress.git elasticpress to clone the plugin directly into your site, or install it via the Plugin page.

Once installed and activated go to the ElasticPress dashboard to begin Setup. Grab your ElasticSearch hostname from the AWS Console as Endpoint.


Once that’s done you’re ready to index the site. You’ll need WP CLI access, or if your host doesn’t provide that, contact them to run wp elasticpress index –setup

Final Thoughts

ElasticSearch, while does present an additional cost to operating your site, can be beneficial to help improve your User Experience and help lessen the load on your database for an ecommerce store with a ton of products, or a general news site with thousands of articles.

If you see any issues feel free to let me know using the Contact page. If you find this useful feel free to share this on Social Media.

 

Development Workflow

by

Everyone has their own workflow. With all of the tools like GitHub, TravisCI, VVV, Webpack, and the list goes on, every team or individual is going to have their own workflow. Even better, is that platforms such as WP Engine are providing tools to enhance these workflows to get your code into production. We’ll be going over a few different tools that I’ve found useful and how I’ve incorporated them into my own personal workflow.

Local Environment

This is probably the most important part of it all. There’s been a slew of ways to configure your local environment. A lot of people have traditionally used The *AMP family of environments, where you install Apache, MySQL and PHP on your local machine. This prevents a challenge though because if you’re working with a team, each one of you may have inadvertently configured things differently, or you’re running on completely different operating systems, and code written for one may not work properly on the others.

Income the Vagrants & Containers. When I first started writing code in junior high I had no idea what I was doing but I had Dreamweaver and some free hosting through one of the plethora of free web hosts of the early 2000’s where you’d bypass their popups with some clever script at the bottom of your site. Utilizing virtualization software and configuration through VirtualBox, Vagrants have taken a good forefront. It allows you to essentially have a preconfigured environment that can mount your local filesystem and develop your websites. My personal favorite that I’ve used recently is VVV from 10up. Varying Vagrant Vagrants is an open source Vagrant configuration focused on WordPress development. This is a great tool for developing themes or plugins. As I get more familiar with it and try out others I’ll do some full reviews.

The other day I was introduced to Wocker in the /r/WordPress sub-reddit. Wocker is a local WordPress development environment built on Docker. I haven’t gotten to experiment with it yet but looks promising. You still need to have Vagrant installed and configured to utilize this as well.

Code Versioning

Git duh. Whether you’re working on a personal project, or your company has a set of private repositories, or even a centralized custom git server. Git is the front runner in handling code versioning. Deploying those code changes from git else where whether handled by TravisCI for continuous integration, or Jenkins for continuous deployment, is a whole other beast that we’ll eventually cover.

Staging & Production

WP Engine has always provided a staging area for developers to test changes before deploying them to their production site. Things have gotten even better recently with their Deploy Site and Copy Site features as well as their Workspaces and Environment Labels, the latter being more for organizational purposes. Using these features though you can easily create a backup point, and deploy that from your staging install to another environment such as your production install. This means you can push your code with git to a dev install, deploy that to staging, have QA review, then deploy staging to production pretty seamlessly. As long as you’re only deploying code changes then your database on live is never touched so if you’re an e-commerce store you can be assured that no customer information is lost.

Other Thoughts

I’m sure there’s a lot that I haven’t yet covered, and even more that I need to learn. These are the basics for my own personal workflow and as that changes then this article will get updated to reflect that, or maybe a yearly series that covers my workflow and how it’s changed. There’s an idea at least. Thanks again for reading and if you’ve liked it or found it helpful share on Social Media. If you have any questions don’t hesitate to contact me!

 

Use Amazon SES to send WordPress E-mails

by

I originally wrote this guide for a WP Engine Support Garage article, as WPEngine  utilizes the Google Cloud Platform which will block sending e-mail over specific ports, and I wanted to provide an easy to use alternative. The article eventually got published on a co-workers blog, but I decided to publish it here as well. More visibility is better right?

Google allows only Google Apps to send email through ports 465 and 587, and prohibits any service from sending mail through port 25.

Many email providers have created better ways of sending or relaying email through alternate ports or APIs. But Microsoft Office 365 among others are left in the lurch when it comes to sending outgoing emails through Google Cloud servers. If you’re one of the many affected by this issue, this guide will help you configure email through Amazon Simple Email Service (SES) to send outgoing emails from your WordPress site.

This post is only going to cover sending e-mails out of your WordPress site, so password resets, transaction confirmations, and other similar types of e-mails. You could in theory use this and a mailing list plugin, but I recommend using an actual service for your mailing list such as MailChimp.

Setup your DNS Records

The first step is to validate your domain with the SES service–This requires adding DNS records with your DNS provider. The process is the same with any DNS provider, but we are using CloudFlare’s DNS dashboard in this example.

Log in to the Amazon Web Services console and navigate to the SES page. Then click “Domains” from the left-hand navigation menu. Click “Verify a new domain” and enter your domain name. If you want to utilize DKIM then you can also generate DKIM signatures in this step. On the next screen you’ll be given your DNS records to set up within your DNS provider.

Add the DNS records from the Domain Verification Page

You can take the Type and Value fields from these records and paste them directly into your DNS provider’s dashboard. In our CloudFlare example simply log in, choose your domain name, and select “DNS records.” In the dropdown menu to select a type of record, choose “TXT” – then in “Value” enter the “Name” field from the Domain Verification Record, and in the box next to it, enter the “Value” field. Once Amazon SES has been able to detect the records have been added, your domain is verified for use with their service.

If you utilize an email provider for your domain’s emails such as Google Suite, Outlook365, or another email server then you do not need to input the MX record and will leave your current MX records as is. This means only your outgoing emails will be handled by Amazon SES.

Create an E-mail User

Now that Amazon has been able to verify our domain for sending email we need to create an SMTP user for our WordPress site to use for sending email. On the SES console home page, click “SMTP Settings” from the left-hand navigation. Then click the “Create My SMTP Credentials” button. Leave the default username as-is and click “Create.”

On the next screen be sure to download your login credentials–we will need them in the next step. To do this, just click “Show User SMTP Security Credentials” and you can copy and paste them into your text editor of choice.

Install & Configure an SMTP Plugin

Now that we’ve configured Amazon SES it’s time to configure your WordPress install to utilize the service. We’re going to be using the Easy WP SMTP plugin for this step. You can install this plugin by going to your plugins page in the WordPress Admin Dashboard of your site and going to Plugins > Add New > search for Easy WP SMTP > Install. Once installed you’ll want to activate the plugin so  we can configure it.

Google Cloud servers have ports 25, 465, and 587 disabled by default, but you can still use port 2587.

  • In the “From” field, put an email address you want WordPress to send email from. This could be anything as long as it has your domain name in it.
  • For the “Name” you can put anything you want your emails to show as from.
  • You can get your SMTP Host at the Amazon SES SMTP Settings page. If you setup SES in the US-East-1 region it will be: email-smtp.us-east-1.amazonaws.com.
  • Ensure that TLS is selected for the Type of Encryption setting.
  • For the sending port, input 2587.
  • Check the SMTP Authentication to yes and input your SMTP username and password that was created in the previous step.

Your settings should then look similar to this:

Configure the SMTP plugin

Send a Test E-mail

Now that your settings are configured, you’ll want to send a test email to make sure it’s working right. Right now your SES account is still in Sandbox mode, so we need to configure an email address to send email to first. In your Amazon SES console, click “Email Addresses.”

Click “Verify A New Email address,” enter in the email address you want to verify. Then click the “Verify This Email Address.” This will send an email to the specified email address. You’ll need to click the link within it to verify your email address. If you do not verify your email address, Amazon won’t send the email.

Once verified, head to the Easy WP SMTP Settings page in your dashboard and scroll down to the “Testing and Debugging Settings” section. Input the verified email address, a subject and message, and then send. Check your email to ensure that it was delivered. If it was not delivered, confirm your email address is validated and your port settings.

Request Amazon release Sandbox Mode

Amazon keeps your SES service in what is called Sandbox Mode which requires that all email addresses you send to be verified before email deliverability can be achieved. We need to request Amazon enable production access to SES by utilizing their support system for a Service Limit Increase.

Ensure “Service Limit Increase” is selected, and “Limit Type” is set for “SES Sending Limits.” In “Request 1” choose the region you setup SES for and then choose “SES Production Access.” Fill out the rest of the boxes and submit the request. Amazon typically takes 24 hours to grant access to Production Mode for SES.

Once they have taken SES out of Sandbox mode you should be able to test your site’s emails to ensure they’re delivering properly. Be sure to test any eCommerce emails, contact forms, or transactional emails. You should also ensure that your contact forms have a captcha configured. This ensures spammers are not able to abuse your forms, which in turn abuses your SES service.

That’s all there is to it! I hope you have found this useful. If you have any questions don’t hesitate to reach out!