I’ve recently started to work with the Genesis Framework for WordPress. I still love Thesis, but I thought why not start working with Genesis too. It was a good idea, and I’ve already landed a project or two developing with Genesis, and the last project I’ve worked on required something I hadn’t done before.
The client wanted the option to have the option of having a unique jQuery slider on each page of the website. Whilst I’m sure that there are slider plugins that can do this pretty easily, I thought why not try something different. So that’s what I did. I used WPAlchemy to handle the metabox in the backend, and I’m pretty happy with how it turned out. Watch the video below as I walk you through how I created it.
I’ve also included the code below for you:
This code is tested using Genesis v1.7.1.
If people are interested, I can update the code to work with Thesis.
functions.php
/*
* Include WPAlchemy Scripts
*/
include_once 'metaboxes/setup.php';
include_once 'metaboxes/simple-spec.php';
/*
* Enqueue Scripts
*/
add_action('get_header', 'my_load_scripts');
function my_load_scripts() {
wp_enqueue_script('jquery.slideshow', CHILD_URL.'/lib/js/jquery.slideshow.js', array('jquery'), '1', TRUE);
}
/*
* Start the slider
*/
add_action( 'wp_head', 'homepage_slider' );
function homepage_slider() { ?>
<?php if(is_page()) {
global $custom_metabox;
$custom_metabox->the_meta();
if ($custom_metabox->get_the_value('show-slider') == 'yes') {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.slideshow').slideshow({ timeout: 4000, speed: 400 });
})
</script>
<?php
} //close IF() statement
} //close IS_PAGE() statement
}//close function
/*
* Show the slider
*/
add_action( 'genesis_before_post_content', 'inner_page_slider' );
function inner_page_slider() {?>
<?php if(is_page()) {
global $custom_metabox;
$custom_metabox->the_meta();
if ($custom_metabox->get_the_value('show-slider') == 'yes') { ?>
<div class="slider">
<ul class="slideshow">
<li><img src="<?php $custom_metabox->the_value('image-1'); ?>" /></li>
<li><img src="<?php $custom_metabox->the_value('image-2'); ?>" /></li>
<li><img src="<?php $custom_metabox->the_value('image-3'); ?>" /></li>
<li><img src="<?php $custom_metabox->the_value('image-4'); ?>" /></li>
</ul>
</div>
<?php
}
}
}
/metaboxes/simple-meta.php
<div class="my_meta_control custom-bf-slider">
<p class="intro">If you want to show off some work, use a slider. Upload the images you want <strong>[500px wide / 200px high]</strong> using the WordPress Media Manager, and paste the link to the images in the fields below.</p>
<?php $selected = ' selected="selected"'; ?>
<p>
<span>Show the Slider?</span>
<?php $mb->the_field('show-slider'); ?>
<select name="<?php $mb->the_name(); ?>">
<option value=""></option>
<option value="yes"<?php if ($mb->get_the_value() == 'yes') echo $selected; ?>>Yes</option>
<option value="no"<?php if ($mb->get_the_value() == 'no') echo $selected; ?>>No</option>
</select>
</p>
<p>
<span>Image 1 URL:</span>
<?php $mb->the_field('image-1'); ?>
<input type="text" name="<?php $mb->the_name(); ?>" value="<?php $mb->the_value(); ?>"/>
</p>
<p>
<span>Image 2 URL:</span>
<?php $mb->the_field('image-2'); ?>
<input type="text" name="<?php $mb->the_name(); ?>" value="<?php $mb->the_value(); ?>"/>
</p>
<p>
<span>Image 3 URL:</span>
<?php $mb->the_field('image-3'); ?>
<input type="text" name="<?php $mb->the_name(); ?>" value="<?php $mb->the_value(); ?>"/>
</p>
<p>
<span>Image 4 URL:</span>
<?php $mb->the_field('image-4'); ?>
<input type="text" name="<?php $mb->the_name(); ?>" value="<?php $mb->the_value(); ?>"/>
</p>
</div>