How I finally cleaned up our slow, bloated WordPress install

I’m writing this to go over the process I took in updating and modernising our dated and overly complex website in the hope that it may assist anyone wanting to do the same. Through this process I backed up our entire website and database, installed a local copy of a new website and transferred the data over to it, cleaned this new website and then replaced the old live one with the new one.

I originally designed and built the website for the company I work for. The first iteration I initially made using Drupal (moving from a static HTML website) but I transferred to using WordPress years ago because of its ease of use and setup both from a developers perspective and also from the clients perspective (although it looks like Drupal has improved a lot in the years since I last used it so I may experiment with it later and do a post on WordPress/Drupal). Our last website I had built using WordPress and created a custom theme that I had designed and coded myself. Over the years we had steadily added more and more features and functionality to the website either through adding on third-party plugins or by being coded into the CSS and PHP myself to the point where the website had become quite bloated and slow. It had also become a headache to update as by this point I was having to use the plain-text editor in WP and more often than not was hand-coding HTML elements into the pages. This was fine for me as, I personally liked the ability to always make sure the HTML of the page was clean, but it did mean I couldn’t hand over post-publishing responsibilities to other staff. The time had come to fully embrace WordPress 5 and the Gutenberg editor!

If you haven’t used the Gutenberg editor yet I can highly recommend it (it’s also probably time to run some WordPress updates before your website is hacked!). Some things are in slightly different places and it may seem a little ‘clunky’ sometimes but it makes it so much simpler to update pages (especially with the right plugins). And it allows non-technical staff to create and edit posts and pages involving more complex layouts and HTML elements without needing to write any code. I was also able to remove loads of plugins from our site, speeding it up significantly, and replaced them with one which I find very useful.

As our website was quite a few years old, and had been hacked once and then subsequently cleaned up by me, and had also had pages and posts updated and moved by various staff members over the years and had old un-needed pages and also parts of the database from old plugins that were not being used any more, what I decided I wanted to do was to completely purge our old website and database and start fresh with a completely new install of WordPress and a clean database. Our website by this point was a mess and I wanted to clean it significantly.

BACKUP WORDPRESS AND ALL UPLOADS

I cannot stress this part enough. BACKUP. Backup as much as you can in case things go wrong. I made multiple backups using different methods as I wanted to make absolutely sure I would have a way of restoring everything if something went wrong. You do not need to follow all these methods but at the very least I recommend you make an FTP backup of the entire website and all files and also a database backup. I created the following folder and sub-folder structure on my local computer:

• Website Backup [date]
  • FTP Backup
  • WordPress Export
  • Database Backup
  • Custom CSS and Settings
  • Pages with more complex HTML

FTP BACKUP (do it!): First up I accessed the website home directory using FTP and made a local copy of the entire folder. This will differ depending on your web host but it will be called something like public_html or web. As long as you are in the root folder and can see all the wordpress files and directories then you should be fine. Also using an FTP client means you should be able to see any invisible files that may be in this directory too (like the .htaccess or .phpini files). FTP clients usually show these by default but if not there should be a setting somewhere that says ‘show invisible files’. I duplicated these invisible files first and renamed them without the dot at the start of the name (for example I duplicated .htaccess and renamed it htaccess.txt). This way I knew they definitely copied down when I dragged/downloaded all files to my computer and I could also see them in the backup folder without having to enable showing hidden files on my computer. I used the FTP client to copy ALL files and folders into the ‘FTP Backup’ in my main website backup folder. Make sure you delete your duplicated files from the FTP site after copying though leaving only the original invisible versions.

WORDPRESS EXPORT (optional): After downloading everything over FTP I then logged into our WordPress site as admin and under the ‘Tools’ menu selected ‘Export’. I left the setting on ‘all content’ and clicked on ‘Download Export File’. This downloads an XML file to your computer with all site settings information and locations of files and images for example so that if you need imported this then WordPress would know where to find all the images etc. I saved this file into the ‘WordPress Export’ folder in my main website backup folder.

SETTINGS BACKUP (recommended): This will depend on the theme and plugins you are using but they may also have custom settings that might need backing up. Two of our biggest issues were that we were using a WordPress theme called PinPoint which has been customised extensively and also a plugin called UberMenu. UberMenu in particular had quite a large amount of custom settings and CSS which would have been a headache to try to recreate if needed. Luckily both the theme and plugin had settings export options which when clicked on gave the settings as CSS code which could be highlighted and copied and then saved into a plain text file (and if needed pasted back into the settings export box in the theme/plugin if restoring). I named these files accordingly and saved them in the ‘Custom CSS and Settings’ folder in my main website backup folder. There were also a couple of other plugins (Safe Redirect Manager and Search Keywords) which I had to manually make note of the data in them so just be aware to check all your plugins and theme settings for data that you may want to keep. Also on this note you may find that your site has custom CSS somewhere in the theme settings or under the ‘Customise’ section of WordPress. If you do then make sure you copy this and save it into a plain text file too with the rest of your settings.

CUSTOM PAGES HTML BACKUP (optional): There were also a few pages on the website which, for various reasons, had ended up with slightly more complex layouts and elements which had been manually coded into the HTML (and also the CSS which has already been backed up with the FTP backup). For these pages I went in to edit the page and then using the code editor (not the visual editor) just highlighted all text/code and copied and pasted it into a plain-text editor to save those pages somewhere. I used SimpleNote but another good (and free) plain-text editor you could use is BBEdit. I saved these pages with the rest of the backup titling them appropriately (e.g. homepage.txt).

BACKUP THE DATABASE

Now that the actual website structure, settings and files had been backed up the next stage was to backup the database. The database contains all the actual data on the website so this part is very important.

There are WordPress plugins (such as WP Database Backup) that can backup the database for you, and there are also desktop apps that can do this (such as Sequel Pro for the Mac) but if you can and your website host allows it you can go directly to wherever your database is stored. In my case it was a MySQL and the host logged me into phpMyAdmin which gave access to the database. In the phpMyAdmin site you can select your database and go to ‘Export’ to download a SQL file containing all the data on the website. The file will usually download as the database name with the extension of .sql and you should save this file in your website backup inside the database backup folder.

CREATE A LOCAL COPY OF A NEW WEBSITE

Now that everything was backed up and safe it was time to create new website on a local machine. I use a Mac so used MAMP to create a new database and local server and downloaded the current version of WordPress to create a new WordPress site in my local server. I then used the tools in MAMP to go to the local phpMyAdmin database site for this website and imported my database backup from before into the new database.

This threw up loads of errors on import for me but having a local copy of the database gave me the opportunity to really go through all it’s tables with a fine tooth comb and remove/drop anything that looked like it was either left over from an old unused plugin or from when the site was hacked. Doing this on a local database is definitely recommended over doing it live as database edits can be scary! One issue I found moving a live WordPress site to a local site was the local site constantly trying to redirect to the live site. This was solved by editing the ‘siteurl’ and ‘homepage’ tables in the wp_options part of the database in phpMyAdmin to reflect the new local URL.

Once I had a local copy of the website I was free to remove the clunky old theme we had been using and start from scratch. I removed the theme, and disabled all but the core plugins, and instead started off with one of the default WordPress themes. This allowed me to see what was working and what wasn’t and to go through and make any changes that were necessary. There was a lot that wasn’t working after removing all the custom styles and plugins the website was using but this was ok as the pages usually just displayed the shortcodes or HTML of elements it didn’t understand. I could now go through the site and at least tidy up the majority of pages in order to get the website looking usable.

Next I installed and enabled the new theme I had already picked out for us. Which brings me on to…

NEVE (WORDPRESS THEME)

I had already decided on a free WordPress theme I found called Neve (available on ThemeIsle). This theme had a clean and simple mobile-first approach, it was fast and light and came with quite a lot of customisability options (especially if upgrading to the ‘Pro’ version for £49 which is what I ended up doing).

This theme allowed me to customise so much of the look and feel of the website (layout, colours, styles) without needing to write any extra CSS code. For example I was able to completely change the look and feel of the headers and footers through the customise section in WordPress without needed to tinker with the CSS. Don’t get me wrong I prefer to tinker with the CSS personally but the point of this exercise was to make the website as clean and simple as possible and easy to customise for non-technical people.

Next I installed a few plugins I use regularly, such as Wordfence security and Yoast SEO, and then another plugin I had come across that would solve our needs for more complex page designs/layouts and enabling staff to take this on themselves rather than relying on me. This brings me to possibly my new favourite plugin…

STACKABLE (WORDPRESS PLUGIN)

Stackable is an amazing free plugin which works with the new Gutenberg editor in WordPress and adds a number of ‘blocks’ which add to the design experience and make it really easy for our staff to add nice looking and complex design layouts and elements to their pages. Blocks such as complex header elements, pricing tables, feature grids, count-ups, video popups, separators and call-to-actions (among many others) can be added in seconds with no technical knowledge required.

This plugin made the process of updating the website and adding more stylised/complex elements so quick and easy that I ended up buying the Stackable Premium upgrade for around $35. The premium upgrade adds even more design and control elements to the blocks it offers and is well worth the cost if you are have installed the free version and found it useful.

OUT WITH THE OLD, IN WITH THE NEW!

Once I had a fully functioning new local website running I could then backup this website and database. Then with the help of a free holding page plugin for WordPress, which could create a temporary homepage containing important info and phone numbers for while the live site was down due to maintenance (Coming Soon & Maintenance Mode), I was able to upload/import/restore the website and data in place of the old live version (using a combination of the processes outlined above). Also remember that if you have imported your database from your local one then you may need to go back in to edit the ‘siteurl’ and ‘homepage’ tables back to the correct URL for the live website.

Hopefully this helps someone. I did all this around six months ago and I’ve written it down from memory now so will edit it as and when things come back to me!