Last active
January 12, 2017 21:23
-
-
Save colorful-tones/8be9847450bff164d2b2e7ab0839f409 to your computer and use it in GitHub Desktop.
Example of using the `vc_shortcodes_css_class` to streamline VC's class name output on parent elements. See line #53 `add_filter()` and the `filter_vc_row_class()` function on line 73.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* WDS Visual Composer Custom Element | |
* | |
* @since NEXT | |
* @package WDS Visual Composer | |
*/ | |
/** | |
* WDS Visual Composer Custom Element | |
* | |
* @since NEXT | |
*/ | |
class WDSVC_Custom_Element { | |
/** | |
* Set the element name. | |
* | |
* @var WDS_Visual_Composer | |
*/ | |
private $element_slug = 'wds_cm_vc_custom_element'; | |
/** | |
* Parent plugin class | |
* | |
* @var WDS_Visual_Composer | |
* @since NEXT | |
*/ | |
protected $plugin = null; | |
/** | |
* Constructor | |
* | |
* @since NEXT | |
* @param object $plugin WDS_Visual_Composer $plugin Main plugin object. | |
* @return void | |
*/ | |
public function __construct( $plugin ) { | |
$this->plugin = $plugin; | |
$this->hooks(); | |
} | |
/** | |
* Initiate our hooks | |
* | |
* @since NEXT | |
* @return void | |
*/ | |
public function hooks() { | |
add_action( 'vc_before_init', array( $this, 'map_to_vc' ) ); | |
add_action( 'init', array( $this, 'register_shortcode' ) ); | |
// Filter to replace default css class names for vc_row shortcode and vc_column | |
add_filter( 'vc_shortcodes_css_class', array( $this, 'filter_vc_row_class' ), 10, 2 ); | |
} | |
/** | |
* Register a shortcode with WordPress | |
*/ | |
public function register_shortcode() { | |
add_shortcode( $this->element_slug, array( $this, 'shortcode_callback' ) ); | |
} | |
/** | |
* Use filter to change CSS class names in output of VC elements. | |
* | |
* @link https://wpbakery.atlassian.net/wiki/display/VC/Change+CSS+Class+Names+in+Output | |
* @link https://wpbakery.atlassian.net/wiki/display/VC/vc_shortcodes_css_class | |
* @since NEXT | |
* @param string $class_string Class name. | |
* @param string $tag Tag name. | |
* @return string $class_string | |
*/ | |
public function filter_vc_row_class( $class_string, $tag ) { | |
if ( 'vc_row' === $tag ) { | |
$class_string = 'row ' . $this->element_slug; // We add the element slug as class name, as well as .row. | |
} | |
if ( 'vc_column' === $tag ) { | |
$class_string = 'col-sm-12'; | |
} | |
return $class_string; // Important: you should always return modified or original $class_string. | |
} | |
/** | |
* Register an element with VC. | |
*/ | |
public function map_to_vc() { | |
$fields = array( | |
array( | |
'heading' => __( 'Featured Class Heading', 'wds-visual-composer' ), | |
'description' => __( 'Enter a heading for the featured class. The class name would be perfect here.', 'wds-visual-composer' ), | |
'type' => 'textfield', | |
'param_name' => 'heading', | |
), | |
array( | |
'heading' => __( 'Featured Class Image', 'wds-visual-composer' ), | |
'description' => __( 'Add an image for the featured class.', 'wds-visual-composer' ), | |
'type' => 'attach_image', | |
'param_name' => 'image', | |
), | |
array( | |
'heading' => __( 'Instructor Name', 'wds-visual-composer' ), | |
'description' => __( 'Enter the name of the instructor for the class.', 'wds-visual-composer' ), | |
'type' => 'textfield', | |
'param_name' => 'instructor', | |
), | |
array( | |
'heading' => __( 'Class Description', 'wds-visual-composer' ), | |
'description' => __( 'Enter a description for the cooking class. What will students learn?', 'wds-visual-composer' ), | |
'type' => 'textarea', | |
'param_name' => 'description', | |
), | |
array( | |
'heading' => __( 'Location Name', 'wds-visual-composer' ), | |
'description' => __( 'Enter the name of the location where class will be held.', 'wds-visual-composer' ), | |
'type' => 'textfield', | |
'param_name' => 'location_name', | |
), | |
array( | |
'heading' => __( 'Location Link', 'wds-visual-composer' ), | |
'description' => __( 'Provide a link to location\'s page.', 'wds-visual-composer' ), | |
'type' => 'vc_link', | |
'param_name' => 'location_link', | |
), | |
); | |
// Define the element. | |
$params = array( | |
'name' => __( 'WDS Custom Element', 'wds-visual-composer' ), | |
'base' => $this->element_slug, | |
'class' => $this->element_slug, | |
'category' => array( __( 'Content', 'wds-visual-composer' ), __( 'WDS', 'wds-visual-composer' ) ), | |
'params' => $fields, | |
'icon' => '', | |
'is_container' => false, | |
); | |
// Register the element with VC. | |
vc_map( $params ); | |
} | |
/** | |
* Build the HTML output put for the VC Element. | |
* | |
* @author Damon Cook | |
* | |
* @param array $atts The shortcode atts. | |
* @param string $content The shortcode content. | |
* @return string The HTML. | |
*/ | |
public function shortcode_callback( $atts, $content = null ) { | |
$atts = shortcode_atts( | |
array( | |
'image' => '', | |
'heading' => '', | |
'instructor' => '', | |
'description' => '', | |
'location_name' => '', | |
'location_link' => '', | |
), | |
$atts, | |
$this->element_slug | |
); | |
// Build all the links. | |
$location_link = vc_build_link( $atts['location_link'] ); | |
$location_link = $location_link['url']; | |
ob_start(); ?> | |
<article class="featured-class-card card"> | |
<?php if ( ! empty( $atts['heading'] ) ) : ?> | |
<header class="featured-class-card-header"> | |
<h2 class="featured-class-card-heading h3"><?php echo esc_html( $atts['heading'] ); ?></h2> | |
</header><!-- .featured-class-header --> | |
<?php endif; ?> | |
<div class="column-one-half"> | |
<?php if ( ! empty( $atts['image'] ) ) : ?> | |
<?php echo wp_kses_post( wp_get_attachment_image( $atts['image'], 'three-to-four', '', array( 'class' => 'featured-class-image' ) ) ); ?> | |
<?php endif; ?> | |
</div><!-- .column-one-half --> | |
<div class="column-one-half"> | |
<?php if ( ! empty( $atts['instructor'] ) ) : ?> | |
<p class="featured-class-card-instructor instructor"><strong><?php esc_html_e( 'Instructor', 'wds-visual-composer' ); ?>:</strong> <?php echo esc_html( $atts['instructor'] ); ?></p> | |
<?php endif; ?> | |
<?php if ( ! empty( $atts['description'] ) ) : ?> | |
<div class="featured-class-card-description description body-secondary"> | |
<?php echo esc_html( $atts['description'] ); ?> | |
</div> | |
<?php endif; ?> | |
<?php if ( ! empty( $atts['location_link'] && $atts['location_name'] ) ) : ?> | |
<div class="featured-class-card-class-locations class-locations"> | |
<p><?php esc_html_e( 'Happening at', 'wds-visual-composer' ); ?></p> | |
<ul class="body-secondary"> | |
<li><a href="<?php echo esc_url( $atts['location_url'] ); ?>"><?php echo esc_html( $atts['location_name'] ); ?></a></li> | |
</ul> | |
</div><!-- .featured-class-card-class-locations .class-locations --> | |
<?php endif; ?> | |
</div><!-- .column-one-half --> | |
</article><!-- .featured-class-card --> | |
<?php return ob_get_clean(); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="row wds_cm_vc_cooking_school_featured_class_single_wide"> | |
<div class="col-sm-12"> | |
<div class="vc_column-inner "> | |
<div class="wpb_wrapper"> | |
<!-- Your custom VC element's output... --> | |
</div> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- basically, VC's default classes and behavior --> | |
<div class="vc_row wpb_row vc_row-fluid"> | |
<div class="wpb_column vc_column_container vc_col-sm-12"> | |
<div class="vc_column-inner "> | |
<div class="wpb_wrapper"> | |
<!-- Your custom VC element's output... --> | |
</div> | |
</div> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment