Wiki

Clone wiki

Shortcode Ultimate V2 / How to add new custom shortcode

Suppose, you want create a new shortcode that named as “new_heading”.

Just go “\templates\current_template(Your default Template)\html\plg_bdthemes_shortcodes\shortcodes\” and create a folder that name is “new_heading”. Create a file that name is shortcode.php in this folder. Add this example code in shortcode.php file.

#!php
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );

class Su_Shortcode_new_heading extends Su_Shortcodes {

  function __construct() { parent::__construct(); }

  public static function new_heading( $atts = null, $content = null ) {
    $atts = su_shortcode_atts(array(
          'size'    => 16,
          'class'   => ''
        ), $atts, 'new_heading');

    $id = uniqid('nh_');
    $css[] = '';

    $css[] = '#'.$id.' { font-size:' . $atts['size'] . 'px;}';

    suAsset::addString('css', implode("\n", $css));

    suAsset::addFile('css', 'heading.css', __FUNCTION__);

    return '<div id="'.$id.'" class="su-new-heading">' . su_do_shortcode($content) . '</div>';
  }
}
?>

Code Description

For more help of addString Function, Please Click Here

For more help of addFile Function, Please Click Here

Class Name Description
Su_Shortcode_new_heading class name will be according to folder name like Su_Shortcode_new_heading. Here Su_Shortcode_ is fixed and then use your shrotcode folder name.
Function Name Description
new_heading Function name must be set according to folder name.

Create again a file that name is config.php in "new_heading" folder. Add this below code in config.php file.

#!php

<?php 
defined( '_JEXEC' ) or die( 'Restricted access' );

class Su_Shortcode_new_heading_config extends Su_Data {

    function __construct() { parent::__construct(); }
    static function get_config() {

        return array(
            'name'  => 'New Heading',
            'type'  => 'wrap',
            'group' => 'content',
            'content' => 'Your heading text here',
            'desc'    => "This is new Custom Heading Shortcode.",
            'icon'    => 'h-square',
            'atts'  => array(               

                'size' => array(
                    'type'    => 'slider',
                    'min'     => 7,
                    'max'     => 48,
                    'step'    => 1,
                    'default' => 16,
                    'name'    => 'Size',
                    'desc'    => 'Select Your Font Size from here'
                ),

                'class' => array(
                    'default' => '',
                    'name'    => 'Class',
                    'desc'    => 'If you want to add extra CSS class for this element so type here'
                )
            )
        );
    }
}
?>

Code Description

For more help of Array Details, Please Click Here

Class Name Description
Su_Shortcode_new_heading_config class name will be according to folder name like. Here Su_Shortcode_ is fixed and then use your shrotcode folder name then _config.

Updated