MathJax inside shortcode

Question

In my custom theme I included some shortcodes. One of them is called [alert]...[/alert] and results in a bootstrap alert box. It accepts a type (warning, danger, info or success), a title and the main content. The output is a simple return:

return '<div class="alert alert-' . $atts['type'] . '" role="alert"><p class="alert-title">' . $atts['title'] . '</p>' . $content . '</div>';

I need to wrap an important math formula by one of these alerts, so I wrote:

[alert type="warning" title="Important Formula"][latex]a^2 + b^2 = c^2[/latex][/alert]

But this outputs:

<div class="alert alert-warning" role="alert"><p class="alert-title">Important Formula</p>[latex]a^2 + b^2 = c^2[/latex]</div>

So the mathjax latex shortcode is not being recognized and thus is not translated into a mathematical formula. Outside the alert shortcode they are translated into a formula.

Does anybody know what's happening here?

Answer 1

You cant call a shortcode inside a shortcode they do not automatically nest, you need to use do_shortcode($content) like this (i am assuming the name of your shortcode):

function alert_shortcode( $atts, $content = null ) {
  return '<div class="alert alert-' . $atts['type'] . '" role="alert"><p class="alert-title">' . $atts['title'] . '</p>' . do_shortcode($content) . '</div>';
}