Nested Shortcodes in Skills Bar

[co50]

We are trying to have the Skills Bar value based on a user’s MyCred balance. This requires nesting a shortcode within your skills bar shortcode. We tried this below and many variations of it with no luck:

[skill_bar heading=“Test Description” percent="[mycred_my_balance]%" style=“background-color: #222”]

The result is attached. Is this possible to do?

[ruenel]

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.

[co50]

Wow that’s a lot of code! Appreciated, and I implemented it but it doesn’t seem to effect anything in the bar. The bar shows properly but just the default gray bg, “test description” above it as in the shortcode, but no amount filled in even though the shortcode = 21 in the test.

[mldarshana]

Hi There,

Could you please provide us with the URL to your referenced page, so that we can assist you accordingly with a possible workaround.

Thanks!

[co50]

I cannot unfortunately because the page it appears on is a My Account page in WooCommerce that requires both a login and an existing subscription. I just figured I would double check in case maybe your syntax in the code was off or something was missing (eg. % sign appended to end of shortcode?) I do really appreciate your help. Wish the whole nesting shortcodes was simpler!

[paul.r]

Hi,

I double check the code and it seems to be correct.

Though every site has different set-up, would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

• Link to your site
• WordPress Admin username / password

All the best!