A number of folks have asked for detailed step-by-step instructions so here’s how I added a nice Carousel to the Arthemia theme running under WordPress. I use the free version of the Arthemia theme which doesn’t have a carousel out of the box. It’s easy to add one though and of course these instructions apply regardless of the theme you’re using so here goes.
I’ll assume you have WordPress installed, doesn’t matter which version.
Depending on the theme you use, the pages you’ll need to edit are located in a folder under wp-content/themes/
It’s confusing but there are actually two JCarousel libraries, each different, one being JCarousel and the other being JCarousel Lite. JCarousel is a fully featured robust carousel library for the ultimate in carousel satisfaction. It’s very complicated and I didn’t need its features. I went with JCarousel Lite and I suggest you do too.
Put this code into your theme’s footer.php file:
The first is a link to JQuery, the 2nd is a link to JCarousel Lite. You need both and in that order.Ã‚Â You can specify these in the header too but the page will appear to load a little quicker in the browser if JS files are moved to the footer.
2) While you have Footer.php open, add this after the above two lines:
The above is just a simple declaration to initialize a carousel. It names 3 divs, MyCarousel, Next and Prev which we’ll create next…
Step 3) Generate the carousel elements. You can make your elements static but where’s the fun in that? I used PHP for this and in my case I scroll between 5 or so “Featured” items. Here’s the PHP for that and this should go in your theme’s index.php file, wherever you want the carousel to show up.
<div id="MyCarousel"> <ul> <?php query_posts("showposts=5&category_name=Featured"); $i = 1; ?> <?php while (have_posts()) : the_post(); ?> <li> <a class="title" rel="bookmark" href="<?php the_permalink() ?>"><?php the_title() ?></a></li> <?php endwhile; ?> </ul> </div> <div class="prev"> </div> <div class="next"> </div>
Basically you’re just creating a div named MyCarousel, inside there is an unordered list (<ul>) and then there’s some PHP to loop through the 5 most recent Featured items and create <li> tags for each one.
You should tailor this to your needs. This code uses a WordPress function to find the latest blog entries but your code can pull data from wherever.
Notice this also creates the necessary div tags, MyCarousel, Next and Prev.
Step 4) Celebrate, you’re done. If everything worked you should get a vertical scrolling carousel on your blog’s home page. With that working you can add in other blog elements like the blog entry excerpt or number of comments etc.
Hope that’s clear enough.