Enfold Theme – Hiding Advanced Layout Element Buttons

Introduction

The Enfold Theme is an inexpensive and powerful WordPress theme that is in wide use around the globe. Built into Enfold are things like an advanced layout editor and the ability to create page templates, etc. Of all the WordPress websites I’ve helped build or manage over the years, it is the most powerful theme I’ve run into. However, it is not without its downsides, as to pack so much awesome-ness into a theme means that the functionality is pulled out of what would be the responsibility of a WordPress plugin, and put into the theme itself.

This is bad on two fronts:

1-If you ever decide to leave the Enfold ecosystem, you will are in for a tougher battle than when migrating from other themes.
2-Enfold keeps a lot of things “close to the chest” — for example, their Avia Advanced Layout Builder is great for making page templates, but the code for saved templates exists nowhere as a flat file, it simply resides within your mySQL database, making it a bit of a pain to manage when switching themes.

Not to mention the fact that between versions of Enfold the authors make subtle changes to CSS or the parent theme that filter down and adversely affect the functionality of the site even when child themes are in use.

Author Note: jgomez.net is built on the Graphy Theme, not Enfold.

But I digress. On to the original point of this page.

Advanced Layout Editor

The advanced layout editor is seen below. This editor is used to bring in powerful objects like post sliders, content sliders, etc, which really enhance the look and feel of your site.

avia layout builder

However, you may want to hide many of these elements for the sake of enforcing a particular look and feel of your website — especially if your website is large and will have a lot ofcontributors. You don’t want Mr. Bob from accounting adding animated countdowns and other silly things to the website you worked so hard to develop, do you? In the screenshot above, I’ve actually hidden the “Animated Numbers” and “Animated Countdown” buttons using the code from the next section.

Modify the functions.php file

The functions.php file is a template used by WordPress themes. It acts like a plugin and gets automatically loaded in both admin and front-end pages of a WordPress site. Usually this file is used to define functions, classes, actions and filters to be used by other templates in the theme.

In most cases, you will have a child theme, and as a result a child functions.php. If you are not, you need to seriously reconsider the strategy behind your website deployment. A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme, as changes to the parent theme are common between versions, and changes that are committed at the child-theme level persist through versions, for the most part.

For me, the child functions.php was here:
/wp-content/themes/enfold-child/functions.php

The code I appended to the bottom of the functions.php was this:

// This hides elements from the avia shortcode builder


add_action( 'admin_print_styles', 'enfold_customization_admin' );

function enfold_customization_admin() {

    echo '<style type = "text/css">';

    echo 'a[href="#avia_sc_animated_numbers"] { display: none; }';

    echo 'a[href="#avia_sc_countdown"] { display: none; }';

    echo '</style>';

}

In a nutshell, this injects CSS into the resulting Advanced Layout Page, and hides the particular buttons referenced by the #avia_sc_animated_numbers and #avia_sc_countdown links which were the “Animated Countdown” and “Animated Numbers” buttons.

To hide other items, you would simply have to add the appropriate item to the functions.php file.

As an example, if you wanted to hide the “Code Block” button only, then your code would look like this:

// This hides elements from the avia shortcode builder


add_action( 'admin_print_styles', 'enfold_customization_admin' );

function enfold_customization_admin() {

    echo '<style type = "text/css">';

    echo 'a[href="#avia_sc_codeblock"] { display: none; }';

    echo '</style>';

}

Its simply a matter of examining the page source and doing a find to determine which elements you want to hide and adding theme to the child functions.php file.

Hope this helps.

Author Note: Always remember to back up your functions.php file, as a simple mistake here can prevent the website from loading entirely.

Leave a Comment

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