The Publishing Project

Linting WordPress PHP files

While I’ve been doing WordPress theme development I’ve also been working on getting PHPCS (PHP Code Sniffer) to work properly on my projects. I think I’ve finally got it. As usual, I was making things too hard on myself and it ended up being far easier to set up and use. The first tool we need is Composer to install and manage dependencies. Think of Composer as the PHP version of NPM. Since I’m working on a Mac, I chose to install it with Homebrew using the command below: brew install composer The next step is to install PHPCS and

Playing with the filesystem API

There have been multiple attempts at getting a Filesystem API on the web. The one I’m referring to in this post is a Chromium-only feature available without a flag since Chrome 86, not the old-style API. This is also different from the API available to Chrome extensions. I used a standard HTML5 Boilerplate document. We add a single CSS class inside a style element to hide elements. .hidden { display: none; } The HTML for the demo is simple. We create a text area and two buttons and assign IDs to each; this will make it easier to manipulate the

Running Lighthouse Programmatically

In addition to the DevTools menu and the Chrome extension and the Lighthouse CLI, there are ways to use Lighthouse programmatically in ways that would be too time-consuming to do with the lighthouse tools already available. The simplest example will run all Lighthouse reports for the given URL using the default options for Lighthouse. function launchChromeAndRunLighthouse(url, opts, config = null) { return chromeLauncher.launch({chromeFlags: opts.chromeFlags}) .then((chrome) => { opts.port = chrome.port; return lighthouse(url, opts, config) .then((results) => { return chrome.kill() .then(() => results.lhr) }); }); } The lighthouse configurations docs provides a detailed description of all the options that you can

CSS/JS Coverage in Chrome DevTools

Since version 59, Chrome DevTools ship with a coverage analyzer that will tell you how much of the Javascript you load is actually used on your pages. This is important because, if the code is yours, you can eliminate dead weight and reduce the size of your site’s styles and scripts. Running Coverage Analysis Running coverage from Chrome DevTools is fairly straight forward. Open DevTools (Command + Option + I on Mac or Control + Shift + I on Windows) and look at the bottom of the DevTools window, there should be a coverage tab. When you select the coverage

Passing data to WordPress template files

The template loading functions (get_header(), get_template_part(), etc.) have a new $args argument. So now you can pass an array’s of data to the templates. The idea is that we can now pass an object with additional, arbitrary, information for the template to use. In this example, we load a hypothetical foo template part and pass an array of items as the third parameter on the function call. <?php get_template_part( ‘foo’, null, array( ‘class’ => ‘user’, ‘arbitrary_data’ => array( ‘foo’ => ‘baz’, ‘bar’ => true, ), ) ); We can then use this arbitrary data on the template. The example uses