Build Your Own Business Website header image

Add Widgets to the Content Area Using the BYOB Thesis Shortcode Content Widgets Plugin

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

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.

Part 1 – Intro to the Plugin

This is an an introduction of our newest plugin called BYOB Thesis Shortcode Content Widgets Plugin. Here we show where it can be downloaded from the byobwebsite, how to install it and what this plugin does.

Video Transcript

Yeah the next thing we’ll do is take a look at my latest plugin which is the BYOB Thesis Shortcode Content Widgets plugin which you can download from here. The Content Widgets plugin is my first published plugin that behaves like… well, that can be updated automatically, similar to all the rest of your WordPress plugins. Up until this point, you always had to download a new copy of it and then upload it to your site or whatever. From now on, I’m in the process of transitioning all the plugins over to this system and from now on, when there’s an update to the plugin, you’ll see it in your plugin dashboard just like every other plugin you work with. And you can just press the update automatically and it will go through the update process and you won’t have to do anything special in order to make that work. And the first plugin that’s on the list here that’s actually configured that way is this Shortcode Content Widgets plugin.

Now what this plugin does is it allows you to create widgets that you can insert into your content, like for example, this content using a shortcode. And so right now, what we have is we have this widget column here on our sidebar which is what WordPress calls widget areas. The sidebar is sort of archaic you know, if you can speak of anything about WordPress being archaic. Sidebar is the term for what you may think of as a widget area. It used to be… sidebar used to mean you know, a bar on the side of the rest of your site. However, sidebars now are used all over the place and you’ve seen me demonstrate how to use the Thesis Header Widgets plugin and then the Thesis Footer Widgets plugin for creating additional sidebars or widget areas. Well, this will allow you to create sidebars and or widget areas inside of the content area simply by adding a shortcode.

So we’re going to start that off by installing this. So if we go to Plugins, I don’t think it’s installed. No, it’s not installed. So we’re going to say Add New and upload, choose a file, and in my case, I’m going to upload it from… I’ve been looking on it. Activate the plugin. Okay and then we down here and here’s the Shortcode Content Widget plugin. You know, I forgot this part of it off so just go ahead and… in my excitement to get this ready. For the time being, if you download version 1.0, just ignore this. I have this stuff showing up in order for me to be able to test what data was being saved and what data was being retrieved. It does look like an error message but in fact, all that’s doing is showing… it’s just showing content that has been saved in the database. So in a few minutes… I mean, we’re done with this today. I’m going to upload a version 1.1 that won’t do that anymore. Plus you won’t do anything else that I’ve just… that we may find as I demonstrate this.

So anyway, you start off with Content Widget Block Settings and that’s how this whole thing starts. You define a block of widgets. Now, a block of widgets can be one widget or it can be up to 5 widgets. And you can have… you can define up to 10 blocks of widgets. Each block of widgets has its own shortcode. So for example, right now, it automatically creates widget block 1. This is a little image of the layout of widget block 1 and this is the shortcode for widget block 1. So widget block 1 has one widget area, right? So widget block 1, widget column 1. There’s one widget column or one widget area and if you copy this shortcode which is the part in blue and paste it in to the middle of the content of any post or page, it will place this widget area into that.

Now, I think, for the time being, we’re going to create 2 widget blocks. Hit save. Now, our first widget block is actually going to have 3 widget areas or widget columns. So we come over here and it says, “How many columns of widgets?” You can have up to 5 so you can have as many as 1 widget column up to 5 widget columns. We’re going to select 3 and hit save. And now, you can see it’s showing. You’ve got 3 widget columns now that you can drag widgets into. And if we go over and look at Appearance and Widgets, you’ll see that there are 3 new sidebars. And these 3 new sidebars are widget block 1, widget column 1, widget block 1, widget column 2, widget block 1, widget column 3. And then of course, for our 2nd widget block, it only has one column. And so, we’ve created these new sidebars by adjusting… or by installing that plugin.

Now this should look familiar to you because this is the same thing that we did last week with footer widgets. We’ve got footer rows 1, 2, and 3, and then we specify how many footer widget columns there are in each row. Well, that’s the same thing here. We specify you know, how many widget columns are in each block of widgets.

And if we come back over here, you don’t actually have to do anything else. If you have… you’ve specified that you want 3 widget areas in block 1, all we really have to do is take this, copy it… let’s see, let’s just edit this page and let’s put it in the middle of this page. In fact, let’s just put it right here. There’s our shortcode, content widget block 1. If we hit update and view the page, here are 3 widget areas that are now inserted into the middle of this page.

Now obviously, the widget areas themselves aren’t that great until you add widgets to it. Actually you know, for the purpose of this, we’re going to take it down to 2. I think 3 is a little narrow for this. So what we do is we come back over to these widgets and instead of 3 widget columns, we take it down to 2 widget columns. And now you can see it’s only showing 2 widget columns in the thing. And if we come back over here and refresh this, now there will only be 2 widget columns.

And let’s go ahead and drag some stuff into those 2 widget columns. First, what we’ll do is refresh this so we can only see the 2 widget columns. So here’s widget column 1 and column 2. And in widget column 1, let’s go ahead and add categories. I don’t know if I’ve got any categories or not. And in widget column 2, let’s add pages. Okay and we’ll call this… let’s give it a name. We’ll say categories and pages. Hit save, come back over and view the page. Okay so now those 2 widgets are showing up inside the middle of this content. We don’t have any categories so it shows as uncategorized but we do have these pages. And so now, we’ve got a list of our pages.

And I mean, hopefully, you can tell that you can do virtually anything with this now. Anything that requires a widget or that takes a widget can be placed in the middle of your content. And it doesn’t have to be in the middle of your content, right? It can also… I mean, we could just take this, cut it out, put it in the bottom of the content, update it. And now it is there, down there at the bottom of your content.

0 Comments… add one
0 comments… add one

Leave a Comment