<div class="eternal">
  <div class="one">
    [shortcode]Some text 1[/shortcode]    
    [shortcode]Some text 2[/shortcode]    
    [shortcode]Some text 3[/shortcode]    
    [shortcode]Some text 4[/shortcode]    
  </div>  
  <div class="two">
    [shortcodeanother]Some text 1[/shortcodeanother]    
    [shortcodeanother]Some text 2[/shortcodeanother]    
    [shortcodeanother]Some text 3[/shortcodeanother]    
    [shortcodeanother]Some text 4[/shortcodeanother]     
  </div>
</div>

I have asked a similar question before, which was also answered: Shortcode under a Shortcode Multiple times Possible?

But I am in a situation where I need to publish two inner shortcodes with different HTML.

In the answer suggested in the linked text when we intend to publish two inner shortcodes how can we do that when this is not unique in two cases:

return '<div>' . do_shortcode($content) . '</div>';

In the current situation outer shortcode is easy to create, but how can we do that with two inner shortcodes?

Or maybe if nesting of shortcodes is possible?

[shortcode]
  [shortcodenest1]
    [shortcodenest2]
    [/shortcodenest2]
  [/shortcodenest1]
[/shortcode]

<div class="eternal">
  <div class="one">
    [shortcode]Some text 1[/shortcode]    
    [shortcode]Some text 2[/shortcode]    
    [shortcode]Some text 3[/shortcode]    
    [shortcode]Some text 4[/shortcode]    
  </div>  
  <div class="two">
    [shortcodeanother]Some text 1[/shortcodeanother]    
    [shortcodeanother]Some text 2[/shortcodeanother]    
    [shortcodeanother]Some text 3[/shortcodeanother]    
    [shortcodeanother]Some text 4[/shortcodeanother]     
  </div>
</div>

I have asked a similar question before, which was also answered: Shortcode under a Shortcode Multiple times Possible?

But I am in a situation where I need to publish two inner shortcodes with different HTML.

In the answer suggested in the linked text when we intend to publish two inner shortcodes how can we do that when this is not unique in two cases:

return '<div>' . do_shortcode($content) . '</div>';

In the current situation outer shortcode is easy to create, but how can we do that with two inner shortcodes?

Or maybe if nesting of shortcodes is possible?

[shortcode]
  [shortcodenest1]
    [shortcodenest2]
    [/shortcodenest2]
  [/shortcodenest1]
[/shortcode]

• shortcode
• css
• html
• content

Share Improve this question edited Jan 27, 2020 at 12:54 WordCent asked Jan 27, 2020 at 12:48 WordCentWordCent 1,89166 gold badges3434 silver badges6060 bronze badges 2

• 2 What exactly is you problem with nested shortcodes? Do whatever nesting you want, just call do_shortcode() on inner content in your shortcode functions. – Vitauts Stočka Commented Jan 27, 2020 at 14:05
• Sure, I will update you. – WordCent Commented Jan 27, 2020 at 14:33

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Yes, you can keep nesting shortcodes. Just keep using the do_shortcode() until the deepest level is reached. https://codex.wordpress/Shortcode_API#Nested_Shortcodes

So you can do this,

[container]
  [other_column class="extra-class"]
    [content]
      col 1
    [/content]
    [another]
      col 1-2
    [/another]
  [/other_column]
  [column]
    [another]
      col 2
    [/another]
  [/column]
[/container]

To achieve output like this,

<div class="container">
  <div class="other-column extra-class">
    <div class="content">
      col 1
    </div>
    <div class="another">
      col 1-2
    </div>
  </div>
  <div class="column">
    <div class="another">
      col 2
    </div>
  </div>
</div>

Provided you have shortcode functions something like this. I threw in an attributes example, should you need them.

function container_shortcode($atts = array(), $content = null) {
  return '<div class="container">' . do_shortcode($content) . '</div>';
}
add_shortcode( 'container', 'container_shortcode' );

function column_shortcode($atts = array(), $content = null) {
  return '<div class="column">' . do_shortcode($content) . '</div>';
}
add_shortcode( 'column', 'column_shortcode' );

function other_column_shortcode($atts = array(), $content = null) {
  $defaults = array(
    'class' => '',
  );
  $atts = shortcode_atts( $defaults, $atts, 'other_column_shortcode' );
  $class = (! empty($atts['class']) ) ? 'other-column ' . $atts['class'] : 'other-column';
  return '<div class="' . esc_attr($class) . '">' . do_shortcode($content) . '</div>';
}
add_shortcode( 'other_column', 'other_column_shortcode' );

function content_shortcode($atts = array(), $content=null) {
  return '<div class="content">' . $content . '</div>';
}
add_shortcode( 'content', 'content_shortcode' );

function another_shortcode($atts = array(), $content=null) {
  return '<div class="another">' . $content . '</div>';
}
add_shortcode( 'another', 'another_shortcode' );