bnks.xyz

Menu

Author: Phil

Displaying you WordPress.org favourite plugins

Updated 02 – 05 – 18: plugins object is now returned as an array.

On a whim this May bank holiday, tucked up on the sofa watching movies, I decided to create a plugin to display my favourited plugins on WordPress.org.

After a bit of digging I found you can use the plugins_api() function and pass it a username, e.g.:

plugins_api( 'query_plugins', array( 'user' => emirpprime, 'per_page' => '-1' ) );

This returns an object with some information about the results, then an array of plugins. A stripped down example of the structure is below:

stdClass Object
    (
    [info] => Array
        (
            [page] => 1
            [pages] => 0
            [results] => 57
        )
    [plugins] => Array
        (
            [0] => Array
                (
                    [name] => Autoptimize
                    [slug] => autoptimize
                    [version] => 2.1.0
                    [author] => <a href="http://blog.futtta.be/">Frank Goossens (futtta)</a>
                    [author_profile] => https://profiles.wordpress.org/optimizingmatters
                    [requires] => 4.0
                    [tested] => 4.7.5
                    [compatibility] => Array
                        (
                        )
                    [rating] => 94
                    [ratings] => Array
                        (
                            [5] => 419
                            [4] => 23
                            [3] => 12
                            [2] => 8
                            [1] => 22
                        )
                    [num_ratings] => 484
                    [support_threads] => 121
                    [support_threads_resolved] => 81
                    [downloaded] => 1349088
                    [last_updated] => 2016-12-14 5:45am GMT
                    [added] => 2009-07-09
                    [homepage] => http://blog.futtta.be/autoptimize
                    [sections] => Array
                        (
                            [description] => Autoptimize makes ...
                            [installation] => Just install from your WordPress...
                            [faq] => Installation Instructions...
                            [short_description] => Autoptimize speeds up your website and helps you save bandwidth by aggregating and minimizing JS, CSS and HTML.
                            [download_link] => https://downloads.wordpress.org/plugin/autoptimize.2.1.0.zip
                            [screenshots] => Array
                                (
                                )
                            [tags] => Array
                                (
                                    [css] => css
                                    [html] => html
                                    [javascript] => javascript
                                    [js] => JS
                                    [minify] => minify
                                )
                            [versions] => Array
                                (
                                    [0.1] => https://downloads.wordpress.org/plugin/autoptimize.0.1.zip
                                    ...
                                    [trunk] => https://downloads.wordpress.org/plugin/autoptimize.zip
                                )
                            [donate_link] => http://blog.futtta.be/2013/10/21/do-not-donate-to-me/
                            [contributors] => Array
                                (
                                )
                        )
                )
        )
)

A simple loop over the plugins array will get all the details about a plugin you could want.

A short while later, and a rough and ready version is complete – a basic plugin that registers a shortcode and returns a list of a user’s plugins.

What does the plugin output?

Here are my favourites as an example – the markup is basic but easy to style, with a couple of classes for targetting. I’ve kept it simpler than the layout in wp-admin or the plugin repository, but hopefully with enough info to be useful:

Found: 65

  • Add Descendants As Submenu Items by Alex Mills (Viper007Bond)
    Automatically all of a nav menu item's descendants as submenu items. Designed for pages but…
  • Autoptimize by Frank Goossens (futtta)
    Autoptimize speeds up your website by optimizing JS, CSS, images (incl. lazy-load), HTML and Google Fonts, asyncing JS, removing emoji cruft and more.
  • Blacklist Updater by pluginkollektiv
    Automatic updating of the comment blacklist in WordPress with antispam keys from GitHub.
  • Broken Link Checker by ManageWP
    This plugin will check your posts, comments and other content for broken links and missing images, and notify you if any are found.
  • Bulk Add Terms by Sohan Zaman
    A lightweight plugin to add thousands of taxonomy terms in one go.
  • Classic Editor by WordPress Contributors
    Enables the previous "classic" editor and the old-style Edit Post screen with TinyMCE, Meta Boxes, etc. Supports all plugins that extend this screen.
  • Classic Editor Addon by Pieter Bos, Greg Schoppe
    This free "Classic Editor Addon" plugin makes sure that the new block editor cannot be accidentally activated even while the "Classic E …
  • Client-proof Visual Editor by Hugo Baeta
    Simple, option-less, plugin to make TinyMCE - the WordPress Visual Editor - easier for clients…
  • Cloudflare by John Wineman, Furkan Yilmaz, Junade Ali (Cloudflare Team)
    All of Cloudflare’s performance and security benefits in a simple one-click install of recommended settings specifically developed for WordPress.
  • Code Snippets by Shea Bunge
    An easy, clean and simple way to run code snippets on your site.
  • Coming Soon Page & Maintenance Mode by SeedProd by SeedProd
    The #1 Coming Soon Page, Under Construction & Maintenance Mode plugin for WordPress.
  • Custom Post Type UI by WebDevStudios
    Admin UI for creating custom post types and custom taxonomies for WordPress
  • Debogger by Simon Prosser
    Debugging tool for theme authors and reviewers.
  • Developer by Automattic
    A plugin, which helps WordPress developers develop.
  • Disable Comments by Samir Shah
    Allows administrators to globally disable comments on their site. Comments can be disabled according to post type. Multisite friendly.
  • Disable REST API by Dave McHale
    Disable the use of the JSON REST API on your website to unauthenticated users.
  • Disable WP REST API by Jeff Starr
    Disables the WP REST API for visitors not logged into WordPress.
  • Duplicate Post by Enrico Battocchi
    Copy posts of any type with a click!
  • Duplicator – WordPress Migration Plugin by Snap Creek
    WordPress migration and backups are much easier with Duplicator! Clone, back up, move and transfer an entire site from one location to another.
  • Email Address Encoder by Till Krüss
    A lightweight plugin that protects email addresses from email-harvesting robots, by encoding them into decimal and hexadecimal entities.
  • Enable Media Replace by ShortPixel
    Easily replace any attached image/file by simply uploading a new file in the Media Library edit view - a real time saver!
  • Epoch – A native Disqus alternative with a focus on speed and privacy by Postmatic
    Epoch - 100% realtime chat and commenting in a tiny little package that is fully…
  • EWWW Image Optimizer by Exactly WWW
    Speed up your website and improve your visitors' experience by automatically compressing and resizing images and PDFs.
  • FakerPress by Gustavo Bordoni
    FakerPress is a clean way to generate fake and dummy content to your WordPress, great…
  • Flickr Justified Gallery by Miro Mannino
    Just your beautiful Flickr photos. In a Justified Grid.
  • Google Analytics Dashboard for WP by ExactMetrics (formerly GADWP) by ExactMetrics
    Connects Google Analytics with your WordPress site. Displays stats to help you understand your users and site content on a whole new level!
  • Gravity PDF by Gravity PDF
    Automatically generate, email and download PDF documents with Gravity Forms and Gravity PDF.
  • If Menu – Visibility control for Menu Items by Layered
    Display tailored menu items to each visitor with visibility rules
  • iThemes Security (formerly Better WP Security) by iThemes
    iThemes Security is the #1 WordPress Security Plugin
  • Lazy Load by Mohammad Jangda
    Lazy load images to improve page load times and server bandwidth. Images are loaded only when visible to the user.
  • Lazy Load by WP Rocket by WP Rocket
    Lazy Load your images and iframes, replace Youtube videos by a preview thumbnail.
  • List Pages Shortcode by Ben Huson, Aaron Harp
    Introduces the [list-pages], [sibling-pages] and [child-pages] shortcodes for easily displaying a list of pages within a post or page.
  • Liveblog by WordPress.com VIP, Big Bite Creative and contributors
    Empowers website owners to provide rich and engaging live event coverage to a large, distributed…
  • MCE Table Buttons by Jake Goldman, 10up, Oomph
    Adds table editing controls to the visual content editor (TinyMCE).
  • Meteor Slides by Josh Leuze
    Easily create responsive slideshows with WordPress that are mobile friendly and simple to customize.
  • Open Graph Protocol Framework by itthinx
    The Open Graph Protocol enables any web page to become a rich object in a…
  • Page Links To by Mark Jaquith
    Lets you make a WordPress page (or port or other content type) link to a URL of your choosing (on your site, or on another site), instead of its norma …
  • PDF Image Generator by Mizuho Ogino
    Generate automatically cover image of PDF by using ImageMagick. Allow user to insert PDF link with thumbnail into editor and set as Featured Image.
  • Plugin Check by Manoj Thulasidas
    Plugin Check is a validation tool for PHP developers (and a quality checker for end…
  • PWA by PWA Plugin Contributors
    WordPress feature plugin to bring Progressive Web App (PWA) capabilities to Core
  • Really Simple SSL by Rogier Lankhorst, Mark Wolters
    No setup required! You only need an SSL certificate, and this plugin will do the rest.
  • Redirection by John Godley
    Manage 301 redirections, keep track of 404 errors, and improve your site, with no knowledge of Apache or Nginx needed.
  • Redis Object Cache by Till Krüss
    A persistent object cache backend powered by Redis. Supports Predis, PhpRedis, HHVM, replication, clustering and…
  • Regenerate Thumbnails by Alex Mills (Viper007Bond)
    Regenerate the thumbnails for one or more of your image uploads. Useful when changing their sizes or your theme.
  • REST API Toolbox by Pete Nelson
    Allows tweaking of several REST API settings
  • Restricted Site Access by Jake Goldman, 10up, Oomph
    Limit access to visitors who are logged in or allowed by IP addresses. Includes many…
  • Safe Report Comments by Thorsten Ott, Daniel Bachhuber, Automattic
    This plugin gives your visitors the possibility to report a comment as inappropriate. After a…
  • Sidebar Login by Mike Jolley
    Easily add an ajax-enhanced login widget to your WordPress site sidebar.
  • Simple History by Pär Thernström
    View changes made by users within WordPress. See who created a page, uploaded an attachment or approved an comment, and more.
  • Stream by XWP
    Planes have a black box, WordPress has Stream. When something goes wrong, you need to…
  • Subscribe To Comments Reloaded by WPKube
    Subscribe to Comments Reloaded allows commenters to sign up for e-mail notifications of subsequent replies.…
  • Tabify Edit Screen by CodeKitchen B.V.
    Enable tabs in the edit screen and manage them from the back-end.
  • Theme Check by Otto42, pross
    A simple and easy way to test your theme for all the latest WordPress standards and practices. A great theme development tool!
  • WordPress Beta Tester by Peter Westwood, Andy Fragen
    Allows you to easily upgrade to Beta releases.
  • WordPress Zero Spam by Ben Marshall
    Zero Spam makes blocking spam comments a cinch. Install, activate and enjoy a spam-free site.…
  • WP Content Filter – Censor All Offensive Content From Your Site by David Gwyer
    Take control and protect your site today! Censor all content containing profanity, swearing, offensive, and…
  • WP Document Revisions by Ben Balter
    WP Document Revisions is a document management and version control plugin. Built for time-sensitive and mission-critical projects, teams can collabora …
  • WP Lynx by John Havlik
    WP Lynx allows you to mimic Facebook's wall links in your WordPress posts.
  • WP Maintenance Mode by Designmodo
    Adds a splash page to your site that lets visitors know your site is down…
  • WP Offload Media Lite for Amazon S3, DigitalOcean Spaces, and Google Cloud Storage by Delicious Brains
    Copies files to Amazon S3, DigitalOcean Spaces or Google Cloud Storage as they are uploaded…
  • WP Retina 2x by Jordy Meow
    Make your website look beautiful and crisp on modern displays by creating and displaying retina images. WP 4.4+ is also supported and enhanced.
  • WP TinyMCE Tables by Adam Pope
    Adds the table controls to the TinyMCE editor in WordPress
  • WP-Optimize by David Anderson, Ruhani Rabin, Team Updraft
    WP-Optimize is WordPress's most-installed optimisation plugin. With it, you can clean up your database easily…
  • Yet Another Related Posts Plugin (YARPP) by YARPP
    Display a list of related posts on your site based on a powerful unique algorithm. Earn money by including sponsored content!
  •  

    What do you think? Is there any other info you think would be useful to include? Let me know in the comments.

    Affiliated or sponsored content – disclaimers, ethics and styling

    Just to be clear – there are no affiliate links, sponsored content or anything similar in this post.

    Recently I started taking the JavaScript for WordPress course and would highly recommend it. Not long after I received an email from them promoting their affiliate system – help advertise the course and you get a kick-back. This isn’t something I’ve ever considered before – I dislike obvious and obnoxious product placement in general and have seen too much bad practice around a lack of disclaimers online. But in this case it made me stop and actually consider it. I like the course and am enthusiastically recommending it in person and online anyway. Is there anything wrong with being part of the affiliate scheme if I’m open about it? What do you think?

    Clear styling

    Aside from my personal decision about whether to sign-up, I thought it was worth adding a style for disclaimer boxes to this theme – I can think of all sorts of uses for this, not just related to sponsorship / affiliation. The next paragraph shows an example of the styling.

    This paragraph is styled as a box, but still within the flow of content as I consider it an important part of it and relating to what comes before and or after it.
    Personally I would consider that if this related to affiliation or sponsored content, it should always go at the very start of an article and not be buried at the bottom.

    This method works well for blog posts (and content embedded within them), but what about other channels? This post on Bloggy Law has a good range of examples and some good guidance.

    The law

    If you’re in the UK you should definitely be familiar with the clear guidance from the Competitions & Marketing Authority (UK) over sponsored content, but I haven’t seen anything specific about affiliation / referral schemes. Let me know in the comments if you have seen any.

    Conversion worries

    Circling back to where this post started – will using affiliate links hurt my content? If I decide to become an affiliate it won’t be because I need the income stream, and likely there would only be a single blog post containing the link with perhaps a link to the post on social media. I would only be posting the article as I believe the content could be interesting or useful to others. Being read is the point. Would you still want to read a blog post here if it contained an affiliate link? Would you view the validity of the content any differently? It would be interesting to compare the effect on readers of a disclaimer box versus an inline warning – up front honesty versus just-in-time honesty.

    However when it comes down to it this is all academic for me. I may or may not go ahead with this scheme, but this dilemma would rarely come up – in fact, this could be the only time.

    Sending your WordPress posts back / forward in time

    Fancy sending your WordPress site back (or forward) in time for a day? Thanks to the multitude of filters it only takes a few lines of code. In this example I’m just going to filter the_time(), but in a future post I will also show you how to put together a more comprehensive function that uses multiple filters (and has a more practical use).

    The filter for the_time() passes two values in – the value it was going to display, and the formatting string used to create it.

    Hooking in to the filter

    This is fairly standard – pass the name of the filter we are using to the function add_filter(), along with the name of our custom function that is going to modify the value:

    add_filter( 'the_time', 'cc_time_machine' );

    However, since we need both of the arguments that the filter passes, we have to add in the optional values for ‘priority’ and ‘accepted arguments’. The default priority is ten, and as mentioned there are two arguments – so that gives us:

    add_filter( 'the_time', 'cc_time_machine', 10, 2 );

    Travelling in time:

    Now we can receive the data in our function and modify the value. None of the arguments relate to the ID of the post being dealt with, but we can use the global `$post` variable to retrieve it. Then we use the get_the_time() function to retrieve the date/time of the post in timestamp format – this makes it easy to manipulate. Let’s send everything 30 days into the past:

    $timestamp = get_post_time( 'U', true, $post );
    $adjusted = $timestamp + ( -30 * DAY_IN_SECONDS );

    Finally, we need to return the new value. Utilising the second argument ensures we format the date in the same way as it was originally requested:

    return date( $format, $adjusted );

    The complete function:

    N.B. this version reads the time travel value ($offset) from the database so it can be controlled through wp-admin.

    Managing multiple WordPress installs with bash and WP CLI

    Jump to the bottom if you want to go straight to the script

    I recently set up a new VPS on DigitalOcean and chose to manage the web stack and sites with EasyEngine. I’m very impressed with EashEngine, but the fact it makes deploying sites so easy shows up how much overhead there is in staying on top of multiple WordPress installs.

    As the recent vulnerability in the REST API showed, keeping on top of updates is really crucial. In the past I’ve used a management system called InifinteWP, but I’ve decided I would rather use fewer tools and instead rely on WP CLI.

    The key commands

    There are four basic commands key to staying on top of updates:

    wp core check-update
    wp core update
    wp plugin list
    wp plugin update --all

    They’re self explanatory, and with these you can find out if there are any updates available, and apply them.

    Scalability

    But logging in to a server, navigating to the web directory, and running potentially four commands is not exactly time saving. Especially when you need to be doing this in a daily basis to ensure critical patches are applied as soon as possible. (Monitoring the vulnerability disclosure lists is a topic for another day.)

    Luckily we can easily automate this with a simple bash script with just a few essential steps:

    • find all WordPress installs and loop over them
    • navigate into their directory
    • run the two WP CLI commands needed to check for updates to core and plugins
    • repeat

    Once the basics work the script can be easily extended with options such as a choice between checking for updates or doing updates.

    EasyEngine hiccups

    The standard way of finding a WordPress install so you can use WP CLI is to search for wp-config.php files since you can be certain it exists. Then navigate to the directory where you found it, and execute the command.

    However, EasyEngine uses a security conscious directory structure with wp-config.php outside htdocs. This is very sensible, but impacts WP CLI the commands won’t run here – we need to move down into the htdocs directory. One solution is to just add a cd htdocs, but that would mean the script becomes specific to this server setup. Instead, just choose another core file / directory to search for – I went for /wp-admin.

    The script

    There are many ways this could be extended or customised – but this gist covers the basics and should be flexible enough to cover both EasyEngine and non-EasyEngine setups:

    Why ask when you can be told

    The last piece of the puzzle is combing the script with cron and mail.

    Instead of logging in each day to run the script and check for updates, we can use cron to run it and email the output. This means I can wait for the server to tell me when I need to log in and run an update, and not have to constantly check.

    For example, on Ubuntu you can $ sudo crontab -e then add 30 6 * * * su myuser -c '/home/myuser/wp_helper.sh | mail -s "WP Helper update checker" "myuser@domain.co.uk" # run wp_helper.sh at 0630 daily and email.' to run the script at 630 am every day and email the result. Note – this adds the cron job to the root crontab; this means that it will be run as root and so WP CLI will throw a warning. To avoid this su myuser -c runs the command as a chosen user.

    I want to review changlogs and test before updating, so am only running the script in check mode. If you are happy auto-updating you could either pass the relevant arguments to the script or use the native WordPress functions.

    Get terms from a shared taxonomy used on a single post type

    WordPress has a handy get_terms() function that retrives a list of all the terms for a taxonomy – this is great if you are, for example, building a <select> box for filtering a custom post type listing page. But there’s one big problem, if you use this on a shared taxonomy, it will show all terms even if they aren’t used on the particular post type you are dealing with. There is a hide_empty argument that you can pass to get_terms, but this only excludes terms that aren’t used for the default “post” post type.

    What to do about it

    Facing this today, I ended up with this little snippet that utilises a $wpbd query along with get_terms to achieve what we want:

    • First it uses a nested select query to get the IDs for all posts in our custom post type, this is then immediately utilised by the outer select query to grab a list of term IDs from the term_relationships table
    • Then this list of IDs is passed into get_terms
    • Finally it’s output to build the select box

    You’ll also notice in there it is being cached as a transient for 4 hours. Depending on the nature of your site and server you might not need this, or may need to adjust the duration.

    The key parts to modify if you want to utilise this is post_type='cpt' on line 8 and 'taxonomy' => 'country' on line 9. These set the custom post type you want to retrive terms for, and the name of your taxonomy respectively.

    Using Garlic.js with TinyMCE WYSIWYG editor

    Garlic.js is a great library – it uses localStorage to save the state of forms, so if your users accidentally close the tab or browser before submitting, their entry isn’t lost. This works seemlessly for almost all form elements, however WYSIWYG editors like TinyMCE present problems. Luckily it isn’t hard to fix – there’s a comment on the github repository for the project with the snippet you need to add to the init function:

    setup : function(editor) {
        editor.on("change keyup", function(e){
            console.log('saving');
            //tinyMCE.triggerSave(); // updates all instances
            editor.save(); // updates this instance's textarea
            $(editor.getElement()).trigger('change'); // for garlic to detect change
        });
    }
    

    So far so easy. But today the challenge was a little harder as WordPress was in the mix too.

    At Helpful Technology we have a training product called Crisis90 that allows users work through a scenario and compare their responses. It is built on WordPress and makes use of GravityForms to allow users to submit responses to the crisis scenarios presented (there’s also a simulated Twitter environment for practicing real-time responses). When asking users to draft a press release, for example, we provide a WYSIWYG editor – this is native to GravityForms which in turn leverages the bundled TinyMCE library in WordPress. But this means that TinyMCE is being loaded automatically without me being able to modify the init function. Luckily there is a filter for that – tiny_mce_before_init. This filter lets you modify the settings array used to initialise TinyMCE. Despite the lack of a setup item in the defaults or example, it is perfectly valid. You can use this filter in a simple plugin or in your theme’s functions.php:

    As you can see, we’re just adding a setup key to the $settings array containing the snippet from above. I’ve also included a little check that we aren’t in the admin area as I only want this to apply to the instances of TinyMCE used in forms on the front-end of the site.
    Now Garlic.js will function correctly with TinyMCE, and a slip of the finger won’t lead to any lost work.

    Uses of modulus – rows for grids and background colours

    There are two things that designers will throw out quite often – box grids with rows, and repeating background colours.

    Sounds easy – but go and try it within the WordPress loop (or any other). It can get ugly quickly, but the solution is actually simple: Modulus. In PHP it’s the % sign.

    To see what modulus is all about run this simple page:

    This will output a list showing when various modulus calculations will output TRUE so you can check in an if statement. For example:

    $i % 3 == 2: 
    0 :  
    1 :  
    2 : TRUE 
    3 :  
    4 :  
    5 : TRUE 
    6 :  
    7 :  
    8 : TRUE 
    9 : 

    Simple example – inserting rows for a grid

    Modulus 3 is perfect for creating a 3 column grid (in this case in Bootstrap style) as we can check for when the remainder is 2 which will tell us we are on the 3rd, 6th, 9th etc item. This means we can output the very first and last <div class="row"> tags with no logic, then just use modulus to insert the inbetween </div><div class="row"> to end one row and start another where needed:

    More complex example – looping background colours

    This time we will use modulus 7 to loop over a list of the colours of the rainbow to set a class that will control the background colour of a div:

    This illustrates how the modulus number sets the frequency that the loop repeats, and by checking for different remainders you can identify any point in that loop.

    If you’ve got a good use of modulus let me know in the comments.

    Performance revisited – 3 easy steps to speed up your site

    I decided to write a short follow up from the post from last week about the performance of this site, but framed more as a “how to quickly speed up my site”. Even if you can’t or don’t want to go down the line of changing themes (or writing your own), profiling plugins to find the fastest options, or changing hosting company, by spending 5 minutes installing these 3 plugins you can get a significant performance boost.

    1. Squish those images

    Images generally make up the bulk of the download weight of a site, especially in badly behaved themes. While WordPress does compress the smaller versions it creates when you upload a new one, and got better at it in version 4.5, a bit more can go a long way to speeding things up.

    There are plenty of plugins to do this, both premium and free, and they fall into two camps technically – those who offload the processing to another server, and those that do it on your server. The big reason for using the external server type is to lower the resource use on yours or because yours doesn’t have the required libraries (normally cheap shared hosting). However most decent hosts will have no problems, and I prefer to keep things under my control when I can, so I’ve chosen to use Ewww Image Optimizer. Ewww has come out ahead in various comparisons but I’ll leave it to you to choose from the competition. Once you’ve installed it, any new images uploaded will be automatically optimised, both the full size originals and the smaller ones. There’s only one more step – head to Media -> Bulk Optimize and click on Start Optimizing. This will scan the media library and optimise everything previously uploaded. If your theme comes with built in images, you can also click Scan and Optimize which will catch those too.

    Images squished, quick and easy – on to step 2.

    2. Cache money business (to quote Mark Jacquith)

    WordPress is built on PHP and a MySQL database. While the browser needs to be sent HTML files, on the server PHP is used to generate that HTML by reading information from the database. All this takes time, and also resources. When you have more concurrent visitors then the server uses more resources, which causes it to slow down, and eventually become unable to serve them. One way around this is to buy a bigger server, but a cheaper and easier solution exists – caching. Caching is the process of grabbing the HTML that PHP generates, and saving it for a set time. Instead of each visitor going to PHP and the database to generate the HMTL, it is sent to them directly saving both time and load on the server. After a chosen time, or a trigger like publishing a new post, the saved HTML is thrown away and a fresh copy created. This ensures visitors get an up to date version. The exact impact will depend on your site and server, but as an illustration I was running a load test on a client server last month: without caching the site became unresponsive after 36 concurrent visitors, with caching it was still going strong at 1500! NB – the site in question has some very complex pages making large numbers of database queries; also, these ‘users’ all doing indentical actions at exactly the same moments which would equate to a larger number of real-world users.

    This was achieved using the popular free plugin WP Super Cache. Caching is more complicated than image optimisation, but WP Super Cache strikes a good balance between its simplicity and power. Even just installing the plugin and using the default settings on the Easy screen will give your site a huge boost. But it’s worth having a read of the Advanced and Preload tabs to refine things – the settings all have good inline documentation. For most turning on all the Recommended items on the Advanced screen is a good start, as well as reviewing the Expiry Time & Garbage Collection values (the text under the setting box has good examples).

    Your site will now be both quicker and able to cope with more visitors. But there’s one more thing to do.

    3. Minify, compress and concatenate HTML, CSS and JavaScript

    Images squished, HTML pre-generated – but there’s also CSS and JavaScript being sent to users. Have a look at your site using View Source in your browser of choice. Since most themes are fairly badly behaved you’ll likely see multiple CSS and JavaScript files relating to the theme, and on top of that there will probably be ones added by plugins. Each separate file is both adding bytes to be downloaded, and also a connection that has to be opened from the browser to the server which takes time.

    The solution to this threefold:

    • minification – remove spaces and rewrite files to shorten the length of them.
    • concatenation – join files together so that fewer have to be downloaded.
    • compression – server the files from the server with file compression to make them smaller, and send special headers to tell the browser to cache them locally to save downloading them again.

    One plugin can so all this for us – Autoptimize. Install, activate, and turn on the 3 basic options to optimise HMTL, CSS and JavaScript. This one does need a bit more care – there is potential to break JavaScript code in particular. I’d recommend giving your site a good test after this basic activation to check everything is ok. If so, feel free to enable the Advanced Settings and tweak it to squeeze a bit more performance out – it’s all well documented. One advanced setting in particular to look at is inlining CSS. If your theme is quite a light one, inlining it all is best. If your theme is more complex, inlining ‘above the fold’ CSS will drastically improve the apparent loading speed of your site. This is because the browser will have enough information to render the visible area of the site even while it is still loading the rest.

     

    5 Minutes, that all it will take – probably less time than it took to read this ramble – and you will have netted a substantial increase in performance. If you’re still after more speed things get a bit more complex – a faster server / host or a better theme would be the next on my list. Beyond that there’s object caching, server caching, CDNs, server optimisation, code optimisation… It goes on, but the 3 simple steps here should be all that 90% of sites need. To take things further I’d highly recommend reading this detailed article on WordPress performance and bottlenecks at Smashing Mag.

    Accessibility fundamentals. AKA building, designing and writing for real people.

    How many sites do you visit that are full of indecipherable jargon? Littered with cringe worthy stock images, confusing layouts, and slow to load? Beautiful but functionally flawed. How many of the sites you’ve built are like that? Own up – we’ve all done it… (although hopefully not ticking all those boxes at once!)

    We’re all part of the problem – we’ve lost sight of the purpose of the sites we build. It’s all about users, not us; we are definitely not “average users”.



    The problem

    Accessibility is often an afterthought, maybe a token aria-role and not much more. But accessibility effects us all and permeates every aspect of a website. Accessibility isn’t about disability. That’s not to say that you shouldn’t be making your site accessible to the disabled, but accessibility is about everyone.

    Every decision we make about development, design and content effects whether people can understand and use your site. Unfortunately many common practices are hampering our users. It’s not hard. It’s just thoughtlessness, and it’s affecting your bottom line.

    Here’s a few of the common problems:

    Design

    Undeniably the low hanging fruit – we’ve all seen, or heard of, designs that are beautiful but frustrating, or even impossible, to use. Pick any trend in web design and there are myriad bad implementations that hinder users:

    • Big images (full screen background images, sliders, “hero” images etc) – without careful implementation these often cause bloated page sizes that drive away limited bandwidth users and can also create artificial “folds” that can confuse people into thinking there isn’t any other content on a page. Worse still, when these images aren’t appropriate and conveying meaning, they can stop users from even being able to tell what your site is about.
    • Undifferentiated links – there’s a reason browsers without exception all style links in blue and underlined, it’s the standard. Users are smart: change that shade of blue, fine; change the colour completely to one that stands out from normal text, normally OK; drop the underline, fine; but while changing the colour to be the same as normal text and omitting the underline looks much less “messy”, now no-one has any idea what to click on… The same goes for buttons – “ghost buttons” with no border or background to differentiate them are a bit of a fad lately. I’ve watched too many user-testing videos of people blindly clicking on any object and text as they have no indicator to tell them what is a link / button and what isn’t.

    But more problematic are the widely accepted design patterns that fundamentally exclude users:

    • “Hamburger” menus (especially on desktop) – yes we all know what they are, but have you actually thought about the rest of your users? Older and less technologically inclined ones in particular are still completely stumped by sites with ‘missing’ menus. “Lots of sites use them” is not a valid response… Lots of sites are also driving away potential users.
    • No home button – like the hamburger menu, omitting a home link in the menu is normally justified because “everyone knows you just click on the logo”. But what is really being said is ‘we in the web industry all know to click on the logo and so do the web savvy users’, but what about the rest? Would you really build a hotel with no signs to reception because ‘everyone knows it’s near the dining room’?

    Code

    Code has its biggest effect on accessibility by affecting the usability of assistive technologies.

    You’re doing it wrong if:

    • You can’t understand your site when viewing it in outline mode (without styles and images). NB – unfortunately this got more complicated recently with the admission in the HTML5.1 spec that browser support for the document outline model in HTML5 hasn’t appeared.
    • You can’t perform basic navigation of your site using just the keyboard. This is critical for everyone from power-users to those with extreme physical disabilities whose assistive technologies normally mimic simple keyboard commands. Strongly tied to this is a design point – removing :focus and :active styling is a really bad idea and leads to keyboard users getting lost on the page.

    Content

    This isn’t complex in theory, write clear and concise text and you’re done. If you’ve got images or other media then insert them at appropriate points in the flow of text to give them implicit meaning, and ensure that they are relevant and adding meaning / value themselves.

    I’ll leave aside the strange desire some companies have for making their website a copy of corporate documents; even if your audience is one coming to view (for example) legal documents, they wouldn’t expect your ‘About’ page to read like one.

    But in practice this is more complex than it at first seems. Users abilities fall into a range of categories (including but not limited to):

    • Specialists with knowledge of industry specific terminology (jargon to the rest of us).
    • Educated general public – this can be educated in the sense of general education / intelligence level, and / or those slightly informed about a specific topic.
    • Novices – those with no prior knowledge of a subject, yet who have a reason to access it (even if it is only curiosity).
    • Those in any other category where their ability to access the content is physically impaired, for example a level of visual impairment.
    • Those in any other category where their ability to access the content is mentally impaired, for example someone with dementia who has trouble holding large amounts of information in their working memory.
    • Those in any other category who have a primary language other than the one the content is written in.

    Writing while meeting the needs of all these groups is no easy task. Even a sentence as simple as “watch out for trouble” hides problems. Metaphors, idioms, phrasal verbs (there’s a good article on the problems with these specifically on GOV.UK) and other literary devices can all cause problems for users. While they may sometimes be the most appropriate way to phrase something, you should be aware of them and the problems they can cause. Imagine someone reading that example sentence literally…

    Personally I find this by far the hardest section. A near final draft of this post scored a distinctly average 10 on Hemingway and a 54.3 for Flesch-Kincaid Reading Ease on Readability-Score.

    The beginning of a solution

    Rant over. So how do we make our sites inclusive and accessible? There’s no magic bullet, and every site is different and will need tailoring to it’s own audience.

    Actions

    However this list is a good starting point. In fact if you can follow most of these, you will make a big difference and help keep the web accessible to everyone.

    Make it Perceivable

    • Give links and buttons clear visual differentiation. Conforming to traditional patterns unless there is a strong reason not to.
    • All link states should have clear styling including :focus and :active.
    • Link and button text should always explain what it does when read out of context. Use screen-reader only content if absolutely necessary.
    • Buttons must be large enough for users on touch devices.
    • Colour should never be the only differentiator between two states / meanings.
    • Text contrast must conform to AA WCAG2.0 guidelines, always attempt to reach AAA level.
    • Avoid overlaying text on images or backgrounds that affect readability.
    • Provide text alternatives for non-text content.
    • Use semantic code to convey the structure and relationships of content sections. Structure must remain meaningful when viewed without stylesheets and javascript, and also when read by screen-readers.
    • Always give inputs labels even if using placeholder text. They can be visually hidden if desired.
    • Never disable browser zooming and use relative units for text sizing.

    Make it Operable

    • You must be able to navigate the site with only a keyboard.
    • Focus should not move / be moved unexpectedly.
    • Provide ‘skip links’. At a minimum give a ‘skip to content’ link as the first item on the page.
    • Provide clear site navigation that is not hidden behind “hamburger” menus.
    • Include the homepage in the main navigation.
    • Use breadcrumbs to provide navigation at depth.

    Make it Understandable

    • Always set the lang attribute on the page’s <html> element.
    • On your homepage <h1> should be the site title (it can be visually hidden). On all other pages it must be the page / content title.
    • Use regular semantic headings to keep content easily digestible and signposted.
    • Content and purpose should be clear and as concise.
    • Only use images and other media to add value and meaning to the text content. They must appear in an appropriate place so that it is clear what they relate to.
    • Keep content related to actions immediately next to each other, both visually and in the code.
    • Ensure there is a clear flow of content without unrelated
    • Avoid jargon where possible.
    • Use metaphors, idioms, phrasal verbs and sayings only when they are truly the most appropriate way to convey your meaning.
    • Abbreviations and acronyms should be avoided or have definitions available at every use.

    I’ll leave you with this:

    The goal, she stated, is a world where all apps are accessible, even in cases where it may seem unintuitive. As an example, she recited her experience in traveling to China and discovering an unknown object in her hotel room that appeared to be a fruit. Rather than sampling it, she took a photo of it and sent it to a friend, who identified the object as being a dragonfruit.

    Girma noted she was only able to do that because the Camera app is accessible via Voice Over. Without considering such a scenario, one might imagine that a blind person wouldn’t need an accessible camera app because ‘why would a blind person take pictures?’

    Haben Girma at WWDC16, via AppleInsider


    Further reading:

    New look – a focus on text and speed

    Custom Creative has had a bit of a makeover. Now my time is largely spent on projects at Helpful Technology I have decided to move the focus of this site from marketing my services to the blog content. With this comes a renewed commitment to write more… good intentions at least.

    While restructuring the site I decided it was time for a visual refresh too. Particularly due to the focus on reading a high performance theme was in order – I settled on Fastr (available on GitHub) and created my own fork. So far the changes are minor – styling tweaks for taste & accessibility, and support for some new WordPress features including title-tag & custom-logo.

    Now Fastr lived up to is name anyway – with no JavaScript and minimal CSS it is already a high performance theme – but with a couple of plugins things really start to fly. This site has now hit the heady heights of 99% performance ratings on both Yslow and Pagespeed.

    Page size for this sitePerformance scores for this site
    The two main factors getting us here, after the theme, are Autoptimize and WP Super Cache.

    Autoptimize concatenates and minifies HTML, CSS, and JavaScript; it can also inline and defer if chosen. This reduces file sizes and DNS lookups. Since this site is so lightweight I chose to inline all CSS as this can drastically reduce the time to first render and the apparent loading speed for users.

    WP Super Cache creates static HTML versions of your site to save the latency and load of accessing the database to generate the site.

    In front of the site there is also Varnish – this is hosted on Gandi’s PAAS which comes with Varnish pre-configured, I highly recommend them for anything not requiring a dedicated server – and then Cloudflare. As I have said however, most of the speed in this case actually comes from the plugins and theme itself.

    I hope you like the new site – there’s bound to be some tweaks to appearance and configuration of the next few weeks, and hopefully more than a few posts.