#8 Featured Posts Slider

Amy Marsh Is A Fashion Technologist In Training



Coding reminds me of the saying “it’s always in the last place you look”, it is always the last piece of code you try!


As I struggled and struggled with just adding a slider in the first place afterwards the little sense of achievement at the end is all worth it!


I don’t have very much experience with jQuery, it probably only amounts to a few hover effects and the odd image slider I had to add into a website for a university piece of work. All of which I never had to actually, properly understand jQuery. Yet the effects you can achieve with it are a-mazing! It is something I definitely want to learn more about! I have been doing the codingacademy jQuery tutorials to help me get my head around it and I definitely recommend them, or any of their other tutorials like HTML, PHP etc if you really want to get into coding!


However for now lets get on with this slider!


First of all we are going to set it up so the feature image of your blog post appears as the slider image. In order to do this we need to be able to set feature images on blog posts, so open up you SC Theme editor and find your functions.php file. Enter this code at the bottom of the file:


Press update file and in your blog posts you should now have the option to add a feature image (it will be underneath the section to add tags) like shown below:


Screen Shot


For this slider as well you will need to give your posts a category and it will select the featured images from the blog posts with the category you say, for example we have gave our blog posts the category of 30daysofcoding:


Screen Shot


Now we can get on with the code for the slider. We need to set up our jQuery files, you will need to create a new file, in you js folder, in your SC Theme editor. To do this select on a file in the js folder (by clicking on the + and selecting html5.js for example), then enter the name cycle2.js like so and press Create File in current directory:


Screen Shot

Copy and paste all of the code from this link and press Update File at the bottom of the page to save yours changes.


Next create another file in the same js folder but this time give it the name slider.js and copy and paste the code from this link into it. Remember to press Update File at the bottom of the page to save your changes.


Next add the links to these jQuery files to your header.php:



They should be placed above:




In our previous post to add a pop-up we told you to add this piece of code:



Change this jQuery code for the new section of jQuery in this post.


Next add the slider to the header.php file:



This piece of code should be placed directly under :



I will now go through each section of code you just added for the slider and tell you what it does. NB: you have not added the styling yet so it will not look like the screenshots shown)


This part of code:



Adds this box:


Screen Shot


Therefore you may want to change some of the details to some more suited for your blog. The arrows have been added by font awesome and are these two parts of the code:




The next part is the actual slider itself:



This section of code says defines the options of the slider here:



The next section is the jQuery and php.

The jQuery here:


Pulls out the post with the category 30daysofcoding, gives a limit of 30 posts and then puts them in ascending order. It then moves on to as if you have any post and counts them if you do. The 30daysofcoding in the code matches our post category name slug therefore you will have to change this to suit your blog as well. In order to find out what the slug is select categories under the posts in the left hand side bar and you will be able to see the slug in the table:


Screen Shot


The next section:


This pulls out the feature image, the number post it is and the post title.


The final section:



Makes the data reset itself and repeat again in the slider.


Now add this piece of jQuery to the main.js file at the bottom:



It creates this hover function:


Screen Shot


Next add the styling to the style.css page first add this code to the bottom of the file:



Please note  ours doesn’t work with images because of the content in our posts therefore we have placed numbers as the images instead for each day of coding.



Leave a comment with any questions or to submit your progress and make sure to check out the blog tomorrow and see what has changed!

Stay Updated

If you enjoyed this post, subscribe to the Fashion Technologist for updates

What are you interested in?

Discover more:
email course
(blog)Random Banner Ad Featured Image
Screen Shot 2014-06-10 at 17.43.10
two ways to make your site more secure
(feat) theFEED Profiles- RooftopAntics.com
How to change the default media linking option in wordpress
Why I do not like blog posts being By Admin
how to create a wordpress plugin

One thought on “#8 Featured Posts Slider

  1. Pingback: #15 News Sidebar Carrousel | The Fashion TechnologistThe Fashion Technologist

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">