328 – Make the Most of Your Widget Areas
Announcements
Is there a plugin for that?
With more than 50,000 plugins in the WordPress repository, it’s hard to find the perfect one. Each week, I will highlight an interesting plugin form the repository.
For more great plugins, download my 50 Most Useful Plugins eBook.
Scroll to Up is a lightweight plugin that creates a full customizable “Scroll to top / Back to top” feature in your WordPress site
Make the Most of Your Widget Areas
Tips on Widget Usage:
- Make sure the widgets are useful on that post or page, use Jetpack’s widget visibility
- Routinely check to make sure widgets are current
- Ideally the widget area in a sidebar shouldn’t be longer than the content
- Widgets can be used for areas of your site that need updated frequently
- Build a custom widget to make it easy for you or your clients to manage their website
Thank You!
Thank you to those who use my affiliate links. As you know I make a small commission when someone uses my link and I want to say thank you to the following people. For all my recommended resources, go to my Resources Page
Call To Action
- Analyze your site and look for outdated / unused widgets
Full Transcript
Business Transcription is provided by GMR Transcription.On today’s episode, we are going to talk about how to make the most of our WordPress widget areas, right here on Your Website Engineer podcast, Episode No. 328.
Hello, everybody. Welcome back to another episode of Your Website Engineer podcast. My name is Dustin Hartzler. Today, we’ve got a show full of news, we’ve got a cool plugin to talk about, and we’re gonna talk about how we can make the most of all of our widget areas right here on our WordPress websites. And so, let’s go ahead and just dive right in.
The first thing that I want to share today is the popular two-factor authentication plugin called Clef is now joining Twilio. It is a tool that has been built and developed, and it’s actually one of the more fun tools, to do two-factor authentication into your WordPress site. It comes up, and it’s got this moving barcode that you scan with your phone, and then it automatically unlocks your website, and you can log right in.
And there is news that came out this past week that Clef had been acquired or is joining part of the Twilio brand and the Twilio Company. I’ve got a link in the Show Notes if you want to read more about that, but that’s definitely something that you want to check out, especially if you’re using Clef. It will be running for a little while, and then they’re gonna shut the service down, and they’re gonna do some changes and whatnot, but there’s more information over there on the blog post.
All right, the next thing that I want to share with you today is the stats page on WordPress.com or Jetpack sites. The ones that are all managed through that interface have been updated. And so, there were some suggestions that were made as part of the community, and now they’ve made some updates and some changes to make your stats just that much more valuable that you can see right inside your dashboard.
You can see more information at once. They’ve widened the display area, and it just gives you more information. When you hover over information or hover over a specific day, you can see views, visitors. You can see the number of pages that a person viewed on your website. You can see more on summaries. You can see your all-time most popular posts. You can see how many countries visit your site. There’s a ton of more information that’s all built right in. It’s still not nearly as powerful as a Google Analytics or a tool along those lines, but you can definitely find out a lot more information. You can see average per day, to see how many average clicks that you have per day. You can see how many followers you have. You can see all of your updates. You can see a lot of information.
So, this is a feature that’s been rolled out for WordPress.com and Jetpack-enabled sites, so if you’ve got one of those two things enabled, and you use and rely on stats within Jetpack or WordPress.com, this is definitely a place to look.
Another tool that came from WordPress.com this past week is an integration for Google Docs, and this will allow you to collaborate on blog posts via Google Docs. So, you can write, and you can collaborate, you can edit. You can use the power of Google Docs, and then you can publish those on a WordPress.com site or a Jetpack-connected WordPress site. Your formats, images, and everything, all that formatting and whatnot, will come over. There’s no more of this crazy copy-paste headache that used to happen.
So, to use this, you have to go to the Google Web Store. I guess, right now, it’s just a Google Chrome extension, and you’ll have to give Google access, or Google Docs and WordPress.com give each other mutual access and whatnot, and then, in Google Docs, you can save the draft as a blog post. And then, you can go to the Add-ons menu, open up WordPress.com or your dashboard, and you save the draft, and then it’s automatically converted to a WordPress draft, which is really cool. It’s open source. The source code is on GitHub, and you can follow that, or you can take a look at that if you like. And there’s a link in the Show Notes for Episode No. 328 to get more information on that.
And then, lastly, in the way of news, is Jetpack 4.7 has now been released. There’s been 42 bugs that have been fixed. There’s been 42 enhancements launched. So, there’s a lot of new features and a lot of problem areas that have been addressed and fixed. I’m not gonna run down through all 42 of them, but some of the cool enhancements that are launched have been there’s more stats, obviously, with the WordPress.com stats that we just talked about. There’s page improvements or various performance improvements with page load times, database queries, API endpoints. They’ve removed unnecessary sync options to save memory. There’s more information in the debug tools now, so you can get more information over to the support engineers if you need anything. The Infinite Scroll now works with Twenty Seventeen, which was something that didn’t work, and now they’ve fixed some W3C validation errors in the comments.
So, lots of stuff fixed, lots of things improved in Jetpack 4.7. Now, it’s gonna be confusing because now we’ve got WordPress 4.7 and we’ve got Jetpack 4.7, and I’m sure that Jetpack will roll out a new version before we get to WordPress 4.8, so the numbering scheme will be a little bit crazy for a little while.
So, that is all that I have in the way of announcements this week.
There is a plugin that I want to share with you today. It’s called Scroll to Up, and this is a plugin that takes zero coding knowledge. You don’t need to know any code whatsoever. But it’s basically a plugin that will allow you to add a “Scroll to top” or “Back to top” feature in your WordPress site.
And so, this just gives you a little image that appears in the lower right-hand corner. For those really long pages, you get all the way to the bottom, and you can click that, and it’ll scroll all the way back up. They’ve got predesigned images or icons in there. They’re responsive, so it responds to the size of the device. It is compatible with all WordPress themes. Zero coding required. You can change the background color. You can change or add custom text. You can set the required height. You can do positioning of the icon. It’s very easy, very well done.
It’s been tested in Mac and PC, and even on iPhones and iPad devices as well. This is a plugin that’s got more than 3,000 active installs. If you need a Scroll Up button on your WordPress website, I definitely would like you to check out one that’s called Scroll Up or Scroll to Up. They have both names there in the WordPress repository, so search for that if you’re looking amongst the sea of 48,000+ plugins that are out there in the WordPress world.
All right, today, let’s talk about widgets. I know that widgets don’t get a lot of time in the press, but they are extremely useful, and they are extremely valuable as you’re laying out a site and you’re working through a site. So, let’s go ahead and just talk about what a widget is, how they work within WordPress, and then we’ll talk a little bit more about how we can add widget areas to our WordPress sites, and then just some tips on widget use. Okay, let’s dive right in.
The first thing is a widget in WordPress is a small block that performs a function. It’s very much like a plugin, if you think about a plugin as a small block of code that does something on your website, but a widget is kind of like a plugin, and some plugins have widgets, but the big thing about a widget is it’s a small area on your website. They call these widget areas, and then they’re filled with widgets.
You might have seen these on the right-hand sidebar or the left-hand sidebar. There’s usually a widget. There’s usually some widget areas in the footer. But, basically, they were created, originally, to provide a simple and easy-to-use way to give design and structure control of a WordPress theme to the user. The widgets can be easily dragged and dropped into a specific area, and WordPress comes with a handful of widgets already built it, like the most recent comments, the most recent posts. There’s a whole slew of them that come with WordPress right out of the box.
So, they allow you to add a search area, or add a custom menu or things like that, right to a sidebar, to a footer, things like that, without having to know any code. And this is probably one of the first drag-and-droppable things that was built into WordPress. So, when you go into Appearance and then Widgets, you have this area where, on the left-hand side of this page, it’s just got all the widgets. It’ll have all the WordPress built-in ones, and then it’ll have any plugin that has a widget itself. So, I’m thinking like Optin Monster is a good one. That is a plugin that allows you to build opt-in forms, but that also has a widget area where you can pull the widget into a widget area and then configure it, and then you have a pop-up menu or an email download button right there in a sidebar or a footer.
And so, there’s a bunch of them there, but basically what you do is you take them from the left side, and then you drag them into a widget area, and you can rearrange them. So, the one that’s on the top, you can move to the bottom by just clicking and dragging. It’s a really slick process, and it’s one of my favorite things within WordPress, just how it works. You just pick it up and move it. That kind of just allows people to have that feeling of, “Hey, I can do this. I can move this. I can move it around. I can do all these things with it.” So, I really, really like that piece of it, when it comes to widgets.
Most WordPress themes have widgets built in. Earlier, like I said, they have the left-hand sidebar or the right-hand sidebar, depending on how the page is set up, and most all of them always have widget areas set up in the footer.
Now, theme developers do this all kinds of different ways. They develop their themes differently, so some themes may have four columns in the footer as their widgets areas. Others may have one column, and they automatically can break them up. If you have four items, it’s gonna split it across four columns. So, the way that they work will vary, depending on how the plugin author or the theme author has set these up.
So, basically, widgets are standalone code that can run anywhere, and it’s just built to make it easy to use or easy to move these pieces of content wherever you need them, whether that be on the sidebar or the footer or a custom widget area. And speaking of custom widget areas, I’ve got a link in the Show Notes on an article on how to do this, if you’re interested in adding custom widget areas, but there’s a ton of different reasons why this would be popular or why you should do this.
So, if you wanted to – I’m trying to think of some of the widgets that I’ve created in the past. One of the ones that’s coming to mind very quickly to me, if you go to SmartPassiveIncome.com, this is a site run by Pat Flynn, and in the upper right-hand corner of his website, it shows how much he made in the last month or what his monthly income was for the last month. This would be a perfect piece of information to put in a widget because then you don’t have to find it. You don’t have to try to figure out where that information is or update it in the theme itself. You could build a little widget there where you could just put what that amount is. Did you make $50,000.00 per month? Then you put that in there, and then it automatically updates, and it shows live on every page on your website. So, that’s like a custom widget area.
I’ve built widget areas to display things on a particular page. You can build widgets to not just be on a sidebar or in a header or a footer. You can have a widget area that shows up in the middle of a WordPress page, or right before the comments, or right after the comments. You can build these widget areas, put them pretty much anywhere, and then it’s the same region. It’s just a widget area, it’s called, and then you can drag widgets in there, and then you can customize it and do that. So, that’s really, really popular to do.
I think that a lot of WordPress themes, these days, just have tons and tons of areas that are called widget areas, and then you can configure and customize them the way that you want to. So, for an example, sometimes themes have a home page widget area, and then you put any widget that you want to appear on the home page in that widget area. Then, they may have a blog post widget area, so anything that’s on the blog pages gets shown on that page.
And so, there’s a whole bunch of ways to tackle this, and you can put widget areas pretty much wherever you want. If you want to create a widget area for your menu, you can definitely do that. It’s just a matter of adding that into the theme itself, and that’s not a conversation for this podcast. It’s basically creating a child theme and then making some customizations, but there’s a link in the Show Notes, if you’re really interested in creating these widget areas, where you can find information on how to do that.
So, let’s go ahead and just talk about some of the best practices or things to think about or look at when we’re configuring our widget area because I think widgets on our website are one of those pieces of the puzzle that get outdated easily, or they’re overlooked because they’re just there, and we really need to evaluate and make sure, in this month, that we’re making small tweaks to our website. We wanna make sure that we have active widgets that are doing our customers a bit of good, I guess. We wanna make sure that they’re actually valuable and there’s good pieces of information in this widget area.
So, let’s go ahead and talk about it. The first thing is we want to make sure that the widget information is relevant to that particular page. Sometimes, you may have a piece of information or a piece of tidbit that you want to put in a widget, but you only want it to appear on certain pages. Well, there’s a module inside of Jetpack that can help you do this, and it’s called the Visibility Widget or Widget Visibility, and this will allow you to say like, “Oh, I want this widget to only appear on the Contact page,” or, “I want this widget to only appear on the About page.” You can highly define where those widgets are.
So, you wanna make sure that, if it is something that’s very specific to an About page or very specific to a Resource page – very specific content of some kind – you want to definitely make sure that you’re only showing it on those specific pages. So, that’s something to think about as you’re browsing through your site, like, “Does this information really need to be on every page? Should it only be on these certain pages?” Just kind of give a little bit of thought about that.
Another thing to think about is we probably should have a regular to-do item or a regularly recurring schedule to go through and check to make sure widgets are current. I know that widgets are a great place to put, “Oh, I’m speaking at this conference,” or, “Join this Kickstarter campaign that I’m funding,” all of these things. We like to broadcast and share this information with the people that are viewing our websites, and we wanna just make sure that they’re current. You wanna make sure that you don’t have outdated stuff there. Or if you’ve got, “Join the 50,000 people that are subscribed,” you wanna make sure that that number’s current, if that’s not automatically pulling from MailChimp or ConvertKit or something like that. So, that’s something to think about as well.
Another thing that you want to do is – I think this recommendation holds true for all websites – but we want to make sure that our widget area in our sidebar isn’t longer than the content. So, we don’t want to make the reader scroll extra long to get to the comments section or get to the bottom footer information of the post by having too long of a sidebar. So, if your About page is only four paragraphs long, but then you have 15 widgets going down the right-hand side, that’s not gonna be the best visually laid-out webpage. It’s gonna have a lot of dead space there right underneath the About page content, so that would be a great page to use the Widget Visibility from Jetpack and kind of hide some of those if you’ve got shorter page content.
Another best practice, and I kind of alluded to this a little earlier, but we wanna use widgets for areas of your site that need updating frequently. We wanna make sure that if it’s a piece of content that we’re updating regularly, we don’t want our clients, or even ourselves, to have to dig and dive, like, “Where is this content being stored? Is it in some sort of setting? Is it on some obscure page or post that’s being pulled different places?” Widget areas are generally areas that are easy to understand, and they’re easy to comprehend how they work, and so if you can build in a widget area and a small little widget that works, then that is going to be the easiest way for a client to update their website.
And speaking of that, you can actually build custom widgets, which makes it easy for you or your clients to update these things. So, I’m just trying to think, and I don’t have any examples right off the top of my head, of widget areas that I’ve created in the past for clients. But say, for example, you wanted to have like a little – maybe it’s a music store. They’re selling music, and you want them to easily be able to add a new album. And so, you could create a little widget that says like “Album Title,” and then link to a preview page, and then add a cover art image. And you can build a widget specifically for this, so they can fill out these three pieces of information, and then save it as a widget, and then it automatically shows up on their website.
You can do very similar things like if you wanted to have a little widget on the right-hand side that had hours of operation and telephone number and address, you could build that widget, and you could use that on every single WordPress site that you created. That’s the cool thing. The code for widgets are very similar to plugins, and you can move them from place to place. And so, if you wanted to have something very standard on all of your websites, you could build a widget and then make it easy for customers and your clients to update. So, that’s something that you definitely wanna think about as well.
So, that’s kind of what I wanted to share with you today. I know that widgets get overlooked a lot, and so the action item, the call to action this week, is just take a look at your widgets. Look at those sidebars. Look at those footers. Is there any outdated information there? Is there stuff that shouldn’t be there anymore? Is there things that need to be updated? Any copy that needed to be updated, any images that are kind of old or outdated, go ahead an update those. Especially if they are advertisements or different things, affiliate links or things like that, make sure that those are all updated, and make sure they’re all working, and spend a little bit of time on that today.
So, that’s what I wanted to share with you this week. Until next week, we’ll talk again soon. Take care. Bye-bye.

