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


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”]


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 ) );
echo ‘<section class=”team-wrapper”>
$content = ob_get_contents();
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
“type” => “textfield”,
“heading” => __(“Name”, “rhthm”),
“param_name” => “name”,
“description” => __(“Name”, “rhthm”),
‘holder’ => ‘div’,
‘class’ => ‘text-class’,
“type” => “textfield”,
“heading” => __(“Status”, “rhthm”),
“param_name” => “status”,
“description” => __(“Status”, “rhthm”),
‘holder’ => ‘div’,
‘class’ => ‘text-class’,
“type” => “attach_image”,
“heading” => __(“Profile Image”, “rhthm”),
“param_name” => “profile_image”,
“description” => __(“Profile Image”, “rhthm”)
“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 ) );
” alt=””>
<p><?php echo $description; ?></p>
$content = ob_get_contents();
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


laravel, php, Uncategorized

Custom Facades in Laravel 4.2.X

// file System












Name of Custom Facade "Sky"


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

              / Helper.php
              / HelperServiceProvider.php

5. a facade class inside a

=============== Contents inside files =================
## app/facades/Sky/Helper.php

namespace Sky;
Class Helper {

	public function fire()
		return 'Fireing ... ';

	public function boom()
		return 'Fireing boom... ';

## app/facades/Sky/HelperServiceProvider.php

namespace Sky;
use Illuminate\Support\ServiceProvider;

class HelperServiceProvider extends ServiceProvider {

    public function register()
        // Registering 'helper class'
        $this->app['helper'] = $this->app->share(function($app)
            return new Sky\Helper;

        // dynamic creating Alias, so that you do not have to add an Alias in app/config/app.php
            $loader = \Illuminate\Foundation\AliasLoader::getInstance();
            $loader->alias('SkyHelper', 'Sky\Facade\Helper');

## app/facades/Sky/Facade/Helper.php

namespace Sky\Facade;

use Illuminate\Support\Facades\Facade;

class Helper extends Facade {

     * Get the registered name of the component.
     * @return string
    protected static function getFacadeAccessor() { return 'Sky\Helper'; }


### this is it all you need for your custom facades ##########

### one more last thing you need to do for autoload the facade classes ####
# GO to composer.json, add new line app/facades for autoloading.

"autoload": {
		"classmap": [

finally RUN " composer dump-autoload "

Cheers enjoy
ajax, JavaScript, jquery, Uncategorized

returning value from jquery ajax api

.responseText is used to return the value with ajax api

check_title_exist : function(_title){

return $.ajax({
url: base_url+”themes/theme_title_exist/”,
cache: false,
async: false

//php part

function theme_title_exist(){
$title = $this->input->post(‘title’, TRUE);
echo ‘true’;
echo ‘false’;

/// java script view part

res = themes_mod.check_title_exist(ni_gui.get_value(_post_data,’title’));

if(res == ‘true’){