Loading..

How to add a New Custom Shortcode 0 0

Last updated on 27-Mar-2019 12:58:47 AM in Joomla » Plugins » Shortcode Ultimate
Posted ByTauhidul Alam

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
    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 
    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.

** The time is base on America/New_York timezone