Creating New Elements Overview

Fusion relies on the WordPress Shortcode API to render content. On top of that, we have created a powerful API for dynamically generating the shortcode tags, attributes, and content based on user input in the Fusion UI.

Creating a new element for Fusion is a simple two step process:

1) Mapping an element using the fsn_map function. This will make the new element available for use in the Fusion UI.

2) Use the WordPress add_shortcode function to render your mapped element as post content. In general, the param_name values that you use when mapping your parameters will be output as the shortcode attribute name and the user set value will be output as the shortcode attribute value. The exception is the field on which the content_field parameter is set to true, which will usually be the rich text editor field (if used), or a textarea field.

The shortcode output should be wrapped in a div (or other block level element) with a class attribute that contains the fsn_style_params_class($atts) function (with the shortcode $atts array as it’s argument). This ensures that Fusion’s global element style parameters are correctly compiled and output for your element (see example below).

Both the mapping and shortcode output functions should be hooked to the WordPress init action with the priority set to 12.

To help guide you, we have built an extension plugin example to illustrate the recommended way to create a new Element for Fusion. We recommend adding new elements as individual Plugins so that the user is free to enable only the elements that they need to use.

Download the Extension Plugin Example here

Example