i am trying to create custom element for wpbakery and i am new to this things. i creating a element which should be use for 2 different purposes i.e either user can display button or social media links. below is the code i tried :
//frontend
add_shortcode( 'expert', 'expert_func' );
function expert_func( $atts, $content = null ) { // New function parameter $content is added!
extract(
shortcode_atts(
array(
'expert_image' => 'expert_image',
'title' => '',
),
$atts
)
);
$img_url = wp_get_attachment_image_src( $expert_image, "full");
extract(
shortcode_atts(
array(
'expert_exp_image' => 'expert_exp_image',
'title' => '',
),
$atts
)
);
$exp_img_url = wp_get_attachment_image_src( $expert_exp_image, "full");
extract(
shortcode_atts(
array(
'exp_btn_url' => 'exp_btn_url',
),
$atts
)
);
extract(
shortcode_atts(
array(
'Twitter' => 'Twitter',
'Facebook' => 'Facebook',
'Linkedn' => 'Linkedn',
'Instagram' => 'Instagram',
),
$atts
)
);
$btn_link = '';
$result .='<div class="inner__card">
<div class="expert-img">
<img src="'. $img_url[0] .'">
</div>
<div class="expert-details">
<p class="name">'.$atts['expert_name'].'</p>
<p class="designation">'.$atts['expert_designation'].'</p>
<div class="expect-experience">
<div class="expect-experience-no">
<img src="'. $exp_img_url[0] .'" alt="experience-10">
</div>
<div class="expect-experience-text">
<p>'.$atts['expert_short_desc'].'</span></p>
</div>
</div>
<p class="details">'.$atts['expert_description'].'</p>';
if($exp_btn_url!=''){
$result .='<div class="expert-btn">';
if ($exp_btn_url) {
$exp_btn_url = vc_build_link($exp_btn_url);
$a_href = $exp_btn_url['url'];
$a_title = $exp_btn_url['title'];
$a_target = $exp_btn_url['target'];
$icon_box_link = array('href="' . esc_attr($a_href) . '"', 'title="' . esc_attr($a_title) . '"', 'target="' . esc_attr($a_target) . '"');
$btn_link = '<a class="learn-btn" ' . implode(' ', $icon_box_link) . '>' . esc_attr($a_title) . '</a>';
}
$result .= $btn_link;
}
$result .= '<a href="'.$exp_btn_url.'" class="learn-btn">Learn More</a>';
}
else{
$result .='<div class="card-socail">
<div class="social-buttons">
<!-- TwitterButton -->
<a href="'.$atts['Twitter'].'" target="blank" class="social-margin">
<div class="social-icon twitter">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</a>
<!-- facebook Button -->
<a href="'.$atts['Facebook'].'" target="blank" class="social-margin">
<div class="social-icon facebook">
<i class="fa fa-facebook" aria-hidden="true"></i>
</div>
</a>
<!-- LinkedIn Button -->
<a href="'.$atts['Linkedn'].'" class="social-margin" target="blank">
<div class="social-icon linkedin">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</div>
</a>
<!-- Instagram Button -->
<a href="'.$atts['Instagram'].'" target="blank" class="social-margin">
<div class="social-icon behance">
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</a>
</div>
</div>';
}
$result .=' </div>
</div>
</div>';
//print_r($atts);
return $result;
}
//backend
add_action( 'vc_before_init', 'expert_integrateWithVC' );
function expert_integrateWithVC() {
vc_map( array(
"name" => __( "Expert", "my-text-domain" ),
"base" => "expert",
"class" => "",
"category" => __( "Clicksplode Elements", "my-text-domain"),
"params" => array(
array(
"type" => "attach_image",
"holder" => "div",
"class" => "",
"heading" => __( "Choose Expert Image", "my-text-domain" ),
"param_name" => "expert_image",
"value" => __( "", "my-text-domain" )
),
array(
"type" => "textfield",
"holder" => "div",
"class" => "",
"heading" => __( "Expert Name", "my-text-domain" ),
"param_name" => "expert_name",
"value" => __( "", "my-text-domain" )
),
array(
"type" => "textfield",
"holder" => "div",
"class" => "",
"heading" => __( "Expert Designation", "my-text-domain" ),
"param_name" => "expert_designation",
"value" => __( "", "my-text-domain" )
),
array(
"type" => "attach_image",
"holder" => "div",
"class" => "",
"heading" => __( "Add Year of Expirience image", "my-text-domain" ),
"param_name" => "expert_exp_image",
"value" => __( "", "my-text-domain" )
),
array(
"type" => "textfield",
"holder" => "div",
"class" => "",
"heading" => __( "Expert's Expirience Short Description", "my-text-domain" ),
"param_name" => "expert_short_desc",
"value" => __( "", "my-text-domain" )
),
array(
"type" => "textarea",
"holder" => "div",
"class" => "",
"heading" => __( "Short Description of Expert", "my-text-domain" ),
"param_name" => "expert_description",
"value" => __( "", "my-text-domain" )
),
array(
"type" => "vc_link",
"holder" => "div",
"class" => "",
"heading" => __( "Choose Rediect URL", "my-text-domain" ),
"param_name" => "exp_btn_url",
"value" => __( "", "my-text-domain" ),
"description" => __( "Add Short Description", "my-text-domain" )
),
array(
"type" => "textfield",
"holder" => "div",
"class" => "",
"heading" => __( "Add Twitter URL", "my-text-domain" ),
"param_name" => "Twitter",
"value" => __( "", "my-text-domain" )
),
array(
"type" => "textfield",
"holder" => "div",
"class" => "",
"heading" => __( "Add Facebook URL", "my-text-domain" ),
"param_name" => "Facebook",
"value" => __( "", "my-text-domain" )
),
array(
"type" => "textfield",
"holder" => "div",
"class" => "",
"heading" => __( "Add Linkedn URL", "my-text-domain" ),
"param_name" => "Linkedn",
"value" => __( "", "my-text-domain" )
),
array(
"type" => "textfield",
"holder" => "div",
"class" => "",
"heading" => __( "Add Instagram URL", "my-text-domain" ),
"param_name" => "Instagram",
"value" => __( "", "my-text-domain" )
)
)
) );
}
i know above code is not correct but all i want to display is if user adds url to the button than social media button should be hiden and if user adds social media links than button should be hiden. please find attached
