Join Morten Rand-Hendriksen for an in-depth discussion in this video Widgets in Twenty Thirteen, part of Start with a Theme: Twenty Thirteen.
- View Offline
2013 comes with two widgetized areas called primary and secondary. In most themes, the primary widgetized area is in the side bar while the secondary is in the footer. In 2013 this has been turned on it's head and the primary area is the footer widgets while the secondary area is in the side bar. This is a good indication of how the theme designers and authors intended the theme to be used, without sidebars, and there is a good reason for that. Blog owners tend to use the sidebar to overload the page with extra content that distracts from the main message of the page.
So that when people visit the site they start reading an article, or looking at a picture, but then they get distracted by the sidebar and end up clicking on something else and they don't get the full message. As a result, many designers and information architects are saying you should get rid of the sidebar altogether. And put any widgets at the bottom of the page instead, so that the content is in focus. Even so, let's take a look at our widgetized areas, and what we can do with it. As I said, your primary widgetized area in 2013 is all the way at the bottom, in the footer.
And here you can see, the widgets will stack vertically, and to the right, depending on the size of your screen. If I reduce the size of my screen here, you'll see that the widgets will stack nicely, depending on the width. And eventually they'll become just a vertical list. To decide which widgets appear, we simply go to the dashboard, go to Appearance and select Widgets. And here you'll see that by default we have the default set of widgets installed.
You can reorganize, pull out. And replace any of them with any other widget that you have available in your sites, and they'll automatically be updated on your site. You also have this Secondary Widget Area. So I'm going to collapse Main Widget Area for now and open Secondary instead. And this Secondary Widget Area is what will become my sidebar. So if you want content in your sidebar. Activate the Secondary Wizard Area and start pulling content into it. Here I can pull in my recent posts, and maybe also a search bar at the very top, and go on and reload my page.
Here you can see the page before the sidebar is activated, and when they're reloaded. You'll see my content now shifts to the left, to make room for my sidebar on the right. The sidebar is styled to fit with the rest of my content. And you'll notice that when we start adding post formats that have custom color backgrounds. This tan background is actually transparent, so the backgrounds of the post formats, will shine through. The sidebar is also responsive, so if you reduce the width of your screen.
And you get to a small enough point. The sidebar will automatically jump down below all your content. And you'll find your sidebar widgets all the way down here. They're styled differently from the footer to separate them, but as you can see, if you add sidebars they tend to end up at the bottom anyway, so you have to be really careful about whether you want to use this feature. Because the intention of the theme designer was to not use the side bar, I'm not going to use it, but this is entirely up to you.
Just keep in mind that SOS or sidebar overload syndrome, has become a real problem on the web. People put too many distracting elements in their sidebar that pull attention away from the main content. 2013 tries to solve this by making the Footer the primary Widget area and I encourage you to stick with this. It makes for a better user experience for the visitor. So take your sidebar widgets out and leave it alone.