Part Five - A custom homepage and a slider

In this part we'll be creating a custom homepage for our lovely WordPress website and then on that homepage we're going to create a content slider that shows the latest 5 images using the awesome Sudo Slider.

Downloading and preparing Sudo Slider

Much like the colorbox steps, we'll be downloading the files from the Sudo Slider website and getting our coding on. No plugins for this one, baby! So download the latest files and extract like so:

Extract: /js/jquery.sudoSlider.min.js
To:  /your-template/js/

Extract: /css/style.css
To: Your desktop, rename to sudoslider.css and then move it to /your-template/

Extract: /images/
To: /images/

Just like the colorbox steps, I recommend merging your css files and javascript files if you're comfortable doing so.

Unfortunately, Sudo Slider has a different folder structure to our template. So we'll need to edit the sudoslider.css file. Perform a search and replace using the following terms:

Search: "../images"
Replace: "images"

This is due to sudo slider being organised and keeping it's CSS file in it's own folder. The twentyeleven template keeps it's CSS files in the root directory of the template, so we need to tell the CSS file to look in the right place.

Again like colorbox we need to add those new files to our template.

Open header.php and add this in to your head area, below the other css files:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/sudoslider.css" />

Open up footer.php and add this after the colorbox.js file:

<script src="<?php bloginfo("template_url"); ?>/js/jquery.sudoSlider.min.js"></script>

Creating a homepage

Create two new blank pages with the following titles:

  • Homepage
  • Blog

Now this assumes you're still going to use the blog features of WordPress. Technically that's optional but for the sake of this tutorial let's pretend you are.

Go to Settings > Reading and set "Front page displays" to "A static page". Set the front page drop-down to Homepage and set the Posts page to Blog.

Reading Settings

Right on, now we have a custom home page with a secondary page showing our blog.

Creating a homepage template

Head over to your template folder and create a new file: homepage.php.

Fill this file with the following code:

<?php
/**
* Template Name: Homepage
*/
get_header(); ?>
This is the homepage.
<?php get_footer(); ?>

The PHP code at the top there defines this file as a "page template". This means we can apply it to our home page, which we'll do in a sec. You can also see I've included the header and footer and some text in-between. Save that sucker, edit your homepage and set the template to "homepage"

Setting the template

Now check out your homepage:

Templated

Cool beans!

Now that we have a template to work with, delete the "This is the homepage" line and start building your slider.

Creating our Sudo Slider markup

First we need to create a containing element that we can target with jQuery to apply the Sudo Slider to.

Create a div with a memorable class. I used homepageSliderWrapper. Inside that, create an unordered list:

<div class="homepageSliderWrapper">
<ul class="homepageSlider">
</ul>
</div>
 

We'll use the unordered list to store our posts.

Inside the UL we'll need some PHP code to find the latest 5 artwork posts. We can use get_posts() to do that!

// Setting your slide counts
$slideCount = 5;
// Create an array of the latest posts
$artworkArray = array(
'numberposts' => $slideCount,
'post_type' => 'artwork'
);
// get_posts on our array
$latestArtwork = get_posts( $artworkArray );
 

This pulls the latest 5 posts that have the post_type of artwork in to the $latestArtwork variable.

Now we're going to start the loop by using a grand old foreach statement:

// Start the loop using our array of 5 artwork posts
foreach($latestArtwork as $post) : setup_postdata($post);
// Grab the featured image and chuck it in to a variable
$SliderImage = get_the_post_thumbnail( $post->ID, "Large Slider" ); ?>
<li>
<?php echo $SliderImage; ?>
</li>
<?php
// End the Loop
endforeach;

So here we've created the loop. For each post we've chucked the post_thumbnail in to a variable and output the image in a list item.

Images in lists. What will they think of next?

Now before we call Sudo Slider on our list, we'll need to create some pre-requisites in our CSS file. Open up style.css and find the definition for #main. Add the following code to #main: position: relative.

Now scroll right to the end and add this at the bottom:

/* Homepage Slider
----------------------------------------------- */
.homepageSliderWrapper, .homepageSlider {position: relative; overflow: hidden;}

Now that we've got some basic styles out of the way let's call Sudo Slider on it. Jump in to footer.php and add this to your jquery code, right after the colorbox code we added earlier:

$(".homepageSliderWrapper").sudoSlider({
controlsFade: false,
numeric: true,
continuous: false,
autowidth: false,
numericAttr: 'class="sliderControls"',
updateBefore: true,
insertAfter: true,
speed: 400
});

Refresh your homepage and...

Sliding all over the place!

Bam! That right there is a slider. It's showing the 2 artwork images I added earlier. The default styles are a little funky, so let's customise!

Editing the Sudo Slider CSS

Open style.css and add find your homepage slider section we created earlier. Add in the following code:

.home #main {padding: 20px;}

Open up sudoslider.css and find .prevBtn, .nextBtn (~ line 33) and change top:71px to top:160px.

Right below that, find .nextBtn and change left:696px to left: auto; right: -30px;.

Customised the Slider

That's pretty cool and all, but it doesn't really do anything. Jump in to part six, where we'll add in titles for our slides and then pass a link to our artwork page that will automatically open the colorbox for the selected image. Phew!