Excellira

  • About Us
    • About Us
    • Technology
    • Our Process
  • Services
    • Agency Solutions
    • Drupal Development
    • WordPress Development
    • Custom Applications
    • PHP/MySQL Development
    • Responsive Design
    • eCommerce Development
    • CMS & Content Migration
    • Website Maintenance
  • Our Work
  • Blog
  • Connect With Us
  • About Us
    • About Us
    • Technology
    • Our Process
  • Services
    • Agency Solutions
    • Drupal Development
    • WordPress Development
    • Custom Applications
    • PHP/MySQL Development
    • Responsive Design
    • eCommerce Development
    • CMS & Content Migration
    • Website Maintenance
  • Our Work
  • Blog
  • Connect With Us
You are here: Home / Wordpress / Themes / Enfold / Add Custom Element in Enfold Avia Layout Builder

Add Custom Element in Enfold Avia Layout Builder

June 29, 2015 by Greg Hill

We’re using Enfold for a specific project to enable less technically minded staff the ability to tackle more of the site management. We also wanted to add an body-area element that would be used on many or most pages and we wanted to do so without causing the end-user to tap into HTML or CSS. We just want to have them drag and drop the element into the page or post and have it styled a specific way.

Enfold’s Avia Layout Builder provides a great tool to accomplish this with.

So…

  1. Go to /wp-content/themes/enfold/config-templatebuilder/avia-shortcodes/
  2. In that directory will be individual PHP files respective to the elements available in the Avia Layout Builder.
  3. Copy an existing element (php file), perhaps the one most similar to the desired end result, and rename it to a name of your choice. In this example, we’ll be modifying the Special Heading Content Element file heading.php.
  4. Changes to the file:
    1. At the top of the file, be certain to change the class name. For example, rename the bolded portion below:
    2. if ( !class_exists( ‘avia_sc_heading’ ) )
      and
      class avia_sc_heading extends aviaShortcodeTemplate{
    3. While in the class array:
      1. Change the name:
        $this->config[‘name’] = __(‘Special Heading‘,
      2. Change the icon image if you’re so inclined (you’ll need to create a new icon if so):
        AviaBuilder::$path[‘imagesURL’].”sc-heading.png“;
      3. Change the order. This adjusts the order of the icons that appear in the elements tab. 100 is the top of the list. 99 would place the element in the second position, etc.:
        $this->config[‘order’] = 93;
      4. Change the shortcode name:
        $this->config[‘shortcode’] = ‘av_heading‘;
      5. Change the tooltip to a description that better describes the new functionality:
        $this->config[‘tooltip’] = __(‘Creates a special Heading’, ‘avia_framework’ );
      6. Change the arrays. You’ll find a number of references to “Heading Text” and “heading” which you’ll want to change to the new name and title of the element.
      7. Find the “//html markup” section comment in the file and change the CSS classes to suit your needs. Enables custom styling of an element type so that you don’t have to restyle over and over or force the user to add DIVs and classes every time they want to add this element.
    4. Test
      1. Refresh or go to Pages or Posts and edit or add content, choose layout builder and see if the new element exists. If so,
      2. Add a new element that you’ve created to the page and test that it works.
      3. Add CSS to suit.
    5. Done

Filed Under: Enfold, Themes, Wordpress

Our Location

Excellira is located in historic Concord, Massachusetts and has served clients in the USA and around the Globe including Boston, Chicago, London, Los Angeles, and Rio de Janeiro.

Start A Project

To paraphrase Lao-tzu: A journey begins with a single step. Our first step is a simple chat.

Call us at +1 978.287.0010 or contact us today and let's see if we should travel together.

Connect With Us

  • LinkedIn
  • Twitter
  • Drupal Development
  • WordPress Development
  • Custom Applications
  • eCommerce Development
  • Agency Solutions

© Copyright 2015 Excellira, LLC