Hello There,
Thanks for writing in! nesting of shortcode will not work. You will have to create your own custom skillbar to include the my_cred balance shortcode. And because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.
After the child theme is set up, please add the following code in your child theme’s functions.php file
// Skill Bar
// =============================================================================
function custom_x_shortcode_skill_bar( $atts ) {
extract( shortcode_atts( array(
'id' => '',
'class' => '',
'style' => '',
'heading' => '',
'bar_text' => '',
'bar_bg_color' => '',
'percent' => '100'
), $atts, 'x_skill_bar' ) );
$id = ( $id != '' ) ? 'id="' . esc_attr( $id ) . '"' : '';
$class = ( $class != '' ) ? 'x-skill-bar ' . esc_attr( $class ) : 'x-skill-bar';
$style = ( $style != '' ) ? ' ' . $style : '';
$heading = ( $heading != '' ) ? '<h6 class="h-skill-bar">' . $heading . '</h6>' : '';
$bar_text = ( $bar_text != '' ) ? $bar_text : '';
$bar_bg_color = ( $bar_bg_color != '' ) ? ' background-color: ' . $bar_bg_color . ';' : '';
$js_params = array(
'percent' => ( $percent != '' ) ? do_shortcode('[mycred_my_balance]') : ''
);
$data = cs_generate_data_attributes('skill_bar', $js_params );
if ( $bar_text != '' ) {
$bar_text = $bar_text;
} else {
$bar_text = $percent;
}
$output = "{$heading}<div {$id} class=\"{$class}\" {$data}><div class=\"bar\" style=\"{$style}{$bar_bg_color}\"><div class=\"percent\">{$bar_text}</div></div></div>";
return $output;
}
add_action('wp_head', 'change_skillbar_shortcode');
function change_skillbar_shortcode() {
remove_shortcode( 'x_skill_bar' );
add_shortcode( 'x_skill_bar', 'custom_x_shortcode_skill_bar' );
add_shortcode( 'x_skill_bar', 'x_shortcode_skill_bar' );
}
// =============================================================================
And you should be using this shortcode:
[skill_bar heading="Test Description" style="background-color: #222"]
The percent is no longer needed since it is already included in the code above.