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
So here we need
- A outer container ( A component that can hold some other component ) [team_wrapper]
- 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(); | |
| ?> | |
| <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
Name of Custom Facade "Sky"
steps:
1. create a new folder facades inside app folder
2. create a new folder same name as of your custom facade name. [ eg: app/facades/Sky / ]
3 create one more folder inside app / [ your facade folder ] / Facade
4. now create 2 files in the your facade base
app/facades/Sky/
/ Helper.php
/ HelperServiceProvider.php
5. a facade class inside a
app/facades/Sky/Facade/
/Helper.php
=============== Contents inside files =================
Jumper's Blog 
