Below, you’ll find a detailed guide on how to add the Fusion Page Builder Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Fusion Page Builder Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Fusion Page Builder Plugin and the shortcodes it provides:
"Fusion Page Builder is a versatile WordPress plugin that simplifies website creation. With its user-friendly interface, it empowers users to design and customize pages effortlessly."
- [fsn_row]
- [fsn_column]
- [fsn_custom_list_item]
- [fusion_plugin]
- [fsn_tabs]
- [fsn_tab]
- [fsn_code]
- [fsn_component]
- [fsn_text]
Fusion Page Builder [fsn_row] Shortcode
The Fusion Plugin shortcode, ‘fsn_row’, is designed to create a flexible row structure within your WordPress content. It allows customization of row style, function, width, background image, and more. This shortcode provides comprehensive control over the layout and design of your rows, including seamless rows and mobile background visibility. It also includes AJAX support for dynamic content loading. Additionally, it offers row control options like edit, duplicate, move, and delete, providing a user-friendly interface for managing your content layout. The ‘fsn_row’ shortcode is an essential tool for creating responsive and visually appealing WordPress sites.
Shortcode: [fsn_row]
Parameters
Here is a list of all possible fsn_row shortcode parameters and attributes:
row_style– Determines the style of the row, default value is ‘light’.row_function– Defines a specific function for the row.row_width– Sets the width of the row, default value is ‘container’.seamless– If set, the row will have no margins or padding.background_image– Sets a background image for the row.background_repeat– Controls if the background image should repeat, default is ‘repeat’.background_position– Sets the position of the background image, default is ‘left top’.background_position_custom– Allows for a custom position of the background image.background_attachment– Defines if the background image should scroll, default is ‘scroll’.background_size– Controls the size of the background image, default is ‘auto’.background_image_xs– Determines if the background image should show on extra small screens, default is ‘show’.id– Unique identifier for the row, used for linking or styling purposes.
Examples and Usage
Basic example – Display a row with default parameters
[fsn_row /]The above shortcode will display a row with default parameters. The row style will be light, row width will be container, background image will not be displayed, and the row will not be seamless.
Advanced examples
Display a row with a custom style, width, and background image.
[fsn_row row_style="dark" row_width="full-width" background_image="5" /]In this example, the row style is set to dark, the row width is set to full-width, and the background image with the ID 5 is displayed.
Display a seamless row with a custom function and ID.
[fsn_row row_function="custom-function" seamless="yes" id="custom-row" /]This example displays a seamless row with a custom function named “custom-function”. The row is also given an ID of “custom-row”, which can be used for CSS styling or JavaScript targeting.
PHP Function Code
In case you have difficulties debugging what causing issues with [fsn_row] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('fsn_row', array($this, 'row_shortcode'));Shortcode PHP function:
function row_shortcode($atts, $content = null) {
extract( shortcode_atts( array(
'row_style' => 'light',
'row_function' => '',
'row_width' => 'container',
'seamless' => '',
'background_image' => '',
'background_repeat' => 'repeat',
'background_position' => 'left top',
'background_position_custom' => '',
'background_attachment' => 'scroll',
'background_size' => 'auto',
'background_image_xs' => 'show',
'id' => false
), $atts ) );
//if running AJAX, get action being run
$ajax_action = false;
if (defined('DOING_AJAX') && DOING_AJAX) {
if (!empty($_POST['action'])) {
$ajax_action = sanitize_text_field($_POST['action']);
}
}
//build output
if ( is_admin() && (!defined('DOING_AJAX') || !DOING_AJAX || (!empty($ajax_action) && $ajax_action == 'load_template' || $ajax_action == 'components_modal')) ) {
$shortcode_atts_data = '';
if (!empty($atts)) {
foreach($atts as $key => $value) {
$att_name = str_replace('_','-', $key);
$shortcode_atts_data .= ' data-'. esc_attr($att_name) .'="'. esc_attr($value) .'"';
}
}
$output = '';
$output .= '<div class="row-container clearfix">';
$output .= '<div class="row-header">';
$output .= '<div class="row-controls">';
$output .= '<span class="row-controls-toggle" title="'. __('Row Options', 'fusion') .'"><i class="material-icons md-18"></i></span>';
$output .= '<div class="row-controls-dropdown collapsed">';
$output .= '<a href="#" class="edit-row">'. __('Edit', 'fusion') .'</a>';
$output .= '<a href="#" class="duplicate-row">'. __('Duplicate', 'fusion') .'</a>';
$output .= '<hr>';
$output .= '<a href="#" class="move-row" data-move="up">'. __('Move Up', 'fusion') .'</a>';
$output .= '<a href="#" class="move-row" data-move="down">'. __('Move Down', 'fusion') .'</a>';
$output .= '<a href="#" class="move-row" data-move="top">'. __('Move to Top', 'fusion') .'</a>';
$output .= '<a href="#" class="move-row" data-move="bottom">'. __('Move to Bottom', 'fusion') .'</a>';
$output .= '<hr>';
$output .= '<a href="#" class="delete-row">'. __('Delete', 'fusion') .'</a>';
$output .= '</div>';
$output .= '<a href="#" class="control-icon edit-row" title="'. __('Edit Row', 'function') .'"><i class="material-icons md-18"></i></a>';
$output .= '</div>';
$output .= '<a href="#" class="fsn-add-row" title="'. __('Add Row', 'fusion') .'"><i class="material-icons md-18"></i></a>';
$output .= '</div>';
$output .= '<div class="row-wrapper">';
$output .= '<div class="row"'. $shortcode_atts_data .'>'. do_shortcode($content) .'</div>';
$output .= '</div>';
$output .= '</div>';
} else {
//build style
$style = '';
//background image
if (!empty($background_image)) {
$image_attrs = wp_get_attachment_image_src($background_image, 'hi-res');
$style .= 'background-image:url('. $image_attrs[0] .');';
}
//background repeat
if (!empty($background_repeat)) {
$style .= 'background-repeat:'. $background_repeat .';';
}
//background position
if (!empty($background_position)) {
if ($background_position == 'custom' && !empty($background_position_custom)) {
$style .= 'background-position:'. $background_position_custom .';';
} else {
$style .= 'background-position:'. $background_position .';';
}
}
//background attachment
if (!empty($background_attachment)) {
$style .= 'background-attachment:'. $background_attachment .';';
}
//background size
if (!empty($background_size)) {
$style .= 'background-size:'. $background_size .';';
}
//filter for modifying style
$style = apply_filters('fsn_row_style', $style, $atts);
//build classes
$classes_array = array();
//row style
if (!empty($row_style)) {
$classes_array[] = $row_style;
}
//row function
if (!empty($row_function)) {
$classes_array[] = $row_function;
}
//seamless rows
if (!empty($seamless)) {
$classes_array[] = 'seamless';
}
//hide mobile background
if ($background_image_xs == 'hide') {
$classes_array[] = 'background-image-hidden-xs';
}
//filter for adding classes
$classes_array = apply_filters('fsn_row_classes', $classes_array, $atts);
if (!empty($classes_array)) {
$classes = implode(' ', $classes_array);
}
$output = '';
//open row container
if ($row_width == 'container') {
$output .= '<div '. (!empty($id) ? 'id="'. esc_attr($id) .'" ' : '') .'class="fsn-row full-width-row '. fsn_style_params_class($atts) . (!empty($classes) ? ' '. esc_attr($classes) : '') .'"'. (!empty($style) ? ' style="'. esc_attr($style) .'"' : '') .'>';
//action executed before the front-end row shortcode container output
ob_start();
do_action('fsn_before_row_container', $atts);
$output .= ob_get_clean();
//open fluid or defined container
$options = get_option('fsn_options');
if (empty($options['fsn_bootstrap_fluid'])) {
$output .= '<div class="container">';
} else {
$output .= '<div class="container-fluid">';
}
} elseif ($row_width == 'full-width') {
$output .= '<div '. (!empty($id) ? 'id="'. esc_attr($id) .'" ' : '') .' class="fsn-row full-width-container '. fsn_style_params_class($atts) . (!empty($classes) ? ' '. esc_attr($classes) : '') .'"'. (!empty($style) ? ' style="'. esc_attr($style) .'"' : '') .'>';
}
//action executed before the front-end row shortcode output
ob_start();
do_action('fsn_before_row', $atts);
$output .= ob_get_clean();
$output .= '<div class="row">'. do_shortcode($content) .'</div>';
//action executed after the front-end row shortcode output
ob_start();
do_action('fsn_after_row', $atts);
$output .= ob_get_clean();
//close row container
if ($row_width == 'container') {
$output .= '</div>'; //close container
//action executed after the front-end row shortcode container output
ob_start();
do_action('fsn_after_row_container', $atts);
$output .= ob_get_clean();
$output .= '</div>'; //close full width row
} elseif ($row_width == 'full-width') {
$output .= '</div>'; //close full width container
}
}
return $output;
}
Code file location:
fusion/fusion/fusion-core.phpFusion Page Builder [fsn_column] Shortcode
The Fusion plugin ‘fsn_column’ shortcode is primarily used to manage column layouts. It allows developers to specify column width, offset, and style. The ‘fsn_column’ shortcode is versatile, enabling customization of columns in both the admin and front-end views. It also includes AJAX support for dynamic content loading. The shortcode allows for column editing and deletion, further enhancing its flexibility. In front-end view, it applies styles and classes, allowing for a tailored user interface. It also executes actions before and after the column shortcode output, providing additional customization options. Overall, the ‘fsn_column’ shortcode is a powerful tool for managing column layouts in WordPress.
Shortcode: [fsn_column]
Parameters
Here is a list of all possible fsn_column shortcode parameters and attributes:
width– Specifies the width of the column, default is ’12’.offset– Optionally adds a left margin to the column.column_style– Sets the style of the column, default is ‘light’.
Examples and Usage
Basic example – Display a column with default width, offset and style
[fsn_column /]Advanced examples
Display a column with specified width, offset and style
[fsn_column width="6" offset="3" column_style="dark" /]Display a column with content and specified width
[fsn_column width="8"]Your content goes here[/fsn_column]Display a column with content, specified width, and offset
[fsn_column width="6" offset="3"]Your content goes here[/fsn_column]Display a column with content, specified width, offset, and style
[fsn_column width="4" offset="2" column_style="dark"]Your content goes here[/fsn_column]These examples demonstrate the flexibility of the ‘fsn_column’ shortcode. By adjusting the parameters, you can control the width, offset, and style of the column, as well as include your own content within the column.
PHP Function Code
In case you have difficulties debugging what causing issues with [fsn_column] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('fsn_column', array($this, 'column_shortcode'));Shortcode PHP function:
function column_shortcode($atts, $content = null) {
extract( shortcode_atts( array(
'width' => '12',
'offset' => false,
'column_style' => 'light'
), $atts ) );
//if running AJAX, get action being run
$ajax_action = false;
if (defined('DOING_AJAX') && DOING_AJAX) {
if (!empty($_POST['action'])) {
$ajax_action = sanitize_text_field($_POST['action']);
}
}
//build output
if ( is_admin() && (!defined('DOING_AJAX') || !DOING_AJAX || (!empty($ajax_action) && $ajax_action == 'load_template' || $ajax_action == 'components_modal')) ) {
$shortcode_atts_data = '';
if (!empty($atts)) {
foreach($atts as $key => $value) {
$att_name = str_replace('_','-', $key);
$shortcode_atts_data .= ' data-'. esc_attr($att_name) .'="'. esc_attr($value) .'"';
}
}
$output = '';
$output .= '<div class="col-sm-'. esc_attr($width) . (!empty($offset) ? ' col-sm-offset-'. esc_attr($offset) : '') .'"'. $shortcode_atts_data .'>';
$output .= '<div class="column-container clearfix">';
$output .= '<div class="column-header">';
$output .= '<div class="column-controls">';
$output .= '<span class="column-controls-toggle" title="'. __('Column Options', 'fusion') .'"><i class="material-icons md-18"></i></span>';
$output .= '<div class="column-controls-dropdown collapsed">';
$output .= '<a href="#" class="edit-col">'. __('Edit', 'fusion') .'</a>';
$output .= '<a href="#" class="delete-col">'. __('Delete', 'fusion') .'</a>';
$output .= '</div>';
$output .= '<a href="#" class="control-icon edit-col" title="'. __('Edit Column', 'fusion') .'"><i class="material-icons md-18"></i></a>';
$output .= '</div>';
$output .= '<h3 class="column-title"><span class="column-width">'. esc_attr($width) .'</span> / 12</h3>';
$output .= '</div>';
$output .= '<div class="column-wrapper">';
$output .= do_shortcode($content);
$output .= '</div>';
$output .= '<a href="#" class="fsn-add-element" data-container="column" title="'. __('Add Element', 'fusion') .'"><i class="material-icons md-18"></i></a>';
$output .= '</div>';
$output .= '</div>';
} else {
//build style
$style = '';
//filter for modifying style
$style = apply_filters('fsn_column_style', $style, $atts);
//build classes
$classes_array = array();
//column style
if (!empty($column_style)) {
$classes_array[] = $column_style;
}
//filter for adding classes
$classes_array = apply_filters('fsn_column_classes', $classes_array, $atts);
if (!empty($classes_array)) {
$classes = implode(' ', $classes_array);
}
$output = '';
//action executed before the front-end column shortcode output
ob_start();
do_action('fsn_before_column', $atts);
$output .= ob_get_clean();
$output .= '<div class="col-sm-'. esc_attr($width) . (!empty($offset) ? ' col-sm-offset-'. esc_attr($offset) : '') .'"><div class="fsn-column-inner '. fsn_style_params_class($atts) . (!empty($classes) ? ' '. esc_attr($classes) : '') .'"'. (!empty($style) ? ' style="'. esc_attr($style) .'"' : '') .'>'. do_shortcode($content) .'</div></div>';
//action executed after the front-end column shortcode output
ob_start();
do_action('fsn_after_column', $atts);
$output .= ob_get_clean();
}
return $output;
}
Code file location:
fusion/fusion/fusion-core.phpFusion Page Builder [fsn_custom_list_item] Shortcode
The Fusion Plugin shortcode ‘fsn_custom_list_item’ is used to create custom list items in WordPress. It allows for dynamic list creation and modification depending on the given parameters. This shortcode fetches list items using a unique identifier and decodes certain parameters. It also handles AJAX requests, providing flexibility for admin users. It allows for dependencies and includes options for removal and expansion of list items.
Shortcode: [fsn_custom_list_item]
Parameters
Here is a list of all possible fsn_custom_list_item shortcode parameters and attributes:
list_id– Identifier to link the list item with the associated listparam_name– Key for the parameter within the list itemencode_base64– If present, decodes the parameter value from base64encode_url– If present, decodes the parameter value from a URL encoded stringdependency– Defines if the parameter is dependent on other parameterscallback_function– Function to execute if not in admin or AJAX context
Examples and Usage
Basic example – A simple usage of the ‘fsn_custom_list_item’ shortcode would be to include it in a post or page with a specific list id. The shortcode will then render the custom list item associated with the provided list id.
[fsn_custom_list_item list_id=1 /]For more complex usage, you can use the shortcode with additional parameters. This could be useful when you want to manipulate the output based on certain conditions or values.
Advanced examples
Using the shortcode to display a custom list item with specific parameters. In this example, the shortcode will render the custom list item associated with the provided list id and parameters.
[fsn_custom_list_item list_id=1 param1="value1" param2="value2" /]Another advanced usage could be to use the shortcode with AJAX action. This could be useful when you want to load the custom list item dynamically without reloading the page.
[fsn_custom_list_item list_id=1 ajax_action="load_template" /]Note: Ensure to replace ‘param1’, ‘param2’, ‘value1’, ‘value2’ with actual parameter names and values that are defined in your custom list item. Similarly, replace ‘ajax_action’ and ‘load_template’ with the actual AJAX action and template you want to load.
PHP Function Code
In case you have difficulties debugging what causing issues with [fsn_custom_list_item] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('fsn_custom_list_item', array($this, 'custom_list_item_shortcode'));Shortcode PHP function:
function custom_list_item_shortcode( $atts, $content ) {
global $fsn_custom_lists;
$list_id = $atts['list_id'];
$parent_shortcode = $fsn_custom_lists[$list_id]['parent'];
//if running AJAX, get action being run
$ajax_action = false;
if (defined('DOING_AJAX') && DOING_AJAX) {
if (!empty($_POST['action'])) {
$ajax_action = sanitize_text_field($_POST['action']);
}
}
if ( is_admin() && (!defined('DOING_AJAX') || !DOING_AJAX || (!empty($ajax_action) && $ajax_action == 'load_template') || (!empty($ajax_action) && $ajax_action == $parent_shortcode .'_modal')) ) {
$uniqueID = uniqid();
$output = '';
$output .= '<div class="custom-list-item collapse-active">';
$output .= '<div class="custom-list-item-details">';
foreach($fsn_custom_lists[$list_id]['params'] as $param) {
if (!empty($param['param_name'])) {
$param_name = $param['param_name'];
if (array_key_exists($param_name, $atts)) {
$param_value = stripslashes($atts[$param_name]);
if (!empty($param['encode_base64'])) {
$param_value = wp_strip_all_tags($param_value);
$param_value = htmlentities(base64_decode($param_value));
} else if (!empty($param['encode_url'])) {
$param_value = wp_strip_all_tags($param_value);
$param_value = urldecode($param_value);
}
//decode custom entities
$param_value = FusionCore::decode_custom_entities($param_value);
} else {
$param_value = '';
}
} else {
$param_value = '';
}
$param['nested'] = true;
$param['param_name'] = $param['param_name']. '-paramid'. $uniqueID;
//check for dependency
$dependency = !empty($param['dependency']) ? true : false;
if ($dependency === true) {
$depends_on_field = $param['dependency']['param_name']. '-paramid'. $uniqueID;
$depends_on_not_empty = !empty($param['dependency']['not_empty']) ? $param['dependency']['not_empty'] : false;
if (!empty($param['dependency']['value']) && is_array($param['dependency']['value'])) {
$depends_on_value = json_encode($param['dependency']['value']);
} else if (!empty($param['dependency']['value'])) {
$depends_on_value = $param['dependency']['value'];
} else {
$depends_on_value = '';
}
$dependency_callback = !empty($param['dependency']['callback']) ? $param['dependency']['callback'] : '';
$dependency_string = ' data-dependency-param="'. esc_attr($depends_on_field) .'"'. ($depends_on_not_empty === true ? ' data-dependency-not-empty="true"' : '') . (!empty($depends_on_value) ? ' data-dependency-value="'. esc_attr($depends_on_value) .'"' : '') . (!empty($dependency_callback) ? ' data-dependency-callback="'. esc_attr($dependency_callback) .'"' : '');
}
$output .= '<div class="form-group'. ( !empty($param['class']) ? ' '. esc_attr($param['class']) : '' ) .'"'. ( $dependency === true ? $dependency_string : '' ) .'>';
$output .= FusionCore::get_input_field($param, $param_value);
$output .= '</div>';
}
$output .= '<a href="#" class="collapse-custom-list-item">'. __('expand', 'fusion') .'</a>';
$output .= '<a href="#" class="remove-custom-list-item">'. __('remove', 'fusion') .'</a>';
$output .= '</div>';
$output .= '</div>';
} else {
$output = '';
$callback_function = 'fsn_get_'. sanitize_text_field($list_id) .'_list_item';
$output .= call_user_func($callback_function, $atts, $content);
}
return $output;
}
Code file location:
fusion/fusion/includes/classes/custom-list.phpFusion Page Builder [fusion_plugin] Shortcode
The Fusion Plugin shortcode is a powerful tool that allows for dynamic content manipulation. It’s used to add, edit, duplicate, or delete elements on a webpage. The shortcode scans through attributes, converting them into data attributes. It then generates a div with controls for editing, duplicating, or deleting the element. The output also includes the element’s label and content. This provides an interactive user interface for managing webpage elements. Shortcode: [fusion_plugin]
Shortcode: [fusion_plugin]
Examples and Usage
Basic example – Displaying a simple element using the provided shortcode.
[fsn_element element_label="My Element" /]Advanced examples
Using the shortcode to display an element with multiple data attributes. The attributes will be added to the element as data- attributes.
[fsn_element element_label="My Element" data_color="blue" data_size="large" /]Using the shortcode to display an element with a custom CSS class. The CSS class will be added to the element’s class attribute.
[fsn_element element_label="My Element" css_class="my-custom-class" /]Using the shortcode to display an element with custom content. The content will be displayed inside the element.
[fsn_element element_label="My Element"]This is my custom content.[/fsn_element]PHP Function Code
In case you have difficulties debugging what causing issues with [fusion_plugin] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode($shortcode_tag, array($this, 'extension_shortcode'));Shortcode PHP function:
function extension_shortcode($atts, $content = null) {
$shortcode_atts_data = '';
if (!empty($atts)) {
foreach($atts as $key => $value) {
$att_name = str_replace('_','-', $key);
$shortcode_atts_data .= ' data-'. esc_attr($att_name) .'="'. esc_attr($value) .'"';
}
}
$element_label = !empty($atts['element_label']) ? FusionCore::decode_custom_entities($atts['element_label']) : $this->name;
$output = '<div class="fsn-element '. esc_attr($this->shortcode_tag) .'" data-shortcode-tag="'. esc_attr($this->shortcode_tag) .'">';
$output .= '<div class="element-controls">';
$output .= '<span class="element-controls-toggle" title="'. __('Element Options', 'fusion') .'"><i class="material-icons md-18"></i></span>';
$output .= '<div class="element-controls-dropdown collapsed">';
$output .= '<a href="#" class="edit-element">'. __('Edit', 'fusion') .'</a>';
$output .= '<a href="#" class="duplicate-element">'. __('Duplicate', 'fusion') .'</a>';
$output .= '<a href="#" class="delete-element">'. __('Delete', 'fusion') .'</a>';
$output .= '</div>';
$output .= '<a href="#" class="control-icon edit-element" title="'. __('Edit Element', 'fusion') .'"><i class="material-icons md-18"></i></a>';
$output .= '</div>';
$output .= '<div class="element-label" title="'. esc_attr($this->name) . '">'. esc_html($element_label) . '</div>';
$output .= '<div class="element-text-holder"'. (!empty($shortcode_atts_data) ? $shortcode_atts_data : '') .'>';
$output .= apply_filters('fsn_admin_shortcode_content_output', wpautop($content), $this->shortcode_tag, $content);
$output .= '</div>';
$output .= '</div>';
return $output;
}
Code file location:
fusion/fusion/includes/classes/extend.phpFusion Page Builder [fsn_tabs] Shortcode
The Fusion Plugin shortcode ‘fsn_tabs’ creates a tabbed content area. It extracts attributes like ‘tabs_layout’ and ‘tabs_fade’ to customize the tab structure. The shortcode builds a tabs container with options to edit, duplicate, or delete tabs. It also allows for adding new tabs. In the front-end view, it generates a tabbed content area with navigation. It applies filters for adding classes and content before and after tabs. Shortcode: [fsn_tabs]
Shortcode: [fsn_tabs]
Parameters
Here is a list of all possible fsn_tabs shortcode parameters and attributes:
tabs_layout– Defines the layout style for the tabstabs_fade– Determines if tabs should fade in/out upon switching
Examples and Usage
Basic Example – Display tabs with default settings
[fsn_tabs][/fsn_tabs]Advanced Examples
Display tabs with a specific layout and fade effect
[fsn_tabs tabs_layout="layout1" tabs_fade="true"][/fsn_tabs]Display tabs with individual tab contents
[fsn_tabs tabs_layout="layout1" tabs_fade="true"]
[fsn_tab tab_id="tab1" tab_title="Tab 1"]Tab 1 content here[/fsn_tab]
[fsn_tab tab_id="tab2" tab_title="Tab 2"]Tab 2 content here[/fsn_tab]
[/fsn_tabs]Display tabs with custom classes for styling
[fsn_tabs tabs_layout="layout1" tabs_fade="true" class="custom-class"]
[fsn_tab tab_id="tab1" tab_title="Tab 1"]Tab 1 content here[/fsn_tab]
[fsn_tab tab_id="tab2" tab_title="Tab 2"]Tab 2 content here[/fsn_tab]
[/fsn_tabs]Note: Replace “layout1” with the actual layout name, and “true” with the actual value for the fade effect. Replace “Tab 1 content here” and “Tab 2 content here” with the actual content for each tab. Replace “custom-class” with the actual class name for custom styling.
PHP Function Code
In case you have difficulties debugging what causing issues with [fsn_tabs] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('fsn_tabs', array($this, 'tabs_shortcode'));Shortcode PHP function:
function tabs_shortcode($atts, $content = null) {
extract( shortcode_atts( array(
'tabs_layout' => '',
'tabs_fade' => ''
), $atts ) );
global $fsn_tab_counter;
$fsn_tab_counter = 0;
//if running AJAX, get action being run
$ajax_action = false;
if (defined('DOING_AJAX') && DOING_AJAX) {
if (!empty($_POST['action'])) {
$ajax_action = sanitize_text_field($_POST['action']);
}
}
//build output
if ( is_admin() && (!defined('DOING_AJAX') || !DOING_AJAX || (!empty($ajax_action) && $ajax_action == 'load_template' || $ajax_action == 'components_modal')) ) {
$shortcode_atts_data = '';
if (!empty($atts)) {
foreach($atts as $key => $value) {
$att_name = str_replace('_','-', $key);
$shortcode_atts_data .= ' data-'. esc_attr($att_name) .'="'. esc_attr($value) .'"';
}
}
$output = '';
$output .= '<div class="tabs-container"'. $shortcode_atts_data .'>';
$output .= '<div class="tabs-header">';
$output .= '<div class="tabs-controls">';
$output .= '<span class="tabs-controls-toggle" title="'. __('Tabs Options', 'fusion') .'"><i class="material-icons md-18"></i></span>';
$output .= '<div class="tabs-controls-dropdown collapsed">';
$output .= '<a href="#" class="edit-tabs">'. __('Edit', 'fusion') .'</a>';
$output .= '<a href="#" class="duplicate-tabs">'. __('Duplicate', 'fusion') .'</a>';
$output .= '<a href="#" class="delete-tabs">'. __('Delete', 'fusion') .'</a>';
$output .= '</div>';
$output .= '<a href="#" class="control-icon edit-tabs" title="'. __('Edit Tabs', 'fusion') .'"><i class="material-icons md-18"></i></a>';
$output .= '</div>';
$output .= '<h3 class="tabs-title">'. __('Tabs', 'fusion') .'</h3>';
$output .= '</div>';
$output .= '<div class="tabs-wrapper">';
$output .= '<div class="tabs-nav">';
preg_match_all( '/\[fsn_tab((?:\s+\w+(?:\s*=\s*(?:(?:"[^"]*")|(?:\'[^\']*\')|[^>\s]+))?)*)\s*/', $content, $matches, PREG_SET_ORDER);
if (!empty($matches)) {
$output .= '<ul class="nav nav-tabs">';
$i = 0;
foreach($matches as $match) {
$attributes_string = trim($match[1]);
preg_match_all( '/([^\"]+)="([^\"]+)"/i', $attributes_string, $tab_attributes_matches, PREG_SET_ORDER);
$tab_attributes = array();
foreach($tab_attributes_matches as $tab_attribute) {
$key = trim($tab_attribute[1]);
$value = $tab_attribute[2];
$tab_attributes[$key] = $value;
}
$tab_title = FusionCore::decode_custom_entities($tab_attributes['tab_title']);
$tab_id = $tab_attributes['tab_id'];
$output .= '<li'. ($i == 0 ? ' class="active"' : '') .'><a href="#'. esc_attr($tab_id) .'" data-toggle="tab">'. esc_html($tab_title) .'</a></li>';
$i++;
}
$output .= '<li><a href="#" class="fsn-add-tab" title="'. __('Add Tab', 'fusion') .'"><i class="material-icons md-18"></i></a></li>';
$output .= '</ul>';
}
$output .= '</div>';
$output .= '<div class="tab-content">'. do_shortcode($content) .'</div>';
$output .= '</div>';
$output .= '</div>';
} else {
global $fsn_tab_output_phase, $fsn_tabs_settings;
//build settings
if (!empty($tabs_layout)) {
$fsn_tabs_settings['layout'] = $tabs_layout;
}
if (!empty($tabs_fade)) {
$fsn_tabs_settings['fade'] = $tabs_fade;
}
$fsn_tabs_settings = apply_filters('fsn_tabs_settings', $fsn_tabs_settings, $atts);
//build classes
$classes_array = array();
if (!empty($tabs_layout)) {
$classes_array[] = $tabs_layout;
}
//filter for adding classes
$classes_array = apply_filters('fsn_tabs_classes', $classes_array, $atts);
if (!empty($classes_array)) {
$classes = implode(' ', $classes_array);
}
$output = '';
$output .= '<div class="fsn-tabs-container '. fsn_style_params_class($atts) . (!empty($classes) ? ' '. esc_attr($classes) : '') .'">';
//action hook for outputting content before tabs
ob_start();
do_action('fsn_before_tabs', $atts, $content);
$output .= ob_get_clean();
$output .= '<ul class="nav nav-tabs">';
$fsn_tab_output_phase = 'tab_nav';
$output .= do_shortcode($content);
$output .= '</ul>';
$output .= '<div class="tab-content">';
$fsn_tab_counter = 0;
$fsn_tab_output_phase = 'tab_content';
$output .= do_shortcode($content);
$output .= '</div>';
//action hook for outputting content after tabs
ob_start();
do_action('fsn_after_tabs', $atts, $content);
$output .= ob_get_clean();
$output .= '</div>';
unset($GLOBALS['fsn_tab_output_phase']);
unset($GLOBALS['fsn_tabs_settings']);
}
unset($GLOBALS['fsn_tab_counter']);
return $output;
}
Code file location:
fusion/fusion/includes/classes/tabs.phpFusion Page Builder [fsn_tab] Shortcode
The Fusion Tab shortcode creates a tabbed content area in a WordPress site. It generates unique tab ID, handles AJAX requests, and provides options for editing, duplicating, and deleting tabs.
Shortcode: [fsn_tab]
Parameters
Here is a list of all possible fsn_tab shortcode parameters and attributes:
tab_title– defines the title of the tabtab_id– creates a unique identifier for each tabcustom_tab_id– allows to assign a custom identifier to the tab
Examples and Usage
Basic example – Display a tab with default title (‘Tab’) and unique ID.
[fsn_tab /]Advanced examples
Display a tab with a specified title and unique ID.
[fsn_tab tab_title="My Custom Tab" /]Display a tab with a specified title, unique ID, and custom tab ID.
[fsn_tab tab_title="My Custom Tab" custom_tab_id="my_custom_tab" /]Display a tab with content inside. The content is wrapped in the tab shortcode.
[fsn_tab tab_title="My Custom Tab" custom_tab_id="my_custom_tab"]This is the content inside the tab.[/fsn_tab]Using the shortcode to display multiple tabs. Each tab has a unique ID and title.
[fsn_tab tab_title="Tab 1" custom_tab_id="tab_1"]Tab 1 content here.[/fsn_tab]
[fsn_tab tab_title="Tab 2" custom_tab_id="tab_2"]Tab 2 content here.[/fsn_tab]
[fsn_tab tab_title="Tab 3" custom_tab_id="tab_3"]Tab 3 content here.[/fsn_tab]PHP Function Code
In case you have difficulties debugging what causing issues with [fsn_tab] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('fsn_tab', array($this, 'tab_shortcode'));Shortcode PHP function:
function tab_shortcode($atts, $content = null) {
extract( shortcode_atts( array(
'tab_title' => __('Tab', 'fusion'),
'tab_id' => 'tab-'. uniqid(),
'custom_tab_id' => ''
), $atts ) );
global $fsn_tab_counter;
$fsn_tab_counter++;
//if running AJAX, get action being run
$ajax_action = false;
if (defined('DOING_AJAX') && DOING_AJAX) {
if (!empty($_POST['action'])) {
$ajax_action = sanitize_text_field($_POST['action']);
}
}
//build output
if ( is_admin() && (!defined('DOING_AJAX') || !DOING_AJAX || (!empty($ajax_action) && $ajax_action == 'load_template' || $ajax_action == 'components_modal')) ) {
$shortcode_atts_data = '';
if (!empty($atts)) {
foreach($atts as $key => $value) {
$att_name = str_replace('_','-', $key);
$shortcode_atts_data .= ' data-'. esc_attr($att_name) .'="'. esc_attr($value) .'"';
}
}
$output = '';
$output .= '<div class="tab-pane'. ($fsn_tab_counter === 1 ? ' active' : '') .'" id="'. esc_attr($tab_id) .'">';
$output .= '<div class="tab-container"'. $shortcode_atts_data .'>';
$output .= '<div class="tab-header">';
$output .= '<div class="tab-controls">';
$output .= '<span class="tab-controls-toggle" title="'. __('Tab Options', 'fusion') .'"><i class="material-icons md-18"></i></span>';
$output .= '<div class="tab-controls-dropdown collapsed">';
$output .= '<a href="#" class="edit-tab">'. __('Edit', 'fusion') .'</a>';
$output .= '<a href="#" class="duplicate-tab">'. __('Duplicate', 'fusion') .'</a>';
$output .= '<a href="#" class="delete-tab">'. __('Delete', 'fusion') .'</a>';
$output .= '</div>';
$output .= '<a href="#" class="control-icon edit-tab" title="'. __('Edit Tab', 'fusion') .'"><i class="material-icons md-18"></i></a>';
$output .= '</div>';
$output .= '</div>';
$output .= '<div class="tab-wrapper">';
$output .= '<div class="tab">'. do_shortcode($content) .'</div>';
$output .= '</div>';
$output .= '<a href="#" class="fsn-add-element" data-container="tab" title="'. __('Add Element', 'fusion') .'"><i class="material-icons md-18"></i></a>';
$output .= '</div>';
$output .= '</div>';
} else {
global $fsn_tab_output_phase, $fsn_tabs_settings;
//build classes
$classes_array = array();
//filter for adding classes
$classes_array = apply_filters('fsn_tab_classes', $classes_array, $atts);
if (!empty($classes_array)) {
$classes = implode(' ', $classes_array);
}
$output = '';
$tab_id = !empty($custom_tab_id) ? $custom_tab_id : $tab_id;
switch ($fsn_tab_output_phase) {
case 'tab_nav':
$output .= '<li'. ($fsn_tab_counter === 1 ? ' class="active"' : '') .'><a href="#'. esc_attr($tab_id) .'" role="button" data-toggle="tab"'. (!empty($classes) ? ' class="'. esc_attr($classes) .'"' : '') .'>'. esc_html($tab_title) .'</a></li>';
break;
case 'tab_content':
$output .= '<div id="'. esc_attr($tab_id) .'" class="tab-pane'. (!empty($fsn_tabs_settings['fade']) ? ' fade' : '') . (!empty($fsn_tabs_settings['fade']) && $fsn_tab_counter === 1 ? ' in' : '') . ($fsn_tab_counter === 1 ? ' active' : '') .'">';
$output .= '<div class="fsn-tab-container'. (!empty($classes) ? ' '. esc_attr($classes) : '') .'">';
$output .= '<div class="visible-print-block fsn-tab-label">'. esc_html($tab_title) .'</div>';
$output .= do_shortcode($content);
$output .= '</div>';
$output .= '</div>';
break;
}
}
return $output;
}
Code file location:
fusion/fusion/includes/classes/tabs.phpFusion Page Builder [fsn_code] Shortcode
The Fusion Builder shortcode ‘fsn_code’ is a versatile tool. It decodes base64 content, strips all tags, and wraps it in a div with a specified class. This shortcode accepts parameters for styling, allowing customization of the content’s appearance. It’s ideal for displaying code snippets or other pre-formatted content within your WordPress posts.
Shortcode: [fsn_code]
Examples and Usage
Basic example – A straightforward usage of the fsn_code shortcode can be to display a simple message. In this case, the content parameter is used to specify the message to be displayed.
[fsn_code]Hello, World![/fsn_code]Advanced examples
Creating a more complex usage of the fsn_code shortcode can involve using multiple parameters. In the example below, we are using the style parameter to add additional CSS classes to the div. The base64 encoded content is decoded and displayed within the div.
[fsn_code style="custom-class"]SGVsbG8sIFdvcmxkIQ==[/fsn_code]Another advanced usage of the fsn_code shortcode can be to utilize the atts parameter. This parameter can be used to pass additional attributes to the shortcode. In the example below, we are passing a color attribute to the shortcode. The color attribute is then used to set the color of the text within the div.
[fsn_code color="blue"]SGVsbG8sIFdvcmxkIQ==[/fsn_code]PHP Function Code
In case you have difficulties debugging what causing issues with [fsn_code] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('fsn_code', 'fsn_code');Shortcode PHP function:
function fsn_code( $atts, $content ) {
return '<div class="fsn-code '. fsn_style_params_class($atts) .'">'. base64_decode( wp_strip_all_tags($content) ) .'</div>';
}
Code file location:
fusion/fusion/includes/extensions/code.phpFusion Page Builder [fsn_component] Shortcode
The Fusion Plugin shortcode ‘fsn_component’ displays specific components on your WordPress site. It accepts parameters like ‘component_id’ to retrieve and display the content of the specified component. The shortcode uses action hooks ‘fsn_before_component’ and ‘fsn_after_component’ for additional customization before and after the component output. It also supports custom component IDs and optional component collapsing.
Shortcode: [fsn_component]
Parameters
Here is a list of all possible fsn_component shortcode parameters and attributes:
component_id– The unique identifier of the fusion component.component_collapse– Determines if the component should collapse or not.custom_component_id– A custom identifier for the fusion component.
Examples and Usage
Basic example – The simplest way to use the Fusion Component shortcode is to provide the ‘component_id’ attribute. This will display the content of the specified component.
[fsn_component component_id=2 /]Advanced examples
Adding a custom ID to the component – This example demonstrates the use of the ‘custom_component_id’ attribute. This can be useful if you want to apply specific CSS styles to the component or use JavaScript to manipulate it.
[fsn_component component_id=2 custom_component_id="my_custom_id" /]Collapsing the component – This example shows how to use the ‘component_collapse’ attribute. When set to true, the component will be collapsed by default, and users can click to expand it. This can be useful for creating accordion-like features on your site.
[fsn_component component_id=2 component_collapse=true /]Combining multiple attributes – This example combines the ‘custom_component_id’ and ‘component_collapse’ attributes. It demonstrates that you can use multiple attributes in the same shortcode to customize the behavior of the component in various ways.
[fsn_component component_id=2 custom_component_id="my_custom_id" component_collapse=true /]PHP Function Code
In case you have difficulties debugging what causing issues with [fsn_component] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('fsn_component', 'fsn_component_shortcode');Shortcode PHP function:
function fsn_component_shortcode( $atts, $content ) {
extract( shortcode_atts( array(
'component_id' => false,
'component_collapse' => false,
'custom_component_id' => ''
), $atts ) );
$output = '';
//before fusion component action hook
ob_start();
do_action('fsn_before_component', $atts);
$output .= ob_get_clean();
if (!empty($component_id)) {
$component = get_post($component_id);
if (!empty($component) && $component->post_status == 'publish') {
$component_id_output = 'component-'. esc_attr($component_id);
if (!empty($custom_component_id)) {
$component_id_output = $custom_component_id;
}
$output .= '<div id="'.$component_id_output.'" class="component '. fsn_style_params_class($atts) . (!empty($component_collapse) ? ' collapse' : '') .'">';
$output .= apply_filters('fsn_the_content', $component->post_content);
$output .= '</div>';
}
}
//after fusion component action hook
ob_start();
do_action('fsn_after_component', $atts);
$output .= ob_get_clean();
return $output;
}
Code file location:
fusion/fusion/includes/extensions/insert-component.phpFusion Page Builder [fsn_text] Shortcode
The Fusion Text shortcode is a tool that creates a text block within a defined div class on your WordPress site. The ‘fsn_text_shortcode’ function wraps the content within a div class ‘fsn-text’, allowing you to style it using the ‘fsn_style_params_class’ function.
Shortcode: [fsn_text]
Examples and Usage
Basic example – A simple usage of the ‘fsn_text’ shortcode to display text content inside a div with default styling.
[fsn_text]Your text goes here[/fsn_text]PHP Function Code
In case you have difficulties debugging what causing issues with [fsn_text] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('fsn_text', 'fsn_text_shortcode');Shortcode PHP function:
function fsn_text_shortcode( $atts, $content ) {
$output = '<div class="fsn-text '. fsn_style_params_class($atts) .'">'. do_shortcode($content) .'</div>';
return $output;
}
Code file location:
fusion/fusion/includes/extensions/text.phpConclusion
Now that you’ve learned how to embed the Fusion Page Builder Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply