WordPress

How to install a free SSL certificate on your WordPress website.

Every website on the internet is vulnerable to hacking attempts. However, the sheer popularity of WordPress combined with the relative inexperience of some owners/administrators regarding security best practices, can often make WordPress websites an easy target.
The team of developers behind the WordPress software itself go to great lengths to ensure the platform remains secure, but hackers are constantly evolving new methods of attack.
This all sounds very serious, but there are a number of relatively simple measures that you can take to protect your WordPress website with a little bit of know how.

  1.  Choose a strong password for your site. Don’t be tempted to choose a weak password just because it’s easy to remember.
  2.  It is critical that you perform all WordPress core, theme and plugin updates as they are rolled out. These often contain fixes for vulnerabilities that have been discovered.
  3.  Secure your website with SSL.

What is SSL?

Every time your website receives a visitor, your webserver exchanges information with their browser. If the two are communicating via HTTP, the data transmitted is in plaintext format and can be subject to an eavesdropping attack. This means it is possible for an attacker to intercept and view potentially sensitive data (credit card details, account logins etc). SSL (Secure Sockets Layer) provides a secure, encrypted channel between both devices sending the data via HTTPS.

In January 2017 Google began marking all HTTP pages that collect passwords or card payment details as non-secure. It is also used as a website ranking factor, so it is now more important than ever to use HTTPS.

Certification Authorities.

In order to use HTTPS you need to have a valid SSL certificate issued by a Certificate Authority (CA). Authorised CA membership programs are operated and a CA must meet detailed criteria to be accepted as a member. Once accepted, any digital certificate issued by that CA is then trusted by browsers which can then display the familiar padlock symbol in the address bar. This digital certificate contains identity credentials that help to verify the identity of the website. Before issuing an SSL certificate the CA will perform a number of checks on the applicant, for example verification of domain ownership.

Until relatively recently SSL certificates had to be purchased, but over the last few years a number of CAs have sprung up that offer free SSL certificates with the aim of helping to create a web that is both more secure and privacy respecting. Let’s Encrypt is one such CA that aims to benefit the internet community by offering free domain-validated SSL certificates.

Getting Let’s Encrypt on WordPress.

Many hosting providers already offer integration with Let’s Encrypt through their cPanel. A list of hosting providers with Let’s Encrypt support can be found here.

If you’re building your site from scratch, installing the SSL will be fairly straightforward providing it’s one of the first things you do. Installing a Let’s Encrypt SSL on an existing site will require a few more steps.

Before you make any important changes to your site, it’s always best to perform a backup.

Log in to the cPanel for your website and look for the Let’s Encrypt logo (usually in Advanced settings or Security). Follow the instructions, and if your domain checks out you should have confirmation of success. You now have a free SSL installed.

Let’s Encrypt SSL certificates automatically renew every 90 days. This renewal happens automatically, however you may also choose to renew manually if you wish.

Next, you need to update your WordPress URLs from HTTP to HTTPS. Go to your WordPress Dashboard, Settings, General and change the WordPress URL and Site URL to reflect your new secure connection.

Database search and replace.

Adding a Let’s Encrypt SSL to an existing website requires the URLs in your WordPress database to be updated. Without this step, your images will load from insecure URLs and your links will also point to insecure pages.

To do this you need to perform a Search and Replace on your database to replace the insecure URLs with secure ones. Happily, there is a very useful script to help you with this from the guys at Interconnect/it. This powerful open source script has been developed to allow you to carry out search and replace actions across the whole database with ease. It even allows you to do a dry run first to see the changes that will take place on execution of the script.

Make sure you have an up to date backup of your database before you attempt to run the script. Please use with caution, and read the installation instructions carefully. Remember to remove it from your server once complete, as leaving it in place is a significant security risk.

Forcing HTTPS.

Now you have a working HTTPS connection, the next thing to do is ensure your visitors do not connect to your site via HTTP. There are a couple of ways to achieve this. You can download a plugin that handles this for you (such as WordPress Force HTTPS) or you can edit the .htaccess file by adding the following code above your current rewrite rules, substituting in your sitename:

Conclusion.

You should now have a website secured by a free SSL certificate. The padlock icon should be visible in your browser bar. If it’s not visible, go to Whynopadlock to check your website and see what is causing this. You should then be able to resolve the issue.

WooCommerce styling (1)

Creating a WordPress plugin to style WooCommerce

WooCommerce is a highly powerful eCommerce platform that can be greatly enhanced using any of the hundreds of extensions currently available.

Built on WordPress, it acts as a modular system making it easy to add features and customisations.

But what if you simply need to change the word “Cart” to “Basket”, add a “Continue Shopping” button or even use Font Awesome icons instead of the standard icons that are used within WooCommerce? Here are the answers.

WooCommerce best practices state that in order to keep your modifications after updating to a newer version, there are two ways to customise:

  • Plugin – minor changes
  • Child theme – major alterations

As we will be making minor styling changes only, we will create a plugin.

For the purpose of this post I am going to assume you know how to go about creating the structure for a WordPress plugin file. Your plugin should be very lightweight as it will only consist of one file.

Changing the word “Cart” to “Basket” in WooCommerce.

Here in the UK, we would usually refer to a “Shopping Cart” as “Shopping Basket” and so users of our online shop would expect to see the text “View basket” and “Add to basket” across the site. To change this, we simply need to add to following function to switch the text from “View Cart” to “View Basket”

It is worth noting that some older posts on this subject explain how you can update the language option (WPLANG) in the wp-config.php file by simply amending or adding in the line define ('WPLANG', 'en_GB'); This is no longer the case, however, as WPLANG was deprecated in WordPress 4.0.

How to add a “Continue Shopping” link in WooCommerce.

Making navigation easier for your customers is crucial to ensure they have the best possible user experience with your online shop. Adding a “Continue Shopping” or “Return to Store” link to the WooCommerce message that appears after adding an item to the basket, can help to keep your customers engaged and may even lead to an increased spend.

By default WooCommerce does not have this, so we can add it to our online shop using the following function to the plugin:

How to use Font Awesome icons in WooCommerce.

Using Font Awesome icons can be a great way of adding a bit of individuality to your online shop. After all, it’s the little touches that set your site apart from everyone else’s.

First, we make sure the latest version is available to us in WordPress by adding the following to our plugin file:

Next you will need to grab the css selectors and add your own rules to the custom css section of your WordPress theme. Personally, I prefer to use the Inspect element tool in Chrome to do this.

Below are a couple of examples from an online shop I developed using the Avada WordPress theme:

Here I replaced the shopping cart and checkout icons with the basket and shopping bag. Check out the Font Awesome bootstrap cheat sheet for a list of character references.

These are just a few examples of the customisations you can achieve using a few lines of code in a plugin. I hope they illustrate just how easy it is to tailor your WooCommerce shop to your liking.

The final code for the plugin looks like this:

Using the WordPress Media Uploader in your plugin options page.

If you are creating a WordPress plugin that requires your users to select or upload media from the plugin options page, it is a good idea to include the one that people feel familiar with. The core WordPress Media Uploader is relatively easy to implement and the user-friendly interface should make your users feel comfortable while uploading media.

For the purpose of this post I am going to assume you already have an options page for your plugin. If you don’t, there are plenty of tutorials on the web to help you achieve this. The code contained within this article was used in a lightweight plugin I developed to allow users to customise their WordPress login page.

The Javascript code.

Firstly, we need to create a javascript file called media-uploader.js (or similar) within the plugin folder. Place the following code in it and save.

When called by the #upload_image_button, this script launches the native WordPress Media Uploader interface and inserts the chosen file in the destination field #background_image.
As an example, in my plugin the destination field gets saved in the plugin options as the background image for the login page.

The function code.

Next, we need to register the script and enqueue it using the following code in the main plugin file:

Registering and enqueueing lets the WordPress core know where the script is located and any dependencies it has. wp_enqueue_media enqueues all scripts, styles, settings, and templates necessary to use all media JavaScript APIs. wp_register_script has a number of parameters:-
wp_register_script( $handle, $src, $deps $ver $in_footer)

  • $handle is what you use to refer to your script
  • $src path to the file within your plugin – use plugins_url(‘your-file.js’, __FILE__) to get the URL root of the plugin
  • $deps an array of registered script handles that this script depends on
  • $ver script version number
  • $in_footer option to enqueue the script before the closing </body> tag instead of in the <head>

See the WordPress Functions Reference for a more detailed description of these.

Both scripts and styles are properly enqueued by attaching the function to the admin_enqueue_scripts hook. Note that we are using the admin hook rather than wp_enqueue_scripts as we are not dealing items that appear on the front-end.
The add_action hook allows us to specify precisely at what point the defined function is added during script execution.

The form code.

Lastly, we need to add a couple of fields to our plugin options page – a button that calls the Media Uploader script and a text field that saves the URL of the image to the database:

As you can see, for my plugin I have registered a setting on the options page called background_image which is selected using the Media Uploader.

I have also given the Insert Image button the button-primary class to maintain the default WordPress look.


Now we can use the WordPress Media Uploader on our plugin options page.

Conclusion.

Adding the familiar native WordPress media uploader to your plugin options page should be relatively straightforward.

If your javascript file is called by the desired element, and you have registered and enqueued the scripts correctly, you should have it working in no time.

In my next post, I will explain how to add the native WordPress color picker for use on your plugin options page.