Responsive slider in WordPress met backend

Voor WordPress zijn er gigantisch veel sliders te vinden als plugin. Ik was op zoek naar een responsive slider voor in de header met een gemakkelijke backend om foto’s toe te voegen. Na een lange speurtocht besloten om dit zelf te regelen. Uiteindelijk gekozen voor een populaire slider: Nivo Slider. De Javascript en CSS bestanden toegevoegd in “lib/scripts.php” en de nodige HTML in de header. In mijn geval in “header-top-navbar.php” gezien ik gebruik maak van het Roots starter theme. Top, maar nu de backend? Er zit al een mediabibliotheek in de WordPress backend, waarom hier niet gebruik van maken! Afbeeldingen kunnen geupload, geroteerd, gespiegeld, geschaald en bijgesneden worden. Helemaal compleet dus! Maar niet alle afbeeldingen in de mediabibliotheek moeten in de slider komen. Zodoende gekozen voor een “filter” op de “alt-text” ofwel alternatieve tekst mocht de afbeelding niet weergegeven kunnen worden. Wanneer die gelijk is aan “slider” moet deze in de slider komen. Na wat zoek werk in de database tot de volgende MySQL query gekomen:

SELECT
	second.meta_value
FROM
	wp_postmeta as first
JOIN
	wp_postmeta as second
ON
	first.post_id = second.post_id AND second.meta_key = "_wp_attached_file"
WHERE
	first.meta_value="slider"

Hierbij wordt gezocht naar “meta_value”: “slider”. Aan de hand van het “post_id” wordt gezocht naar de afbeelding welke als “meta_key”: “_wp_attached_file” heeft. Dit verwerkt naar “WordPress taal” met daarbij de multidimensionale array geconverteerd naar een enkele array met als resultaat:

$results = $wpdb->get_results('
	SELECT
		second.meta_value
	FROM
		'.$wpdb->postmeta.' as first
	JOIN
		'.$wpdb->postmeta.' as second
	ON
		first.post_id = second.post_id AND second.meta_key = "_wp_attached_file"
	WHERE
		first.meta_value="slider"
	',ARRAY_N);
$results = array_map(function($array){return $array[0];},$results);

Nu het resultaat nog in de slider zetten:

<div id="slider" class="nivoSlider">
	<? foreach($results as $result): ?>
	<img src="assets/<?=$result;?>" alt="">
	<? endforeach; ?>
</div>

Typisch weer een oplossing op mijn “slogan” gebaseerd: Waarom moeilijk doen als het makkelijk kan!