Clash Royale CLAN TAG#URR8PPP

Wordpress - 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:

<?php

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' => __( '', STM_DOMAIN )
)
)
) );




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

/** ========================================
* Qing Custom 8-6-2018
* Display selected Cause ID
======================================== **/

$title = '';
$id = '';

extract( shortcode_atts( array(
'title' => '',
'id' => ''
), $atts ) );

$fea_cause = $atts['id'];
$donations = new WP_Query( array( 'post_type' => 'donation', 'posts_per_page' => 1, 'post__in' => $fea_cause ) );

$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-150x150' );

$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."

[stm_causes]

Edit 8/7/18:

I've made several edits to the causes.php template within the Savior theme, but for some reason, the updated WP_Query loop ended up not pulling in any data (Screenshot 3: https://i.stack.imgur.com/JLibO.png ).

WP_Query

The only exception is if I omit any ID in the VC editor backend; If I don't enter an ID, it defaults to the most recent Cause. However, if I enter any ID, even if it's the same ID as the most recent post, nothing shows up...

Any idea what could be wrong with my logic?

Thank you!

1 Answer
1

render function Fixed!

render

$fea_cause = $atts['id'];
$donations = new WP_Query( array( 'post_type' => 'donation', 'posts_per_page' => 1, 'post__in' => array($fea_cause )));


Huge props to Nilesh Sanura for his help!

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.