Automated WordPress coding standards checks using Atom

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:

mv phpcs.phar /usr/local/bin/phpcs
mv phpcbf.phar /usr/local/bin/phpcbf

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.

Responsive Images in WordPress 4.4 – A personal story

WordPress is made by those who show up.

I’m not a super web developer. I don’t have any qualifications that would make someone ask me to help implement a new web technology on a quarter of the websites in the world. But nobody told me not to either, so here we are. Earlier today, WordPress 4.4 was released, including native support for responsive images. This is a brief account of how I accidentally became a lead developer of a new WordPress feature.

A few years back, a group of web developers noticed a problem. Web page sizes were getting larger—mainly so images would look good on new devices with fancy screens—making it harder for people to access websites on slower connections. The thing is, when you notice a problem, you have a few choices. You can either shrug and say, “I wish someone would fix that problem,” or you can roll up your sleeves and try to fix it yourself. Thankfully they chose the latter, and responsive images were born.

In early 2014, as I was learning about this cool new technology, I shared what I was learning at WordCamp St. Louis. Around the same time, I figured out how to submit a bug fix to WordPress and began making small contributions to the project. When I heard that the same group who helped to create responsive images were going to try bring those tools to WordPress, I decided to see if I could help.

Turns out, a guy named Tim Evko had created a WordPress plugin that automatically added responsive image support to WordPress and the group had decided to see if it could be used as a starting point for bringing responsive image support into WordPress by default. I installed the plugin to test it out and noticed a small bug. Since the plugin was being developed on GitHub, it was relatively easy for me to submit a bug fix (here is my first commit to the project), and I was immediately hooked when my code was accepted. Within a year, I had mounted up over 120 commits to the project and was writing blog posts on during the release cycle for WordPress 4.4.

I was extremely fortunate to get involved in a popular feature, because I didn’t need to do much selling to get it included in a release. There were several times where the amount of work looked overwhelming, but I decided I’d rather see the project fail because the lead WordPress developers voted it down, and not because I didn’t show up and do my part. Several talented people ended up getting involved to make this feature happen, and each time our small committed team didn’t have the expertise or bandwidth to move something forward, somebody from the community showed up and either pointed the way or contributed code to fix the issues we were having.

I’m extremely grateful to Tim and Jasper for being amazing teammates, for Mike and Andrew, who gave advice and/or completely rewrote sections of the code to make it perform better, and to Mat and the RICG for their support.

At WordCamp NYC 2014, Boone Gorges gave a great talk about the benefits you receive by contributing to WordPress. This has definitely been true in my experience. By working on this project, I’ve learned a ton about the internals of the WordPress image functions and benefitted from having my code reviewed from some of the best WP developers in the world.

This experience also reinforced my belief that a lot can be accomplished by simply asking what needs to be done and then giving yourself permission to work on a solution. There are many more ways to make the web (and the world) just a little bit cooler, and I’m looking forward to seeing how I can help.

Image credit: Mel Choyce

Self-contradictory hungers

“I came into the world. Free by nature, in the image of God, I was nevertheless the prisoner of my own violence and my own selfishness, in the image of the world into which I was born. That world was the picture of Hell, full of men like myself, loving God, and yet hating him; born to love him, living instead in fear of hopeless self-contradictory hungers”

Thomas Merton

I had not seen this quote until Pope Francis included it in his speech to Congress yesterday. Regardless of religious belief, I think it’s easy to identify with the sentiment. As a parent, I see this play out in the lives of my girls daily.

In all things, trying to be intentional about choosing the better hungers is a noble aim. Thanks for the reminder, Pope.

RICG Responsive Images Version 2.3

Happy Monday everyone. Version 2.3 of the RICG Responsive Images Plugin for WordPress just launched with a few notable new features and bunch of smaller improvements.

Gallery support

As of version 2.3, images inside galleries will now include srcset and sizes attributes.

We’ve added this support by moving the filter from post_thumbnail_html to wp_get_attachment_image_attributes, so if you’re a developer and had previously been manually overriding the post_thumbnail_htmil filter, you’ll now want update your code to reflect this change.

Advanced image compression

If you’re a web developer who cares about optimizing the file size of the images you’re serving your users—and I know you are—then you may be underwhelmed by the native image compression settings WordPress uses when creating different size crops of an image you’ve uploaded.

Dave Newton, the RICG’s resident compression wizard, has come up with a better algorithm for Imagemagick, which we’ve included in this version of the plugin as an experimental opt-in feature. To enable better image compression on your site, you’ll need to add support by including something like this in your functions.php file:

function custom_theme_setup() {
add_theme_support( 'advanced-image-compression' );
add_action( 'after_setup_theme', 'custom_theme_setup' );

The advanced compression settings are a bit more resource heavy than WordPress’s default settings, but the savings are significant. Give it a spin and let us know what you think.

Additional updates

  • The plugin is now officially included in the list of Beta Testing plugins in
  • Upgraded to Picturefill 2.3.1
  • Improved performance of `get_srcset_array`
  • Fixed a bug where duplicate images sources could be included in `srcset` attributes
  • Fixed a bug where some image sources were being dropped when changing image sizes in the editor.

If you want to provide feedback or get involved in the project, you can check out the GitHub repo and find us in the #feature-respimage channel of the WordPress Slack team.