Getting to know your loopy side

Now you're probably here because you were either curious about the title of this post, or you're interested in learning how to create your own custom WordPress loops using WP_Query(). Or maybe you just love reading my amazing posts of nonsense.

Tutorials in this series

• Part 1: Creating Your Own Custom Loops In WordPress
• Part 2: The Static Version Of The jQuery Featured Post Slider
• Part 3: Making A Dynamic WordPress jQuery Featured Post Slider

Those here for learning about WordPress loops will be happy to hear that not only is this going to be about making your own loops, but it will be the first post of my multi-post tutorial for creating the cool jQuery featured post slider you can see on the homepage of the site. It took some time to get working, and I'm quite satisfied with how it came out.

Here's what sort of things this tutorial series covers:

• Part 1: How to make your own custom loops in WordPress using WP_Query
• Part 2: Coding the jQuery and CSS slider to work with or without JavaScript enabled using the jQuery Cycle plugin
• Part 3: Putting it all together to dynamically show posts from the "featured" category in the slider

Other cool tricks you'll learn:

• How to easily shorten post titles, excerpts, posts etc.
• Retrieve and display content from custom fields
• jQuery awesomeness

Creating your own custom loops

There are many reasons you might want to create custom loops, and the possibilities are endless for what you come up with too. It's a great way to have full control over what is displayed on the page. For example, the featured post slider I'll be making has specific settings in the loop that control what category ID to pull posts from and how many of them I want to get.

You could also use it to get a custom field with a specific value, or to create a custom archives page if you wanted to. There are so many good reasons to learn how to make your own loops.

Show me the code already!

You might be somewhat familiar with this already if you know what the WordPress Loop or query_posts(). If you have no clue what that is, then you should read more about it because it's kind of a big deal, and very important to know if you plan to develop with WordPress.

$my_posts = new WP_Query();
$my_posts->query('showposts=NUMBER_OF_POSTS&cat=CATEGORY_ID'); // what to get
	while ($my_posts->have_posts()) : $my_posts->the_post(); // loop for posts

	// make your magic happen here
	// do a little dance...

 endwhile; // end loop 

First I created the variable $my_posts, and instantiated an instance of WP_Query. The used a method of WP_Query to start a query. For this you can use the same parameters as with query_posts() since it's basically the same thing.

Then I start the loop using while($my_posts->have_posts()), which basically means while I have the posts, show them using $my_posts->the_post().

A look at the slider loop

I'll be using the same thing as above for the slider with an included for() loop to increment the slide id's and classes.

The loop will be used 2 separate times in order to show the 2 lists. One that will generate the tab navigation showing a shortened version of the_title() so it fits in the tab, and one to generate the post content slides. If you happen know of an easier way to do it after finishing the tutorial let me know.

$featuredPosts = new WP_Query();
$featuredPosts->query('showposts=5&cat=28');
for($i=1; $i<=$featuredPosts; $i++) { // start for loop to loop increment slide classes
	while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); // loop for posts titles

So that's what's up as far as custom looping. Stay tuned for the next part of the series to learn how to make a static version of the jQuery slider. It will be like a tutorial within a tutorial since you could choose to use the slider statically.

Update 2: The second part and third parts in this tutorial series is complete.

• Part 1: Creating Your Own Custom Loops In WordPress
• Part 2: The Static Version Of The jQuery Featured Post Slider
• Part 3: Making A Dynamic WordPress jQuery Featured Post Slider