To enqueue a CSS file on Avada Builder back end use fusion_builder_admin_scripts_hook action hook.
This action hook is fired on Avada Builder initialization and is used to enqueue javascripts and styles on the backend.
Copy to Clipboardfunction my_function() {
wp_enqueue_style( 'my-style','css/my-style.js', array( 'jquery' ), '1.0', true );
}
add_action( 'fusion_builder_admin_scripts_hook', 'my_function' ); 1function my_function() {2 wp_enqueue_style( 'my-style','css/my-style.js', array( 'jquery' ), '1.0', true );3}4add_action( 'fusion_builder_admin_scripts_hook', 'my_function' );
Disable Avada Builder Elements
To disable any Avada Builder Element you can use fusion_builder_all_elements filter.
This filter is applied to all registered elements before they are added to Avada Builder Library. Useful for removing or adding elements to the library.
Copy to Clipboardfunction filter_function_name( $elements ) {
// Process $elements here
return $elements;
}
add_filter( 'fusion_builder_all_elements', 'filter_function_name' );x 1function filter_function_name( $elements ) {2 // Process $elements here34 return $elements;5}6add_filter( 'fusion_builder_all_elements', 'filter_function_name' );
Add preview template for my Avada Builder element
To add a custom preview template to your Avada Builder element, you first have to register your shortcode as usual. You can then add your element shortcodes to the Avada Builder as new elements via this helper function: fusion_builder_map()
In the example below you can see a custom preview template being registered. Template is registered by providing preview and preview_id attributes to the
fusion_builder_map() function.
Copy to Clipboardfunction my_fusion_element() {
fusion_builder_map( array(
'name' => esc_attr__( 'Pricing Table', 'fusion-builder' ),
'shortcode' => 'fusion_pricing_table',
'preview' => FUSION_BUILDER_PLUGIN_DIR . 'inc/templates/previews/fusion-pricing-table-preview.php',
'preview_id' => 'pricing-table-preview-template',
'params' => array(
array(
'type' => 'tinymce',
'heading' => esc_attr__( 'Content', 'fusion-builder' ),
'description' => esc_attr__( 'Enter some content for this contentbox.', 'fusion-builder' ),
'param_name' => 'element_content',
'value' => 'Default value',
),
),
) );
}
add_action( 'fusion_builder_before_init', 'my_fusion_element' );
x 1function my_fusion_element() {2 fusion_builder_map( array(3 'name' => esc_attr__( 'Pricing Table', 'fusion-builder' ),4 'shortcode' => 'fusion_pricing_table',5 'preview' => FUSION_BUILDER_PLUGIN_DIR . 'inc/templates/previews/fusion-pricing-table-preview.php',6 'preview_id' => 'pricing-table-preview-template',7 'params' => array(8 array(9 'type' => 'tinymce',10 'heading' => esc_attr__( 'Content', 'fusion-builder' ),11 'description' => esc_attr__( 'Enter some content for this contentbox.', 'fusion-builder' ),12 'param_name' => 'element_content',13 'value' => 'Default value',14 ),15 ),16 ) );17}18add_action( 'fusion_builder_before_init', 'my_fusion_element' );1920
Add new settings to Options Panel
To add your element settings to Element Options Panel, you need to use the filter to create your options class that extends to the Fusion_Element class, which will be available in the filter. So, you can add the filter like this:
Copy to Clipboardfunction fusion_init_sample_options() {
require_once 'options/sample-options.php';
}
add_action( 'fusion_builder_shortcodes_init', 'fusion_init_sample_options' );x 1function fusion_init_sample_options() {2 require_once 'options/sample-options.php';3}45add_action( 'fusion_builder_shortcodes_init', 'fusion_init_sample_options' );This will require you to add another file in the options folder named sample-options.php. In which, you need to check for the class Fusion_Element and create your new class for options and inherit it to the Fusion_Element class.
Once you are done with the class creation, just add a new function add_options() to the class, which will be used to add your options to the Options Panel by the Fusion_Element class automatically, like below –
The example is a complete class that will add the Sample Element settings to the options panel.
Copy to Clipboardif ( class_exists( 'Fusion_Element' ) ) {
class SampleElementOptions extends Fusion_Element {
public function __construct() {
parent::__construct();
}
public function add_options() {
return array(
'sample_shortcode_section' => array(
'label' => esc_html__( 'Sample Element', 'fusion-builder' ),
'description' => '',
'id' => 'sample_shortcode_section',
'type' => 'sub-section',
'fields' => array(
'sample_dates_box_color' => array(
'label' => esc_html__( 'Sample Color Picker', 'fusion-builder' ),
'description' => esc_html__( 'This is just an example of color picker setting field.', 'fusion-builder' ),
'id' => 'sample_dates_box_color',
'default' => '#eef0f2',
'type' => 'color-alpha',
),
'dropdown_field' => array(
'label' => esc_html__( 'Sample Dropdown Field', 'fusion-builder' ),
'description' => esc_html__( 'This is just an example of drpdown setting field.', 'fusion-builder' ),
'id' => 'dropdown_field',
'default' => '1',
'type' => 'select',
'choices' => array(
'1' => esc_html__( 'Option 1', 'fusion-builder' ),
'2' => esc_html__( 'Option 2 with "Quotes"', 'fusion-builder' ),
'3' => esc_html__( 'Option 3', 'fusion-builder' ),
),
),
),
),
);
}
}
new SampleElementOptions;
}xxxxxxxxxx43 1if ( class_exists( 'Fusion_Element' ) ) {2 class SampleElementOptions extends Fusion_Element {3 public function __construct() {4 parent::__construct();5 }67 public function add_options() {8 return array(9 'sample_shortcode_section' => array(10 'label' => esc_html__( 'Sample Element', 'fusion-builder' ),11 'description' => '',12 'id' => 'sample_shortcode_section',13 'type' => 'sub-section',14 'fields' => array(15 'sample_dates_box_color' => array(16 'label' => esc_html__( 'Sample Color Picker', 'fusion-builder' ),17 'description' => esc_html__( 'This is just an example of color picker setting field.', 'fusion-builder' ),18 'id' => 'sample_dates_box_color',19 'default' => '#eef0f2',20 'type' => 'color-alpha',21 ),2223 'dropdown_field' => array(24 'label' => esc_html__( 'Sample Dropdown Field', 'fusion-builder' ),25 'description' => esc_html__( 'This is just an example of drpdown setting field.', 'fusion-builder' ),26 'id' => 'dropdown_field',27 'default' => '1',28 'type' => 'select',29 'choices' => array(30 '1' => esc_html__( 'Option 1', 'fusion-builder' ),31 '2' => esc_html__( 'Option 2 with "Quotes"', 'fusion-builder' ),32 '3' => esc_html__( 'Option 3', 'fusion-builder' ),33 ),34 ),35 ),36 ),37 );38 }39 }4041 new SampleElementOptions;4243}You can use the Sample Addon we created for better understanding of the implementation of options.
Option CorrelationsAfter adding your setting to the options panel, you can also take advantage of the option correlations. This means when you edit the element in the builder, the current default value is displayed along with a link to that setting in the options panel. To do this, you can use a filter from your element class.
For example, the construct function would become:
Copy to Clipboard public function __construct() {
parent::__construct();
add_filter( 'fusion_builder_map_descriptions', array( $this, 'add_option_description' ) );
}xxxxxxxxxx4 1 public function __construct() {2 parent::__construct();3 add_filter( 'fusion_builder_map_descriptions', array( $this, 'add_option_description' ) );4}and then a new function added below that:
Copy to Clipboardpublic function add_option_description( $shortcode_option_map ) {
$shortcode_option_map['portfolio_layout_padding']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_layout_padding', 'subset' => array( 'top', 'right', 'bottom', 'left' ) );
$shortcode_option_map['picture_size']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_featured_image_size', 'type' => 'select' );
$shortcode_option_map['boxed_text']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_text_layout', 'type' => 'select' );
$shortcode_option_map['portfolio_text_alignment']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_text_alignment', 'type' => 'select' );
$shortcode_option_map['column_spacing']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_column_spacing', 'type' => 'range' );
$shortcode_option_map['number_posts']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_items', 'type' => 'range' );
$shortcode_option_map['pagination_type']['fusion_portfolio'] = array( 'theme-option' => 'grid_pagination_type', 'type' => 'select' );
$shortcode_option_map['content_length']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_content_length', 'type' => 'select' );
$shortcode_option_map['excerpt_length']['fusion_portfolio'] = array( 'theme-option' => 'excerpt_length_portfolio', 'type' => 'range' );
$shortcode_option_map['portfolio_title_display']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_title_display', 'type' => 'select' );
$shortcode_option_map['strip_html']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_strip_html_excerpt', 'type' => 'yesno' );
return $shortcode_option_map;
}xxxxxxxxxx16 1public function add_option_description( $shortcode_option_map ) {23 $shortcode_option_map['portfolio_layout_padding']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_layout_padding', 'subset' => array( 'top', 'right', 'bottom', 'left' ) );4 $shortcode_option_map['picture_size']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_featured_image_size', 'type' => 'select' );5 $shortcode_option_map['boxed_text']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_text_layout', 'type' => 'select' );6 $shortcode_option_map['portfolio_text_alignment']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_text_alignment', 'type' => 'select' );7 $shortcode_option_map['column_spacing']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_column_spacing', 'type' => 'range' );8 $shortcode_option_map['number_posts']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_items', 'type' => 'range' );9 $shortcode_option_map['pagination_type']['fusion_portfolio'] = array( 'theme-option' => 'grid_pagination_type', 'type' => 'select' );10 $shortcode_option_map['content_length']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_content_length', 'type' => 'select' );11 $shortcode_option_map['excerpt_length']['fusion_portfolio'] = array( 'theme-option' => 'excerpt_length_portfolio', 'type' => 'range' );12 $shortcode_option_map['portfolio_title_display']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_title_display', 'type' => 'select' );13 $shortcode_option_map['strip_html']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_strip_html_excerpt', 'type' => 'yesno' );1415 return $shortcode_option_map;16}The format for each is like so:
Copy to Clipboard$shortcode_option_map[ param_name ][ shortcode ] = array( 'theme-option' => option_id );xxxxxxxxxx1 1$shortcode_option_map[ param_name ][ shortcode ] = array( 'theme-option' => option_id );
param_name = param_name of option in element.
shortcode = shortcode name as defined in your element class.option_id = ID of the setting being added to the options panel.There are also optional attributes which can be set in addition to theme-option:
subset – If the setting being added to the options panel contains multiple values, for example dimension values.type = The type of setting being added. This changes the format of the description text.reset = Adds the ability to reset the value in element. This is used for color and range types.For a better understanding of the available options, please check the get_default_description function within class-fusion-settings.php
Add a new multi element ( nested shortcode ) to Avada Builder
To add a new multi-element to Avada Builder you have to register your shortcodes as usual. Add them to Avada Builder as new elements via available helper function below.
fusion_builder_map()
In the example below, you can see a multi-element being registered. fusion_checklist shortcode is registered as a parent by providing multi and element_child attributes to
fusion_builder_map() function.
Copy to Clipboardfunction fusion_element_parent() {
fusion_builder_map( array(
'name' => esc_attr__( 'Checklist', 'fusion-builder' ),
'shortcode' => 'fusion_checklist',
'multi' => 'multi_element_parent',
'element_child' => 'fusion_li_item',
'params' => array(
array(
'type' => 'tinymce',
'heading' => esc_attr__( 'Content', 'fusion-builder' ),
'description' => esc_attr__( 'Enter some content for this contentbox.', 'fusion-builder' ),
'param_name' => 'element_content',
'value' => 'Default value',
),
),
) );
}
add_action( 'fusion_builder_before_init', 'fusion_element_parent' );
function fusion_element_child() {
fusion_builder_map( array(
'name' => esc_attr__( 'List Item', 'fusion-builder' ),
'description' => esc_attr__( 'Enter some content for this textblock', 'fusion-builder' ),
'shortcode' => 'fusion_li_item',
'hide_from_builder' => true,
'params' => array(
array(
'type' => 'tinymce',
'heading' => esc_attr__( 'List Item Content', 'fusion-builder' ),
'description' => esc_attr__( 'Add list item content.', 'fusion-builder' ),
'param_name' => 'element_content',
'value' => 'Default value',
'placeholder' => true,
),
),
) );
}
add_action( 'fusion_builder_before_init', 'fusion_element_child' );x 1function fusion_element_parent() {2 fusion_builder_map( array(3 'name' => esc_attr__( 'Checklist', 'fusion-builder' ),4 'shortcode' => 'fusion_checklist',5 'multi' => 'multi_element_parent',6 'element_child' => 'fusion_li_item',7 'params' => array(8 array(9 'type' => 'tinymce',10 'heading' => esc_attr__( 'Content', 'fusion-builder' ),11 'description' => esc_attr__( 'Enter some content for this contentbox.', 'fusion-builder' ),12 'param_name' => 'element_content',13 'value' => 'Default value',14 ),15 ),16 ) );17}18add_action( 'fusion_builder_before_init', 'fusion_element_parent' );192021function fusion_element_child() {22 fusion_builder_map( array(23 'name' => esc_attr__( 'List Item', 'fusion-builder' ),24 'description' => esc_attr__( 'Enter some content for this textblock', 'fusion-builder' ),25 'shortcode' => 'fusion_li_item',26 'hide_from_builder' => true,27 'params' => array(28 array(29 'type' => 'tinymce',30 'heading' => esc_attr__( 'List Item Content', 'fusion-builder' ),31 'description' => esc_attr__( 'Add list item content.', 'fusion-builder' ),32 'param_name' => 'element_content',33 'value' => 'Default value',34 'placeholder' => true,35 ),36 ),37 ) );38}39add_action( 'fusion_builder_before_init', 'fusion_element_child' );
Add a new element to Avada shortcode generator
To add a new element to Avada shortcode generator you have to register a new shortcode as usual. Add it to Avada shortcode generator via available helper function below.
This element is registered as a shortcode generator element by providing generator_only attribute to
fusion_builder_map() function.
Copy to Clipboardfunction add_my_generator_element() {
fusion_builder_map(
array(
'name' => esc_attr__( 'My element', 'fusion-builder' ),
'shortcode' => 'my_generator_element',
'icon' => 'fusiona-font',
'generator_only' => true,
'params' => array(
array(
'type' => 'tinymce',
'heading' => esc_attr__( 'Content', 'fusion-builder' ),
'description' => esc_attr__( 'Enter description', 'fusion-builder' ),
'param_name' => 'element_content',
'value' => esc_attr__( 'Default value', 'fusion-builder' ),
),
),
)
);
}
add_action( 'fusion_builder_before_init', 'add_my_generator_element' );x 1function add_my_generator_element() {23fusion_builder_map( 4 array(5 'name' => esc_attr__( 'My element', 'fusion-builder' ),6 'shortcode' => 'my_generator_element',7 'icon' => 'fusiona-font',8 'generator_only' => true,9 'params' => array(10 array(11 'type' => 'tinymce',12 'heading' => esc_attr__( 'Content', 'fusion-builder' ),13 'description' => esc_attr__( 'Enter description', 'fusion-builder' ),14 'param_name' => 'element_content',15 'value' => esc_attr__( 'Default value', 'fusion-builder' ),16 ),17 ),18 ) 19);20}21add_action( 'fusion_builder_before_init', 'add_my_generator_element' );
Add a new element to Avada Builder
To add a new element to Avada Builder you have to register a new shortcode as usual. Add it to Avada Builder as a new element via available helper function below.
fusion_builder_map()
Copy to Clipboardfunction fusion_element_text() {
fusion_builder_map(
array(
'name' => esc_attr__( 'Text Block', 'fusion-builder' ),
'shortcode' => 'fusion_text',
'icon' => 'fusiona-font',
'preview' => PLUGIN_DIR . 'js/previews/fusion-text-preview.php',
'preview_id' => 'fusion-builder-block-module-text-preview-template',
'allow_generator' => true,
'params' => array(
array(
'type' => 'tinymce',
'heading' => esc_attr__( 'Content', 'fusion-builder' ),
'description' => esc_attr__( 'Enter some content for this textblock.', 'fusion-builder' ),
'param_name' => 'element_content',
'value' => esc_attr__( 'Click edit button to change this text.', 'fusion-builder' ),
),
),
)
);
}
add_action( 'fusion_builder_before_init', 'fusion_element_text' );x 1function fusion_element_text() {23fusion_builder_map( 4 array(5 'name' => esc_attr__( 'Text Block', 'fusion-builder' ),6 'shortcode' => 'fusion_text',7 'icon' => 'fusiona-font',8 'preview' => PLUGIN_DIR . 'js/previews/fusion-text-preview.php',9 'preview_id' => 'fusion-builder-block-module-text-preview-template',10 'allow_generator' => true,11 'params' => array(12 array(13 'type' => 'tinymce',14 'heading' => esc_attr__( 'Content', 'fusion-builder' ),15 'description' => esc_attr__( 'Enter some content for this textblock.', 'fusion-builder' ),16 'param_name' => 'element_content',17 'value' => esc_attr__( 'Click edit button to change this text.', 'fusion-builder' ),18 ),19 ),20 ) 21);22}23add_action( 'fusion_builder_before_init', 'fusion_element_text' );
Add a new demo to Avada Builder Library
To add a new demo to Avada Builder library add fusion_builder_get_demo_pages filter to your theme or plugin.
Applied to Avada Builder demos library. Useful for removing or adding demos to the library.
Copy to Clipboardfunction fusion_builder_add_my_demo( $demos ) {
$demos['my_demo'] = array (
'category' => 'My Demo',
'pages' => array (
array (
'name' => 'Homepage',
'page_template' => 'default',
'content' => 'Page Content Goes Here',
),
array (
'name' => 'About',
'page_template' => 'default',
'content' => 'Page Content Goes Here',
),
),
);
return $demos;
}
add_filter( 'fusion_builder_get_demo_pages', 'fusion_builder_add_my_demo' );x 1function fusion_builder_add_my_demo( $demos ) {23$demos['my_demo'] = array (4 'category' => 'My Demo',5 'pages' => array (6 array (7 'name' => 'Homepage',8 'page_template' => 'default',9 'content' => 'Page Content Goes Here',10 ),11 array (12 'name' => 'About',13 'page_template' => 'default',14 'content' => 'Page Content Goes Here',15 ),16 ),17);1819return $demos;2021}2223add_filter( 'fusion_builder_get_demo_pages', 'fusion_builder_add_my_demo' );
Add a new option to Avada Dynamic Content Options
To add a new option to Avada Dynamic Content Options, you can use fusion_set_dynamic_params filter in your child theme or plugin. This filter is useful for removing or adding options. Here is some sample code.
Copy to Clipboardfunction custom_dynamic_param( $params ) {
$params['param_id'] = [
'label' => esc_html__( 'Param Label', 'fusion-builder' ),
'id' => 'param_id',
'group' => esc_attr__( 'Param Group', 'fusion-builder' ),
'default' => 'Default Value'
'options' => [ 'textfield', 'textarea', 'tinymce', 'raw_textarea' ],
'callback' => [
'function' => 'get_custom_dynamic_param',
'ajax' => true,
],
];
return $params;
}
add_filter( 'fusion_set_dynamic_params', 'custom_dynamic_param' );
// Callback method to get dynamic option value.
function get_custom_dynamic_param( $args ) {
return 'Custom Param Value';
}x 1function custom_dynamic_param( $params ) {2 $params['param_id'] = [3 'label' => esc_html__( 'Param Label', 'fusion-builder' ),4 'id' => 'param_id',5 'group' => esc_attr__( 'Param Group', 'fusion-builder' ),6 'default' => 'Default Value'7 'options' => [ 'textfield', 'textarea', 'tinymce', 'raw_textarea' ],8 'callback' => [9 'function' => 'get_custom_dynamic_param',10 'ajax' => true,11 ],12 ];13 return $params;14}1516add_filter( 'fusion_set_dynamic_params', 'custom_dynamic_param' );1718// Callback method to get dynamic option value.19function get_custom_dynamic_param( $args ) {20 return 'Custom Param Value';21}Each option can have the following arguments.
label = Label which is displayed in options dropdown.id = Unique option ID.group = This is used to group similar content types.default = The default value of option.options = An array of Avada Builder input option names where this dynamic content can be used.callback = An array containing callback method name and bool ajax flagfields = Optional array of additional data fields.For a better understanding of the available options, please check the set_params function within fusion-builder/inc/class-fusion-dynamic-data.php
Related Posts
Related Posts are Blog Posts which appear below each post on the single post page. The related posts that you will see are associated with the active post by way of category. It is a quick and easy way to show your viewers related articles and engage your readers. You can choose to activate it globally in the Fusion Theme Options, or control it individually per post, using the Fusion Page Options. Continue reading below to learn more about Related Posts and its available options.
How To Display Related Posts GloballyStep 1 – Navigate to WP Dashboard > Avada > Theme Options > Blog > Blog Single Post > Related Posts
Step 2 – Choose On to enable or Off to disable.
Step 3 – Click 『Save Changes』
How To Display Related Posts Per Post OnlyStep 1 – Edit any post and go to Fusion Page Options > Post > Show Related Posts – below the content editor.
Step 2 – Set the 『Show Related Posts』 option to Default, Show, or Hide. The Default setting will keep the Fusion Theme Option global setting. Show or Hide will override the Fusion Theme Option global setting for that post.
Step 3 – Click 『Update』
Related Posts OptionsYou can manage the Related Posts options here WP Dashboard > Avada > Theme Options > Extra > Related Posts/Projects. These options also affect the Related Projects for Portfolio Posts. Continue reading below to learn more.
IMPORTANT NOTE
These options are global only and affect Blog posts and Portfolio posts alike.
Related Posts / Projects Layout – Controls the layout of the related posts/projects title text. Choose from title on rollover, or title below image to control where the titles are placed.
Number of Related Posts / Projects – Controls how many related posts/projects are displayed on each single portfolio or blog post. Accepts a numerical value. For example, 5.
Related Posts / Projects Maximum Columns – Controls how many columns are displayed. Choose from 1 to 6.
Related Posts / Projects Columns Spacing – IControls the amount of spacing between items. Accepts a numerical value. For example, 5.
Related Posts / Projects Image Size – Controls how your images are displayed. Choose between fixed, which will crop the image, or auto, which will display it at the original image ratio (not original image size).
Related Posts / Projects Autoplay – Allows you to turn the autoplay feature on the carousel On or Off.
Related Posts / Projects Speed – Controls the speed of related posts and projects carousel. Accepts a numerical value. For example, 1000. 1000 is equal to 1 second.
Related Posts / Projects Show Navigation – Allows you to turn the navigation buttons on the carousel On or Off.
Related Posts / Projects Mouse Scroll – Allows you to turn the mouse drag control feature on the carousel On or Off. When this is On, the links on posts will be disabled.
Related Posts / Projects Scroll Items – Allows you to control the number of items that scroll at one time. Accepts a numerical value. For example, 5. Set to O to scroll the number of visible items.