the graphic design blog that speaks the truth

As the first of many WordPress tutorials, here I will guide you through the process of creating a fully content managed Jquery carousel using WordPress.

Step 1: Creating the content

To create a content managed carousel we firstly need to create a new custom post type.

This involves adding some code to your themes “functions.php” file. Open the file (or create it if it doesn’t exist) and add the following code at the very top:

add_action( 'init', 'create_post_type' );
function create_post_type() {
	register_post_type( 'carousel',
		array(
			'labels' => array(
				'name' => __( 'Carousel' ),
				'singular_name' => __( 'Carousel' )
			),
                'supports' => array( 'title', 'editor','thumbnail' ),
                'public' => true,
		'has_archive' => true,
		)
	);
}

The above code has simply created a new custom post type named “carousel”, and placed a new Carousel option in our WordPress admin panel.

The labels “name” and “singular_name” tell WordPress what label to give our new custom post type within the admin panel.

Please note that this is a function for registering a new post type in its simplest form. The function accepts many other parameters such as URL rewriting and supports, which you can read about in detail here.

The rest of this post will use our newly created “carousel” post type, you can rename yours if you wish.

We now need to create a few “carousel” posts with some content and move on to step two.

Step 2: Placing the content

A typical HTML markup of a jquery carousel will look something like this:

<containing div>
    <containing ul>
        <li> </li>
        <li> </li>
        <li> </li>
    </containing ul>
</containing div>

Now that we have created our new custom posts and given them some content, we can then grab this content and tell the carousel to use it by adding the WordPress loop to our code. Our new code becomes :

<containing div>
    <containing ul>

        <?php $loop = new WP_Query( array( 'post_type' => 'carousel') ); ?>
            <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
                <li> <?php the_post_thumbnail(  ); ?>  </li>
            <?php endwhile; ?>

    </containing ul>
</containing div>

As you can see, the loop grabs the content from our “carousel” post type and adds it inside the looped carousel content. This example grabs the post thumbnail of each custom post, and adds it inside a <li> element. No need to constantly add more code, Easy Huh?