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 7 – Create the Featured Page Widget

Difficulty Level -

Applies to -

Now we are going to create the featured page widget and we’re going to dive directly into this code. If the secondary loop is not familiar to you, then I’m going to recommend that you go look at Lesson 14 of Customize Thesis Like a Pro which is what I taught last Thursday morning. In Lesson 14 I talk about using custom secondary loops so I’m not going to re-explain that here.

Create the File

What I’m going to do is just copy this and edit it. I’m just going to take this example_widget, copy it, paste it, rename it, crtc_featured_page_widget, open that one up and close the example_widget. We’re going to call this Featured_Page_Widget so we should go back to our classes and open our crtc_widgets.php and register another widget.

We’ve registered that widget and while we’re here at functions, we may as well include the functions file and that is called that. Now we’ve included all of our files properly so now we need to build this.

This is going to be called crtc-featured-page-widget. For the description, ‘This widget inserts a featured page into a widget area’ and our parent constructor id is going to be let’s say, featured_page, the name will be Featured Page Widget and we’ve resolved the constructor part of this. Now we come down to our form and we still want show_title.

Create Variables

The next thing we want though is $show_featured_image and $show_page_title and the other thing we want is $page_id. Let’s change this to $page_id, this would be $show_featured_image and this will be $show_page_title.

The difference between the $show_title and $show_page_title is show the widget the title, show the page title and we don’t have a message. We’ve got $title, $show_title, $page_id, $show_featured_image and $show_page_title. Those are our variables.

We can go ahead and delete this variable which was the text here because we’re not using a textarea. We’re going to copy this one though and actually, we’re not going to have an input class for this so it’s going to be a smaller input field. This is going to be for the $page_id so we’re going to replace those values in each of those places, echo page_id.

Specify Length of Values in Text Inputs

One of the other things we’re going to do here in these text inputs is we can specify the maximum length of a value so what we’re going to say here is size equals 6. We’re going to assume that 6 digits is enough to be able to enter all the potential page IDs we may want to use. Instead of title here, we’re going to say, ‘Enter the page ID’. There’s that label and because we took out the class widefat, now it’s going to be a nice smallest label.

Now we want to do the rest of our checkboxes. One checkbox is going to be show_featured_image and the next checkbox is going to be show_page_title so we’re going to copy that and echo $show_featured_image, $show_featured_image, $show_featured_image value equals 1. This field id, $show_featured_image and ‘Display the featured image’.

So that’s our label for that one and the next one is going to be $show_page_title. So, $show_page_title, it’s a lot easier to build off of something that already exists and ‘Display the page title’. There’s our input and now we come down to doing the same kind of thing here.

Prevent Malicious Codes in Checkboxes

First we don’t have any unfiltered HTML issues so we can go ahead and exclude that. We’ve only got these things left to do. In fact, I’m just going to take that from here, paste it there and replace these with that. Now, if there’s any value in $show_featured_image, then it’s going to be a 1 otherwise it’s going to be a 0, $show_page_title to be a 1 or 0. This is the full proof way of fixing checkboxes and preventing them from having malicious code in them. That’s done there.

Set Remaining Variables

The next thing to do here is essentially the same thing we’ve done before. Let’s just grab these, come down here and set up the rest of these variables. We’re not going to use message so we can get rid of that one. We don’t need any data sanitization in this case so we’ll just delete it.

We have $show_page_title = $instance[‘show_page_title’]; $show_featured_image = $instance[‘show_featured_image’];. Now we say, $before_widget; if ($title && $show_title ) then echo $before _title, $title and $after_title so that’s still says exactly the same.

Create the Loop and Query

Now we need to put our loop in. My loop is going to look just like loops we created last Thursday. We’re going to create a query and the argument that we’re going to use in this query is only 1 and that is we’re going to use the $page_id. When we use the $page_id, it’s only going to get 1 post so we don’t have to worry about posts to show or any of that kind of thing, post per page, no pagination issues.

The only thing this widget does is display one page and it’s going to display that based on page ID so we’ve got our variable up here $page_id. So args =  array (‘page_id’=> $page_id); then we create our query $featured_page_query = new WP_Query with this $args. Now our query is in place.

After our query, we have our loop so while ( $featured_page_query->have_posts() ) : $featured_page_query->the_post() then we’re going to echo the_post_thumbnail and it’s going to be featured-page so this is getting the_post_thumbnail. Then we’re going to echo the_title. The template tag the_title will allow you to put a before_title and after_title values.

Wrap Titles in H5 Tags

What I want to do is wrap the_title in h5 tags so I want to put before the_title as h5, after the_title is h5. Then I’m going to get the_excerpt which is that shorter version of the content and I’m going to create a link. The link is going to be a href equals get_permalink so it’s getting the permalink of this page ID. Then it’s going to have a title of “Learn More” and it’s going to display the link Learn More.

We come down to our endwhile so while this is the case, do these things then endwhile. Remember from last week we reset the post data so we’ve created a query here and now we are going to reset the post data so that it goes back to whatever page we actually happen to be on rather than the query inside this widget then we echo our after_widget.

Review the Changes

Now, I want to show you what this looks like so you can see it all in place but what we really need to do is add a bunch of HTML to this to make it really look good. We’re going to start off with this right here. I have to upload the featured_page_widget, widgets.php and functions.php. Then I’m going to go to widgets and I should have featured_page_widget show up here now. There it is, Featured Page Widget.

Display Widget Title of the Featured Page

We’re going to come over here to this left widget area and drag our Featured Page Widget into it. I’m just going to say, Featured Page and I want to display the widget title. Now I need that page ID, let’s see, we can use this Finished Projects 1 and you can see down below on the lower left the post equals 20? That’s the page ID I need so I want to say 20. I’m going to display the featured image, display the page title and hit save. We’re going to see something relatively cool here right off the bat.

Fix Errors

The query variables failed here so it’s now showing 3 posts. Let’s take a look at what failed here, page_id, esc_attr, I think that’s my problem here. I copied that because I wanted to save myself some typing but in this case we’re not doing any sanitization in this section so that was my mistake. Sorry about that.

We come back to widgets, upload featured_page_widget, now we should be in fat city. Not yet. Oh, that’s because it didn’t save a page ID and I’m missing some of my if statements that we’re going to be inserting here. Since I didn’t have a page ID, say 20, display the featured image, display the page title, hit save.

Well, isn’t that interesting? Oh no, that’s right I’m sorry. This is actually supposed to be this and this is $new_instance. That’s what I get from cutting and pasting to save myself some time. So $instance[‘show_title’] then it’s $instance[‘show_featured_image’], $instance = $old_instance, $instance[‘title’] = $new_instance[‘title’], $instance[‘show_title’] = $new_instance[‘show_title’] 1 or 0, so I’m saving those instances incorrectly.

Cast the Page ID as an Integer

Now we should be pretty good. I don’t have page ID here yet and that’s going to look like this, $instance[‘page_id’] = (int) ($new_instance[‘page_id’]). This is that typecasting I talked about where what we’re doing is casting the page ID as an integer because it’s what it actually is. It’s not a string, it’s actually an integer so we’re casting it as an integer with this (int) here.

In fact, I should do that up here at the top. I said esc_attr but what I really meant to do was in this case, was (int). So $page_id = (int) ($instance[‘page_id’]) and cast is an integer. Now, we should be sitting pretty, let’s refresh the widgets page. Now we should be able to say, 20, display the featured image, display the page title, those are now being saved.

Select a Featured Image

What’s not showing up here is the featured image. The reason that featured image doesn’t showing up here is because I haven’t actually selected a featured image for that page. If we come back over here to this Featured Projects and set the featured image,  let’s get the biggest image. Now, what we’ll do is set this as use as featured image, update this, refresh this and now the featured image is the size we want it.

It’s not the size we want it and the reason is because these thumbnails were already created. What I need to do and this is instructive for you because when you give somebody a child theme and they install it and you have a created a special featured image size, they may actually need to go back in and recreate their thumbnails. The way they recreate their thumbnails is with a plugin called Regenerate Thumbnails. It’s installed already, perfect. All I really have to do then is go to tools. Regen thumbnails, there we go.

Regenerate the Thumbnails

Once it has regenerated all the thumbnails, that featured image size that we defined will be created. That is an underlying issue associated with setting up a featured image size on a site that already exists. If you installed this on a site that doesn’t already have thumbnails generated then it’s no big deal but when you’re thinking about support, unsupporting this thing that you’ve created, that is something you’re going to have to keep in mind.

Add HTML and Logic to Exclude Elements

Now, we have the image at the right size. Obviously, these things aren’t formatted correctly and the reason is because we’re missing some HTML plus we’re also missing the logic that allows us to exclude the image or the title or change this thing up.

What we’re going to do now is change up our HTML. Instead of these things here, we’re going to do this. What happens here is inside of our while loop, it asks, if there is a $page_id, then it does something. That something is this.

What we do is we ask, if there is a page ID then we do everything. If I failed to enter a page ID, we don’t want anything to display and that’s what happens here. Before, when the page ID didn’t work, it just displayed a bunch of posts. Now, if there is not a page ID, then nothing is going to display. If there is a page ID, then we’ll echo before_widget, if there is a title and show_title then we’ll show the title.

Now, we run our query and inside of our loop we start off by wrapping everything inside of a div. We have an opening and closing div tag and we ask, if featured_image, then show the post_thumbnail and we wrap this post_thumbnail in p tags. If the featured image isn’t checked, then the post thumbnail is not going to show up.

Show the Excerpt

The next thing we say is, if($show_page_title) then we echo the page title with the h5 and the h5. No matter what, we’re going to show the_excerpt then we’re going to change up that link text to wrap it in a div which is a class that we defined back when we were working on the styling of the blog page so the posts page.

We defined this style button so we’re going to wrap that link in that then we have our closing div. This has changed up quite a bit. We’re going to save this document, upload and now you’ll see how it differs. It takes on the appearance of these other widgets and this Learn More link looks like this.

Now, there are a couple of other things I want to do though. Let’s go back to Appearance and Widgets and look at our Home Left Widget Area. You could choose not to display the widget title and there it is with no widget title. You could choose to display the widget title but not the featured image. The featured image doesn’t display but the widget title does. You could to display the featured image but not display the page title. That’s the kind of control you’ve given your user over this.

Make the Excerpts Shorter Using Filters

Now, I actually would like to do a couple of other things. I’d like to get rid of these dots and on the homepage I’d like to make this excerpt shorter so we’re going to use 2 more filters to do that. We are going to use the excerpt_more filter and the excerpt_length filter. It’s not actually going to show up in our widget, it just affects our widget. What it shows up in is in our front_page_html where we have defined these various things.

We’re going to start off that by changing the excerpt_length so I’m going to create this function called crtc_front_excerpt_length and this is a filter and it returns the number of words that the excerpt has. By default, WordPress does 50 or 55 something like that and what we want to do is return 30. We’re going to reduce the excerpt_length down to 30.

The other thing I want to do is get rid of those triple dots under the More. Again, this is also a filter and in this filter by default, the more it returns those dots in a bracket, what we’re going to do is return nothing so we want nothing to show up. Of course we have to call this filters but we only want to call them in the front page so we’re going to use this front_page_controller to call those filters.

WordPress Excerpt_More Filter

We’re going to add a filter to the WordPress excerpt_more filter and the function that we’re calling for that is crtc_front_excerpt_more which is this here and that’s going to return that nothing, essentially a blank. Then we’ll do the same thing with excerpt_length so we’re going to filter the length and use the excerpt_link filter, call our function that returns the 30 words.

With this filter, we need to make sure that it gets called after everything else is called on this filter. We’re just going to give it 999 so that it make sure it takes precedence. Remember that these two filters are only going to be called if it’s the front page and they won’t affect any other excerpt, only this one set of excerpts that is the front page excerpts. Which is one of the reasons why we created this front_page_controller in the first place so that we can just say, if(is-front_page) then we’re going to do all these spectacular things.

Review The Completed Featured Page Widget

The thing we need to do then is come over to our functions, upload our front_page.html, come back over here and now, we’ve come down to 30 words, we no longer have the dots and we have our Learn More thing. Let’s put the page title in there as well. There we go. We have now created a widget that displays the featured image and links off to the page, gives a bit of text, puts a title up there and it works.

Now, obviously the challenge in this class was to teach the initial process. Once you know the initial things, that is how to make the widget work, how to sanitize your data, how to internationalize, then all the rest of these just fall immediately into place and the world is your oyster.

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