Adding Custom Shortcode in Unyson Framework

PressTigers

Adding Custom Shortcode in Unyson Framework

July 22, 2016
Leave a comment

Unyson is a drag and drop framework for creating complex WordPress themes with speed and ease. It accompanies a group of built-in extensions such as Drag & Drop Builder, Shortcodes, Sidebars, Styling, Slider, Backup, etc. In this article, you will learn to create custom shortcode in Unyson framework.

For this, you need to create a directory structure in your Theme using the shortcodes extension folder, i.e.

framework-customizations/extensions/shortcodes/shortcodes/{your-shortcodes}

Now open config.php file (containing shortcode configuration) located inside the root directory of shortcodes. Add the following code in it:

<?php

if (!defined('FW')) die('Forbidden');

$cfg = array(
    'page_builder' => array(
        'title'         => __('Offerings', 'presstigers'),
        'description'   => __('Offerings Box on landing page', 'presstigers'),
        'tab'           => __('Custom Elements', 'presstigers'),
        'popup_size'    => 'large', // can be large, medium or small
        'icon' => 'fa fa-bar-chart',

        /*
        // Icon examples
        // Note: By default is loaded {your-shortcode}/static/img/page_builder.png
        'icon' => 'http://.../image-16x16.png', // background color should be 	#8c8c8c
        'icon' => 'dashicons dashicons-admin-site',
        'icon' => 'unycon unycon-crown',
        'icon' => 'fa fa-btc',
        */

        /*
        // Title Template examples
        //
        // Syntax:
        // * {{- variable }} - Output with html escape
        // * {{= variable }} - Output raw (without html escape)
        // * {{ if (execute.any(javascript, code)) { console.log('Hi'); } }}
        //
        // Available variables:
        // * title - shortcode title (from config)
        // * o - an object with all shortcode options values
        'title_template' => '{{- title }} Lorem {{- o.option_id }} ipsum {{= o["option-id"] }}',
        'title_template' => '{{- title }}: {{- o.label }}{{ if (o.target == "_blank") { }} <span class="dashicons dashicons-external"></span>{{ } }}',
        */
    )
);

<?php

if (!defined('FW')) die('Forbidden');

$cfg = array(

'page_builder' => array(

'title' => __('Offerings', 'presstigers'),

'description' => __('Offerings Box on landing page', 'presstigers'),

'tab' => __('Custom Elements', 'presstigers'),

'popup_size' => 'large', // can be large, medium or small

'icon' => 'fa fa-bar-chart',

// Icon examples

// Note: By default is loaded {your-shortcode}/static/img/page_builder.png

'icon' => 'http://.../image-16x16.png', // background color should be #8c8c8c

'icon' => 'dashicons dashicons-admin-site',

'icon' => 'unycon unycon-crown',

'icon' => 'fa fa-btc',

// Title Template examples

// Syntax:

// * {{- variable }} - Output with html escape

// * {{= variable }} - Output raw (without html escape)

// * {{ if (execute.any(javascript, code)) { console.log('Hi'); } }}

// Available variables:

// * title - shortcode title (from config)

// * o - an object with all shortcode options values

'title_template' => '{{- title }} Lorem {{- o.option_id }} ipsum {{= o["option-id"] }}',

'title_template' => '{{- title }}: {{- o.label }}{{ if (o.target == "_blank") { }} <span class="dashicons dashicons-external"></span>{{ } }}',

)

);

The shortcode directory contains an option.php file. Next step is to add your custom shortcode options for back-end using the following code:

<?php
if (!defined('FW')) die('Forbidden');

$options = array(
    'pt_statistics_heading' => array(
            'type'  => 'text',
            'label' => __('Heading', 'presstigers')
    ),
    'offerings' => array(
		'type'          => 'addable-popup',
		'label'         => __( 'Offerings', 'presstigers' ),
		'popup-title'   => __( 'Add/Edit Offerings Values', 'presstigers' ),
		'desc'          => __( 'Create your Offerings', 'presstigers' ),
		'template'      => '{{=pt_offering_title}}',
		'popup-options' => array(
                        'pt_offering_title' => array(
                                'type'  => 'text',
                                'label' => __('Title', 'presstigers')
                        ),
			'pt_offerings_text' => array(
				'type'  => 'textarea',
				'label' => __('Content', 'presstigers')
			),
                        'pt_offerings_url' => array(
				'type'  => 'text',
				'label' => __('Page URL', 'presstigers')
			),
                        'pt_offerings_image' => array(
                            'type' => 'upload',
                            'value' => '',
                            'attr'  => array( 'class' => 'brbc-select' ),
                            'label' => __('Image', 'barbercentric'),
                            'help'  => __('Select an image', 'presstigers'),
                            'desc' => __('', 'presstigers'),

                            'images_only' => true,
                        ),
		)
	)
);

<?php

if (!defined('FW')) die('Forbidden');

$options = array(

'pt_statistics_heading' => array(

'type' => 'text',

'label' => __('Heading', 'presstigers')

'offerings' => array(

'type' => 'addable-popup',

'label' => __( 'Offerings', 'presstigers' ),

'popup-title' => __( 'Add/Edit Offerings Values', 'presstigers' ),

'desc' => __( 'Create your Offerings', 'presstigers' ),

'template' => '{{=pt_offering_title}}',

'popup-options' => array(

'pt_offering_title' => array(

'type' => 'text',

'label' => __('Title', 'presstigers')

'pt_offerings_text' => array(

'type' => 'textarea',

'label' => __('Content', 'presstigers')

'pt_offerings_url' => array(

'type' => 'text',

'label' => __('Page URL', 'presstigers')

'pt_offerings_image' => array(

'type' => 'upload',

'value' => '',

'attr' => array( 'class' => 'brbc-select' ),

'label' => __('Image', 'barbercentric'),

'help' => __('Select an image', 'presstigers'),

'desc' => __('', 'presstigers'),

'images_only' => true,

)

);

The default shortcode view file is located in {your-shortcodes}/views/view.php. It will render the HTML view at front-end. $atts, $content and $tag variables will be passed to view file using the following code:

<?php
if (!defined('FW'))
    die('Forbidden');

    ?>
    <div class="presstigers-offers">
        <div class="container">
            <?php
            if (isset($atts['pt_statistics_heading']) && !empty($atts['pt_statistics_heading'])) {
                echo '<h2>'.esc_attr($atts['pt_statistics_heading']).'</h2>';
            }
            ?>
            <div class="grid">
                <?php
                if (isset($atts['offerings']) && count($atts['offerings']) > 0) {
                    foreach ($atts['offerings'] as $key => $value) {
                        $pt_offerings_image = $value['pt_offerings_image'];
                    ?>
                    <figure class="offers-effect">
                        
                        <img src="<?php echo esc_url($pt_offerings_image['url']); ?>" alt="<?php echo sanitize_title($value['pt_offering_title']); ?>">
                        <figcaption>
                            <h3><a href="<?php echo esc_url($value['pt_offerings_url']); ?>"><?php echo esc_attr($value['pt_offering_title']); ?></a></h3>
                            <div>
                                <p><?php echo esc_attr($value['pt_offerings_text']); ?></p>
                            </div>
                        </figcaption>			
                    </figure>
                    <?php
                    }
                }
                ?>
                
                <div class="clear"></div>
            </div>
        </div>
    </div>

<?php

if (!defined('FW'))

die('Forbidden');

<?php

if (isset($atts['pt_statistics_heading']) && !empty($atts['pt_statistics_heading'])) {

echo '<h2>'.esc_attr($atts['pt_statistics_heading']).'</h2>';

}

<?php

if (isset($atts['offerings']) && count($atts['offerings']) > 0) {

foreach ($atts['offerings'] as $key => $value) {

$pt_offerings_image = $value['pt_offerings_image'];

<div>

</div>

</figcaption>

</figure>

<?php

}

</div>

When the shortcode is rendered, static.php file is then used to enqueue static files using the following code:

<?php if (!defined('FW')) die('Forbidden');

// find the uri to the shortcode folder
$uri = fw_get_template_customizations_directory_uri('/extensions/shortcodes/shortcodes/{your-shortcodes}');
wp_enqueue_style(
    'fw-shortcode-{your-shortcodes},
    $uri . '/static/css/styles.css'
);
wp_enqueue_script(
    'fw-shortcode-{your-shortcodes}',
    $uri . '/static/js/scripts.js'
);

<?php if (!defined('FW')) die('Forbidden');

// find the uri to the shortcode folder

$uri = fw_get_template_customizations_directory_uri('/extensions/shortcodes/shortcodes/{your-shortcodes}');

wp_enqueue_style(

'fw-shortcode-{your-shortcodes},

$uri . '/static/css/styles.css'

);

wp_enqueue_script(

'fw-shortcode-{your-shortcodes}',

$uri . '/static/js/scripts.js'

);

The shortcode static files include CSS, JS, and images located in static folder as:

{your-shortcodes}/static/css
{your-shortcodes}/static/js
{your-shortcodes}/static/images