Creating shortcodes in wordpress – how do I allow paragraphs

1 Views

I am currently creating shortcodes for a wordpress theme I am developing. I want it to be as user friendly as possible and currently I find that when I use paragraphs to separate out the shortcodes in the wordpress editor, it adds unnecessary <p></p> code.

For example, when I type this in my WP editor:

Read More
[container]

[row]

[one_half]1st Half[/one_half]

[one_half]2nd Half[/one_half]

[/row]

[/container]

I get this result in the front end: 

<section class="wrapper special container style3"></p>
<p><div class="row"></p>
<p><div class="6u"><section>1st Half</section></div></p>
<p><div class="6u"><section>2nd Half</section></div></p>
<p></div></p>
<p></section>

Whereas if I write this: 

[container][row][one_half]1st Half[/one_half][one_half]2nd Half[/one_half][/row][/container]

It comes out correct….like this: 

<section class="wrapper special container style3">
<div class="row">
    <div class="6u">
        <section>1st Half</section>
    </div>
    <div class="6u">
        <section>2nd Half</section>
    </div>
</div>
</section>

Here is the php for my shortcodes (the three referenced above): 

// Container

function container($atts, $content = null) {
   $return_string = '<section class="wrapper special container style3">'. do_shortcode($content) .'</section>';

    wp_reset_query();
    return $return_string;
}

// Row

function row($atts, $content = null) {
   $return_string = '<div class="row">'. do_shortcode($content) .'</div>';

    wp_reset_query();
   return $return_string;
}

function one_half($atts, $content = null) {
    $return_string .= '<div class="6u">';
    $return_string .= '<section>'. do_shortcode($content) .'</section>';
    $return_string .= '</div>';

    wp_reset_query();
   return $return_string;
}


function register_shortcodes(){
   add_shortcode('row', 'row');
   add_shortcode('one_half', 'one_half');
   add_shortcode('container', 'container');

}
add_action( 'init', 'register_shortcodes');

What I want is to be able to write my shortcodes in the wp editor like the first example (as it’s a lot more natural for a user to view it like this) but have the outputted code correct like in the second example. Is there any way to achieve this?

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. If you’re adding markup to your posts, you should NOT be using the visual editor. Either find a way to add your markup via a custom filter, so you can avoid inserting into your posts, or STOP USING THE VISUAL EDITOR.

    The visual editor is for people who don’t know what markup is.

    However, adding this code at the top of your templates pages will work (or place this in your template’s functions.php file):

    <?php remove_filter ('the_content', 'wpautop'); ?>

    The above solution won’t effect existing posts, but only new ones.

  2. The problem is not with your code but with WordPress’ visual editor that adds additional paragraph tags automatically (to be more precise the paragraph tags are added upon display and not upon storage).

    You can either:

    • Use the Text view (HTML view) to paste the shortcodes the way you want with linebreaks.

      OR

    • Try the Disable Automatic P Tags plugin.

  3. <?php remove_filter ('the_content', 'wpautop'); ?>

    Add the above code to functions.php file if you want to remove the

    tag from each and every content.

    Otherwise use this code in that file where you want to remove

    tag.