Developing a Content Slider with Custom Post Types

A Brief Introduction

A current trend in web design seems to be the Content Slider. I'm referring the code or plugin that rotates a page's featured content on a timer. A couple examples are jCarousel Lite, and my favorite, jQuery Cycle. I even built one myself called zAccordion.

One of the issues I've found with Content Sliders is that they aren't exactly easy to update when it comes to the layman, or a client. While WordPress has made it easier for text changes and managing a blog with posts, anything really custom is usually left up to the developer or designer.

The WordPress 3.0 update changed much of this problem with Custom Post Types. A solution to managing featured content became extremely straightforward.

Posts, Pages, ...and Slides

By now, you've probably heard a bit about Custom Post Types. If not, a quick trip over to WordPress.org or a Google search for Custom Post Types will get you headed in the right direction. In short, Custom Post Types allow you to expand upon Posts and Pages, and create new Post Types such as Properties, Products, and what I will demonstrate, Slides.

A quick addition to the functions.php file will create the menu to the left and get things rolling. It will allow you, or your client, to add a new Slide to code that will eventually rotate the featured content.

Editing functions.php

The code below should get things started. It should be added to the functions.php file in your theme directory. It may look kind of intimidating, but it is straight from WordPress.org. I've just changed a few lines to add Slides instead of Books and provide relevant help information.

					/* Register a Custom Post Type (Slide) */
					add_action('init', 'slide_init');
					function slide_init() {
						$labels = array(
							'name' => _x('Slides', 'post type general name'),
							'singular_name' => _x('Slide', 'post type singular name'),
							'add_new' => _x('Add New', 'slide'),
							'add_new_item' => __('Add New Slide'),
							'edit_item' => __('Edit Slide'),
							'new_item' => __('New Slide'),
							'view_item' => __('View Slide'),
							'search_items' => __('Search Slides'),
							'not_found' => __('No slides found'),
							'not_found_in_trash' => __('No slides found in Trash'), 
							'parent_item_colon' => '',
							'menu_name' => 'Slides'
						);
						$args = array(
							'labels' => $labels,
							'public' => true,
							'publicly_queryable' => true,
							'show_ui' => true, 
							'show_in_menu' => true, 
							'query_var' => true,
							'rewrite' => true,
							'capability_type' => 'post',
							'has_archive' => true, 
							'hierarchical' => false,
							'menu_position' => null,
							'supports' => array('title', 'editor', 'thumbnail')
						); 
						register_post_type('slide', $args);
					}

					/* Update Slide Messages */
					add_filter('post_updated_messages', 'slide_updated_messages');
					function slide_updated_messages($messages) {
						global $post, $post_ID;
						$messages['slide'] = array(
							0 => '',
							1 => sprintf(__('Slide updated.'), esc_url(get_permalink($post_ID))),
							2 => __('Custom field updated.'),
							3 => __('Custom field deleted.'),
							4 => __('Slide updated.'),
							5 => isset($_GET['revision']) ? sprintf(__('Slide restored to revision from %s'), wp_post_revision_title((int) $_GET['revision'], false)) : false,
							6 => sprintf(__('Slide published.'), esc_url(get_permalink($post_ID))),
							7 => __('Slide saved.'),
							8 => sprintf(__('Slide submitted.'), esc_url(add_query_arg('preview', 'true', get_permalink($post_ID)))),
							9 => sprintf(__('Slide scheduled for: <strong>%1$s</strong>. '), date_i18n(__('M j, Y @ G:i'), strtotime($post->post_date)), esc_url(get_permalink($post_ID))),
							10 => sprintf(__('Slide draft updated.'), esc_url(add_query_arg('preview', 'true', get_permalink($post_ID)))),
						);
						return $messages;
					}

					/* Update Slide Help */
					add_action('contextual_help', 'slide_help_text', 10, 3);
					function slide_help_text($contextual_help, $screen_id, $screen) {
						if ('slide' == $screen->id) {
							$contextual_help =
							'<p>' . __('Things to remember when adding a slide:') . '</p>' .
							'<ul>' .
							'<li>' . __('Give the slide a title. The title will be used as the slide\'s headline.') . '</li>' .
							'<li>' . __('Attach a Featured Image to give the slide its background.') . '</li>' .
							'<li>' . __('Enter text into the Visual or HTML area. The text will appear within each slide during transitions.') . '</li>' .
							'</ul>';
						}
						elseif ('edit-slide' == $screen->id) {
							$contextual_help = '<p>' . __('A list of all slides appears below. To edit a slide, click on the slide\'s title.') . '</p>';
						}
						return $contextual_help;
					}
				

Featured Images

Before moving on, the snippet below should also be added to functions.php. This snippet will provide support for Post Thumbnails. Post Thumbnails, or Featured Images, will make it easier to update the Slide backgrounds.

				if (function_exists('add_theme_support')) {
					add_theme_support('post-thumbnails');
				}
			

Creating Slides

Now that functions.php is ready, it is time to start creating Slides. In the left-hand menu of the WordPress Admin Panel, there should be a Slides section. Expand the menu and click on Add New.

Filling Out Slide Information

I will be using the Title and Content to display text in the slideshow. The Slide backgrounds will use the Featured Image section of the post. Featured Images/Post Thumbnails have been enabled in the functions.php file above, but for more information, visit Featured Images support at WordPress.com. The link will show you how to set a Featured Image inside of a Post, or in our case, a Slide.

Displaying the Content

A custom loop will iterate through the Slides one by one. Each Slide will print out as a list-item inside an unordered list.

				<ul id="cycle">
					<?php
						$args = array('post_type' => 'slide', 'posts_per_page' => 5);
						$loop = new WP_Query($args);
						while ($loop->have_posts()) : $loop->the_post(); ?>
							<li>
								<?php the_post_thumbnail(); ?>
								<div>
									<h5><?php the_title(); ?></h5>
									<?php the_content(); ?>
								</div>
							</li>
					<?php endwhile; ?>
				</ul>
			

A formatted View Source should look something like this:

				<ul id="cycle">
					<li>
						<img src="globe.jpg" alt="globe" height="290" width="600" />
						<div>
							<h5>Lorem Ipsum Dolor Sit Amet</h5>
							<p>Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet auctor ipsum.</p>
						</div>
					</li>
					<li>
						<img src="time.jpg" alt="time" height="290" width="600" />
						<div>
							<h5>Etiam Quis Nunc Odio</h5>
							<p>Donec dignissim odio in ante mattis consectetur. Sed volutpat odio in purus dictum egestas.</p>
						</div>
					</li>
					<li>
						<img src="church.jpg" alt="church" height="290" width="600">
						<div>
							<h5>Curabitur Nec Orci Arcu</h5>
							<p>Ut vel sem sit amet ante dapibus convallis non a tortor. Nunc laoreet quam et lectus porttitor commodo.</p>
						</div>
					</li>
				</ul>
			

A bit of CSS can style the slides as needed. I've styled the Title and Content to display over a black background on top of each Slide. You can style the output however you like.

					#cycle {float:left;height:290px;list-style:none;overflow:hidden;width:600px;margin:0;padding:0;
					#cycle * {margin:0;padding:0;}
					#cycle div {background:#000;bottom:0;height:65px;-moz-opacity:.8;-webkit-opacity:.8;opacity:.8;overflow:hidden;padding:20px;position:absolute;width:560px;z-index:10;}
					#cycle h5 {color:#fff;font-size:18px;font-weight:bold;line-height:1;margin:0 0 10px;}
					#cycle img {position:absolute;z-index:5;}
					#cycle li {display:block;float:left;height:290px;text-indent:0;width:600px;}
					#cycle p {color:#fff;font-size:14px;line-height:18px;}
				

The slideshow is fired with the jQuery Cycle Plugin along with the code snippet below:

				$(document).ready(function() {
					$("#cycle").cycle();
				});
			

Behind the Scenes

The thumbs below show a few detailed images of the new WordPress Admin Panel updates. Slides are available in a list similar to Pages and Posts. There is also a custom help dropdown.

The Final Result

The slideshow at the beginning of this post was created using a modified version of the method I've described. Have another look!