Cambiar un Slider en WordPress

Hace unos días tuve que modificar una web creada con WordPress y que utiliza un tema muy simple llamado Simple’n’Bright. Es un problema muy concreto pero no debería ser muy complicado adaptar estas soluciones a cualquier otro tema.

El cliente quería modificar las imágenes que muestra un slider que ese tema coloca en la página principal del sitio web, algo aparentemente muy sencillo.

El problema llegó cuando subí la imagen número 11. Tras refrescar la página veo que sólo me muestra las 10 primeras imágenes y el cliente quería 14.

Tras moverme un poco por el código llego al fichero homepage-slider.php que se encuentra en la carpeta wp-content/themes/simplenbright.

El código de ese fichero es el siguiente:

<!-- begin #slider -->

<div id="slider_container">
	<div id="slider">
        	<?php
				$captions = array();
				$tmp = $wp_query;
				$wp_query = new WP_Query('post_type=featured&orderby=menu_order&order=ASC');
				if($wp_query->have_posts()) : while($wp_query->have_posts()) : $wp_query->the_post();
				$fitemlink = get_post_meta($post->ID,'snbf_fitemlink',true);
			?>

        	<?php if($fitemlink !=''){?>
			<a href="<?php echo $fitemlink;?>">
			<?php }?>

			<img class="slideimg" src="<?php echo get_post_meta($post->ID, 'snbf_slideimage_src', true); ?>" alt="<?php echo get_post_meta($post->ID, 'snbf_fitemcaption', true); ?>" title="<?php echo get_post_meta($post->ID, 'snbf_fitemcaption', true); ?>" />

			<?php if($fitemlink !=''){?>
			</a>
			<?php }?>
			<?php echo $image[0]; ?>
	    	<?php
		    endwhile; wp_reset_query();
		    endif;
		    $wp_query = $tmp;
		    ?>
	</div>
</div>
<!-- end #slider -->

<!-- nivo slider & slider settings -->
		<script type="text/javascript">
		$j = jQuery.noConflict();
			$j(window).load(function() {
				$j('#slider').nivoSlider({
					effect:'<?php if(of_get_option('snb_slidereffect')==''): echo 'random';
						  else: echo of_get_option('snb_slidereffect');
						  endif;?>',
					slices:<?php if(of_get_option('snb_showslide')==''): echo '15';
						  else: echo of_get_option('snb_showslide');
						  endif;?>,
					animSpeed:<?php if(of_get_option('snb_slideranimationspeed')==''): echo '500';
						  else: echo of_get_option('snb_slideranimationspeed');
						  endif;?>,
					pauseTime:<?php if(of_get_option('snb_sliderpausetime')==''): echo '3000';
						  else: echo of_get_option('snb_sliderpausetime');
						  endif;?>,
					startSlide:0, //Set starting Slide (0 index)
					directionNav:true, //Next & Prev
					directionNavHide:false, //Only show on hover
					controlNav:true, //1,2,3...
					controlNavThumbs:false, //Use thumbnails for Control Nav
					controlNavThumbsFromRel:false, //Use image rel for thumbs
					controlNavThumbsSearch: '.jpg', //Replace this with...
					controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
					keyboardNav:true, //Use left & right arrows
					pauseOnHover:true, //Stop animation while hovering
					manualAdvance:false, //Force manual transitions
					captionOpacity:<?php if(of_get_option('snb_slidercaptionopacity')==''): echo '0.8';
						  else: echo of_get_option('snb_slidercaptionopacity');
						  endif;?>, //Universal caption opacity
					beforeChange: function(){},
					afterChange: function(){},
					slideshowEnd: function(){} //Triggers after all slides have been shown

					//check for slider options at http://nivo.dev7studios.com/#usage
				});
			});
		</script>

		<link rel='stylesheet' id='nivo-slider-css' href='<?php echo get_template_directory_uri(); ?>/library/css/nivo-slider.css?ver=3.4.1' type='text/css' media='all' />
		<script type='text/javascript' src='<?php echo get_template_directory_uri(); ?>/library/js/jquery.nivo.slider.pack.js?ver=1.0'></script>
		<!-- end nivo slider & slider settings -->

Como vemos parece que el problema puede estar dentro del div con id=”slider” donde hay un bucle while que recorre los posts obtenidos en $wp_query.

Lo primero que hice fue mostrar la consulta con un echo, lo que se hace con echo $wp_query ->request y comprobé que efectivamente, añade al SQL un LIMIT 1, 10.

La solución consistió en añadir a la consulta de la línea 8 un parámetro más que aumente ese límite: posts_per_page=20. La línea entonces quedaría así:

$wp_query = new WP_Query('post_type=featured&posts_per_page=20&orderby=menu_order&order=ASC');

Con esto conseguimos que se muestren hasta 20 imágenes pero aún había otro requisito: las imágenes salían en el orden en el que las iba subiendo y no en el orden que el cliente deseaba.

Para ello tuve que modificar nuevamente esa línea cambiando el parámetro orderby=menu_order por orderby=post_title y modificar los nombres de las entradas del slider por 01_xxxx, 02_xxxx. Así ya se mostraban hasta 20 imágenes y en el orden que yo quería.