Yesterday, I had the privilege of giving a talk at WordCamp US, in which I attempted to explain what happens when a media file is uploaded to a WordPress site. Eventually, the full video of the presentation will be on WordPress.tv. In the mean time, I'm publishing the slides from my talk here.
At the end of this week I’ll say goodbye to my Washington University crew to begin a new adventure as a Senior WordPress Engineer for Human Made.
Working in the shadow of Brookings Hall for the past six years has been an absolute privilege. I’ve been fortunate to work on projects that have been both professionally and personally fulfilling. Most of all, I’m grateful for the colleagues who continue to inspire and challenge me and with whom I’ve become great friends. Keep an eye on that team—I’m confident they’ve got some tricks up their sleeves.
As hard as it is to close the book on my time at WashU, I’m thrilled to be starting a new chapter with Human Made. The team that Tom and Joe have built over the last several years is nothing short of extraordinary. When I found myself with the opportunity to work alongside and learn from the folks who are literally inventing the future of WordPress, I couldn’t pass it up.
I also plan to be even more deeply involved in the WordPress project than I have over the past few years. Democratizing publishing, in my view, is a mission that is as critical as ever. By sharing our stories—and being open to others when they share theirs—maybe we can all become a bit more human.
CircleCI is a continuous integration platform that can be used to automatically build, test, and deploy software. It’s relatively easy to set up with any existing GitHub or Bitbucket project.
Setting up tests
WP-CLI includes a handy command for setting up WordPress tests for a plugin or theme using different CI services. To set up the tests for CircleCI, you can use either
wp scaffold plugin-tests --ci=circle or
wp scaffold theme-tests --ci=cirlce.
This will add several things to your project:
- circle.yml – The configuration for CircleCI
- phpunit.xml.dist – A configuration file for PHPUnit
- A ‘tests’ folder containing:
- bootstrap.php – A PHPUnit bootstrapping file that loads the WordPress tests along with the plugin or theme being tested.
- test-sample.php – a sample PHPUnit Test class extending the
- A ‘bin’ folder that contains the script for setting up the WordPress test environment, if you don’t already have one set up. Note that VVV is preconfigured to use the main development test environment.
With these files in place, you can now log into CircleCI and add the project, which will automatically set up a build next time you push a commit to your remote repo in GitHub or BitBucket.
CircleCI sets up builds in several configurable phases. Here’s what the default configuration from WP-CLI looks like:
machine: php: version: 5.6.22 environment: PATH: $HOME/.composer/vendor/bin:$PATH dependencies: pre: - sudo apt-get update; sudo apt-get install subversion test: pre: - bash bin/install-wp-tests.sh wordpress_test ubuntu '' 127.0.0.1 latest - | composer global require wp-coding-standards/wpcs phpcs --config-set installed_paths $HOME/.composer/vendor/wp-coding-standards/wpcs override: - phpcs --standard=phpcs.ruleset.xml $(find . -name '*.php') - phpunit
For our purposes, we’re going to look at three phases: machine, dependencies, and test. Each phase has three event you into:
- pre – commands to run before this phase.
- override – commands to run instead of the default commands.
- post – commands to run after your this phase has finished.
First, the machine phase configures details so you can do things like changing the PHP version to match your production environment and set up environment variables.
The dependencies phase install all dependencies for the project. It loads dependencies from popular dependency configuration files in your project, like package.json, composer.json, etc.
In the default WP-CLI setup, the build installs subversion before loading project dependencies so it can checkout the WordPress test suite using svn during the test phase of the build.
In the test phase, the default setup installs the WordPress test suite using the
bin/install-wp-tests.sh script, installs the WordPress coding standards and registeres them with PHP Codesniffer. Once everything is set up, the test phase will run the codesniffer checks with
phpcs and will then run your unit tests with
With all this in place, you can now add additional tests or configuration steps and get near instant feedback if a code change would introduce any problems to your codebase.
I recently had the opportunity to try out Cloudinary, an online image management service, and wrote an article about how you could integrate their service with WordPress.
WordPress recently made a few changes to its recommended requirements and now recommends using PHP 7 and HTTPS. I had some time this weekend and set out to upgrade my site and document some of the issues I ran into in the process.
For both of these tasks, I followed the tutorials at DigitalOcean, which were terrific. Even so, I ran into a few snags—some of which were specific to WordPress.
Setting up HTTPS
The first problem I encountered while setting up HTTPS was a result of upgrading my server configuration before changing my
home settings (in Settings > General ). Since WordPress was redirecting requests to the non-HTTPS URL, the server fell into a redirect loop and crashed.
I fixed this issue by using WP-CLI to update the relevant options from the command line, since I was locked out of my admin. I could have gotten this working by defining constants in my
wp-config.php file as well, but it would be nice if WordPress detected this problem and showed some kind of “upgrade your site” page rather than sending 301 redirects.
Another difficulty I ran into was that the DigitalOcean tutorial told me to set the server block to
listen 443 ssl;, when it should have been
listen 443 default_server ssl;. After making that change, I was able to see the site over HTTPS.
The whole process ended up being way easier than I had expected. That said, there were a few things that were broken because of mixed content errors.
Issues I noticed after upgrading to HTTPS
- Chrome blocks oEmbeds and shows an “insecure content” warning in the address bar when the external site is not running HTTPS. It would be nice if WordPress detected this and blocked the embed to avoid browser warnings.
- Images included in previous posts still retain the HTTP scheme, which didn’t surprise me. What was unexpected was that
srcsetattributes—which are dynamically created when the page loads—retained HTTP URLs unless the image was generated from a caption shortcode, which seems odd.
- My user account on this site was using
https://joemcgill.netas the website. It would be cool if this was automatically upgraded when I made the switch to HTTPS, but nothing was broken because of this.
- It would also be nice if links to local content within old posts could be upgraded.
I used Ryan Markel’s HTTPS-All-The-Things plugin to fix several of these issues in the mean time (though the oEmbed bug still exists).
Upgrading PHP 7
Upgrading to PHP 7 was also a fairly painless process, save for a dumb mistake on my part, which was kind of funny:
Ha. Then I broke things while upgrading to PHP7. Neat.
— Joe McGill (@joemcgill) December 10, 2016
Turns out I mistyped the location of
PHP7.0-fpm.sock in my nginx config, which crashed my site 🙈.
PHP 7 began working once I fixed my configuration, but the site threw a fatal error because my debug-media plugin called
gd_info(), which wasn’t available. Installing GD fixed this right up and I quickly modified the plugin, which helped me realize that I also needed reinstall ImageMagic to take advantage of cool features like PDF thumbnails.
The JetPack Publicize module displayed an error because I didn’t have multibyte support enabled nor the XML extension for PHP 7. I install those extensions manually and now things seem to be working ok.
After being frustrated by missing simple coding style errors in my WordPress contributions, I finally decided to employ some tooling to help automate the process of checking my code. This is how I set up my machine so the Atom editor will automatically check code for WordPress Coding Standards.
Install PHP CodeSniffer
PHP_CodeSniffer is an automated tool for checking for coding style based on a set of defined standards. I followed the installation instructions on the project’s GitHub page to download the .phar files and then I moved them into my
/usr/local/bin/ directory like this:
If everything went well, you should be able to type
phpcs --version in the command line and see version information returned.
Install WordPress Coding Standards rules
The WordPress Coding Standards project is maintained on GitHub. I followed the standalone installation instructions to clone the project to my
usr/local/bin directory and configure phpc to make use of the WordPress coding standards with the following command:
phpcs --config-set installed_paths /usr/local/bin/wpcs
Configuring the Atom Editor
Finally, to be automatically notified about WordPress coding style issues in my editor, I followed the setup instructions for Atom on the WordPress Coding Standards GitHub page using the linter-phpcs package for Atom.
From now on, I hope to spend less time worrying about any coding standards issues with my code and be more confident in the overall quality of the work that I’m doing.
Sometimes you need to profile things. This tutorial helps.