Page Six - Homepage Slider 2: Homepage Sliderer

In this part we'll customise the slider we created previously by adding titles and links and some more javascript to do all sorts of crazy whackness.

Adding titles and dates to our slider

Open up homepage.php and find our list elements where we echo out $SliderImage. Right after we echo that, we're going to create a link to the full image, show the title and the date it was posted, all inside a lovely little hgroup element.

<?php echo $SliderImage; ?>
<a href="?post_type=artwork&artTrigger=<?php the_id(); ?>" title="View <?php the_title(); ?>"><?php the_title(); ?></a>
</h2><br />
<h4><?php the_date(); ?></h4>
Dates, Titles and Links

Let's create some CSS for these new features. Open up style.css and add this to your homepage slider section:

.homepageSlider li {position: relative;}
.homepageSlider hgroup {position: absolute; top: 10px; left: 10px; z-index: 20;}
.homepageSlider hgroup a {color: #fff; text-decoration: none;}
.homepageSlider h2, .homepageSlider h3 {padding: 0; margin: 0; color: #fff; display: inline-block; background: #000; padding: 10px; margin-bottom: 5px;}
.homepageSlider h2 {font-size: 24px;}
.homepageSlider h3 {font-style: italic;}

Now that's looking much better.

Styled titles and dates

Colorbox Trigger

Now you'll notice if you click on the title it goes to the artwork page. That's a bit boring. However, it has added &artTrigger=<number> to the URL.

The number it sends is actually the post id. We're going to add in some PHP code that listens for that artTrigger variable.

Open index.php and directly after the get_header(); ?> code, add in the following:

if ($_GET['artTrigger']) {
$triggerVar = "cboxTrigger";
$triggerAttr = $_GET['artTrigger'];
} else {
$triggerVar = "";

This sets the id the was pass in through the URL in to a php variable.

Just below this code you'll find the div with the id of primary.

Replace that div with the following code:

<?php if($triggerVar) { ?>
<div id="primary" class="<?php echo $triggerVar; ?>" data-id="<?php echo $triggerAttr; ?>">
<?php } else { ?>
<div id="primary">
<?php } ?>

If $triggerVar exists we'll add it to #primary as a class and then pass the id of the post to the data-id attribute, which we can use jQuery to manipulate.

First we'll need to add the post_id()'s to each of our gallery posts so our script knows what to target.

Open up content.php again and find our gallery posts. Inside the <a> tags add in an id of post<?php the_id(); ?>, like so:

<a href="<?php echo $LargeImageLink ?>" rel="gallery" id="post<?php the_id(); ?>"><?php echo $ThumbnailImage ?></a>

Open footer.php and find your jQuery code you created in previous steps.

Add in the following code:

// Portfolio script to run Colorbox on load (link directly to popups)
if( $("#primary").hasClass("cboxTrigger") ) {
var id = $("#primary").attr("data-id");

Now when you click on an image from your slider, the relevant colorbox image will pop up. Very nice!

That's it, man. Congratulations! We've created a custom post type for an art gallery, added some images, added colorbox functionality, created a homepage and on that homepage we've created an image slider. Fair effort. Now what? Check out the final page for where to go next.