Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:19Length:2.2 hours
  • Overview
  • Transcript

4.5 Add Widget Locations for the Slider and Social Icons

By default, _s has a single widget location, in the sidebar, but it’s very likely you’ll want to add your own custom widget locations in your theme creation projects. In this lesson, you’ll learn how to create a custom widget location designed to hold a slider, and another to hold social icons, and then place them into your theme.

4.5 Add Widget Locations for the Slider and Social Icons

Hey this is Kaz. Welcome back to WordPress theme creation with underscores. In this lesson, you'll be learning how to add custom widget locations into your theme. Now a lot of people really love to use sliders in their themes and they also really love to display social icons and rather than necessarily hard coding those things into your theme. Just creating widget locations that are designed to hold those items can be a really good middle ground solution. By using widget locations that are expressly designed for certain content, you give people a bit of freedom, then they can put any slider they like in, or they can use any social icon plugin that they like. So you're providing that functionality without necessarily tying people down to doing things in a certain way. Before we go ahead and create these new widget locations, we're gonna add a little bit of styling code for them. Now normally, you would probably add your widget locations and then style them afterwards. But just for the purposes of this tutorial, we're gonna put the styling in first, so that you don't end up with some weird-looking widget locations and wondering whether or not you've done things the right way. So add this code to your customs styles file. And the first one is a widget above the header. And this is what we're gonna use to hold our social icon links. And we just got a little bit of code in there that's gonna handle formatting those links well. We're gonna be doing those with font awesome. So we're using just regular text styling for this widget location. And the next one is a widget above content, and this is where we're gonna be holding our slider. And we've set that to be the full width of the site, and we've also included our main panel mix in. So it's styling is going to be. Just like a regular post. At the moment, if you take a look at the widgets area in the admin panel, you'll see we just have the one widget area. We're gonna go back to our custom functions.php file and we're gonna add two more widget areas with this code. In WordPress, widget areas are created by using the register_sidebar function, and inside that function, you pass an array of settings for each of the sidebars or widget areas that you're setting up, so with our first sidebar, we're giving it a name of aboveheader. We're then giving it a unique id so that WordPress can interact with it, and we are giving a description to help people understand how they should use it. Then before the widget, we're having WordPress output an opening div with the class above header, so that we can target that with the styles that we just created and then after the widget we're closing that div. And with our second side bar we've done the same thing. We've given it a name, the unique id, a description, and we've used the before widget and the after widget settings to wrap a div around that widget area. After saving that file and coming back to our widget area in our admin panel, now we can see our two new widget areas. I already have some widgets that I created earlier to display our social icons and our slider. So I'll drop the social icons into the Above Header widget. And just so you know what I'm doing, that takes, just holds a little bit of raw HTML that I've coded up to show some social icons using fun awesome icons. And I'll also drop in a slider, and this is the awesome revolution slider. You can grab that from Code Canyon if you like, it's one of the most popular plugins that you'll find the users asking for support on, and this is one of the more straight forward ways of providing support for a plugin like this. And now, just like before when we were setting up our featured image support, we have to actually tell the theme's template files where we want these widget locations to show up before they'll actually appear on our site. We'll be placing both of these inside the header.php file. For the first one, the one that's designed to hold the social icons, drop this code in just above the header element. Now this code checks to make sure that there is widget added to this location and if there is at outputs that widget. Now, if you Save and you go back to the front end of your site, you see your social icons in the top right corner. I provide you with the HTML that you can drop in to a text widget, so that you can do the same test in your theme. For the next widget, go to the very bottom of the header.php file and paste in this code. Now this is almost the same as the code that we used for the first widget, but we're just running a few conditional checks before we output this widget. The first one is the is front page check, and we do that to make sure that we're not on a single post, or a category list, or a page. This will only show up If you're on the front page of site. And in WordPress the front page means whatever's at your home URL. And that could be a page set at your home URL or it could be a list of your latest posts. The next check looks to see if we're also not on a paged location. So this makes sure that. Someone hasn't gone to the home page and then clicked on to page two to look at the next line of posts only to still see the big slider. You don't want to have that slider showing up on page one, and two, and three of your latest posts because sometimes it can make a person think that the second page of posts hasn't actually loaded. They can think that they're still on that front page. And it can also just get in the way a little bit. Generally, if someone has seen the slider once, they don't need to see it again as they page through. So this check will make sure that this widget location will only show up on the first page at the home url. When we head back and look at the front end of our div slider now, here's our lovely slider. As I mentioned at the start of the lesson, this is a way to accommodate things like sliders and social icons without hide coding those things straight into your theme. And this means that yes, if someone wants to use revolution slider, they can use it. But if they have another slide or plug in that they would like to use they can use that too. And the same things go with the social icons. Somebody can just drop in some HTML just like I did or if there's a plug in that gives a different type of social icon functionality then they can use that instead. So it gives you that flexibility. Now your theme is just about ready to go. You've added in all of your styling. You've added in some customizations to the PHP files and now there's just a few more steps that you need to take to prepare the theme for release. In the next lesson, you'll learn how to add compatibility JavaScript to just help your thing perform on some of the older browsers out there. I'll see you in the next lesson.

Back to the top