Let's do away with the plain old, not very cool, default WordPress login/register form page for once, what do you say? I'm going to show you how to change the way you login to your site, and the way others join and login to your site too.

Okay, so you may be thinking what's so great about this tutorial compared to all the other one's posted on the internet. I've seen this a million times, and the all end the same, blah blah blah.

I can pretty much guarantee that there is nothing quite like this posted online, at least not available for free. You may be able to find a similar tut on the Tuts+ network, if you have a premium membership, which is great and all, but how many people actually do. Trust me, this is not like any other tutorial you may have "seen" before. There isn't anything as complete, or useful, or just plain awesome. I know because I have scoured the internet in search of how to create this when I was trying to first make it myself. It's just not out there, until now!

What you will learn from this tutorial

How to:

• create a sidebar jQuery UI Tabs widget
• create a custom form to show under each tab
  • a WordPress 3.0 Login form
  • a custom register form
  • a custom password reset form
• check if the visitor is logged in
• change the content of the tabs if user is logged in
• finally love yourself for knowing how to do this.

What you will need:

You will need to have some understanding of HTML5, CSS and jQuery or jQueryUI, though it's not required, but it does help. You will also need to either have a self-hosted copy of jQuery and/or jQuery UI on your website, if you choose to not use the Google CDN version of these, which I will be using here. If you don't know why I am using the Google hosted copies, then you need to read up on the great advantages of linking to a CDN hosted script.

Basically, CDN hosted files are faster and stuff etc. etc. It's cached on most anyone's computer who has access the internet sometime since the dawn of the modern world and the invention of the internet. Since 90% of sites out there link to a CDN copy of jQuery already, it's a pretty good chance most visitors to your site have the scripts saved already in the cache. Anyways, let's get going shall we.

1: The HTML5 Tabs Markup

I'm going to start off slow and show you how I would write the HTML for the jQuery tabs, using the new HTML5 format. You will notice that instead of the <div> tag which you may be used to, I am using the new <nav> which is a more semantic way of referring to a part of your site that is considered a form of navigation.

What I have below is how you would write it if you wanted to have some unordered lists within your tabs for example. We will be removing these lists later when we create the forms that will go in place of them. But you should keep a copy of this just as a sample of code, in the case that even later in this tutorial, you may want to show list items, for when the user is logged in and there is no need to show the login/register forms.

The HTML5 Tab Markup

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">First Tab</a></li>
		<li><a href="#tabs-2">Second Tab</a></li>
		<li><a href="#tabs-3">Third Tab</a></li>
	</ul>

	<nav id="tabs-1">
		<ul>
			<li>This is the first tab</li>
			<li>This is the first tab</li>
			<li>This is the first tab</li>
			<li>This is the first tab</li>
		</ul>
	</nav>
	<nav id="tabs-2">
		<ul>
			<li>Second tab this is</li>
			<li>Second tab this is</li>
			<li>Second tab this is</li>
			<li>Second tab this is</li>
			<li>Second tab this is</li>
		</ul>
	</nav>
	<nav id="tabs-3">
		<ul>
			<li>Tab three here buddy!</li>
			<li>Tab three here buddy!</li>
			<li>Tab three here buddy!</li>
			<li>Tab three here buddy!</li>
		</ul>
	</nav>
</div><!-- // Tabs -->

You may have noticed that the first unordered list was not preceded by a <nav> element, and this is because this just happens to be how I wrote it here. You could choose to do that if you want, I just kept the tabs and the actual list items separate, so I know that the tabs aren't a navigable list of items, which link to other pages, just other lists.

They are a sort of navigation, just not what I would consider a navigation menu, personally. Also, you might have noticed that the first unordered list elements link to the #tabs-tabnumber. This is so that, 1. the tabs will match and show the correct tab to which you click on to see the content of, and 2. so that if the user has JavaScript disabled they will still be able to access the content of the tabs because of these anchors. They won't have the cool switcheroo like you would with JavaScript, but you can still see what's there and use it at least. Good practice for keeping your site progressively enhanced.

2: Styling The Tabs With CSS

The great thing about using jQuery UI to create the tabs is that it does all the styling for you, Woohoo! If you went the route of downloading jQuery UI which by the way can be customized to your needs, to host the files on your website yourself, then you also got the CSS Stylesheet that came with it in the zip file. That CSS file contains all the styles you need for the tabs to work as you want them to, ... tabs.

You can easily customize the styling as far as color and general appearance goes simply by defining a class which you can apply to the <div id="tabs"> or just use the #tabs ID attribute as your CSS selector, and apply your styling to it with that.

Although, with jQuery UI, there is the Theme Roller, which you can use any of the already created/rolled themes, or roll your own theme right on the site. It's really neat, and you should at least try it out. I didn't give it as much credit before as I should have long ago. Then I tried it, and wow... I said, now that's fresh. Check out the theme I created, which you can use it if you want.

Now, if you chose to use a CDN hosted copy of jQuery UI not to worry, you can easily en-queue the script that WordPress comes pre-packaged with out of the box. Whichever way you decided to use, here's how you can link to the CSS Stylesheet file you need for styling up your tabs.

En-queue the Stylesheet in functions.php file:

You need to link or en-queue the jQuery UI Styleseet, depending on whether you're using the jQuery UI download pack or the Google CDN copy.
(Note: If you just upload the jQueryUI.js file from the download, you will need to do the second option here to ensure that the Stylesheet is linked.)

Linking to the Stylesheet directly:

/*
 * Link to the CSS source file in your <head> of your site.
 */
function loadStyles() {
	echo '<link href="'. bloginfo('template_directory') .'/css/jquery-ui-1.8.1.custom.css" />';
}
add_action('wp_head', 'loadStyles');

/*
 * You can add the javascript file to the footer
 * With this too if you want.
 */
function loadScripts() {
	echo '<script src="'. bloginfo('template_directory') .'/js/jquery-1.4.2.min.js"></script>'; // needed if jQuery isnt loaded
	echo '<script src="'. bloginfo('template_directory') .'/js/jquery-ui-1.8.1.custom.min.js"></script>';
}
add_action('wp_foot', 'loadScripts');

Link to the scripts on the Google Content Distribution Network by doing the following instead:

/*
 * OR DO THIS if you want to use the Google
 * CDN Hosted scripts
 */
function loadScripts() {
	echo '<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>';
	echo '<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>';
}
add_action('wp_foot', 'loadScripts');

En-queue the jQuery UI CSS Stylesheet included in WordPress:

Another way you can choose to load the Stylesheet, jQuery, or jQuery UI is by using the WordPress wp_enqueue_style() and wp_enqueue_script() functions.

Here you will find a list of all the scripts WordPress comes bundled with by default should you be interested to use them in your site for anything else. You would use the same word for en-queuing the style of a particular script too for most all of them if there is a Stylesheet included for any other one you may want to use.

function loadStyles() {
	wp_enqueue_styles( 'jqueryui' );
}
add_action('wp_head', 'loadStyles');

/*
 * Embed the jQuery UI javascript file in your
 * Footer using this if you choose to
 */
function loadScripts() {
	wp_enqueue_script( 'jquery' ); // You only need to add this if you do not already have jQuery embedded
	wp_enqueue_script( 'jqueryui' );
}
add_action('wp_foot', 'loadScripts')

Do keep in mind that many WordPress plugins, and even many themes do already load jQuery, most commonly anyways, though I have seen plugins embed other scripts and Stylesheets for them. Before you add the jQuery script (as well as jQueryUI script), I would highly recommend you view the source code of your site to see if you already have these loaded. Just right click on the page when viewing the site, and go to "view page source" in Firefox, or in IE it's just "view source". Check to see whether jQuery.js is in the source code either in the <head> or near the bottom of the page source code within the <footer> of the site. More than likely it already is at least once, if not more. Removing them all and leaving just one is a tutorial for another day though.

3: Initializing the Tabs For Takeoff

So now that we have the scripts and the styles and the HTML for the tabs all set up, lets test that they at least work before we start putting content in. To do this though, we need to still add one little bit of code which will initialize the tabs. Think of it like this, we set up all the pieces which make up a go kart (or tabs in this case), now we just need to put the key in and turn it on (random analogy I know, but it works right?).

To turn on our tabs you will need to add this line of code, AFTER the jQuery and jQuery UI scripts are loaded. If you have your own custom.js file for things like this, you could put it in there. If not, the way I would do it for now is to open your footer.php, find , and put it below that. This ensures it will run after the scripts we embedded using the above functions are loaded.

<script type="text/javascript">
$(function() {
	$('#tabs').tabs(); // initialize the tabs
});
</script>

4: Testing The Tabs To Tickle Them Pink

Now that you have this set up, try testing it out by dropping the first chunk of HTML5 code I gave you into your sidebar.php file, and see if these babies work! Make sure everything is doing dandy before you move onto the rest, and if there happens to be any issues, now would be the best time to resolve them before things start to get more complex. TRUST ME!!! I learned this the hard way, repeatedly, far more than I would've liked to that's for sure.

5: Getting Down And Dirty With The Forms

To start this part off, I'd like to point out that this tutorial assumes that you are currently using WordPress 3.0. If you are not, then you will need to create your own custom login form. I am going to be using the all-new WordPress 3.0 wp_login_form() function, which is a great addition to the new version of WordPress, only thing is they didn't make a function for the other forms. For anyone still using WP 2.9.x or earlier, I will show you a quick way to make a login form at the end of this tutorial. (I'm a softy, what can I say)

First thing we need to do is

Check if the user is already logged in! To do that, we start by writing the following:

<?php
/*
 * If user not logged in display forms
*/
if (!is_user_logged_in()) :
?>

If the user is already logged in, we can then show them a totally different set of tabs and tabbed content. This is a great way to customize your site even more for your members, and to show them different content since they are a member of your awesomely coolio site of hottness!

6: Next on the list is the tabs HTML

Nothing new here from what I showed you in the beginning, except that the list items now say Login, Register, and Lost Password. This is a self-explanatory I think, I would hope so at least.

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Login</a></li>
		<li><a href="#tabs-2">Register</a></li>
		<li><a href="#tabs-3">Lost Password</a></li>
	</ul>

7: Now for the first tab, the Login Form

This is the easiest tab of the three. All you have to do is put <?php wp_login_form(); ?> in the div for the first tab. Must simpler than the other two as you will see next.

	<div id="tabs-1"><!-- Login Form -->
		<?php wp_login_form(); ?>
	</div>

8: Custom Coding The Register Form

That last part will seem like a breeze compared to this one. Here we create the register form and throw in a couple of PHP functions you may not have seen before, and add the content of the second tab on our list.

	<div id="tabs-2"><!-- Register Form -->
		<form method="post" action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" id="registerform" name="registerform">
			<p>
				<label>Username<br />
				<input type="text" tabindex="10" size="20" value="" class="input" id="user_login" name="user_login" />
				</label>
			</p>
			<p>
				<label>E-mail<br />
				<input type="text" tabindex="20" size="25" value="" class="input" id="user_email" name="user_email" />
				</label>
			</p>
			<p id="reg_passmail">A password will be e-mailed to you.</p>
			<br class="clear">
			<p class="submit">
				<?php do_action('login_form', 'register'); ?>
				<input type="submit" tabindex="100" value="Register" class="button-primary" id="wp-submit" name="wp-submit"											 />
				<input type="hidden" name="redirect_to" value="/" />
				<input type="hidden" name="cookie" value="1" />
			</p>
		</form>
	</div>

Lets review the above code. Nothing special as far as HTML forms go right? Just a basic HTML form, nothing you can't handle, or haven't seen in your web site making career I hope (if this part is news to you then you may want to check out the W3 for some beginners HTML tutorials). As for the new stuff the part <?php site_url('wp-login.php?action=register', 'login_post'); ?> is making use of the new WordPress 3.0 site_url() function which is a replacement of the get_option('site_url') function in previous versions of WordPress. Here we just add in the URL path of the register form along with scheme of login_post to give the site URL some context. Neither of these arguments are required by default, but in this case, they are. You could just write it like this <?php site_url(); ?>/wp-login.php?action=register but that's not as fun is it?

One thing I am not quite sure of though think you may want to leave as is, is whether the form element ID's and name attributes as I have here are required to use these or if you can assign your own names. I just assume keeping the default register form attributes the same, so to keep it from potentially not working (because these work as is I know), and for consistency sake.

The other strange and unusual part of the register form code is the <?php do_action('login_form', 'register'); ?>. This is the meatballs of the entire form. With out this Chicken Little would be quivering in his little chicken.... coup? Because the sky would be falling.

If you want the form to actually do something useful upon being submitted, then it needs to run this function. It tells WordPress that you want to register a new user account, as well as, the sending out of the confirmation email with the crazy randomly auto-generated password you receive when joined a WordPress site. If you have a firm grasp on that we can move on...

9: Anyone Here Lose A Password?

This is a form that is many times neglected I think, but just as important to keeping the members of your site which have already registered. I mean, I personally register an account on at LEAST one new site A DAY!! And out of all the sites which I am a registered member of and visit randomly choose to login to on any given day, I have to reset my password on average, TWICE A DAY on 2 different sites, almost without fail. For every site I sign up on each day, I have to reset my password on two other sites which I have forgotten the password for since last visiting it. It's quite annoying, but what the hell can I really do about it at this point?

It's not that unsurprising is it? It seems that every site on the internet now requires you to have an account, and not nearly enough use the Facebook Connect, Google Friend Connect or some other equivalent API available from various sites. So if you want to keep your members as part of your site, you better damn well make it easy for them to reset their passwords should they forget it amidst the library of passwords we all now must keep cataloged. The less steps they have to take to log back into your site, the more likely they even will at all.

10: Let's make a password reset form

	<div id="tabs-3"><!-- Lost Password Form -->
		<form method="post" action="<?php echo site_url('wp-login.php?action=lostpassword', 'login_post') ?>" id="lostpasswordform" name="lostpasswordform">
			<p>
				<label>Username or E-mail:<br />
				<input type="text" tabindex="10" size="20" value="" class="input" id="user_login" name="user_login" />
				</label>
			</p>
			<p class="submit">
				<?php do_action('login_form', 'resetpass'); ?>
				<input type="submit" tabindex="100" value="Get New Password" class="button-primary" id="wp-submit" name="wp-submit" />
				<input type="hidden" name="redirect_to" value="/" />
				<input type="hidden" name="cookie" value="1" />
			</p>
		</form>
	</div>
</div>

That wasn't so bad now was it? This isn't all that dis-similar from the register form either. You already know about the site_url() function. The only difference here is it's pointing to the URL wp-login.php?action=lostpassword instead of action=register. Also, the meatballs as I called it earlier, (the do_action() function) is just doing <?php do_action('login_form', 'resetpass'); ?>. EUREKA!!!!

That's what I said when I figured this out for this and the register form. It just all of a sudden came to me one day, and I was finally able to make my forms work, and then in-turn, write this amazing tutorial for you. This will send the user a password reset link, which they can click to have a new auto-generated password emailed to them so they can login to their account, and set their password to something a little more memorable.

11: Finishing Up - Or Are We...?

We could just end this here and close out the if(user is logged in){ or not } statement that started before making the tabs, and that's fine if you've had enough and can't take it any longer. I am not easy on the ears, or eyes. I won't take it personal if you decide to not go any further, just go play with your new tabs and forms. Bye!

For those that want to keep going, lets add a new set of tabs for the users that are logged in so they can have some custom coolioness as a registered, AND logged in member of your site.

Remember that first chunk of HTML5 code I gave you at the beginning, which I told you to save for later? Well it's later. Grab that code, and paste it after this else statement:

Do it... or Else...!!

<?php
else : // if they are logged in show submit form
?>

This says, well tickle me purple, this person is logged in!! In that case, lets show them a cooler set of tabs with some exclusive members only content only the registered and logged in visitors can see!

12: Only Showing Logged In Members Exclusive Tabs And Content

Here's what I have done to that chunk of code I told you to grab and paste here after the else statement. Did you do that? Or did you fail to follow my directions, again... It's okay, just copy this and use it instead of you want ;)

<div id="tabs">
	<ul>
		<li><a href="#m-pages">Members Only</a></li>
		<li><a href="#m-tuts">Members Tuts</a></li>
		<li><a href="#m-chat">Chat</a></li>
	</ul>
	<div id="m-pages">
		<ul>
			<li>For The Members</li>
			<li>My Members Rule</li>
			<li>Members Must Read</li>
			<li>I Do re-Members</li>
		</ul>
	</div>
	<div id="m-tuts">
		<ul>
			<li>Special Tut (like this one but private)</li>
			<li>A premium tutorial</li>
			<li>Something special</li>
			<li>Make a mustache man? wtf</li>
		</ul>
	</div>
	<div id="m-chat"><!-- Post Form -->
		<div id="doyoulikechats">
			You could chuck a <a href="http://chatango.com" target="_blank" rel="nofollow">Chatango.com</a> chat or something
			like that up in here, up in here, up in here.
		</div>
	</div>

</div>

Now maybe you want to have a list of privately published pages which you set up so only visitors that are logged in can access them. If not, here is another way to create WordPress members only pages, which you could set up, and list in the space for the first tab. Create some privately posted, members only tutorials on how to do some crazy super cool and insane shit. Yeah kinda like this tutorial, actually, exactly like this tutorial, only privately viewable to registered users.

Unlike this tutorial, but just as good. :P Last, maybe you want to have a chat for chitting away with your chatter-tat-tatters and sons. Or someone else that is registered on your site and likes talking to you. The possibilities to what these new members only tabs can hold is endless. All that we have left to do though, is END THIS!!!

13: Let's End This Schnitzel

So we need to put an endif; we plan to ever end this. Ha! Did ya get it?!?! Clever bastard, I am, eh? Okay...

<?php
endif;
?>

That's All Folks

Hope you liked this super custy amazed ation, makes me crave some more sensational stuff...

How About A Bonus

As promised,

For Those, Less Up-to-Date WordPress Nuts

Making a custom coded login form, is simple. You may already know how to do it just in making the register and password reset forms, but if not here we go.

<form name="loginform" id="loginform" action="<?php echo site_url('wp-login.php', 'login_post') ?>" method="post">
	<p>
		<label>Username<br>
		<input name="log" id="user_login" class="input" value="" size="20" tabindex="10" type="text"></label>
	</p>
	<p>
		<label>Password<br>

		<input name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" type="password"></label>
	</p>
	<p class="forgetmenot"><label><input name="rememberme" id="rememberme" value="forever" tabindex="90" type="checkbox"> Remember Me</label></p>
	<p class="submit">
		<?php do_action('login_form', 'login'); ?>
		<input name="wp-submit" id="wp-submit" class="button-primary" value="Log In" tabindex="100" type="submit">
		<input name="redirect_to" value="<?php bloginfo('template_directory').'/page-your_members_home_page.php'); ?>" type="hidden">
		<input name="testcookie" value="1" type="hidden">
	</p>

</form>

Finally That's it!!

We made it through this long and drawn-out tutorial. You know, this is all readily open and available for you to view anytime you want had you just taken a second to think about it, you might have already thought about it and known. Then you wouldn't have needed to come follow my shenanigans here and you could've created this on your own. Just go check out the wp-login.php file, and see for yourself. It has all the greatness I have gone through here, aside from the mustache reference Oh, and the tabs of course.

For those who are going to ask me if I have a demo set up, please check out my test site here for a working example demonstration. I have created a tabbed dialog box that displays the login/register and password reset forms which I am using on the theme I am currently developing. Click the Login button in the top right corner, and test the login out by using the following information:

Username: themedemo
Password: themedemo

Any questions??? Post a comment, let me know what you're thinking, or what you've thought already. Enjoy!

I realized that this is supposed to be a New 2 WordPress site, meaning we should be providing WordPress content, but the truth is there are so many sites out there like that already, I don't see the harm in providing a little something here and there that doesn't have to do with WordPress. Most of my posts contain something to do with jQuery, because I just love it. Plus you can easily incorporate jQuery into your WordPress site, so why not learn it, then try to use it in WP.

A cool image sliding animation

In this simple tutorial, I'll show you how to make a basic animation that includes 2 images. When you hover over the image, it will slide down and reveal the 2nd image behind it. View the demo to see what I mean.

1. First we need some CSS Styling

We want to add some styles to this, and CSS selectors that will be used later by the jQuery script.

#container {
	width: 850px;
	text-align: center;
	margin: auto;
}
.wrap {
	width: 250px;
	height: 140px;
	position: relative;
	overflow: hidden;
	float: left;
	padding: 0 1em;
	top:150px;
}
img {
	position: absolute;
	top: 0;
	left: 4px;
}

2. The HTML code

The HTML we will use is as follows.

<div id="container">

	<div class="wrap">
		<img src="back.jpg" alt="image" />
		<img src="front.jpg" class="front" alt="image" />
	</div>

	<div class="wrap">
		<img src="back.jpg" alt="image" />
		<img src="front.jpg" class="front" alt="image" />
	</div>   

	<div class="wrap">
		<img src="back.jpg" alt="image" />
		<img src="front.jpg" class="front" alt="image" />
	</div>

</div>

You will see only the front image since the CSS overlaps the 2 images with the position of absolute for the img selector.

3. The jQuery Script

First thing is don't forget to include jQuery in the page.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>

Then you can add the script, here I just embedded it in the page, since it's such a small script. Generally though you might want to include it as an external file.

<script type="text/javascript">
$(function() {
	$('.wrap').hover(function() {
		$(this).children('.front').stop().animate({ "top" : "300px"}, 700);
	}, function() {
		$(this).children('.front').stop().animate({ "top" : "0px"}, 200);

	});
});
</script>

Explained

$('.wrap').hover(function() { This adds a hover function to the 'wrap' CSS class.

$(this).children('.front').stop().animate({ "top" : "300px"}, 700);
$(this) refers to the 'wrap', getting the .children of 'wrap' that have the class 'front'. The stop() function will stop the animation when you hover off, so the animations don't build up. The animate() function makes the 'front' image move down from the top by 300px at a speed of a little less more than half a second, 700.

$(this).children('.front').stop().animate({ "top" : "0px"}, 200);
This essentially does all the same stuff as the above except it slides it back up to 0px from the top, at a speed a little faster than half a second, 200.

That's it!

You could easily find ways to incorporate this into a WordPress theme. In fact that is what I have been working on with the new CSS Gallery Styleswitching thingy thing I am making. I don't really know what to call it, but it will basically become a really really cool jQuery CSS gallery, with lots of enhancements on CSS galleries as we know them. This will be one of those things.

Any questions let me know below.

The first part of the tutorial talked about creating custom loops in WordPress . In this part I'll show you how to set up the slider for combining both parts 1 and 2 together to dynamically display the posts in the Featured category of your site.

All you really need to know right now is that this will show you how to create a jQuery featured post slider that works without JavaScript. With this you can progressively enhance your site, while increasing it's accessibility.

When adding this type of advanced feature, you want people not using JavaScript to still have access the content, while providing the cooler stuff to everyone else.

You could use this as it is if you wanted to edit the content that would show in it manually, but that's not what you will want to do after the next part in this series I'm sure.

This tutorial is the second one of three in the 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

The first thing you will need to do is download the jQuery Cycle plugin. Once you do, save it to the js directory in your project root. Do this with the other JavaScript file you'll hear more about later. This tutorial is a variation on a tutorial originally created by Jenna Smith. So I can not take full credit for creating it, I just modified it and made it work dynamically.

Here is what I'll be showing you how to make, which can be seen in action on the here on the demo page.

The HTML code

Here is the HTML you need to use in your page. First the <head> should have this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New2WP - jQuery Featured Post Slider</title>

<link rel="stylesheet" href="slider-style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
</head>

And here is the <body> content of the page.

<body>

<div id="wrapper">
	<h1>Demo - jQuery Featured Posts Slider</h1>
	<div id="slider">

	<!--Slider Navigation
	---------------------->
		<ul class="slides-nav">
			<li class="on"><a href="#slide-one">Slide one</a></li>
			<li><a href="#slide-two">Slide two</a></li>
			<li><a href="#slide-three">Slide three</a></li>
			<li><a href="#slide-four">Slide four</a></li>
			<li><a href="#slide-five">Slide five?</a></li>
		</ul>

		<!--Sliding Contents
		------------------->
		<div class="slides">
			<ul>
				<li id="slide-one">
					<img src="http://new2wp.com/wp-content/uploads/2010/02/fun.png" />
					<h2>Slide one</h2>
					<p>And in the final tutorial, you would learn how to show excerpts of your posts here, instead of this static text. Yeah, take that you stupid static text! You'll also see how you can use wordpress custom fields to get and show a thumbnail image here, the image you see is also stupid and static.</p>
				</li>
				<li id="slide-two">
					<img src="http://new2wp.com/wp-content/uploads/2010/02/fun.png" />
					<h2>Slide two</h2>
					<p>This works like a tab menu when Javascript is disabled. So you can always see what's here!</p>
					<p><strong>That's what's up.</strong></p>
				</li>
				<li id="slide-three">
					<img src="http://new2wp.com/wp-content/uploads/2010/01/wordpress-loops.png" />
					<h2>Slide three</h2>
					<p>Post excerpts of your posts can be used, instead of this static text. Yeah, take that you stupid static text! You'll also see how you can use wordpress custom fields to get and show a thumbnail image here, the image you see is also stupid and static.</p>
					<p><strong>Well then, moving right along. Shall we?</strong></p>
				</li>
				<li id="slide-four">
					<img src="http://new2wp.com/wp-content/uploads/2010/02/fun.png" />
					<h2>Slide four</h2>
					<p>Did you know? The industry's standard dummy text ever since the 1500s has been Lorem Ipsum, ever since an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
				</li>
				<li id="slide-five">
					<img src="http://new2wp.com/wp-content/uploads/2010/01/wordpress-loops.png" />
					<h2>Slide five</h2>
					<p>If you are reading this, then you must be interested in what each slide says for some reason when that is not the point of this. But while you are reading this, you might be wondering why I made 5 slides for a demo page. It is what I created for the New2WP homepage slider, so therefore this tutorial will be more similar in looks to the thing I am showing you how to make, capiche?</p>
				</li>
			</ul>
		</div>
	</div>

</div><!--/wrapper-->

</body>
</html>

This has all the necessary code for building the 2 lists that display the slider navigation class #slides-nav and the .slides themselves.

Adding CSS some styles and stuff

The CSS is important here because without it certain things wouldn't work at all. jQuery and CSS go very well together, and you are able to do so many things by combining them. Though it can be difficult to work with if you don't use Firebug when you have divs that are hidden or when you need to see the padding or margins of an element.

/* slider
/* ---------------------------------------------------- */
#slider {
	background: #5a6173;
	border:0px solid #999;
	margin:0px;
	padding:10px;
	position:relative;
}
#slider ul {
	height: 1%; /* IE fix */
	list-style-type: none;
	padding: 0;
	position:relative;
}
#slider ul:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

/* slider > SLIDES
/* ---------------------------------------------------- */
.slides {
	border:1px solid #fff;
	background:#bdc3ce;
	color:#182431;
	padding:10px;
	position:abosolute;
	margin:10px;
}

.slides ul { width:9999px; }

.slides li {
	background:#bdc3ce;
	height:205px;
	margin:0px;
	overflow:hidden;
	padding:0px;
	position:relative;
	width: 470px; /* Width of slides box */
}
.slides h2, h2 a {
	font-size: 20px;
	margin:0px;
	padding:0px;
}
.slides img {
	float:left;
	margin-right:10px;
	overflow:hidden;
	padding:0px;
}
.slides p {
	margin:0px;
	overflow:hidden;
	padding:0px;
}

/* slider > NAVIGATION
/* ---------------------------------------------------- */
.slides-nav {
	clear:both;
	float:right;
	position:absolute;
	right:10px; /* make this a negative number to make nav hang off */
	top:10px;
	width: 330px;
	z-index:100;
}
.slides-nav li { margin-left:4px; }

.slides-nav li a {
	background: #182431 url(images/inactive.png) left top repeat-x;
	color:#fff;
	display: block;
	font-size:14px;
	font-weight:bold;
	margin:0 0 0px 0;
	padding: 13px 5px;
	text-decoration:none;
}

For styling the highlighted tab, you can add this to your stylesheet.

/* slider > ACTIVE TAB
/* ---------------------------------------------------- */
.js #slider .slides-nav li.on a {
	background: url(images/active.png) left center no-repeat;
	color:#182431;
	margin:0 0 0 -15px;
	padding:12px 5px 12px 20px;
}
.js #slider .slides-nav li.on a {
	position: relative;
	top: 0px;
}

You can of course edit the styles to suit your needs, this is just the CSS I created for the slider on the demo so you can see what it looks like.

Finally we write the jQuery code

Since the we included the jQuery library, and other JavaScript files in the page HTML already, all we need to do is create the slider script.

$slider = {
    context: false,
    tabs: false,
    timeout: 1000,      // time before next slide appears (in ms)
    slideSpeed: 1000,   // time it takes to slide in each slide (in ms)
    tabSpeed: 300,      // time it takes to slide in each slide (in ms) when rotating through tabs
    fx: 'scrollLeft',   // slide control: fade, scrollLeft, right etc.

    init: function() {
        // set the context to help speed up selectors/improve performance
        this.context = $('#slider');

        // set tabs to current hard coded navigation items
        this.tabs = $('ul.slides-nav li', this.context);

        // remove hard coded navigation items from DOM
        // because they aren't hooked up to jQuery cycle
        this.tabs.remove();

        // prepare slider and jQuery cycle tabs
        this.prepareSlideshow();
    },
    prepareSlideshow: function() {
        // initialise the jquery cycle plugin -
        // for information on the options set below go to:
        // http://malsup.com/jquery/cycle/options.html
        $('div.slides > ul', $slider.context).cycle({
            fx: $slider.fx,
            timeout: $slider.timeout,
            speed: $slider.slideSpeed,
            fastOnEvent: $slider.tabSpeed,
            pager: $('ul.slides-nav', $slider.context),
            pagerAnchorBuilder: $slider.prepareTabs,
            before: $slider.activateTab,
            pauseOnPagerHover: true,
            pause: true
        });
    },
    prepareTabs: function(i, slide) {
        // return markup from hardcoded tabs for use as jQuery cycle tabs
        // (attaches necessary jQuery cycle events to tabs)
        return $slider.tabs.eq(i);
    },

The part above sets up the slider, and prepares the slides. You can control the slider using more parameters than this, just visit the options page of the Cycle plugin

Next is the part that sets up and controls the tabs so they will cycle through showing each as highlighted.

    activateTab: function(currentSlide, nextSlide) {
        // get the active tab
        var activeTab = $('a[href="#' + nextSlide.id + '"]', $slider.context);

        // if there is an active tab
		if(activeTab.length) {
            // remove active styling from all other tabs
            $slider.tabs.removeClass('on');
            // add active styling to active button
            activeTab.parent().addClass('on');
        }
    }
};

This last part is to make sure the first tab is highlighted when the page first loads.

$(function() {
    // add a 'js' class to the body
    $('body').addClass('js');
    // initialise the slider when the DOM is ready
    $slider.init();
});

What makes it work without JavaScript...

Included in the code for the HTML page, you will notice that each slide has an ID set. To get this to work like a tab menu box all you have to do is reference the same ID in the corresponding href of each navigation link, like so:

// This is the nav button for slide one
<a href="#slide-one">Slide one</a></li>

// this is the ID of slide one
<li id="slide-one">

Just match the slide ID's to the nav href's. It's as simple as that. I think that concludes this tutorial. You will want to make sure to check out Part 3: making a dynamic featured post slider by combining Part 1: creating your own custom loops in WordPress, and Part 2: creating a static jQuery featured post slider. It will help you take your site to the 'next-level' and you'll learn some stuff too.

If you have any questions about the code let me know in the comments. It's already taken way longer to finish this post than I wanted it to. Plus there was a delay since I've been working on providing a better syntax code view for the site, and it is turning into a larger project than I intended it to. Time to make the donuts!

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