Daily ArchivesSeptember 9, 2021

An uncared for WordPress site will soldier on through the years, but it won’t provide the best service. Eventually, without intervention, something will go wrong: it will be hacked or a software bug or hardware failure will cause data to be lost. If you aren’t prepared for that eventuality, the result can be catastrophic. The good news is keeping a WordPress site in tip-top condition is straightforward, although it does require some work, just as your car requires an occasional oil change.
In that spirit, I want to take a look at five items WordPress site owners should commit to. They’ll help keep your WordPress site in peak condition and ensure you are prepared if something does go wrong.
Read More »

Passwords are not a great authentication method — a point that’s been made many times, not least by me on this blog. Passwords are great in theory, but in practice, when users are asked to choose and manage strong passwords, they don’t. They choose easy-to-remember and hence easy-to-guess passwords. And they use the same password on many different sites. Both behaviors are a gift to online criminals targeting WordPress sites.

The best way to make passwords secure is to couple them with another factor of authentication. Often that takes the form of a code created by an app like Google Authenticator or Authy on a mobile device. Users are asked to enter their password and a number generated by the app. Only by entering the number and proving they have possession of the device are they given access to the site. This system works and it’s much more secure than a password alone, but a new two-factor authentication system from Clef aims to make the process even easier.

Like most two-factor authentication services, Clef uses possession of a mobile device as an authenticating factor. Unlike most two-factor authentication systems, it doesn’t ask the user to enter a number or even a password. Instead, the WordPress login system will display a special animation at which the user points the camera on their device. The image is unique, and when it’s recognized by the Clef app on the mobile device, the user is logged-in. The app leverages Apple’s Touch ID fingerprint system as the other factor of authentication — to login, the user must authenticate to the mobile device with a fingerprint and prove that the device is in their possession. If users don’t have a mobile device with Touch ID, the system will fallback to a PIN for verification.

Clef provides a WordPress plugin that makes integration of the service into WordPress sites quite straightforward. The service is free for the first 10,000 logins per month.

It’s worth discussing why TFA needs to made easier. Entering an additional number isn’t all that taxing, but any additional complexity in the registration or login process for a site reduces conversions. Clef’s main marketing thrust is focused on the way its system can improve registration conversion rates without compromising on security. Users don’t have to remember a password, but the login process is considerably simplified.

In addition to TFA, Clef’s service includes a couple of other handy security features. The company uses data from the user’s device, location, and usage information to filter out fraudulent and abusive login attempts. Clef also implements a clever system called True Logins which attempts to limit the success of phishing attacks — a common tactic of online criminals in which a fake site is created in an attempt to harvest login credentials.

Clef is a novel approach to two-factor authentication on WordPress. Its developers have managed to create an authentication system that improves on passwords without asking too much of users.

In 2015’s State Of The Word address, Matt Mullenweg talked about WordPress 4.4, about PHP 7, and about the growth of WordPress, but the headline message of the talk was this: JavaScript and APIs are WordPress’s future.
That statement has to be taken in its proper context: WordPress isn’t abandoning PHP, and PHP will be part of WordPress for the foreseeable future, but the role that JavaScript plays in the WordPress world will grow ever larger.
Significant chunks of WordPress already include JavaScript, including the customizer, and libraries like JQuery and Backbone are integrated into WordPress, but, until now, WordPress developers have been able to create themes and plugins while knowing only the bare minimum of JavaScript. If you could integrate a JQuery plugin into your themes, you were pretty much covered.
Read More »

People love shopping, but they don’t love jumping through hoops to make a purchase. Forcing users to enter reams of data into complex interfaces is a conversion rate optimization anti-pattern. However enthusiastic a shopper is to make a purchase, their enthusiasm will be dampened by complex checkout processes.

A significant proportion of all shopping carts are abandoned. There are many reasons why more shopping carts are abandoned than completed — we’ve discussed some of them on this blog — but a high-friction checkout experience is a major component.

It’s in the interest of retailers to make checkout as simple as possible, and many recognize social media logins, which leverage existing social media accounts, are the way forward. However, I often come across Magento stores that have done very little to optimize the checkout process. In this article, I hope to convince those store owners of the value of social logins.

It’s Quick

Social logins can turn a convoluted checkout into a quick and intuitive process that takes no more than a few seconds. That can make a real difference to the shopping experience, especially for users who are uncertain about a purchase. By making the checkout process as fast as possible, users aren’t tempted to change their mind or head off to a competitor with a better checkout experience.

It’s hard to over-estimate just how little users enjoy traditional checkout processes and their extensive forms. Social logins are simply nicer to use.

It’s Better For Mobile

Have you ever tried to buy something from an eCommerce store on a mobile device? If you said yes, you’re in a rapidly growing group. A significant minority of all online sales happen on mobile devices, and entering extensive personal information on a small screen via a touch keyboard is not fun.

Social logins allow mobile users to skip the frustrating experience of checkout on mobile and quickly make a purchase.

It Provides Great Data For Marketing

Because social media logins are tied to shoppers’ social media accounts, they offer a huge amount of useful data to eCommerce marketers, especially where segmentation and personalization are concerned. Sure, you can collect much of that information with a registration form, but that’s exactly what puts shoppers off.

With social media logins, all the information is there for the taking.

It’s More Secure

If users are forced to remember multiple logins for many different sites, they take shortcuts that aren’t good for security. It’s not a good idea for a shopper to use the same login credentials on your store, their email account, and their favorite Hello Kitty forum, but they almost certainly will.

Social logins allows users to leverage their established identities, and it allows retailers to leverage the secure and tested authentication systems of Internet giants like Facebook. The combination makes for more secure user accounts.

There are several options for implementing social media logins on an eCommerce store; Magento Social Login and Inchoo’s Social Connect are among the best.

Social logins make a faster and more secure login process for users, and they provide much needed marketing data for eCommerce retailers. If you don’t offer social media logins on your site, why not?

We’re happy to announce our Platinum sponsorship of Meet Magento NL, and the attendance of several of our Magento eCommerce hosting experts, two of whom will be giving in-depth talks packed with practical information to help Magento retailers improve both the security and performance of their stores.

One of our favorite parts of being an active member of the Magento eCommerce community is meeting with eCommerce merchants, Magento developers, and other Magento service providers. That’s why we’re always happy to contribute to Magento-focused community events like Meet Magento Netherlands, one of the biggest and most vibrant Magento community gatherings in Europe.

Meet Magento NL will take place on the 12th and 13th of May at the Media Plaza of the Jaarbeurs Event Venue in Utrecht, The Netherlands. It’s a great venue, close to the center of Utrecht, a stunning city of canals and townhouses with a long history, not least as a leading European center of trade and commerce.

Meet Magento Netherlands is a great opportunity for everyone in the Magento community to meet and to learn from Magento experts, developers, retailers, and service providers. The conference includes talks on topics ranging from eCommerce security to content marketing for eCommerce merchants, and from Magento development to the app economy.

Hostdedi VP of Channel Sales Jerry Eadeh will speak about the Twelve Habits Of Highly Secure Magento Merchants, discussing best practices for Magento eCommerce Security. Aric Watson, a web developer at Hostdedi, will give a talk entitled Get Up To Speed With Varnish, a deep dive into using the Varnish caching reverse proxy to improve Magento performance.

One of the highlights of MMNL is the hackathon that will take place at a nearby venue on Saturday May 14. Developers will be asked to contribute ideas for modules, and the best ideas will be worked on during the day. The hackathon will finish with presentations and pizza. There are only 50 spots available, so make sure to reserve yours early.

As always, our team will be more than happy to talk to MMNL attendees about how our performance-optimized Magento hosting platform can help eCommerce merchants build fast, secure stores. We’re also excited to talk about any of our open source projects, including the Turpentine Varnish integration extension; Sentry, a Magento two-factor authentication extension; and Alarmbell, our recently released Magento security extension.

A decade ago, Subversion (SVN) was the version control tool of choice for many open source and enterprise software development projects. That’s why the WordPress.org plugin and theme repositories are based on Subversion — at the time, it was the obvious choice.

But times change, and now most open source developers use Linus Torvald’s Git version control system, especially in its implementation on GitHub, which is a cross between a version control system and a social network, and is by far the most popular platform for managing and collaborating on open source projects.

The majority of WordPress plugin developers use GitHub. WordPress.org uses Subversion. Developers can use their WordPress.org Subversion repos for version control, but it lacks many of the pleasantries associated with working on GitHub — collaboration, issue tracking, and code management are just much nicer on GitHub.

Ideally, developers would be able to push right from GitHub into Subversion when they make a change to their plugin, but the systems aren’t compatible, which means developers have to manually merge to Subversion — something that slows down development workflows and complicates plugin version rollouts. That’s not a trivial issue if, like many WordPress developers, you have several WordPress plugins under development.

Deployer is a tool from plugin developer Arūnas Liuiza that aims to make it easy to push plugin code directLy from GitHub to WordPress.org. It’s not the first such tool, but is more likely to appeal to developers because it’s specifically designed to require the least amount of access to accounts on GitHub.

In a nutshell, Deployer requires a developer to add a “Deployer” user to their plugin committer list on WordPress.org. The service uses the permissions associated with that user to commit changes from GitHub.

The nice thing about this system is that it requires no permissions on GitHub. An earlier tool with the same goal — GitHub to WordPress.org code pushes — was hamstrung by its requirement for significant access to a GitHub account, and, because of GitHub’s lack of access granularity, that meant giving a web service access to all repositories associated with an account. Naturally, developers balked at the idea of handing the keys to their kingdom to a third party.

Deployer, in contrast, pulls from publicly available repositories; it requires no privileged access at all.

The downside is that Deployer requires more setup than other GitHub-to-WordPress.org tools, but it’s nothing that developers can’t handle and it’s more than worth the improved security model.

All-in-all, Deployer is a small, useful service that will make the life of WordPress plugin developers a little easier.

Over the last few years, web development toolchains have grown increasingly complex. It wasn’t all that long ago that web pages were coded in HTML and CSS in a text editor. But, with the introduction of CSS pre- and post-processors, template languages, greater demand for site optimization, and the plethora of other helpful little tools that aid web development— including WordPress theme development — it’s become increasingly difficult to set up and manage development environments.

No one wants to have to run a SASS compiler every time they make a change to their site or theme, still less concatenate, minify, and compress CSS and JavaScript whenever they push to a production server.

Gulp is a task runner that helps developers automate this sort of job. The principle is simple — Gulp watches a group of files, and when it detects that they’ve changed, it runs a series of tasks which will take the files and pass them through various filters. So, when you save your SASS files, Gulp notices and runs a task that passes them through the SASS compiler and drops the resulting CSS file in the right place.

There are three important things to understand about Gulp.

• It’s a Node.js application, which means you have to have Node installed on your machine for it to work.
• It values code over configuration. Gulp tasks are written in JavaScript in a file called gulpfile.js. If you know even basic JavaScript, getting up and running with Gulp shouldn’t be a problem.
• Gulp uses a pipes metaphor. Gulp tasks can be thought of as a series of pipes through which files are sent, which makes it possible to chain together multiple tools, much as you can on the Linux command line. You might create a “styles” task which takes SASS files, runs them through the SASS preprocessor and outputs CSS, which is then piped through Autoprefixer, which adds CSS prefixes as necessary, the results of which are then piped through a minification tool, and so on.

If you want a thorough introduction to using Gulp with WordPress, take a look at this excellent article from Ahmed Awais.

To make things a little easier on WordPress developers who want to get started with Gulp, Awais has also created WPGulp, a boilerplate that includes the basics theme and plugin developers need to setup a working Gulp environment.

In combination with Awais’ introductory blog article, which runs through how to install Gulp, use it with WordPress, and includes a thorough explanation of the gulpfile.js file, WPGulp is an excellent primer for getting started with Gulp in your WordPress development projects.

WPGulp is by no means a comprehensive framework for integrating Gulp into WordPress development workflows, but it contains more than enough that any competent developer will be able to pick up the ball and run with it.

WordPress may be one of the most powerful content management systems in the world, but that doesn’t mean that it’s flawless. It can still be misused, and you can definitely still make mistakes if you don’t know what you’re doing. If you’re planning to upload rich media like images, video, or audio to your site, there are a few things about the platform that you need to understand – a few steps that you need to take in order to optimize for that content.

I don’t believe I need to explain why optimizing your WordPress installation is important. You don’t want to frustrate your users with a slow site or with content that doesn’t load properly, right? Let’s get started.

Make Sure Your Videos Are Web-Ready – And Avoid Uploading, If You Can

Version 4 of WordPress brought with it a host of pretty fantastic features – including html5 video embedding. Basically, what this means is that you can now post regular video content for your readers to watch, and that’s great. Unfortunately, there’s one problem – a lot of video formats place the index at the end of the video.

What that means is that a user needs to download the entire video before it even starts to play – for longer videos, that can lead to some pretty significant load times.

It’s therefore important that you take steps to optimize your videos for viewing on the web before you put them online. To that end, I’d advise you use Handbrake or a similar tool – it has an option that lets you automatically optimize videos for the Internet.

I’ve one more piece of advice before we move on: don’t upload videos directly to your WordPress account. Ever. Just don’t do it.

Embedding is easier on your servers, makes it easier to share your content, cuts down on bandwidth, and does a whole lot to improve traffic – especially if you’re hosting on YouTube.

Choose A Theme That’s Designed For Media

No two themes are created equal. If you’re planning to upload rich media to your site – or intend to create a website that’s completely focused on media – then it’s important that you select a theme that’s developed with that in mind. Make is a great choice in that regard, as is Onetone. Look around a bit, and find one that’s right for you – it’s not like there’s a dearth of choices.

Check Out A Few Plugins

Everyone knows that one of WordPress’s greatest strengths lies in its rich plugin ecosystem. Naturally, that means that there are plenty of plugins out there designed to make the optimization process a great deal simpler. Jay Hoffman of Torque recommends five plugins in particular:

• Imsanity: limits the size of images uploaded to WordPress, and automatically scales down images that are too large.
• EWWW Image Optimizer: Allows you to compress images before uploading them, reducing their size and thus reducing the load time.
• PictureFill.WP: Lets you serve responsive images (images that change based on the device that’s viewing them) without having to use the HTM5 markup – meaning resizing is supported by older browsers.
• Lazy Load for Videos: Stops external files from loading right away, and substitutes a static thumbnail in place of video players – the video is only displayed if the user clicks “play.”
• PB oEmbed HTML Audio: Basically, this plugin is to audio shortcode what PictureFill.WP is to image resizing.

Resize And Compress All Your Images Before Uploading Them

This one’s pretty basic – and if you’ve the right plugins (see above), it’s something you’ll handle on your own anyway. Still, I’ve seen people neglect to do this so often that it nevertheless bears mentioning: if you’re going to upload images to your WordPress website or blog, resize and compress them BEFORE you do it, NOT after. Uploading a full-sized image to your site and then resizing it to fit into a post doesn’t actually change how much bandwidth the image uses up – your site is still loading the full image, it’s just resizing it after loading. Optimizing images before you upload them will also save you bandwidth, which is particularly important if you run a busy site with lots of traffic — bandwidth charges can quickly add up, especially if you use a content distribution system.

If you’re a Mac user, ImageOptim is a great tool for achieving smaller images.

Set Up A Content Delivery Network

Perhaps one of the best pieces of advice I can give you here is that if your site is serving up large volumes of rich media, you should spring for a content delivery network. This will help your site load faster, regardless of where your users are connecting from. That, in turn, will reduce the bounce rate on your site and make your servers far less resistant to crashing under a heavy load.

Okay, so maybe it’s not directly tied to rich media – CDNs are awesome regardless of what you’re using WordPress to do.

Enable gzip Compression

My last piece of advice admittedly isn’t something every webmaster’s going to be able to do – it’ll require a fair bit of technical knowledge, along with direct access to your server’s filesystem. What that means is that, in some cases, you’re going to need to check with your host before diving in. Anyway, what you’re going to want to do is add the following code to your .htaccess file:


mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*


This will enable something known as gzip compression – basically, this will compress all static elements on your site, significantly reducing the amount of time it takes to load.

In Closing

WordPress is an incredibly powerful CMS, but that doesn’t mean you don’t need to take steps to optimize it if you’re planning to use it for anything beyond blogging. Rich media tends to take up a fair bit of bandwidth, after all – if your installation’s not equipped to deal with those demands, you’re going to wind up with a lot of frustrated users. Not exactly something you want, is it?

In an ideal world, web design presentation would be separated from the logic of web applications. To some degree, that’s the case in WordPress, but for theme developers, much of the functionality and the presentation is mixed. Theme files are a combination of HTML and PHP, which can make developing and editing WordPress themes complex and error-prone.

WordPress themes set a high barrier to entry for WordPress users and novice developers who want to create a theme of their own, or simply edit an existing theme. More often than not, theme customization is limited to Googling and pasting in bits of PHP code found on the Internet — not the safest approach.

And, the WordPress Loop is difficult to understand for novices, and even professional WordPress developers often have trouble remembering which functions they should use and where.

All of which is to say that WordPress theme development could use some simplification.

Timber is a project that aims to bring the simplicity of the TWIG template engine to WordPress theme design. TWIG is a PHP template system that is focused on creating output rather than on application logic, although it has a number of simple logical constructs.

The obvious question: isn’t PHP a template language? Why do we need another one? In reality, PHP was once a template language, but it’s now a full-blown programming language with a massive overhead of complexity that simply isn’t necessary if all one wants to do is build a custom WordPress theme or make a few tweaks.

Whereas PHP is bloated, complex, difficult to learn, and verbose, TWIG is concise, simple to hold in your head, and really quite easy to learn for anyone who has a basic grasp of programming concepts and HTML.

One of the reasons that static site generators have become so popular over the last few years is because the template systems they use can be quite easily grasped by designers, developers, and hobbyists who have no desire to tangle with the intricacies of PHP.

Let’s take a look at a simple example from the Timber documentation that shows the difference between PHP and TWIG.

As you can see, the TWIG version is easy to understand even if you only have a basic knowledge of HTML. The major difference is that variables are enclosed in double curly braces — variables allow you to access data from WordPress. With a combination of HTML, variables, filters, and simple flow control structures for loops and conditionals, it’s possible to build theme templates without the headaches associated with PHP.

If you want to create a custom WordPress theme and don’t have PHP expertise, or build themes that are easy for non-developers to edit, Timber is well worth a look.

Unless you’re a PHP guru, WordPress theme development has a steep learning curve. WordPress is popular among users with a modicum of HTML, CSS, and JavaScript knowledge, but unless you have a fair bit of PHP under your belt, attempting to develop a WordPress theme can be a confusing endeavor.

Drag-and-drop page builders exist to reduce the difficulty of developing semi-bespoke WordPress themes, but they tend to be resource hogs, to say the least. The best option for users with a little web development knowledge who want to get started in the WordPress world is a tool like Timber or a starter theme. One of the most popular starter themes is Underscores, which is developed by Automattic. As Automattic puts it, Underscores gives developers a thousand-hour head start. Read More »