Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 6 – Part 5 – Provide Support for the Orbit Slider

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Why Use the Orbit Slider Plugin?

The next thing we’re going to do is add support for the Orbit Slider. The reason why we’re using Orbit Slider is because it is responsive, that means it automatically has the ability to proportionally resize itself as the window gets smaller and smaller and that’s a pretty compelling ability. It’s a relatively reliable plugin. It does exactly what we want to do in this case. It has some characteristics you can configure so that’s why we’re going to use the Orbit Slider.

The time may come when there are other sliders that do this job and it may make sense to use something else at another time but what we’re going to do is build in support for this slider. So they can either install the WP Orbit Slider and once it installs, it’ll automatically be configured for them to use, otherwise they can just go ahead and use the widget area and something else in that widget area instead. That’s our plan for this.

Orbit Slider Requirements

The Orbit Slider has some specific requirements though so let’s take a look at the FAQ here. First off, it requires that your theme supports WordPress post thumbnails. Thesis does not do that automatically so it’s up to us to add that theme support to Thesis. It also needs an image size to be set. It sets an image size for you by default, I think the typical image size is 540×450 but that’s not the image size we want to use.

You can always use it that way but we’re going to set a specific image size and that’s also a WordPress related function. Then of course, you need to be able to add the slider to the theme files and the Orbit Slider doesn’t have a template tag but it does have a shortcode system so we’re going to use the do_shortcode method of adding the Orbit Slider as if it were a template tag in our template file. Those are basically its requirements.

Theme Supports Post Thumbnails

The first requirement is that the theme supports post thumbnails. Now, I’m sure you know that before WordPress ever had post thumbnails or featured images, Thesis had them and it used to have to use a plugin to add images so that you could have lists of your posts with the thumbnail image. There used to be other plugins that were available to do that but Thesis innovated on that and added the ability to have Thesis post images arranged around the headline meta area and also to have thumbnail images that went along with teasers.

WordPress came along and, I believe in 2.9, added support for post thumbnails so themes could use the media library to upload the image then the image could create both a regular image and a thumbnail image. Then the thumbnail image could be referenced in a loop so you could show the thumbnail images in something similar to a Thesis teaser. That came along a year and a piece after Thesis created its Thesis thumbnails.

Now, what you have really is sort of two competing systems. You have the WordPress Centric system which is the WordPress featured image and then you have the Thesis system which is the Thesis post image and thumbnails. What we’re going to do actually is have both of them working side by side because the Orbit Slider requires that WordPress post thumbnails feature in order for it to work. Like many other things, WordPress has this thing called Add Theme Support.

Add Theme Support for Post Thumbnails

The add theme support list is growing but right now, we’re going to be using the add theme support for post thumbnails and once we add that theme support, then we can use that system to set the image size and the slider will use that post thumbnail which is also known as the featured image. As soon as we add theme support for post thumbnails, we’re going to have this featured image dialog on all of our posts and pages.

The add theme support essentially just looks like this. You add theme support and you add the thing that you want to add support for. There are a couple of different ways that you can reference this post thumbnails thing but what we’re going to do is just simply add theme support for post thumbnails.

Create Featured Image Dialog

Copy this, come over to our functions.php file and add that here. Add theme support, it’s going to be post thumbnails and we’re just going to get rid of the rest of this. That’s all there is to it to add this featured image to Thesis. If we upload this and come back over to edit this page, you see now we have this featured image dialog here created.

This featured image dialog didn’t exist before but it exists now and this is where you can use the media library to set a featured image and we’re going to use this featured image again when we create our featured page widget in a couple of weeks but for the time being, it’s only going to be used when we install our slider. In fact, let me just go ahead and install the slider.

Install the Orbit Slider Plugin

We’ll add a new plugin, we’re going to search for Orbit Slider. It says it’s already installed, I guess I’d forgotten I installed it on this. Let’s take a look at our installed plugins, it must not be activated yet though. Look at that, I didn’t recognize that, the slider is already added. If we come over to our slides right now, I didn’t realize that I’d already uploaded these images to this but if we look at this thing for a moment, this is an individual slide.

The thing that shows up on the name is this, “From the Upper Emmons Glacier”. Actually, it isn’t, is it?  The thing that shows up on that slide is actually a title so this doesn’t actually show up, it ends up being like a title in the background of the image and this caption, we can add a caption to the slide and we can also make the slide link to some other URL if that’s what we want.

Create an Image Size for the Orbit Slider

Right now, this featured image is going to be set to that 540×480 I believe, let’s just look at the media settings here for just a second. Now, we’re going to add an image size. Again, there are a number of different ways that you can set images but what we’re going to do is create an image size, we’re going to give it a name, a height and width then we’re going to make a determination about how it crops.

How to Determine Crop Value

The name needs to be something that’s unique, the width is going to be our default width that we want to use and in this case we’re going to use 950. Our height is the default that we want to use and this crop value determines how the image is resized if it’s not the right size.

Crop is either true or false. If crop is set to true, what it does is it simply crops the image down to that size. If the image is bigger in both directions, then it just crops from the upper left hand corner down and makes both sizes the same. If one dimension is smaller than the minimum dimensions then the image ends up being smaller.

If it’s set to false, what happens is the image is first resized proportionally so that it can become the right size and one side or the other is cropped in order to make it all work. Now, because of the style of this, that is because of the way I want this to look, with this white border around the image, I need to make sure I put the image in at exactly the right size. If we create the image at exactly the right size and specify that size so that really, no cropping occurs.

Add Image Size

This image size, let’s just go to the media library and make sure that we’re clear on this image size, is 950×320. That’s the size of the image that we’re going to add for the Orbit Slider. If we go to add image size and put the dimensions in without any indication of what the unit is, it’s assumed to be pixels. We’re going to come in here and say, add image size and the name is going to be orbit-custom, the width is going to be 950, the height is going to be 320 and crop.

In this case, we’re going to do a hard crop, this is going to be true. We’ve added this image size, orbit-custom, 950×320 and true. If we use this image size description orbit-custom, Orbit knows to use that image size. Let’s come over and look at this description of how this works. If you want to set an image size, it tells you to use this term orbit-custom and that’s what the Orbit plugin is looking for, an image described as orbit-custom and it grabs its size from that, so we have add_image_size( ‘orbit-custom’, 950, 320, true ).

Conditional Statements for the Orbit Slider

There’s no reason for us to create this image size if we’re not using the Orbit Slider. Really, what we want to do here is make this conditional and we’re going to condition it on whether or not the Orbit Slider actually exists. What we’re going to do is look for the class Orbit Slider. A class is a set of functions inside of this plugin. If the class exists then obviously the plugin has been installed and if the class doesn’t exist, then the plugin hasn’t been installed.

We’re going to use the conditional, if (class_exists) and this is a standard PHP function. We put the name of the class which is in this case orbit_slider so, if (class_exists (‘orbit_slider’));  add_image_size( ‘orbit-custom’, 950, 320, true ). Let’s go ahead and save that, upload it and refresh it. Let’s remove that slider from the page too, you can’t have more than one slider on a page so this would throw errors otherwise. Go back and view the homepage, okay back to normal.

Now, we want to add the slider to this section here. This is where our controller becomes a bit more complicated because what we’re going to do now is rather than saying, crtc_home_feature_box_sidebar, we’re going to create a new function called crtc_home_feature_box_layout and it’s going to ask if the class exists, if (class_exists (‘orbit_slider’) then we’re going to actually do something with the Orbit Slider otherwise, we’ll do this home_feature_box_sidebar.

Add Feature Box Layout

Now, we aren’t going to automatically add the home_feature_box_sidebar. What we’re going to do is automatically add the feature_box_layout and it will decide whether or not the sidebar is installed. If the orbit-slider exists, then the sidebar will not be installed and if this orbit-slider doesn’t exist, then the sidebar will be installed.

In fact, we’re just going to paste a code in here. If the Orbit Slider plugin is installed, then what we’re going to do is create a div id=home_feature_box similar to this right here except we’re going to add a class to it, that is ” class=\”slider”\ that allows us to add some different styling to the slider that would not apply otherwise.

They are going to use this WordPress function called do_shortcode that takes different parameters and different contexts but in this case, you can take that shortcode orbit_slider, place it inside of single quotes, inside of this and it will pretend that the shortcode is actually installed in the content then we’re going to wrap it up with a closing div. We create our div structure just like this div structure but instead of putting the sidebar in, now we’re just going to put the orbit_slider in.

Use the do_shortcode Function

You would assume that probably at some point, orbit_slider is going to just create a template tag for this. You would assume that a template tag would be the thing that you would use here instead but nevertheless, we’re going to use a do_shortcode function because the template tag doesn’t exist in the orbit_slider currently. Go ahead and hit save, upload this, that is actually under functions, front_page_html, come back over here and refresh it. Now, that Orbit Slider is going to show up. See, there it is.

The slider shows up and by virtual effect, we don’t have to do anything. The slider is automatically responsive and those sidebars went away. However, if we come back over here to our plugins, installed plugins, deactivate the slider and we refresh the page, we go back to our sidebar again. If we reactivate the slider, then the sidebar goes away.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment