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 9 – Part 6 – Add Featured Image Support to Thesis

Difficulty Level -

Applies to -

Now that we have this widget 100% complete, the next thing we’re going to do is add featured image support to Thesis. We’ve created it, we’ve defined it, we’ve sanitized it, we’ve done everything there is to do with this widget.

Now we’re going to get ready to build the real widget we came here for. The real reason we came here was to create the featured page widget. Remember I said one of the parts of that featured page widget is using this featured image.

Add Theme Support to For Featured Images

The very first thing we need to do is add theme support for our featured images and we’re going to do that inside of our Thesis responsive functions file. Actually, you may remember from an earlier lesson in this that we had add_theme_support( ‘post-thumbnails’ ). That was so that we could create a featured image for this orbit_slider.

Well, if you weren’t in a child theme class, the very first thing to do in order to add featured image capability to your site is to use this function add_theme_support( ‘post-thumbnails’ ). Once you use the function, it automatically makes the featured image available.

You can use this add_theme_support to limit the post types that this exists for. If you don’t limit the post types, the theme support will exist for all post types. In this case, that’s the way it’s going to be here since we’ve already added it because of our orbit_slider.

If we come back and take a look at our Finished Projects page, you can see we already have this featured image thing here ready for us to set. This is the dialog box that pops up when you add theme support for post-thumbnails. We only use that in our slides. When we created those slides for our slider, this is where we selected our featured image.

Create Image Size with Featured Image

Now what we’re going to do is create a new image size to use with our featured image. What we’ve done here is add_image_size, let’s go ahead and do that again. We’re going to add_image_size but it’s going to be orbit-custom.

The first thing is the slug of the image size we’re adding and this we’ll call featured-page. Again, this is the length that the image is going to be created as and this is the height.  What we want to do here is say, 260 pixels for the length and 100 pixels for the height.

This true is whether or not we crop it proportionally or whether it scales proportionally. If we left this as false, what it would simply do is scale the image down to the maximum of either the 100 pixels or the 260 pixels. What we want to do is crop the picture so it’ll scale it down to the minimum of either 100 or 260 and crop the rest; that’s what true says so that’s what we’re going to do here.

So we’ve added theme support for post-thumbnails, now we’ve added an image size called featured-page and for the orbit-slider, we’ve added the image size for orbit-custom.

Select Featured Image for the Page

Now what we’re going to do is select our featured image for a given page and when we select that featured image, we’re also going to select the size of the featured image that we want to display.

For our add_image_size, we selected its name, we give it a width and height and a crop value. With the image size selected, we can say the_post_thumbnail and we can either specify a size for the post thumbnail as well as a bunch of attributes or we can specify a name and that’s what we’re going to be doing here.

We’ll say the_post_thumbnail and specify the name of the image size that we want to use which in this case is our featured-page. This is actually how we are going to call that image in, it’s going to be the_post_thumbnail and pick not the thumbnail size, not the orbit_slider size but the size we just created which is featured-image.

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