How to add new WP Bakery Shortcode in HaruTheme

[admin]

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 4 years, 9 months ago by admin.
• This topic was modified 4 years, 9 months ago by admin.

[Author]

Posts