Wordpress

Insights

Development insights, client advice and news from Go Tripod

As developers, we have a seemingly endless supply of tools at our disposal thanks to the hard work and generosity of the wider development community who, by and large, share their hard work in the hope of making their peers&#8217; lives that little bit easier.
At Go Tripod we&#8217;re always on the lookout for new ways to streamline our processes and improve the quality of our work. Task runners are a great example of this.
Utilising JavaScript, programs like <a href="https://gulpjs.com/" target="_blank" rel="noopener">Gulp</a> and <a href="https://gruntjs.com/" target="_blank" rel="noopener">Grunt</a> can automate all kinds of labour-intensive tasks including, for example:
<ul>
<li>compiling, concatenating and compressing assets (eg. images, <abbr data-tooltip="Cascading Style Sheets">CSS</abbr>, <abbr data-tooltip="JavaScript">JS</abbr>)</li>
<li>live browser reloading for speedy development and testing</li>
<li>auto-prefixing for optimal browser support</li>
</ul>
With these jobs running automatically in the background we&#8217;re able to focus entirely on the task at hand. This increases productivity and makes sure the code we&#8217;re writing is as performant and compatible as it can be.
Our current build tool of choice is a modified version of the excellent <a href="https://github.com/ahmadawais/WPGulp" target="_blank" rel="noopener">WPGulp</a> by WordPress aficionado, <a href="https://ahmadawais.com/" target="_blank" rel="noopener">Ahmad Awais</a>. It does most of the things we need out of the box but since we use <a href="https://www.upstatement.com/timber/" target="_blank" rel="noopener">Timber</a> to separate logic from styling I&#8217;ve amended it to watch <code>.twig</code> files as well as <code>.php</code> files.
<div id="attachment_434" style="width: 640px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-434" decoding="async" loading="lazy" class="size-full wp-image-434" src="https://content.gotripod.com/images/2018/07/Screen-Shot-2018-07-17-at-09.29.26.png" alt="" width="630" height="411" srcset="https://content.gotripod.com/wp-content/uploads/2018/07/Screen-Shot-2018-07-17-at-09.29.26.png 630w, https://content.gotripod.com/wp-content/uploads/2018/07/Screen-Shot-2018-07-17-at-09.29.26-300x196.png 300w" sizes="(max-width: 630px) 100vw, 630px" />WPGulp compressing assets and watching for changes</div>
Along with a few other minor adjustments, the result is a fast and feature-packed workflow which allows us to build WordPress sites of the highest quality in record time. 💪

The best Gulp build tool for WordPress

We&#8217;ve worked with various content management systems (<abbr>CMS</abbr>) over the years but <a href="https://wordpress.org/" target="_blank" rel="noopener">WordPress</a> is our favourite. Thanks to its powerful user interface and open source architecture, it&#8217;s the most popular <abbr>CMS</abbr> on the planet. (In fact <a href="https://w3techs.com/technologies/history_overview/content_management" target="_blank" rel="noopener">its market share</a> is 10 times the size of its closest rival!)
Whilst WordPress empowers millions of users to publish their own content, it also attracts hackers eager to find and exploit vulnerabilities in the WordPress system itself and (more often) in the myriad 3rd party WordPress plugins. As such, security issues are found on a regular basis and plugged just as regularly with frequent updates.
At Go Tripod, we thoroughly test any updates in a staging environment to ensure the new code doesn&#8217;t cause any problems before it&#8217;s pushed live to our clients&#8217; websites. We maintain the same care and attention throughout our development practice, investing time into researching the best tool for the job at hand.
So, to ensure our WordPress clients don&#8217;t need to worry about the security of their own websites, we have recently partnered with a dedicated WordPress hosting company.
This means our WordPress clients enjoy:
<ul>
<li>daily backups restored with a single click</li>
<li>automated <abbr data-tooltip="Secure Sockets Layer">SSL</abbr>/<abbr data-tooltip="Transport Layer Security">TLS</abbr> certificates via <a href="https://letsencrypt.org/" target="_blank" rel="noopener">Let&#8217;s Encrypt</a></li>
<li>unlimited development/staging environments</li>
<li>rapid environment updates via <a href="https://git-scm.com/" target="_blank" rel="noopener">Git</a></li>
<li>a built-in one-click <abbr data-tooltip="Content Delivery Network">CDN</abbr></li>
</ul>
Do you have a WordPress site? Is it secure? <a href="/contact/" rel="noopener">Get in touch</a> if you&#8217;d like to know more about what we can offer.

Ensuring the security of WordPress websites

In a <a href="https://gotripod.com/insights/making-use-defer-attribute-easily-eliminate-render-blocking-scripts/">previous article</a> I talked about adding the <code>defer</code> attribute to script tags to avoid blocking page render. However, if you’re developing a WordPress theme, chances are you won’t simply be able to amend this HTML. Instead you&#8217;ll need to make use of the <a href="https://developer.wordpress.org/reference/functions/wp_enqueue_script/" target="_blank" rel="noopener">wp_enqueue_script</a> function from within your theme&#8217;s functions.php file. This function allows you to tell WordPress if your script has any dependancies, which you pass through as an array, and WordPress uses this information to load scripts in the correct order thus avoiding any JavaScript errors. Because plugins load assets via the <a href="https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/" target="_blank" rel="noopener">wp_enqueue_scripts</a> hook it&#8217;s important you do too so your theme plays nice with them.
So we&#8217;ve got our scripts loading in the correct order &#8211; great! But unfortunately WordPress doesn&#8217;t load them asynchronously for you meaning your HTML will pause parsing while the script is downloaded and executed. Sounds pretty bad for performance, and it is, so we&#8217;ll be needing an extra something in our functions.php file. While this isn&#8217;t a perfect solution it&#8217;s the most solid I&#8217;ve found so far and is what we currently implement here at Go Tripod:
<pre><code class="language-php">// Defer scripts
// Source: https://www.laplacef.com/2014/05/24/how-to-defer-parsing-javascript-in-wordpress/
if (!(is_admin())) {
 function defer_js($url) {
 if (FALSE === strpos($url, '.js')) return $url;
 if (strpos($url, 'jquery.js')) return $url;
 return "$url' defer onload='";
 }
 add_filter('clean_url', 'defer_js', 11, 1);
}</code></pre>
Your scripts&#8217; <code>src</code> attribute will be replaced with itself along with <code>defer</code> and empty <code>onload</code> attributes resulting in them being loaded asynchronously and giving your site a dramatic performance boost.

How to enqueue and defer scripts in WordPress

<a href="https://www.upstatement.com/timber/" target="_blank" rel="noopener">Timber</a> has loads of useful filters built in which can make all kinds of jobs much easier. One of those jobs is resizing and cropping images, for which we can use the resize filter. The syntax is simple, as with all things <a href="https://twig.symfony.com/" target="_blank" rel="noopener">Twig</a> &#8211; we simply add the filter to our image source, passing through a width or height to resize or both to crop.
The following example will resize the image to a width of 300px while retaining its aspect ratio:
<pre><code class="language-twig">{{ item.src|resize(300) }}</code></pre>
The following example will resize the image to a height of 300px while retaining its aspect ratio:
<pre><code class="language-twig">{{ item.src|resize(0, 300) }}</code></pre>
The following example will crop the image to a width and height of 300px:
<pre><code class="language-twig">{{ item.src|resize(300, 300) }}</code></pre>
We can then define multiple sizes and pass these into a srcset attribute to make sure we’re serving a suitable image size based on the device viewport. This is especially important for mobile devices who don’t need to download and display a full HD hero image on a 320px wide screen.
The following example defines three sizes, one for mobile, tablet and desktop &#8211; devices with a viewport width of up to 480px will get the 480px wide image and so on.
<pre><code class="language-twig">srcset="{{ item.src|resize(480) }} 480w, {{ item.src|resize(1280) }}
1280w, {{ item.src|resize(1920) }} 1920w"</code></pre>
If you’re new to srcset or want to delve into it a bit deeper, <a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/" target="_blank" rel="noopener">CSS Tricks’ article</a> is a good read.

Dynamically generating responsive images with Timber’s resize filter and the srcset attribute

When working on improving the response time of your site, one of the simplest optimisations to make is the deferring of scripts. In most cases, this can be done with the simple addition of the defer attribute to the script tags within your HTML:
<pre><code class="language-markup">&lt;script src="" defer&gt;&lt;/script&gt;</code></pre>
When a browser gets to a script tag in your code, its default behaviour is to pause parsing of the HTML, opting to download and execute the script before resuming. Setting the defer attribute tells the browser not to pause, but instead download the script in the background and execute it once parsing of the HTML has completed.
Another feature of using defer, which can be very useful, is that all scripts with the defer attribute will execute in the order they’re presented in your HTML. This is especially useful when writing scripts which rely on others as you can ensure these dependencies are executed first.
Scripts can also be executed asynchronously using the async attribute but bear in mind that it should only be used if the script is not relied upon or does not rely on any others and will function correctly if run before HTML has finished parsing. For a clear visual representation of the different script loading options, <a href="http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html" target="_blank" rel="noopener">this article</a> has some simple infographics I’d recommend taking a look at.
If you’re developing WordPress themes without the use of a template engine like <a href="https://www.upstatement.com/timber/" target="_blank" rel="noopener">Timber</a>, you may not be able to edit this HTML and should instead make use of the <a href="https://developer.wordpress.org/reference/functions/wp_enqueue_script/" target="_blank" rel="noopener">wp_enqueue_script function</a> within your theme’s functions.php file &#8211; you should also use this method if using any WordPress plugins which run scripts on your site’s front end.

Insights

The best Gulp build tool for WordPress

Ensuring the security of WordPress websites

How to enqueue and defer scripts in WordPress

Dynamically generating responsive images with Timber’s resize filter and the srcset attribute

Making use of the defer attribute to easily eliminate render blocking scripts

Got an idea for a project?