How to customize WordPress Theme Avada

//How to customize WordPress Theme Avada

How to customize WordPress Theme Avada

I have created a lot of content describing How to customize WordPress Theme Avada. The most popular content I have created about this topic has certainly been the YouTube Videos. If you are interested in checking out the videos you can watch my popular WordPress Tutorials here. Watch Videos Now.

How to customize WordPress Theme AvadaHowever, The truth of the matter is that these videos are not really about customization. These videos are mostly about usage that show users how to get started with the theme. Since I want to capture an audience that is mostly interested in creating a quick website with the bells and whistles that AVADA Offers.

Customizing WordPress Avada Theme or any WordPress theme for that matter is a whole different story. It is more of a developer oriented task and is much difficult to accomplish for users not really familiar with php, custom css, Child Themes and the WordPress API. In this Post, I will try to summarize some of the key elements that I have found over the years to be really helpful. So here are some tips and tricks that will get you started on How to customize WordPress Theme Avada.

Do You need a Child Theme for Your Customization?

You will need to know the requirement for sure. Then analyze the requirement and figure out if there is any necessary theme modification that is needed? If you are using any custom Page Templates, creating a new Unsupported header style or change the Post page then chances are you are going to need a Child Theme. If at any point while working on your site you realize that any file (belonging to the theme) excluding the css needs a modification then you will require a Child Theme. Mostly its the functions.php that you will need to overwrite because most modifications can be done by implementing action hook that the theme exposes.

If your changes only require style modifications, making things invisible, padding changes, margins, fonts , color and the list goes on … then you will be able to achieve this without a Child Theme with Custom CSS. For this article I will focus on the customization that would require Child Themes.

How to Create a Child Theme?

It is very simple to create a Child Theme. Basically what you want to do is to create a folder in the same directory as the Parent Installed Theme and then create a styles.css and a functions.php inside of that folder. The Styles.css for the child theme should import the styles.css of the parent theme like:

@import url("../twentythirteen/style.css");

But the more simple way is to simply download it from your ThemeForest.net Account. Instead of simply downloading the installable WordPress file, download the whole package and find the “AVADA_Child_Theme” directory that you can directly upload to your theme directory. You can activate the AVADA_Child_Theme once it is uploaded to the themes directory.

What to do after Child Theme is Installed?

One way to add your changes to the Child Theme is by overwriting the files from the Parent theme’s directory. Lets say you want to modify the header.php and add a new div at the top, you can simply copy the header.php from Avada folder to the Avada_Child_Theme’s folder and then make your modification but this is not the way that I Would recommend to make the changes. Instead I would suggest taking an approach to figure out what are the actions and hooks available for you to use.

Action Hooks that can be defined in my own php functions:

You can find a list of available hooks and filters here. Of Course this can change when new versions of the theme are released but generally it will not be changed unless there is a very strong reason to do so. Theme Fusion will not want to make a lot of users unhappy by doing that. Also note that I am not suggesting to do this for simple tasks like adding a “Google Analytics” tag in the header or adding some javascript file in the head section. They have Theme Options for that. Here are some of the best ones that I have had a lot of success with:

avada_before_header_wrapper
avada_header
avada_after_header_wrapper
avada_before_body_content
avada_logo_prepend
avada_after_content
avada_after_main_content

Since most of the customization requested will be in this area this list gives me a great starting point but I would explore the other filters and hooks if my customization is outside of this list.

How do implement these hooks?

The hooks exposed by the theme are just like placeholders that they have created to make the theme easy to customize. You simply define them in the Child Theme’s functions.php. An example is below:


dd_action( 'avada_before_header_wrapper', 'avada_add_banner' );
function avada_add_banner() {
echo 'html to add a new div or img here ...';
}

The code here simply ads a banner after the header wrapper is output. In other words, makes it easier for you to create a new header style by adding an image to the header. This is not a theme feature but a WordPress way to make things easy to customize. I suggest you read through the list of actions and filters available and also look at the theme’s code to figure out how to best use them to create your custom elements.

We offer and love all kinds of WordPress Customization at a affordable rate. Contact us here and get started with your next project. IDesignSmart is a premium WordPress Web Development company of Atlanta providing all essential WordPress Services from simple installations to complex plugins.

By |2016-11-26T06:01:03+00:00November 26th, 2016|Blog|0 Comments