How to Add a Visual Slider to Thesis

The following is a tutorial on how to add a dynamic content slider to your Thesis wordpress theme. It’s easily adapted to work with any wordpress blog, but like everything it’s just easier with Thesis ๐Ÿ™‚
We’re going to be using a plugin to acomplish this and as a result this does bring up some icky programming issues. The plugin we’re using uses the mootools javascript framework, so if you have any plugins that uses this there is the potential for conflict. Secondly if you use any plugins that use JQuery  this will cause a conflict as well. One of the common plugins a lot of people are using which will cause a conflict is lightbox 2. If you are using Lightbox 2 uninstall it and switch to Shadowbox JS, you are sacrificing a few features, but it’s very similar functionality and it plays nicely with the slider, where Lightbox 2 causes conflicts. Next make sure you have the Dynamic Content Gallery plugin, it’s going to do the work for us.

First you’ve got to decide what posts you want to feature. The easiest way is just to set up a featured content category and put all the posts you want to be included in it. However you could tell it to use more than one category. The screen shot below is from the dynamic content setting page  I told it use the featured category (category ID 88) and the last 5 posts (post select 1 – 5)

5242009_30055-pm

Next you’ve got to decide on a uniform picture size for the slider to use, I’m using 600 x 300 since that’s the size I use for each post, I’m also going to re-use the pictures from each post, however if you wanted to use different sized images or just different images it’s not a problem, as long as you use a consistent size. Again on the dynamic content settings plugin page put in the size you chose.

5242009_30421-pm

Out of the box the plugin is configured to put the images in isolated subfolders “/wp-content/uploads/custom/” and “/wp-content/uploads/dfcgimages/“. Since I’m re-using the post images I changed mine to use my default image location

5242009_30922-pm

Another option you may have to adjust is the slider height, this is the height of the text box that shows with each image. You have to play with it a little to get the right height for you

5242009_31123-pm

If you haven’t already resized and cropped your images now would be the time to do that. If you don’t have an editor like photoshop or simply prefer to use web-based tools I highly recommend Picnik.com, it’s an excellent easy to use image editor. For each post that you want to appear in the slider you need to do a few things first put it in the what ever category you specified in above (in my case the “featured” category.

5242009_31737-pm

Next you’ll need to enter two custom fields for each post dfcg-image and dfcg-desc, the first is used for the image, the second is used fro the text in the slider.  You add them by clicking “add custom field” and selecting them from the drop down. Since this is probably your first time you’ll have to type them in, but after that they’ll be there. The dfcg-desc is the text that will appear in the slider again it takes a little experimentation to get the right length/size. Be careful to only put the file name in the directory not the full image URL.

5242009_40810-pm

Make sure you go through and add images and slider text for the initial 5 posts you’ll be using, you don’t need 5 to start but you should have at least 2 so you can make sure everything is working.

I am using the “features and teasers” setting on thesis, but I think the slider and 2 “features” posts underneath it would be too visually overpowering, so I’m going to use just the slider with the teasers underneath. This is where the beauty and simplicity of thesis comes into play without mucking with the HTML files I drop the number of teasers from two down to zero.

5242009_33753-pm

Next we’ve got to open up the Thesis custom functions file and add a few lines of code. I only want my slider to appear on the home page not every page so I’ve used the is_home() if/then statement you could easily omit it or change it. Here’s the code:


//featured content
function featcc() {
if (is_home()){
global $post;
if( function_exists( 'dynamic_content_gallery' ) ) :
dynamic_content_gallery();
endif;
}
}

Ok at this point I should point something out, the plugin programmer recommends this method to put the slider in


include (ABSPATH . โ€˜/wp-content/plugins/dynamic-content-gallery-plugin/dynamic-gallery.phpโ€™);

However that won’t work with thesis, you need to put in a modified version that looks like this:


dynamic_content_gallery();

I’m not going to bog you down with the details that have to do with the hows/whys of the wordpress loop, but if you want to know you can read about it yourself.

Next we tell Thesis where to display the slider box in this case in the Feature box, by adding this line of code to the custom functions file:


add_action('thesis_hook_feature_box', 'featcc');

Lastly make sure you’ve got your feature box turned on on thesis:

5242009_41029-pm

Head on over to your homepage, and if you did everything mentioned above you should have a nice slider box.

Again you don’t need thesis to use this plugin or implement it on your blog but it is much easier if you do. If you’re ready to stop fighting with your code and wasting time, and ready to start getting things done, why not pick up your own copy of  Thesis?

photo credit: kreg.steppe

GraywolfSEO.com runs on the Genesis Framework

Genesis Framework

Genesis lets you to quickly and easily build amazing websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.
It's that simple - start using Genesis now!


Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.


tla starter kit

Advertisers:

  1. Text Link Ads - New customers can get $100 in free text links.
  2. BOTW.org - Get a premier listing in the internet's oldest directory.
  3. Need an SEO Audit for your website, look at my SEO Consulting Services
  4. TigerTech - Great Web Hosting service at a great price.
More in Blogging, ntt
Did Matt Cutts Expose a Hole in Digg

Last week Matt Cutts made a post about how to connect your Linux computer to a Wii balance board using...

Dear Michael Arrington Please Save Techcrunch Before it’s Too Late

The following is an open letter to Michael Arrington owner of  Techcrunch.com, you still have a chance to save Techcrunch...

Thesis is a WordPress Framework Not a Design and Why That Matters for SEO

When I mention Thesis a lot of people don't really get the value of it, to them Thesis is just...

Close