How to specify an ID in custom Visual Composer element

I’m current building a website for a non-profit, and am using an older edition of the WordPress theme, Savior.

There is a custom post type of Donations, and it allows the admin to set up different “Causes”, each of which is a post with a specific ID.

By default, the theme has a custom Visual Composer element (Screenshot 1 – https://i.stack.imgur.com/cmhTu.png) that allows you to feature the most recent “Cause”; the only customization option you have is for the Title of the VC element.

I’m trying to update this custom VC element so that the admin can specify the exact ID for the “Cause” they would like to feature on a page/post vs. only showing the latest “Cause.”

I’ve adjusted the VC mapping for the cause.php template where commented below, with a default ID placeholder of “2235”:

class STM_VC_Causes {

function __construct() {
add_action( ‘init’, array( $this, ‘integrateWithVC’ ) );
add_shortcode( ‘stm_causes’, array( $this, ‘render’ ) );
}

public function integrateWithVC() {
if ( function_exists( ‘vc_map’ ) ) {
vc_map( array(
‘name’ => __( ‘Causes’, STM_DOMAIN ),
‘base’ => ‘stm_causes’,
‘category’ => __( ‘STM’, STM_DOMAIN ),
‘params’ => array(
array(
‘type’ => ‘textfield’,
‘class’ => ”,
‘heading’ => __( ‘Title’, STM_DOMAIN ),
‘param_name’ => ‘title’,
‘value’ => __( ‘Our Causes’, STM_DOMAIN )
),

/** ========================================
* Qing Custom 8-6-2018
* Allow admin to select Cause to feature
======================================== **/

array(
‘type’ => ‘textfield’,
‘class’ => ”,
‘heading’ => __( ‘Cause ID’, STM_DOMAIN ),
‘param_name’ => ‘id’,
‘value’ => __( ‘2235’, STM_DOMAIN )
)
)
) );
}
}

public function render( $atts, $content = null ) {

$title = ”;
$id = ”;

extract( shortcode_atts( array(
‘title’ => ”,
‘id’ => ”
), $atts ) );

$donations = new WP_Query( array( ‘post_type’ => ‘donation’, ‘posts_per_page’ => 1 ) );

$output = ”;
$output .= ‘<ul class=”donation-grid first clearfix”>’;
while ( $donations->have_posts() ) {

$donations->the_post();
$target_amount = ( get_post_meta( get_the_ID(), ‘donation_target’, true ) == ” ) ? 0 : get_post_meta( get_the_ID(), ‘donation_target’, true );
$raised_amount = ( get_post_meta( get_the_ID(), ‘donation_raised’, true ) == ” ) ? 0 : get_post_meta( get_the_ID(), ‘donation_raised’, true );
$currency = ( get_post_meta( get_the_ID(), ‘donation_currency’, true ) == ” ) ? ‘$’ : get_post_meta( get_the_ID(), ‘donation_currency’, true );
$donors = ( get_post_meta( get_the_ID(), ‘donation_donors’, true ) == ” ) ? 0 : get_post_meta( get_the_ID(), ‘donation_donors’, true );
$target_amount_percent = ( $raised_amount / $target_amount ) * 100;

$output .= ‘<li id=”post-‘ . get_the_ID() . ‘” class=”‘ . implode( ‘ ‘, get_post_class() ) . ‘”>’;
$output .= ‘<div class=”donation-thumbnail”>’;
$output .= ‘<a href=”‘ . get_the_permalink() . ‘”>’;
if ( has_post_thumbnail() ) {
$output .= get_the_post_thumbnail( get_the_ID(), ‘thumb-150×150’ );
}
$output .= ‘</a>’;
$output .= ‘</div>’;
$output .= ‘<div class=”donation-content”>’;
$output .= ‘<h4><a href=”‘ . get_the_permalink() . ‘”>’ . get_the_title() . ‘</a></h4>’;
$output .= ‘<div class=”progress_bar”><span style=”width: ‘ . $target_amount_percent . ‘%;”></span></div>’;
$output .= ‘<div class=”donation-stat”>’;
$output .= ‘<span><i class=”fa fa-child”></i> ‘ . __( ‘Raised’, STM_DOMAIN ) . ‘<br/>’ . $currency . $raised_amount . ‘</span>’;
$output .= ‘<span><i class=”fa fa-users”></i> ‘ . __( ‘Donors’, STM_DOMAIN ) . ‘<br/>’ . $donors . ‘</span>’;
$output .= ‘<span><i class=”fa fa-thumbs-up”></i> ‘ . __( ‘Goal’, STM_DOMAIN ) . ‘<br/>’ . $currency . $target_amount . ‘</span>’;
$output .= ‘</div>’;
$output .= ‘<div class=”donate_now”>’;
$output .= ‘<a href=”‘ . get_the_permalink() . ‘” class=”button cause_donate_btn”>’ . __( ‘DONATE NOW’, STM_DOMAIN ) . ‘</a>’;
$output .= ‘</div>’;
$output .= ‘</div>’;
$output .= ‘</li>’;
}
$output .= ‘</ul>’;
wp_reset_query();

return $output;
}

}

if( defined( ‘WPB_VC_VERSION’ ) ){
new STM_VC_Causes();
}

The custom VC element is showing up correctly for me on the admin backend side of the site (Screenshot 2 – https://i.stack.imgur.com/zKCgs.png), but I cannot figure out how to get the admin-inputted ID to show up on the frontend – no matter what, it still shows the most recent “Cause.” Screenshot 3 (https://i.stack.imgur.com/13Qw4.png) is simply an example screenshot of what the individual “Cause” looks like when a page with the custom VC element is pushed live.

I’ve contacted the support team for the theme, but they only suggested this Post Types Order WP plugin, which only allows you to change the displayed “Cause” across the entire site, instead of allowing you to specify it in a page-by-page/post-by-post basis. I’ve also scoured Google/StackOverflow and tried various queries in the WP Codex, building out a custom shortcode (the custom VC element itself is a custom shortcode: [stm_causes]), but it just displays the most recent “Cause.”

Any help is much appreciated!
Thank you.

Read more here:: How to specify an ID in custom Visual Composer element

Leave a Reply

Your email address will not be published. Required fields are marked *