Shortcode inserts paragraphs before and after executing shortcode

2 Views

When my shortcode is executed, it inserts a <p></p> before and after the shortcode.

My shortcode is the only thing in the text editor of the page. There is not a newline before or after my shortcode.

Read More

Here’s my shortcode functions: 

//* Shortcode for child pages
function list_sub_pages( $atts ) {

    extract( shortcode_atts(array('page' => 'home', 'display' => 'excerpt', 'show' => '3', 'speed' => '10'),$atts));

        $page_id = get_page_by_path($page);

    switch ( $display ) {
        case 'excerpt':
            $content = display_page_excerpt($page_id, (int) $speed);
            break;
        case 'kids':
            $content = display_child_pages($page_id, (int) $show, (int) $speed);
            break;
        case 'blog':
            $content = display_blog_posts((int) $show, (int) $speed);
            break;
        default:
        break;
    }


    return $content;
}
add_shortcode('group', 'list_sub_pages');

function display_page_excerpt( $page_id = 1, $speed = 10 ){
    $page_data = get_page($page_id->ID);

    $output = '<section id="'.$page_id->post_name.'">';
    $output .= '<div class="'.$page_id->post_name.'-bkgd" data-type="background" data-speed="'.$speed.'"></div><div class="wrap">';
    $output .= '<blockquote class="'.$page_id->post_name.'">'.$page_data->post_excerpt.'</blockquote>';
    $output .= '</div></section>';

        return $output;
}

function display_child_pages( $page_id = 1, $show = 3, $speed = 10 ){
    global $post;

    //query subpages
    $args = array(
        'post_parent' => $page_id->ID,
        'showposts' => $show,
        'post_type' => 'page',
        'orderby' => 'menu_order',
        'order' => 'ASC'
    );
    $subpages = new WP_query($args);

    // create output
    if ($subpages->have_posts()) :
        $output = '<section id="'.$page_id->post_name.'">';
        $output .= '<div class="'.$page_id->post_name.'-bkgd" data-type="background" data-speed="'.$speed.'"></div><div class="wrap">';
        $output .= '<h2 class="'.$page_id->post_name.'-title home-titles"><i class="icon-home-title-'.$page_id->post_name.'"></i>';
        $output .= get_the_title($page_id->ID);
        $output .= '</h2><ul class="'.$page_id->post_name.'">';
        while ($subpages->have_posts()) : $subpages->the_post();
            $output .= '<li><a href="'.get_permalink().'" class="'.$page_id->post_name.'-link"><div class="'.$page_id->post_name.'-info"><div class="'.$page_id->post_name.'-img">'.get_the_post_thumbnail($page->ID,'icons').'</div><h2>'.get_the_title().'</h2>
                        <p class="'.$page_id->post_name.'-excerpt">'.get_the_excerpt().'</p>
                        </div></a></li>';
        endwhile;
        $output .= '</ul>';
        $output .= '<div style="clear: both;"></div></div></section>';
    endif;

    // reset the query
    wp_reset_postdata();

    // return something
    return $output;
}

function display_blog_posts( $show = 3, $speed = 10 ){

    $output = '<section id="blog" data-type="background" data-speed="'.$speed.'">';
    $output .= '<div class="blog-bkgd" data-type="background" data-speed="'.$speed.'"></div><div class="wrap">';
    $output .= '<h2 class="blog-title home-titles"><i class="icon-home-title-blog"></i>Recent News</h2><ul class="recent-posts">';

    $args = array(
        'numberposts' => $show,
        'order' => 'post_date',
        'order' => 'DESC',
        'post_status' => 'publish'
    );  
    $posts = wp_get_recent_posts($args);
    foreach( $posts as $post ){
        $post_id = $post["ID"];

        $output .= '<li><a href="' . get_permalink($post_id) . '" title="'.esc_attr($post["post_title"]).'" ><h2>'.$post["post_title"].'</h2><p class="blog-excerpt">'.$post["post_excerpt"].'</p></a></li> ';
    }

    $output .= '</ul>';
    $output .= '</div></section>';

    // reset the query
    wp_reset_postdata();

    return $output;
}

Here’s what the HTML mark up looks like from my browser.

enter image description here

So, I’m in need of figuring out where these rogue paragraphs are coming from. Any insight would be greatly appreciated. Thanks!

Post Views: 2

Related posts

1 comment

  1. I think this is the result of wpautop filter running on the_content. You can remove this filter from the content:

    remove_filter('the_content', 'wpautop');
// OR if the above line does not work:
add_filter('the_content', 'remove_autop', 1);
function remove_autop($content) {
    remove_filter(current_filter(), 'wpautop');
    return $content;
}

    Or you can use shortcode_unautop filter, but this will only work if your shortcode is stand alone with no other content in the text editor:

    add_filter('the_content', 'shortcode_unautop');

Comments are closed.