greenermountain

Welcome to the second half of the tutorial. In the first half we setup the functions.php file and create blank JS and CSS files. The only thing left to do is to fill those files, oh, and solve our fatal error that I discovered at the end of the last screencast.

With that said, on to the videos:

And, I’ve wrapped up some final thoughts in this short video:

Go to the cool code boxes plugin page to download the final product.

I have plans to add a readme file to the plugin and will use it to show other things as I learn them, like creating an options page in the admin to choose colors and how to us SVN to upload it to the plugin repository. We’ll see. I hope you enjoyed these videos.

cleaning it up

We left you last time with a functional but ugly slider. This post is about making it look nice, at least what I think looks nice. You will have to style it to your sites taste with custom CSS.

I added the following CSS to position the arrows to the side of the slider and give the content a better presentation.

.scroll-button {
 position: absolute;
 top: 180px;
 cursor:pointer;
 z-index: 100;
}

.leftb {
 left: 0px;

}

.rightb {
 right: 0px;
}

#utility-before-content, #utility-after-content, #utility-after-page, #utility-after-single {
 border: none;
}

#utility-before-content .thumbnail {
 height: 150px;
 width: 150px;
}

#utility-before-content .entry-meta {
 display: none;
}

That’s really all there is to finishing it up. You can watch me add the CSS below.

These are the sites that were instrumental in creating this slider and might be of interest to anyone who liked this series.

• jQuery4Designers
• Wordpress Modder
• Digging Into Wordpress
• CSS-Tricks
• Min’s Blog (for icons)
• Theme Hybrid

You can download the theme and working version below.

Download Hybrid Child Slider Theme

It seems like a million years ago I saw a fantastic screen on jQuery for Designers that really made me think, “Wow, that’s amazing”.  Now, I thought both the screencast and the technique was amazing.  First, here’s this really cool technique that I can do if only I watch the screencast.  Second, here’s this guy taking the time to create the content and then giving it away.  I feel I’m finally in the position to give something back myself.  This is my version of the coda-style slider for WP on the Hybrid Framework.

View a demo of the Coda Slider on WordPress.

Ever since that screencast on I have been looking for a minimalist slider to use on a WordPress theme.  All of the ones out there have some fatal flaw for me, it doesn’t work with jQuery, or it looks horrible to me, or some other reason.  I wanted the version shown in the J4D screencast but I didn’t have the skills to pull it off.  Then another screencast came along and I finally figured out how jQuery worked in wordpress!  That was CSS-Tricks.  After that screencast, I was ready to tackle integrating the slider by myself.

the setup

The first thing you need is a few panels to slide right? I created three posts (you could use as many as you want) and entered some dummy text, slightly different titles, and an image to each one.  I set the category for each to “slider”, you may use anthing you want, just change the relavent code in the demos to what ever you choose.  (Hint: if your very new to this type of thing, just use slider for your category.)  This is an important step as the content will be pulled for our slider based on the category you choose.

I found a few of the slider tutorials that show you a custom loop to add to a page template.  I don’t like doing this type of thing as I don’t really understand loops and when I try to write custom loops, they don’t work.

Enter query-posts by Justin Tadlock.  I never understood how this worked until I watched a screencast by the Wordpress Modder, and I have used it in almost every site since.  I used installed the query-posts plugin and then dropped the query-posts widget into the Utility: Before Content widget area unique to hybrid.  I think you could do this with other themes, but Hybrid just makes things so easy.

Once the plugin was activated and the widget placed, I set the settings.  Here are the important ones.

• title – none
• display – the except
• category_name – slider
• get_the_image – check the box

That should get your page up and running and ready for the java-tricks to work their magic.  Refresh your page and make sure you see your three posts ready to go.  They will also show on all of your pages due to the Utility Before Content widget area showing up on all pages, use the widget logic plugin to make it only appear where you want it, that’s a whole other screencast.

If you would like to see the instructions in action, check out the video here.

I will put the next few steps in separate posts to keep things in small digestible chunks.

And the final installment:

Magazine Theme part 3 from Rusti Gregory on Vimeo.

I was looking at some of the magazine themes and “web 2.0″ type designs on the web and I thought “I could do that with hybrid.” So I did, here is the result.

Magazine Theme Demo part 1 from Rusti Gregory on Vimeo.

r