Using query_posts within a shortcode

  • Resolved EddJB

    (@eddjb)


    11 years, 11 months ago

    [Apologies if in the wrong section and sorry if this is a really stupid question]

    I’ve defined a custom post type. The featured images of this custom post type are used as a carousel. That all works fine and using cycle.js with the following code the carousel works.

    <div class="carousel">
<?php $temp_query = clone($wp_query); ?>
<?php query_posts('post_type=carousel&showposts=10'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="slide"><li>
        <?php if(has_post_thumbnail())
		{
		the_post_thumbnail('featured_image');
		} else {
			 echo '<img width="460" height="280" src="image/placeholder.jpg" class="attachment-featured_image wp-post-image">'; }
			?></li> </div><!-- Closing the class slide -->
	<?php endwhile; endif; ?>
   <?php wp_reset_query(); ?>
</div>

    I’ve been trying to work out a way to insert the above code into a short-code so that I can type [carousel] anywhere on the site and the carousel as defined above will appear rather than having to hardcode it in to a page. I’ve used shortcodes before to define basic layout stuff using the return function but I can’t work out how I can introduce PHP tp them in this way.

    I’d be really grateful for any help anyone can offer.

Viewing 3 replies - 1 through 3 (of 3 total)

  • start by reviewing https://codex.www.ads-software.com/Shortcode_API

    general:

    shortcodes have to return the results instead of echoing it; this will require recoding of your loop;

    also, using query_posts() in secondary loops is not recommended; use WP_Query() instead;

    also, there is a problem with your provided code as the usage of the div and li elements will cause invalid html code;
    as this has to work with the script for the carousel, I can’t say for sure what you need to change there.
    the below is based on your existing code:

    example for the loop only (please have a go and try to build the rest of the shortcode yourself):

    $output = '';
$carousel_query = new WP_Query('post_type=carousel&showposts=10');
if ($carousel_query->have_posts()) :
$output .= '<div class="carousel">';
while ($carousel_query->have_posts()) : $carousel_query->the_post();
$output .= '<div class="slide"><li>';
  if(has_post_thumbnail())
	{
  $output .= get_the_post_thumbnail($post->ID,'featured_image');
	} else {
  $output .= '<img width="460" height="280" src="image/placeholder.jpg" class="attachment-featured_image wp-post-image" alt="" />'; }
$output .= '</li></div><!-- Closing the class slide -->';
endwhile;
$output .= '</div>';
endif;
wp_reset_postdata(); 

return $output;

    (fully untested; subject to typing mistakes)

    Thread Starter EddJB

    (@eddjb)

    Thanks alot. Stupidly I hadn’t yet read the Shortcode API, which would have been a good starting point. Many thanks for your help! Hopefully I’ll be able to work it out from here.

    Thread Starter EddJB

    (@eddjb)

    For anyone searching for this, Alchymth’s solution worked almost immediately. I had to remove my own mistake of the incorrect
    <li> tag. Beyond that, the only slightly strange thing was that the
    <!-- Closing the class slide -->
    added a <p> tag which cycle.js treated as another slide. Once removed it all worked perfectly.

    Full code was

    <?php
function l_carousel( $atts, $content = null ) {

$output = '';
$carousel_query = new WP_Query('post_type=carousel&showposts=10');
if ($carousel_query->have_posts()) :
$output .= '<div class="carousel">';
while ($carousel_query->have_posts()) : $carousel_query->the_post();
$output .= '<div class="slide">';
  if(has_post_thumbnail())
	{
  $output .= get_the_post_thumbnail($post->ID,'featured_image');
	} else {
  $output .= '<img width="460" height="280" src="/image/placeholder.jpg" class="attachment-featured_image wp-post-image" alt="" />'; }
$output .= '</div>';

endwhile;
$output .= '</div>';
endif;
wp_reset_postdata(); 

return $output;

}

add_shortcode( 'carousel', 'l_carousel' ); ?>

    Thanks to Alchymyth again!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Using query_posts within a shortcode’ is closed to new replies.