my-new-element.php

<?php
if ( fusion_is_element_enabled( 'fusion_hero' ) ) {

if ( ! class_exists( 'FusionSC_FusionHero' ) ) {
	/**
	 * Shortcode class.
	 *
	 * @package fusion-builder
	 * @since 1.0
	 */
	class FusionSC_FusionHero extends Fusion_Element {

		/**
		 * An array of the shortcode arguments.
		 *
		 * @access protected
		 * @since 1.0
		 * @var array
		 */
		protected $args;

		/**
		 * Constructor.
		 *
		 * @access public
		 * @since 1.0
		 */
		public function __construct() {
			parent::__construct();
			add_shortcode( 'fusion_hero', array( $this, 'render' ) );
		}

		/**
		 * Render the shortcode
		 *
		 * @access public
		 * @since 1.0
		 * @param  array  $args    Shortcode parameters.
		 * @param  string $content Content between shortcode.
		 * @return string          HTML output.
		 */
		public function render( $args, $content = '' ) {
			// This global allows access to Theme Options values.
			global $fusion_settings;

			// Here we set defaults.  For example, if color is left blank, then we will use the Theme Options value for container background.
			$defaults = FusionBuilder::set_shortcode_defaults(
				array(
					'type'  => '1',
					'color' => $fusion_settings->get( 'full_width_bg_color' ),
					'text'  => '',
				), $args
			);

			// Use the args (defaults merged into selected values) to builder HTML.
			$html = '';
			
			// Example, use type to change style property.
			$property = 'border-color';
			if ( '1' === $args['type'] ) {
				$property = 'background-color';
			}

			// Example, using the color choice for background or border.
			$html .= '<div style="border: 5px solid; ' . $property . ':' . $args['color'] . '">';

			// Example, using textfield value inside another shortcode (could also just be regular HTML).
			$html .= do_shortcode( '[fusion_title size="1" content_align="center" style_type="default"]' . $args['text'] . '[/fusion_title]' );

			// Example, using the HTML content from tinymce.
			$html .= $content;

			$html .= '</div>';

			// Example, return complete HTML.
			return $html;
		}
	}
}

new FusionSC_FusionHero();

}

/**
 * Map shortcode to Fusion Builder.
*/
function fusion_element_hero() {
	// This global allows access to Theme Options values.
	global $fusion_settings;

	fusion_builder_map(
		array(
			'name'             => __( 'Hero Component', 'fusion-builder' ),
			'shortcode'        => 'fusion_hero',
			'icon'             => 'fusiona-table',
			'allow_generator'  => true,
			'admin_enqueue_js' => FUSION_BUILDER_PLUGIN_URL . 'shortcodes/js/fusion-table.js',
			'params'           => array(
				array(
					'type'        => 'select',
					'heading'     => esc_attr__( 'Type', 'fusion-builder' ),
					'description' => esc_attr__( 'Select example.', 'fusion-builder' ),
					'param_name'  => 'type',
					'value'       => array(
						'1' => esc_attr__( 'Style 1', 'fusion-builder' ),
						'2' => esc_attr__( 'Style 2', 'fusion-builder' ),
					),
					'default'     => '1',
				),
				array(
					// Type of options.
					'type'        => 'colorpickeralpha',

					// Heading text.
					'heading'     => esc_attr__( 'Color', 'fusion-builder' ),

					// Description text.
					'description' => esc_attr__( 'Color example.', 'fusion-builder' ),

					// Param name, this is what is saved to the shortcode and used in the render.
					'param_name'  => 'color',

					// Starting value.
					'value'       => '',

					// This is the preview color.
					'default'     => $fusion_settings->get( 'full_width_bg_color' ),
				),
				array(
					'type'        => 'textfield',
					'heading'     => esc_attr__( 'Text', 'fusion-builder' ),
					'description' => esc_attr__( 'Text example.', 'fusion-builder' ),
					'param_name'  => 'text',
				),
				array(
					'type'        => 'tinymce',
					'heading'     => esc_attr__( 'Content', 'fusion-builder' ),
					'description' => esc_attr__( 'Content example.', 'fusion-builder' ),

					// This is a special param name.  HTML content can only be within the shortcode, not as a param.  In render
					// it is the $content var rather than in attributes.
					'param_name'  => 'element_content',

					'value'       => '',
				),
			),
		)
	);
}
 add_action( 'fusion_builder_before_init', 'fusion_element_hero' );