Override Header Layout in Avada Child Theme

I was recently asked to add a button in the header of an Avada child-theme and was surprised when a search turned up no advice. It’s not hard but takes a little digging so I’m posting this in case it might help someone in the same situation.

Avada has six header layout options, selectable from the WordPress Dashboard via “Avada > Theme Options > Header > Header Content”:

avada-header
These options map to files at “/wp-content/themes/Avada/templates”. You can override the Avada templates by creating your own in a “templates” sub-directory of your child-theme folder and copying a code block containing the action hook from “/wp-content/themes/Avada/templates/header.php” to your child-theme’s “functions.php”.

The local (child-theme) function will be called first at action-time, so the default Avada function will never be called and the local template will be loaded rather than the one in the Avada folder.

There’s a more detailed Gist at GitHub

Web Performance Improvement

page-speedA while back I noticed this site had cratered from a once-perfect Page Speed Insights score to an embarrassing 59. It took a few hours of work but I got it up to a score of 91 — more importantly, because that’s just a number, I’ve improved the actual page speed as much as I can. The things bogging me down now, and they’re not bogging very much, are out of my control unless I want to stop using Google Analytics or Jetpack for WordPress, both of which are worth a few additional milliseconds of load speed.

The only other issue is server response time. This site is hosted on GoDaddy, so what can I say — it is what it is.

Here’s more-or-less what I did and the plugins that helped:

WP Super Cache and EWWW Image Optimizer don’t require configuration and can just be installed and activated and your performance will improve. The other two can break a site — you should know what you’re doing and be prepared for some effort. Back up your site before trying them.

Accelerated Mobile Pages and WordPress

Everybody knows by now that a website’s speed matters a lot. (In case you don’t, read this: Case study: Mobile pages that are 1 second faster experience up to 27% increase in conversion rate.) Google stays in front of the effort to speed things up, motivating site owners by making page load speed a factor in their search ranking algorithm, most importantly, but also by providing tools and tips for developers, like Page Speed Insights and “mobile friendly” testing — not to mention the performance tools in Chrome’s excellent developer tools.mobile-case-study-conversions

Accelerated Mobile Pages is one of Google’s newest performance-related initiatives (from early October 2015, here’s the launch announcement), promising a systematic rather than a piecemeal improvement in performance by defining and enforcing a rigid structure for the content with constrained embellishment. The open-source initiative is loose in the wild (here and here), though uncommon. and pages built accordingly are expected to show up on Google SERPs in early 2016. Sitepoint has a good overview of the initiative.

Not surprisingly, because they were one of the initial partners in the initiative, Automattic (the guys behind WordPress.com) has already released a first-cut plugin enabling a WordPress site to produce AMP pages. Called “AMP” (on GitHub) simply enough, it lacks options and features but does take care of business, and is far-enough along and well-enough written that a decent developer can start using it now. It’s implemented on this site — you can view this post in AMP format by visiting http://www.steveclason.com/accelerated-mobile-pages-and-wordpress/amp/ [opens in a new tab]. That’s the default look — I haven’t done a thing, though the plugin has plenty of filters to allow some personal expression. Like the RICG responsive image engine, I expect this will roll into the WordPress core before long.

My guess is that this will get a lot of attention once AMP pages start showing up in Google SERPS. Content providers should think about stealing a march on the competition and implementing this soon. It will mostly benefit content providers and won’t affect SEO — or shouldn’t, in theory.

Yikes! What Happened?

A while back, last year maybe but it looks like I deleted the post, I spent a considerable amount of time making this site reach perfection (two 100s) on Google’s Page Speed Insights tool. Here’s what it looks like today (18 Oct 2015):
pageSpeedInsights_18Oct2015

So, what happened?

I changed my caching plugin from “W3 Total Cache” to “WP Super Cache” but it’s hard to believe that would cause much problem. I also installed a plugin to support Accelerated Mobile Pages (which so far seems to do nothing at all but I haven’t poked at it), but I think the real reason for the decline in my score is neglect. The world kept turning but I stopped paying attention to this site. For a freelance developer, that’s a good thing because when we have paying work we tend to ignore our personal sites, but it’s embarrassing for a guy who’s supposed to be Performance Focused.

So, I’ve got some work to do here, don’t I?