Home Forums Themes Support How to add new WP Bakery Shortcode in HaruTheme

Tagged: 

This topic contains 0 replies, has 1 voice, and was last updated by  admin 9 months ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #2607

    Hi All our customer,

    In this topic tutorial we’ll help you add new WP Bakery Shortcode to use in our theme. In this topic tutorial we’ll use Circle theme and Haru Circle Core plugin. Similar with an other theme.

    Step 1: Understand about structure of files.

    You can find our plugin in wp-content/plugins/haru-circle-core/

    To add new shortcode you need add in 2 folder shortcodes & templates

    Step 2: In this example we’ll add new shortcode Haru Heading.

    2.1. Add new heading folder in shortcodes folder and and new php file name heading.php

    The easiest way you can copy countdown.php in countdown folder and rename to heading.php

    Add this code in shortcodes.php file:

    include_once( PLUGIN_HARU_CIRCLE_CORE_DIR . 'includes/shortcodes/heading/heading.php' );

    Find all Countdown text and replace to: Heading (Please note upper case)

    Replace all countdown to heading

    2.2. Settings of shortcode

    From line 23 to 30 you will see settings (options)

    extract(shortcode_atts(array(
    'layout_type' => '',
    'heading_text' => '',
    'el_class' => '',
    'css_animation' => '',
    'duration' => '',
    'delay' => '',
    ), $atts));

    Each setting in here you need add similar in vc_map

    vc_map(
    array(
    'name' => esc_html__( 'Haru Heading', 'haru-circle' ),
    'base' => 'haru_heading',
    'icon' => 'fa fa-clock-o haru-vc-icon',
    'description' => esc_html__( 'Display Heading timer', 'haru-circle' ),
    'category' => HARU_CIRCLE_CORE_SHORTCODE_CATEGORY,
    'params' => array(
    array(
    'param_name' => 'heading_text',
    'type' => 'textfield',
    'heading' => esc_html__( 'Set Heading Text', 'haru-circle' ),
    'admin_label' => true,
    'value' => ''
    ),
    array(
    'param_name' => 'layout_type',
    'heading' => esc_html__( 'Choose layout', 'haru-circle' ),
    'description' => '',
    'type' => 'dropdown',
    'value' => array(
    esc_html__( 'Style 1', 'haru-circle' ) => 'style_1',
    esc_html__( 'Style 2', 'haru-circle' ) => 'style_2'
    )
    ),
    Haru_CircleCore_Shortcodes::add_css_animation(),
    Haru_CircleCore_Shortcodes::add_duration_animation(),
    Haru_CircleCore_Shortcodes::add_delay_animation(),
    Haru_CircleCore_Shortcodes::add_el_class()
    )
    )
    );

    2.3. Display shortcode in template. Create new folder heading in templates folder and create layout as name of layout_type setting.

    2.4. Write code to display Heading text:

    <div class="heading-shortcode-wrapper <?php echo esc_attr( $layout_type . ' ' . $el_class ); ?> clearfix">
    <div class="heading-content"><?php echo $heading_text; ?></div>
    </div>

    2.5. Add new CSS code for this shortcode. As tutorial to customize use child theme:

    How to customize WordPress theme using Child theme

    You should add CSS code in child theme style file

    Step 3: Go to page and add Shortcode you have just added to test:

    Hope this will help you for your work!

     

    ******

    Best regards,

    HaruTheme

     

     

    • This topic was modified 9 months ago by  admin.
    • This topic was modified 9 months ago by  admin.
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.