0

Hi I'm trying to do something rather tricky in my Wordpress Theme I'm more of a designer front-end developer so its a bit of a guess work with php. Anyone have any ideas why this code only displays one slide. I want it to run a slideshow pulling in multipe slides from one category in my theme.

Thanks For your help

    //Add Nivo Short Codes
function nivo_slider_function($atts){

   extract(shortcode_atts(array(
      'posts' => 5,
      'category' => ''
   ), $atts));

 $args = array(
        'numberposts' => -1,
        'orderby' => 'menu_order',
        'order' => 'ASC',
        'post_type' => 'homepage_slider'
    );

    if ( ! empty( $category ) ) {
        $args['category_name'] = $category;
    }

    $posts = get_posts( $args );

    $homepage_slider  = '<div id="slider">'; //Open the container
    foreach ( $posts as $post ) { // Generate the markup for each Question
        $homepage_slider .= sprintf(('<h3><a href="">%1$s</a></h3><div>%2$s</div>'),
            $post->post_title,
            wpautop($post->post_content)
        );
    }
    $homepage_slider .= '</div>'; //Close the container


   $return_string = '<div id="slider" class="nivoSlider">';

   query_posts(array('post_type' => 'homepage_slider', 'orderby' => 'menu_order', 'order' => 'ASC' , 'showposts' => $posts));

   if (have_posts()) :
      while (have_posts()) : the_post();

         $slider_img_src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'homepage-slide', false);
         $target_link = get_post_meta(get_the_ID(), 'slide_target_link', true);   
         $return_string .= '<a href="'.$target_link.'" rel="nofollow"><img src="' . $slider_img_src[0] .'" /></a>';

      endwhile;
   endif;
   $return_string .= '</div>';

   wp_reset_query();
   return $return_string;

}

function register_shortcodes(){
   add_shortcode('slider-demo', 'nivo_slider_function');
}

add_action( 'init', 'register_shortcodes');

This was the original code taken from a comment on this page. After following the slider tutorial I wanted to use the a shortcode to post it on any page instead of a template however I also wanted different slideshows so was trying above to add in the ability to connect the slideshows with categories.

http://willrees.com/2013/05/create-and-manage-a-nivo-slider-using-wordpress-custom-post-types/

function nivo_slider_function($atts){

   extract(shortcode_atts(array(
      'posts' => 5,
   ), $atts));

   $return_string = '<div id="slider" class="nivoSlider">';

   query_posts(array('post_type' => 'homepage_slider', 'orderby' => 'menu_order', 'order' => 'ASC' , 'showposts' => $posts));

   if (have_posts()) :
      while (have_posts()) : the_post();

         $slider_img_src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'homepage-slide', false);
     $target_link = get_post_meta(get_the_ID(), 'slide_target_link', true);

         $return_string .= '<a href="'.$target_link.'" rel="nofollow"><img src="' . $slider_img_src[0] .'" /></a>';

      endwhile;
   endif;
   $return_string .= '</div>';

   wp_reset_query();
   return $return_string;
}

function register_shortcodes(){
   add_shortcode('slider-demo', 'nivo_slider_function');
}

add_action( 'init', 'register_shortcodes');
  • 1
    query_posts and extract in same function... 2 bad practices at price of one. However, why do you run 2 queries for 'homepage_slider' posts (one with get_posts and the other with query_posts)? – gmazzap Mar 23 '14 at 17:35
  • Sorry I don't really understand php at all so no idea? Its a bit hit and miss and your comment just means gibberish to my designer eyes?? – brightmist.co.uk Mar 23 '14 at 23:08
  • Try to explain a bit more in detail what tou want to do. Because looking at your code I can't full understand, because your code is... confused. Seems you are merging 2 sliders, in fact you have 2 divs having <div id="slider" or better you create 2 divs with <div id="slider" but return only one... do you understand what I mean with "confused"? – gmazzap Mar 23 '14 at 23:15
  • Ah Yes I see. I've tried to merge 2 pieces of code shall paste the original in a sec. – brightmist.co.uk Mar 23 '14 at 23:18
0

What surprise me is that someone on May 2013, write a tutorial using extract and query_posts in same function.

extract is considered a bad practice in PHP in general, and it's usage was abandoned also from WP core (it will no longer be used, but there are still extract calls in actual code).

query_posts is a bad practice in WordPress world, you can read about it in the most famous WPSE answer by Rarst and in Codex too (that actually use the picture by Rarst).

Also:

  1. your code use the deprecarted argument 'numposts', use 'posts_per_page' instead
  2. your code put stuff in html output without escaping with esc_* functions
  3. your code output images without alt attribute that is required for W3C compliant html code

That said, what you want to do is simple a matter of a new WP_Query called from shortcode callback.

function nivo_slider_function( $atts ){

   $posts_per_page = isset( $atts['posts'] ) ? $atts['posts'] : -1;

   $args = array(
     'posts_per_page' => $posts_per_page,
     'orderby' => 'menu_order',
     'order' => 'ASC',
     'post_type' => 'homepage_slider'
   );

   if ( isset($atts['category']) && ! empty( $atts['category'] ) ) {
     $args['category_name'] = $atts['category'];
   }

   $query = new WP_Query( $args );

   // nothing to do if we have no posts
   if ( ! $query->have_posts() ) return;

   $slide_format = '<a href="%s" rel="nofollow"><img src="%s" alt="" /></a>';
   $slides = '';
   $slider = '';

   while( $query->have_posts() ) { $query->the_post();
     $thumbid = get_post_thumbnail_id($post->ID);
     // if post has not thumbnail return
     if ( empty( $thumbid ) ) continue;
     $img_src = (array) wp_get_attachment_image_src( $thumbid, 'homepage-slide' );
     // if a valid image is not foud return
     if ( empty( $img_src ) || ! filter_var( $img_src[0], FILTER_VALIDATE_URL ) ) continue;
     $target_link = get_post_meta( get_the_ID(), 'slide_target_link', true );
     // if no valid link is saved in 'slide_target_link' meta, set link to '#'
     if (empty( $target_link ) || ! filter_var( $target_link, FILTER_VALIDATE_URL ) ) {
       $target_link = '#';
     }
     $slides .= sprintf( $slide_format, esc_url( $target_link ), esc_url( $img_src[0] ) );
   }

   wp_reset_postdata();

   if ( ! empty( $slides ) ) {
     $id = esc_attr( wp_generate_password( 6, false, false) );
     $slider = "<div id=\"slider_{$id}\" class=\"nivoSlider\">{$slides}</div>";
   }

   return $slider;
}
  • Wow thanks thanks for that. I think I need a beginners course in php because I don't reaaly understand it. Also what do I put for the shortcode? My shortcode [slider-demo]in my wordpress editor no longer works? – brightmist.co.uk Mar 24 '14 at 20:32
  • Sorry if I sound thick. I see you mentioned a short code above but I've no idea how to create it? Even from reading wordpress codex it just makes no sense to me :( – brightmist.co.uk Mar 24 '14 at 20:37
  • Oh of course silly me so obvious thanks it works a treat :) – brightmist.co.uk Mar 24 '14 at 21:15
  • Is there a way to have multiple sliders on one page? – brightmist.co.uk Mar 24 '14 at 21:53
  • @brightmist.co.uk I've edited the code to make use unique IDs for slider div, To have more sliders on a page, just use the same shortcode more than once, using a different category slug each one. – gmazzap Mar 24 '14 at 23:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.