Uncategorized

Developing custom nested element with visual composer ultimate wordpress plugin


First, I am in love with this plugin. I would like to highly recommend this for any of ur new WordPress project.
For this tut

“I will assume you already have an idea for developing custom component”.

Visual composer (VC) uses its own layout template and it might not look exactly what you want. So integrating with custom theme can be some time painful. It will look different that what you except. To make it easy VC have awesome feature for creating custom components ( any block in your site ), with this we can implement our own custom components with custom layout template.

Today I am going show you a simple way to create nested element, some thing like a custom grid block as below

outer-inner-box

So here we need

  1. A outer container ( A component that can hold some other component ) [team_wrapper]
  2. An inner component [team_mate ]

Lets think it like a short-code that can hold multiple other short-codes

[team_wrapper ]
   [team_mate name="jumper one"]
   [team_mate name=”jumper two”]
   [team_mate name=”jumper three”]
[/your_gallery]

 

Step 1 :

Register Team wrapper container Element

gist: https://gist.github.com/neroze/ccea5899de39ece5f6dab3773108ee4d

vc_map( array(
“name” => __(“Team Wrapper”, “my-text-domain”),
“base” => “team_wrapper”,
‘category’ =>__(‘Team’, ‘rhthm’),
“as_parent” => array(‘only’ => ‘team_mate’), // Use only|except attributes to limit child shortcodes (separate multiple values with comma)
“content_element” => true,
“show_settings_on_create” => false,
“is_container” => true,
“js_view” => ‘VcColumnView’
) );

Step 1.1

Register short code

gist: https://gist.github.com/neroze/22c71ff63efa7e7bf0348de1c1fc4dfa

function team_wrapper_block_function( $atts, $content ) {
extract( shortcode_atts( array(
‘el_class’ => ”
), $atts ) );
ob_start();
echo ‘<section class=”team-wrapper”>
‘.do_shortcode($content).’
</div>
</div>
</section>’;
$content = ob_get_contents();
ob_get_clean();
return $content;
}
 add_shortcode( ‘team_wrapper’, ‘team_wrapper_block_function’ ) ;

Step 2 :

Register Team Block Element

gist: https://gist.github.com/neroze/3e887d5c39ce614a0766ee1a31dfa0a5

vc_map( array(
“name” => __(“Team Mate”, “rhthm”),
“base” => “team_mate”,
‘category’ =>__(‘Team’, ‘rhthm’),
“content_element” => true,
“as_child” => array(‘only’ => ‘team_wrapper’), // Use only|except attributes to limit parent (separate multiple values with comma)
“params” => array(
// add params same as with any other content element
array(
“type” => “textfield”,
“heading” => __(“Name”, “rhthm”),
“param_name” => “name”,
“description” => __(“Name”, “rhthm”),
‘holder’ => ‘div’,
‘class’ => ‘text-class’,
),
array(
“type” => “textfield”,
“heading” => __(“Status”, “rhthm”),
“param_name” => “status”,
“description” => __(“Status”, “rhthm”),
‘holder’ => ‘div’,
‘class’ => ‘text-class’,
)
,array(
“type” => “attach_image”,
“heading” => __(“Profile Image”, “rhthm”),
“param_name” => “profile_image”,
“description” => __(“Profile Image”, “rhthm”)
)
,array(
“type” => “textarea”,
“heading” => __(“Description”, “rhthm”),
“param_name” => “description”,
“description” => __(“Description”, “rhthm”)
)
)
) );

step 2.2

gist: https://gist.github.com/neroze/cd2fc7c36ff740362feb72b57fa35032

function team_mate_block_function( $atts, $content ) {
extract( shortcode_atts( array(
‘name’ => ”,
‘status’ => ”,
‘profile_image’ => ”,
‘description’ => ”
), $atts ) );
ob_start();
?>
” alt=””>
<p><?php echo $description; ?></p>
</div>
</div>
</div>
<?php
$content = ob_get_contents();
ob_get_clean();
return $content;
}
add_shortcode( ‘team_mate’, ‘team_mate_block_function’ );

 

Final step :

We need extend two VC classes

Note: Be care full here name of the class should match the same of “base” parameter that we have used to register VC Element

gist: https://gist.github.com/neroze/99019f1696a45be385e53665f0fd7910

if ( class_exists( ‘WPBakeryShortCodesContainer’ ) ) {
class WPBakeryShortCode_Team_Wrapper extends WPBakeryShortCodesContainer {
}
}
if ( class_exists( ‘WPBakeryShortCode’ ) ) {
class WPBakeryShortCode_Team_Mate extends WPBakeryShortCode {
}
}

And you are all done. It will be available as new VC elements
1. Add team wrapper
2.Team Mate as many as you like

Cheers

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s