CODEWITHSUNDEEP
phpwordpresswordpress-shortcode
Doug Morris
Doug Morris

Reputation: 15

How do I get this wp_query working in a shortcode?

I'm unable to get a wp_query working in a shortcode. I think I have it correct according to the wp codex but it keeps breaking my site - 500 error. It's in an external file for a genesis custom theme.

The file is in sub folder and I have included_once the file and added the add_shortcode function to the functions.php file. When I comment out the include_once the site is good so I'm guessing I'm missing something within the function.

<?php
function exp_post_slider_shortcode( $atts ) {

$a = shortcode_atts( array(
    'cat' => '15',
    'posts_per_page' => '3',
), $atts ); 

$output = '';   
 $args = array(

            'cat' => $a['cat'],
            'posts_per_page' => $a['posts_per_page'],
);
    $post_slider = new WP_Query( $args );

if ( $post_slider->have_posts() ) {
    // The Loop
     $output .=  '<div class="exp-post-slider-container">'
     $output .= '<div class="owl-carousel owl-theme exp-post-slider">'
    while ( $post_slider->have_posts() ) {
        $post_slider->the_post();
        $feat_image_url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
        $output .= '<div class="exp-cat-slide" style="background-image:url('.$feat_image_url.'); background-size:cover; background-repeat:no-repeat;">';
        $output .= '<div class="exp-slide-post-info">';
        $output .= '<h2>' . get_the_title() . '</h2>';
        $output .= '<p>' . get_the_author() . ' | ' . get_the_date() . '</p>';
        $output .= '<p><a href="' . get_permalink() . '" class="exp-post-link-btn">View Post</a>';
        $output .= '</div></div>';
    }

    wp_reset_postdata();
} else { 

        $output .= '<div class="exp-cat-slide" style="background-image:url(https://webclient.co/explore/wp-content/uploads/2019/04/looking-out-no-posts.jpg); background-size:cover; background-repeat:no-repeat;">';
        $output .= '<div class="exp-slide-post-info">';
        $output .= '<h2>No Adventures Posted Here Yet</h2>';
        $output .= '<p>Check Back Soon!</p>';
        $output .= '<p><a href="https://webclient.co/explore/blog/" class="exp-post-link-btn">Check Out Our Blog</a>';
        $output .= '</div></div>';
}


$output .= '</div>'
$output .= '</div>'

return $output;
} ?>

I'm trying to get the to output to a owl slider. Not problem getting it to run as a function within a theme hook but I need it to work as a shortcode with category and number of post parameters.

Upvotes: 1

Views: 2240

Answers (2)

mynd
mynd

Reputation: 794

I just moved your provided code to a Wordpress test-environment and it becomes apparent that you are missing some ; at the end of the line when using your $output variable.

With the code below I am able to output your shortcode:

add_shortcode('test','exp_post_slider_shortcode');

function exp_post_slider_shortcode( $atts ) {

$a = shortcode_atts( array(
    'cat' => '15',
    'posts_per_page' => '3',
), $atts ); 

$output = '';   
 $args = array(

            'cat' => $a['cat'],
            'posts_per_page' => $a['posts_per_page'],
);
    $post_slider = new WP_Query( $args );

if ( $post_slider->have_posts() ) {
    // The Loop
     $output .=  '<div class="exp-post-slider-container">';
     $output .= '<div class="owl-carousel owl-theme exp-post-slider">';
    while ( $post_slider->have_posts() ) {
        $post_slider->the_post();
        $feat_image_url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
        $output .= '<div class="exp-cat-slide" style="background-image:url('.$feat_image_url.'); background-size:cover; background-repeat:no-repeat;">';
        $output .= '<div class="exp-slide-post-info">';
        $output .= '<h2>' . get_the_title() . '</h2>';
        $output .= '<p>' . get_the_author() . ' | ' . get_the_date() . '</p>';
        $output .= '<p><a href="' . get_permalink() . '" class="exp-post-link-btn">View Post</a>';
        $output .= '</div></div>';
    }

    wp_reset_postdata();
} else { 

        $output .= '<div class="exp-cat-slide" style="background-image:url(https://webclient.co/explore/wp-content/uploads/2019/04/looking-out-no-posts.jpg); background-size:cover; background-repeat:no-repeat;">';
        $output .= '<div class="exp-slide-post-info">';
        $output .= '<h2>No Adventures Posted Here Yet</h2>';
        $output .= '<p>Check Back Soon!</p>';
        $output .= '<p><a href="https://webclient.co/explore/blog/" class="exp-post-link-btn">Check Out Our Blog</a>';
        $output .= '</div></div>';
}


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

return $output;
}

On more sidenote: Please be aware of the output buffer. In case you are experiencing that your shortcode content is not placed where you expect it to be, take a look at ob_get_clean() function.

Upvotes: 1

BugsArePeopleToo
BugsArePeopleToo

Reputation: 2996

You need add_shortcode function to turn your function into a shortcode. Very good documentation on this from WP: https://codex.wordpress.org/Shortcode_API

Might look like this:

add_shortcode( 'exp_post_slider', 'exp_post_slider_shortcode' );

Then in the editor you can use this in your content to trigger your exp_post_slider_shortcode function and generate the output:

[exp_post_slider whatever_args="whatever..."]

Upvotes: 0

Related Questions