28 Jan 2013

Responsive Layout for Wordpress

⚠️ This content was imported from a previous incarnation of this blog, and may contain formatting errors

WordPress Logo I've been working on a few tweaks to improve accessibility on mobile devices. Since obtaining a shiny new Samsung Galaxy Note 2, I'm finding myself using my mobile device more than ever. The redesign earlier last year allowed me to introduce some initial steps toward a responsive layout, but it was and still is an unfinished product.

I have finally got round to implementing sidebar folding at low resolution. I'm the using adjacent sibling selector (+), the :checked pseudo-selector, and HTML hacks (, radio and check-box elements). This technique also works great for folding the main navigation at low resolution using a check-box.

Implementing the Responsive Layout Elements #

The folding technique is derived from this CSS accordion technique. I find the lack of reliance on JavaScript to be attractive; it remains to be seen whether this improves browser support due to the use of :checked and sibling selectors.

The HTML structure below provides the basis for the sidebar. As is standard with Wordpress' sidebar output, each widget is wrapped within an

. A element wraps the heading, which will target the hidden element through the for attribute. The element's id must match the for attribute value to allow the to interact with it. You can implement either check-box or radio type s, which will provide different interactions. Radio buttons allow just one section to be toggled; give them the same name to group them. Check-boxes allow multiple items to display simultaneously.


 
  
   
    Widget Title

The input element will be hidden using CSS as we don't want them to be displayed. I only wanted the accordion functionality to apply when in single-column mode, so I wrapped the two selectors in a @media query. I've stripped it down to the bare minimum for sake of clarity;

.sidebar .accordion-selector {
 display: none;
}
@media screen and (max-width: 960px) {
 .sidebar .widget-content {
  display: none;
 }
 .sidebar input.accordion-selector:checked + .widget-content {
  display: block;
 }
}

The difficult part is getting the HTML structure in place, within the confines of Wordpress' template and widget system. You have to include a unique ID for the input as mentioned, so the can include this in it's for attribute to activate the hidden . This mark-up needs to be included in the before_title and after_title parameter of the register_sidebar function call. Unfortunately though, the Wordpress API doesn't perform variable substitution on these attributes.

register_sidebar(
  array(
    'name'       => __('Sidebar'),
    'id'      => 'sidebar',
    'description'   => __('Sidebar'),
    'before_title'  => '',
    'after_title'  => '',
    'before_widget' => '',
    'after_widget'  => '',
  )
);

As we need some substitutions performing on the before_title sidebar attribute, allowing us to hook into widget generation to force some values. We need to hook the dynamic_sidebar_params filter to alter this output. My implementation is far from complete but it allows the widget ID to be included in the "title chrome":

function filter_sidebar_params($params) {
  
  $id     = $params[0]['id'];
  $the_id = $params[0]['widget_id'];
  $title  = $params[0]['before_title'];
  $after  = $params[0]['after_title'];
  
  $params[0]['before_title']  = sprintf($title,$the_id,$id);
  $params[0]['after_title']   = sprintf($after,$the_id,$id);
  
  return $params;
}

add_filter('dynamic_sidebar_params','filter_sidebar_params');

Implementing a folding navigation bar is a simpler task; we simply need to embed a clickable and hidden check-box input into the template directly before the navigation container.

The functionality is the same here as it is with the sidebar; the will toggle the , in turn toggling the

element's visibility. The only difference is that we need something to toggle. In the sidebar example, we used the title as the content of the label; this can be anything but it ought to be a clear navigation indicator.

It may not be the most semantic implementation, but anything must be little better than navigation by

Responsive Layout for Wordpress

Implementing the Responsive Layout Elements #

Implementing the Markup in a Sidebar #

Implementing for Navigation #