Custom post type query creates blank infinite loop in shortcode

Question

Creating a shortcode that would pull a certain custom post type. Using the_title() for test purposes. The shortcode itself is working fine (echoing an attribute value). Query when used outside a shortcode works fine as well. But when it comes down to querying the post type inside the shortcode, at first, it takes quite a bit of time to load. And when it finaly does, it repeats the shortcode attribute with previously used shortcode many-many times. Title doesn't show. So, Let's say I'm using 2 shortcodes on the same page.

Shortcode 1 (the problematic one):

[custom-table custom="here we are gonna have a slug"]

Shortcode 2:

[custom-button width="300px" bg="#29b938" color="#ffffff" padding="25px 35px" text="Start Your Diet" font="25px" weight="bold" style="" url="http://google.com" new-tab="true"]

code for shortcode 1

function tables_shortcode($atts) {
    ob_start();
    extract(shortcode_atts(array(
        'custom'=> 'none'
    ), $atts));
    $tabargs = array(
        'posts_per_page' => -1,
        'offset'         => 0,   
        'post_type' => 'customtables'

    );

    $tabs = new WP_Query($tabargs);
    if ( have_posts() ) while ($tabs->have_posts()) : $tabs->the_post();
        the_title();
    endwhile;
    wp_reset_postdata();
    echo $atts['custom'];
    return ob_get_clean();
}
add_shortcode('custom-table','tables_shortcode');

code for shortcode 2 (works fine on its own)

function custom_button($atts) {
    ob_start();

     extract(shortcode_atts(array(
      'width' => '200',
            'bg' => '#000',
            'color' => '#fff',
            'padding' => '10px 20px',
            'text' => 'Visit Now',
            'font' => '20px',
            'weight' => '300',
            'style' => 'normal',
            'url' => '#',
            'new-tab'=> 'false'
   ), $atts));

?>

    <div class="inrevbtn">
            <a class="custombtn" href="<?php echo $atts['url'];?>" <?php if ($atts['new-tab'] == 'true') { echo 'target="_blank"'; } ?>>
                 <?php echo $atts['text']; ?>
            </a>

    </div>
<?php
    return ob_get_clean();
}
add_shortcode('custom-button', 'custom_button');

Xhynk · Accepted Answer · 2019-01-30 22:59:06Z

1

You've got a very confusing syntax on your button. Your first href quotation is native, but the second one is being echoed. That makes it really hard to read and parse, even for an IDE. Also, you don't need to use extract() if you're not going to use the extracted variables (like $text instead of $atts['text'] - Note that variables with a dash will fail to get extracted because $new-tab is not a valid variable, but $new_tab and $newtab are valid, so you should use one of those in your shortcode array instead, if you do want to use extract() that is.

In your second shortcode, you're checking if the global query has posts with have_posts(), you should be running that method off of your $tabs custom WP Query instead.

You've also got a syntax error in your if, you're not starting it with a : or { and thus closing it with a endif; or } - I presume that this one specifically is the cause of your issue.

Try something like this for your button code:

add_shortcode('custom-button', 'custom_button');
function custom_button($atts){
    extract(shortcode_atts(array(
        'width'   => '200',
        'bg'      => '#000',
        'color'   => '#fff',
        'padding' => '10px 20px',
        'text'  => 'Visit Now',
        'font'  => '20px',
        'weight'  => '300',
        'style'   => 'normal',
        'url'    => '#',
        'newtab' => false
    ), $atts));

    ob_start();
?>
    <div class="inrevbtn">
        <a class="custombtn" href="<?php echo $url; ?>" <?php echo ($newtab == 'true') ? 'target="_blank"' : ''; ?>>
            <?php echo $text; ?>
        </a>
    </div>
<?php
    return ob_get_clean();
}

And something like this for your table code:

add_shortcode('custom-table', 'tables_shortcode');
function tables_shortcode($atts) {
    extract(shortcode_atts(array(
        'custom'=> 'none'
    ), $atts));

    ob_start();

    $tabargs = array(
        'posts_per_page' => -1,
        'offset'         => 0,   
        'post_type'      => 'customtables'
    );

    $tabs = new WP_Query( $tabargs );

    if( $tabs->have_posts() ){
        while( $tabs->have_posts() ) : $tabs->the_post();
            the_title();
        endwhile;

        wp_reset_postdata();
        echo $custom;
    }

    return ob_get_clean();
}

Side note, you may want to clarify your class/id/variable names a bit. $tabargs and $tabs makes it sound like you're making a tabbed item in the code. There's almost literally zero overhead in changing those to more semantic names like $table_args and $table_query to help identify at a glance what they are.

Good luck!

answered Jan 30, 2019 at 22:59

Xhynk

13.9k8 gold badges36 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Samij Over a year ago

Awesome! the tables part been fixed. With your edits, the button wouldn't open the link in new tab, but it wasn't the piece damaging the rest of it. So, I left it as is (see updated version). Thanks!

Xhynk Over a year ago

Well like I had mentioned, you'd need to change to using new_tab or newtab, in your attributes and your code variables, so your shortcode would need to end with ` [… newtab="true"]` (using the code as I had written), not ` [… new-tab="true"]`. Glad to help!

Collectives™ on Stack Overflow

Custom post type query creates blank infinite loop in shortcode

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related