From Avada to Underscores Theme

One of my first WordPress website back in 2012 was one for a local charity, the Holly Lodge Community Centre in Highgate, London.
Back then I wanted to keep it nice and simple so I decided to use Coraline for the theme.

Last year we felt the need to do a revamp and because I wanted to give the people of the charity the opportunity to build page layouts on the fly, I decided to replace Coraline with something more feature-rich and flexible like Avada.

A month ago, whilst running some general maintenance, I realised how slow the site was. By running a few speed tests with Pingdom and the Query Monitor plugin I came to the conclusion that Avada was bloating somehow the installation.

That combined to the fact that none of the charity workers had never built a page layout with Avada in the past year, led me to consider building a custom theme for the website to make it lighter and faster.

Underscores Theme

I had heard of Underscores before so it was no brainer for me to use that for my new theme. I will write a blog post about what Underscores is in details in due time but for now just take the following:

  • light weight,
  • starter theme,
  • meant to be hacked,
  • sassified,
  • backbone of many official WordPress themes,
  • licensed under the GPLv3 (July 2017),
  • a product of Automattic and
  • looked after by 10s of very smart developers.

Workflow

These are the highlights of the workflow I followed. I hope I’ll have the time soon to write dedicated blog posts about each step so that you could get a deeper insight into my experience.

  1. Build a static replica of the existing site with Bootstrap 3 on my local development environment, MAMP.
  2. Add a sassified version of Underscores on a separate install on MAMP.
  3. Create a new repo on GitHub for the site with WordPress.
  4. Set WP_DEBUG to true & add some developer plugins:
  5. Add Grunt module to work with Sass.
  6. Implement the Autoprefixer module.
  7. Import assets.
  8. Enqueue style, scripts & fonts.
  9. Import CSS after conversion to SCSS.
  10. Add WordPress to the header, footer and page title bar.
  11. Create Sass variables and mixins.
  12. Build page templates (6) with Advanced Custom Fields.
  13. Import content with WordPress Importer.
  14. Edit blog index, single blog page and archive templates.
  15. Clean up some of the style inherited by Underscores.
  16. Add feature plugins:
  17. Add WordPress to the main navigation menu, make responsive & accessible, borrowing some code from Twenty Seventeen.
  18. Create a custom widget for the sidebar.
  19. Code conditional statement for most images featured across the site.
  20. Write some media queries.
  21. Add custom functions to escape advance custom fields output.
  22. Deal with notices thrown by the Theme Check plugin.
  23. Implement and run php code sniffer.
  24. Comply with most of WordPress coding standards.

I’m so glad I used git and GitHub for version control otherwise reconstructing the steps of this project would have been a challenge in itself.

The site was launched before total completion as I was eager to see what the speed gains were. I then used DeployHQ to top up any new piece of coding.

See the new site running on Underscores here. For the sake of comparing & legacy, you can also see the old site running on Avada here.

Numbers

Here is some data for you to compare, both installation run on TSO Host and they have the same plugins (with a few minor exceptions):

The following table shows data collected from the pingdom tools.

ThemeGradeLoad timeFaster thanPage sizeRequests
Δ+3-4.06s+47%-1.1MB-13
AvadaB – 845.99s25%2.3 MB42
_SB – 871.93s72%1.2 MB29

The tables below gather data from the Query Monitor plugin on some of the main pages.

Homepage
ThemePage generation timePeak memory usageDatabase query timeDatabase queries
Δ-1.46s-36,957kb-0.4393s-12
Avada2.23s73,125 kb0.5409s73
_S0.77s36,091 kb0.1016s61
Events page
ThemePage generation timePeak memory usageDatabase query timeDatabase queries
Δ-0.79s-39,846 kb-0.8461s-35
Avada2.48s77,431kb1.3809s158
_S1.69s37,585kb0.5348s123
Hall Hire page
ThemePage generation timePeak memory usageDatabase query timeDatabase queries
Δ-0.89s-56,432 kb-1.0477s-31
Avada2.62s89,526 kb1.0911s74
_S1.73s33,094 kb0.0434s43
Contact page
ThemePage generation timePeak memory usageDatabase query timeDatabase queries
Δ-1.94s-56,463 kb-1.1302-41
Avada2.57s89,557 kb1.1765s75
_S0.63s33,094 kb0.0463s34
WordPress Dashboard page
ThemePage generation timePeak memory usageDatabase query timeDatabase queries
Δ-2.24s-38,199 kb-0.0382s-20
Avada2.91s82,295 kb0.0842s83
_S0.67s44,096 kb0.1224s63

Needless to say, the Underscores instance is much faster, lighter, cleaner and more secure.

Furthermore, the website is now also more environmentally friendly. See what Tom Greenwood of Wholegrain Digital thinks of the Web industry carbon footprint.

Conclusion

This project has been an amazing journey in which I learnt a lot and I’d like to thank the following for making it less painful:

Morten and his courses on Lynda, the WordPress code reference, the WordPress Stack Exchange and of course Google have been instrumental in my learning process as well.

How about you?

Have you built a theme with Underscores? How did you like it?
Let me know what you think of my journey and feel free to share your experience in the comments below.