Good morning everybody and welcome to this Lesson 9 of Create a Thesis Responsive Child Theme. The majority of the material here today on creating a featured page widget can stand all by itself, it doesn’t need to be part of a child theme.
Use These Directions for Creating Widgets On Any WordPress Site
You can do this in any application of Thesis and for that matter, the majority of what we’re talking about today is not dependent upon Thesis at all. In fact this could be used in any theme that is compliant with the current version of WordPress. You could do this with Genesis, with Twenty Eleven, or with essentially any WordPress theme.
I needed to cover this material for the child theme course which is why I am presenting it here but, again, this material can apply to any WordPress site.
Detailed Nature of Create a Page Widget Lesson
This is actually a fairly intense class. We have a lot of material that we’re going to cover and there’s a lot of material in this class that I’ve never presented before. In fact, one of the reasons why I wanted to do such a thorough explanation of how to create widgets is because I’ve never talked about it anywhere else on the site. I’m also covering it so thoroughly because it’s not very well taught anywhere as I’m concerned.
If you have looked around trying to find out how to create widgets in the past, you will have found some fairly simple tutorials for how to setup a widget and how to create a widget. But because of the complexity of the process, those tutorials generally skip over or fail to mention a number of very critical elements to correctly create a widget. So I’m trying today not to skip over those parts.
The consequence of that is, this is probably going to be a 3-hour session. My plan is to break this up into essentially 3 one hour segments. We’ll go for about 45 minutes in each segment, take 10 minutes or so of Q&A, take a five minute break, come back and do the next 45 minutes and so on. I’m not absolutely certain that it’s going to take a full 3 hours to get through all of this material but it is my intention to do a thorough conversation about how to create a widget.
Create Two Different Kinds of Widgets
We’re going to create two different kinds of widgets. We’re going to create a widget that’s like a text widget and that’s primarily just for demonstrating a variety of concepts. And we’re going to create a featured page widget.
Featured Page Widget
Let’s go to thesisresponsivechildtheme.com to see what this featured page widget is going to do. This right here is a simulation of the featured page widget and this is a different version of the same widget. What this featured page widget is going to do is it will display a widget title if you wish, display a featured image also if you wish, display a page title if you wish and it will display an excerpt of the page with a link to that page.
Now, this widget was created just using a text widget with all these different parts but the way our featured page widget is going to work is that, all you have to do is enter the page ID in the widget and decide whether or not you want this title to show, whether you want a featured image to show and whether or not you want the page itself to show. Otherwise, it will automatically generate this.
Create a Featured Image
There are a number of functions that we’re going to have to create in order to make this work and these are functions that we haven’t really worked on much in the past. One of the concepts here is to create a featured image. WordPress supports thumbnail images as featured images. We haven’t used this featured image function yet because the featured image function essentially duplicates or is an alternative to the Thesis post thumbnail.
What we’re going to do here is nevertheless, implement a featured image in Thesis and use the featured image as the different image size that we can define with this child theme. That then allows the child theme user to assign a featured image to a page which would be different potentially than say the Thesis post image.
Learn to Use the Widgets API Class and User Input Fields
We’re going to define a featured image, we’re going to create the widget structure and this is essentially learning how to use the widgets API class and its various elements. The bulk of this class today is going to be on how to use the widgets API class.
We’re also going to have to write user input. We’re going to have to collect input for what the title is, whether or not the title should be displayed, what the page ID is and whether or not to display the featured image in the page title.
We’ve got these bits of user input and while you’ve seen user input in other plugins, widget and themes in the past, we’ve not talked about that yet at all. In this class, we’ll be creating user input fields inside these widgets so that you can specify which page ID and how you want to them display. That’s what we’re going to be doing here today.