- Handling Navigation
- Handling Images
- Handling Widgets
- Wrapping Up
This chapter is from the book
This chapter is from the book
This chapter is from the book
Handling Widgets
Sidebars and widgets are a staple of many sites, including those powered by WordPress. The WordPress admin makes it incredibly easy for end users to manage their own sidebars; however, it’s up to you to ensure that the sidebars and widgets don’t break when it comes to responsive design. First, let’s look at responsive sidebars.
The Sidebar
It’s worth noting right off the bat that using the term sidebar (at least in this book) doesn’t necessarily mean the physical location of this content. The sidebar can be any auxiliary content. It just so happens that the main example of our sidebar is on the right side.
Responsive sidebar development starts right at the beginning of the coding process, in determining where in the markup the sidebar will go. It’s important to structure and stack each column properly, especially when taking a Mobile First approach to development; if we don’t, it might be the case that on small screens, the sidebar shows first, and then the main content area.
The way content should be structured or stacked is Header > Main Content > Sidebars > Footer (Figure 4.10).
)
Figure 4.10 Here is the Content stack, illustrated for a three-column layout.
The Millennium Flights site actually only has a right sidebar, so the structure of things in the HTML will look like this:
<div id="content" class="group">
<div class="entry">
<!--Content Goes Here-->
</div>
<aside class="sidebar">
<!--Widgets Go Here-->
</aside>
</div>
Notice that the div with the id “content” serves as a container for both the main content area and the sidebar. The div “entry” will be for the site’s main content, and the aside element will house the sidebar.
Since the sections are in the proper order, there is actually no CSS required for smaller screens, layout wise. Any pre–Media Query styles will be strictly for some padding, font adjustments, image aligning, and so on. However, once the screen reaches a certain width, it’s time to move the entire sidebar up to the right, next to the main content area. The CSS looks like this:
@media screen and (min-width: 40.625em){
#wrapper #content .entry{
float: left;
width: 66%;
}
#wrapper #content aside{
margin-left: 68%;
width: 30%;
}
If you’ve worked with non-fluid (or fixed) layouts, this should look familiar to you. The main content area, .entry, is being floated to the left and limited to a width of 66%. The sidebar is then given a slightly larger margin and a width that accounts for the extra spacing. As users expand out even more, we may want the sidebar and content area to adjust further so the content and sidebar look proportionally better compared to the width of the screen:
@media screen and (min-width: 55.652em){
#wrapper #content .entry{
float: left;
width: 75%;
}
#wrapper #content aside{
margin-left: 78%;
width: 22%;
}
}
As you develop, it’s important to test and try different layouts along the way. Remember—the breakpoints are based on content, not device! Do what’s best for your own content.
That’s all we need as far as structural CSS goes for the sidebar. Of course, now there is the question of handling widgets...
Sidebar Widgets
A widget in WordPress is defined as adding features and content to sidebars. Generally speaking, they are boxes placed outside the main content area that can contain any kind of content—text, images, forms, and so on. As designers and developers, we should plan to support these elements and more, as there are hundreds (perhaps thousands) of widgets out there.
First, you must properly register your sidebars to use containers and class names you assign. Here’s what’s added in the Millennium Flights theme:
register_sidebar( array (
'name' => __( 'Sidebar', 'main-sidebar' ),
'id' => 'primary-widget-area',
'description' => __( 'The primary widget area', 'wpbp' ),
'before_widget' => '<div class="widget">',
'after_widget' => "</div>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array (
'name' => __( 'Sidebar2', 'secondary-sidebar' ),
'id' => 'secondary-widget-area',
'description' => __( 'The secondary widget area', 'wpbp' ),
'before_widget' => '<div class="widget">',
'after_widget' => "</div>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
You can see that the same structure is used for both sidebars. Each widget gets the class “widget,” and the titles are <h3> tags with the class “widget-title.” This will allow you to apply general styles to HTML elements without them being overridden by other plugins.
In the Millennium Flights theme, before any Media Queries, there are some basic styles applied to elements you might find in a sidebar widget. These will also optimize certain elements (like form fields) for touchscreen devices.
aside .widget h3{
margin-top: 0px;
color: #8E6DD7;
}
aside .widget{
border-bottom: 2px solid #FFFFFF;
margin: 10px 1.5%;
text-align: left;
padding: 5px 0.4%;
}
aside .widget p, aside .widget ul,
aside .widget ol, aside .widget dl{
margin: 0;
padding: 0;
font-size: 1.2em;
}
aside .widget li{
padding: 0;
margin: 0 0 0 1em;
list-style-type: none;
}
aside .widget input, aside .widget select{
margin: 1%;
padding: 7px;
font-size: 1.6em;
width: 100%;
border: 1px solid #CFCFCF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
Then, as users move to larger screens, only slight adjustments are needed:
@media screen and (min-width: 40.625em){
aside .widget input[type=submit], aside .widget
input[type=button]{
margin: 0 auto;
padding: 3px;
font-size: 1.25em;
width: 40%;
}
footer aside .widget{
width: 30%;
margin: 10px 1.2%;
float: left;
text-align: left;
}
}
As a matter of fact, very little needs to be done here. There is a small adjustment for submits and buttons, and some styles for the widgets found in the footer, which should be placed three per line. However, there is a small issue with this approach.
I ran into a situation where a breakpoint was already added to a previous layout I was using, so I kept it in. If you look at the page with a screen width of 40em (650px), the widgets are a bit scrunched (Figure 4.11).
)
Figure 4.11 The footer widgets at 650px are a bit too scrunched to be three per line.
Because of this, I needed to determine new breakpoints. Here’s what the new adjustments look like in the CSS:
@media screen and (min-width: 34.188em){
...
footer aside .widget{
width: 46%;
margin: 10px 1.2%;
float: left;
text-align: left;
}
}
@media screen and (min-width: 51em){
footer aside .widget{
width: 30%;
}
}
I created two new breakpoints—one for a two-column widget layout and one for a three-column layout. Things look much better with the 3-column layout now (Figure 4.12).
)
Figure 4.12 With the adjusted breakpoints, the widgets look much better.
As you continue to add widgets to your theme, it’s important to consider the following:
- Is the widget properly coded? Will it use the HTML structure you defined when registering the sidebars?
- Does it come with its own complicated CSS? If it does, overriding styles (especially if they are inline) might be a pain in the neck due to the need to nest classes and be incredibly specific with your style selectors.
- Does the author make the class names intuitive and easy to find (through documentation)? If so, you’ll have an easier time styling for them.
If you properly plan and code consistently, you shouldn’t run into issues with your widgets. Between the reset, default element styles, and default widget styles discussed in this chapter, most bases should be covered.