From Avada to Underscores Theme

Avada to Underscores

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.

7 thoughts on “From Avada to Underscores Theme”

  1. Great post, Eugene! This is the first time that I’ve seen this kind of direct comparison between an off-the-shelf theme and a custom build.

    1. Thanks Keith, first time for me too. I guess I’ll use the Query Monitor plugin more often from now on.

  2. A great write up – well done. Some really amazing savings there on some of the page loads and queries. Definitely worth moving from Avada to an Underscores based theme in this case.

    1. Thanks for suggesting I could write the post in the first place, in retrospect it’s very informative even for myself to have a bird’s eye view of what the process has been.

  3. I absolutely love this post!

    The concept, the structure of the post, the notes on its implementation, and even more so the gains in load times and memory usage. Goodness me!

    Avada does have its use cases, but most sites just don’t have the resources to run its myriad components. Not to mention the fact that Avada’s licensing of bundled plugins is slightly unclear. What most site owners do not realise, also, is that Avada is notorious for vendor lock-in, due to its indiscriminate use of shortcodes. Not the best.

    In my view, Avada is a “pseudo-platform” rather than a theme.

    On the other hand, what you’ve built is a standards compliant WordPress theme. Awesome!

    Kudos

    1. Thanks CJ, I must admit I did enjoy working with Avada in the past, it taught me a lot but I got to a stage where I’d like to build, cleaner, lighter and more efficient themes.

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.