Page Six - Homepage Slider 2: Homepage Sliderer
Adding titles and dates to our slider
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
Let's create some CSS for these new features. Open up
style.css and add this to your homepage slider section:
Now that's looking much better.
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.
index.php and directly after the
get_header(); ?> code, add in the following:
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:
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.
content.php again and find our gallery posts. Inside the
<a> tags add in an
post<?php the_id(); ?>, like so:
footer.php and find your jQuery code you created in previous steps.
Add in the following code:
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.