S Simple Accordion Plugin

I have to give full credit to the original author as it’s all his idea and all I did was package his work up as a wordpress plugin.

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.

Cool Code Boxes Plugin

what does this plugin do?

This plugin will create a neat little jQuery box around your code that expands if needed when moused over. Many sites show snippets of code and many times these lines of code are wider than the available content areas. This plugin offers an alternative to the traditional scroll bar at the bottom of the code box. The actual code was published by Chris Coyier at Digging Into WordPress, and I created a plugin to integrate it into WordPress.

example

This is a long piece of text to show how the plugin works.  I am just typing filler to expand past the content area.

why I created it?

I have wanted to contribute to the WP community for some time, but never really had the expertise to create anything useful. I found this code and really liked it and I integrated it into WP. Then I thought it would be easily turned into a plugin. There is also a video series that shows how I created the plugin for those interested in creating plugins for WordPress but don’t know where to get started.

how to use the plugin

All you have to do to use the plugin is to upload the plugin to the plugins folder, activate it in the plugins menu in the admin section. Then add
<pre><code>
before the code you want to display with the cool code boxes and
</code></pre>
after the code.

That’s it, the plugin supplies everything else to produce the effects.

The book did get me interested in trying to create a plugin though. I was going to do a screencast on implementing the Expanding Code Box from Digging Into WordPress, and I always start by going through the process to make sure I can do it and to iron out any kinks before screencasting.  During the process, I thought this would make the perfect subject for creating my first WordPress plugin.  So, in the next few posts I will create a WP plugin that creates a cool sliding box for your code.

I use code from Digging Into WordPress and barrow a great deal of code from Justin Tadlock’s Cleaner Gallery plugin. I used cleaner gallery because I know that Justin Tadlock likes to write plugins and themes using very robust and efficient code, and I trust his code to be some of the best that I can find.

This is the first screencast I have created without a test run, this my actual creation of the plugin filmed, err… screened.

View Sliding Code Box Demo

The following screencast shows where I received inspiration and how I went about setting it up.

This next screencast begins the process of creating the necessary CSS and JS files and linking them correctly with our plugin PHP file.

The next post will cover the content of the new files we have created, and we’ll solve that fatal error.

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

Now is the time to work the magic. The first thing to do is to add the javascript files to our theme. You will need the following three files in a folder called “js” inside your root of your child theme folder.

• serialScroll
• scrollTo
• coda-slider (this should be a blank js file at this point)

Once these files are in place, add the following to your functions.php file for your child theme.

if( !is_admin()){
 wp_deregister_script('jquery');
 wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2');
 wp_enqueue_script('jquery');
}

add_action( 'template_redirect', 'load_my_scripts' );

function load_my_scripts() {
 wp_enqueue_script( 'jquery.serialScroll', get_stylesheet_directory_uri() . '/js/jquery.serialScroll.js', false, '0.1', false );
 wp_enqueue_script( 'jquery.scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.js', false, '0.1', false );
 wp_enqueue_script( 'coda-slider', get_stylesheet_directory_uri() . '/js/coda-slider.js', false, '0.1', false );

}

The first chunk of code is taken directly from Digging Into WordPress.  The second part I figured out with help from the Hybird Support Forums.  It turns out you need to account for child themes when creating paths in your functions.php files.

Once you add this to your functions.php, reload your page and make sure the code is in the head.

If it is, go ahead and open the coda-slider.js file and put the following code into it.

$(document).ready(function () {

 var $panels = $('#utility-before-content .category-slider');
 var $container = $('#utility-before-content #query-posts-3');
 var $scroll = $('#utility-before-content .widget-inside').css('overflow', 'hidden');

 $scroll
 .before('<img src="/wordpress/wp-content/themes/hybrid-slider/images/scroll_left.png" />')
 .after('<img src="/wordpress/wp-content/themes/hybrid-slider/images/scroll_right.png" />');

 var scrollOptions = {
 target: $scroll,
 items: $panels,
 prev: 'img.leftb',
 next: 'img.rightb',
 axis: 'xy',
 duration: 500,
 easing: 'swing'
 };

 $('#utility-before-content').serialScroll(scrollOptions);

});

Along with this javascript, you also need a touch of CSS to make sure that things work as expected.  Add the following CSS to your style.css file (or whatever you call your stylesheet).

.content {
 position: relative;
}

#utility-before-content .widget-inside {
 height: 270px;
 width: 870px;
 overflow: auto;
 overflow-x: hidden;
 position: relative;
 clear: left;
 background: #999;
 margin: 0 auto;
}

#utility-before-content .widget-inside .category-slider {
 padding: 40px;
 height: 190px;
 width: 790px;
}

Please remember widths and heights are relative to your design.  This code is only provided as a starting point.

Here is the video, it ends kinda suddenly, we’ll continue on in part three.

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.

Magazine Theme part 3 from Rusti Gregory on Vimeo.

Magazine Theme part 2 from Rusti Gregory on Vimeo.

Magazine Theme Demo part 1 from Rusti Gregory on Vimeo.

r