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:
To: Your desktop, rename to sudoslider.css and then move it to /your-template/
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:
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:
Open up footer.php and add this after the colorbox.js file:
Creating a homepage
Create two new blank pages with the following titles:
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.
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:
Fill this file with the following code:
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"
Now check out your homepage:
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.
div with a memorable class. I used
homepageSliderWrapper. Inside that, create an unordered list:
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!
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:
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.
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:
Now scroll right to the end and add this at the bottom:
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:
Refresh your homepage and...
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
style.css and add find your homepage slider section we created earlier. Add in the following code:
sudoslider.css and find
.prevBtn, .nextBtn (~ line 33) and change
Right below that, find
.nextBtn and change
left: auto; right: -30px;.
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!