Working with esponsive design in a WordPress Theme

by on October 11, 2015

wordpress-working-with-responsive

Working with esponsive design in a WordPress Theme

  •  
  •  
  •  
  •  

< Back to Chapter 5 – Creating your first WordPress theme ‘From Scratch’

WordPress Development for Noobs is intended to be an extremely useful resource for someone looking to create epic WordPress sites for themselves or clients. As a WordPress developer in Minneapolis, I’ve gotten the chance to modify themselves, create many WordPress themes from scratch, work on websites big and small. I love WordPress for its ability to bring in people on Google through SEO tools, and make it easy for clients to publish. All this is for naught for more than 40% of website traffic today if the site looks like excrement on mobile though. So, today, we will be talking about “Working with responsive design in a WordPress theme.” This information should be able to get you started on your journey to responsive magic, whether you are modifying a theme, working with Bootstrap or another responsive framework, or are going it alone — in which case you’ll just need to write some extra media queries, but you’ll have more control.

What you will learn in this article:

  • Modifying a theme, retaining current responsive design, and implementing responsive on a current themeSkip to It, Daddy-O
  • Working with Bootstrap, Foundation, or another framework for responsive within a WordPress themeGet to It, Sugar
  • Developing a responsive WordPress site without a frameworkCome on and Give It to Me

Modifying a theme, retaining current responsive design, and implementing responsive on a current theme

So, you’re likely very aware that responsive design is the art of making a website’s content conform and re-arrange based on the size of the screen so that a visitor can interact with the website more easily. At one point in the history of our beloved smartphones, even Apple expected us to tap on a section of the screen and zoom into regular websites. Little did we know that responsive design would change the way we look at content on the web and add an extra element into our workflow as designers and developers.

small-blue-legoDon’t rewrite the guidebook if you have a theme with responsive qualities – look at the conventions it’s using and use those to leverage already written code to conform divs and display responsively:

Most modern WordPress themes have some responsive conventions baked in already. If you were to rewrite them with your own media queries, you would be using redundant code or code that is written for the purpose of solving a problem that was already solved previously.

 

small-blue-legoHere’s an example of leveraging the themes responsive design – for a theme called ‘Bridge.’

The bridge theme is a solid and versatile theme that you can get off of Themeforest. Let’s say I wanted to create a template that has custom elements in it, and whole new pieces of functionality, but not write redundant code around the responsive aspects of the theme. I take a look at how the theme is creating the divs for four columns that stack on top of each other in mobile, like so. (Right click, inspect element.)

Responsive design in WordPress

Now I can see that they are using the convention:


<div class="container">
 <div class="container_inner">
 <div class="four_columns clearfix">
 <div class="column1">
 <div class="column_inner">
 </div>
 </div>
 <div class="column2">
 <div class="column_inner">
 </div>
 </div>
 <div class="column3">
 <div class="column_inner">
 </div>
 </div>
 <div class="column4">
 <div class="column_inner">
 </div>
 </div>
 </div>
 </div>
 </div>

Instead of making my own four-column grid, it’s advised that I use what’s already built for the above mentioned reasons. In this case, three columns and two columns also will work. Of course, the CSS is written for these, and each theme will likely have some different conventions. The point is to look and see what they are using and unless it was poorly done, use their conventions.

Working with Bootstrap, Foundation, or another framework for responsive within a WordPress theme

small-blue-legoUsing Bootstrap within your theme:

Bootstrap is lovely, and is baked into a lot of free and commercial themes out there, including the _tk starter theme that I’m suggesting people use to get started. To use the responsive elements of Bootstrap within your theme, it’s a matter of working around PHP loops and using the conventions you can use off of Bootstrap’s website.

<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
    <p>Resize this responsive page to see the effect!</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

So to use on a page where you want to include the sidebar in one-fourth column to the right you’d use this format in the main container for the page:



 <div class="container">
 <div class="row">
 <div class="col-md-8">
 <div id="primary" class="content-area">
 <main id="main" class="site-main" role="main">

<?php while ( have_posts() ) : the_post(); ?><?php the_title(''); ?><?php the_content(''); ?><?php endwhile; // end of the loop. ?>

 </main><!-- #main -->
 </div><!-- #primary -->
 </div>
 <div class="col-md-4">
 <?php get_sidebar(); ?>
 </div>
 </div>
 </div> 

This is just a basic page where “the_content” piece pulls from the page editor as long as you name the template page.php. For any WordPress site, you can add a piece at the top of the page template that delineates the template as an alternative template and allows you to choose it in the page editor when you’re adding content to apply the template.

For instance, this is how it looks if I name template “Right Sidebar”:


<?php
/*
Template Name: Right Sidebar
*
*
*/

get_header(); ?>

small-blue-legoUsing Foundation within your theme:

Zurb Foundation, Right Sidebar WordPress Theme

Foundation is a great framework with what some might consider classier visual design assets right out of the box. To me this isn’t necessarily the biggest selling point, because although I appreciate its flat design, I usually change the look of this framework’s elements to match a desired visual design rather than use any look they have out of the box. That said, this is another great option for creating responsive sites without writing the responsive base from scratch.

The PHP could remain the same, but if you used Zurb’s Foundation for your responsive framework, the same page template would look like this in its entirety:


<?php
/*
Template Name: Right Sidebar with Foundation
*
*
*/

get_header(); ?>

<div class="row">
 
 
 <div class="large-9 columns">
 <div id="primary" class="content-area">
 <main id="main" class="site-main" role="main">
 

 <?php while ( have_posts() ) : the_post(); ?>

 <?php the_title() ?>

 <?php the_content() ?>

 <?php endwhile; // end of the loop. ?>
 </main><!-- #main -->
 </div><!-- #primary -->
 </div>
 
 
 <div class="large-3 columns">
 <?php get_sidebar(); ?>
 </div>
</div>

 
<?php get_footer(); ?>

small-blue-legoOther solid responsive frameworks and how to use them in your theme:

  • Skeleton: When you don’t need all the extra stuff, just the responsive grid.
  • Gumby Framework: Another solid option. Although it’s officially retired, its base is still good and Gumby Framework includes templates and a UI Kit for your designers.
  • HTML 5 Bones: Another lightweight responsive framework. Nothing but the HTML essentials.
  • Kube: Back to the ones with a nice mobile menu built in. Kube touts beautiful out-of-the-box typography and use of modern flexbox.

Developing a responsive WordPress site without a framework

Oh, you fancy devil, you! You don’t want a framework at all. You want to bake a pie like mama did and ground your own flour. Have no fear. Those new to HTML and CSS should be aware that the core responsive elements of most of these frameworks are pretty goll-darn simple when it comes down to it. I’ll start you down the road to learning how to set up your responsive framework here.

small-blue-legoBasic media queries for common devices:

Probably the most insightful thing I read about this came from Ralph M. in a ‘Stack Overflow’ comment:

“Rather than try to target @media rules at specific devices, it is arguably more practical to base them on your particular layout instead. That is, gradually narrow your desktop browser window and observe the natural breakpoints for your content. It’s different for every site. As long as the design flows well at each browser width, it should work pretty reliably on any screen size (and there are lots and lots of them out there.)”

For this I use a Chrome plugin “Window Resizer” to give me the sizes at which my design needs a media query for. Here are some examples of common media queries in 2015 to help kickstart your journey toward designing in the browser. Enjoy!


/* Extra small devices (phones, 320px and up) */
@media (min-width: 320px) { ... }

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

small-blue-legoWorking with mobile menus in WordPress without using a responsive framework:

This would be another chapter entirely, but for a mobile menu you can write one from HTML, CSS and Jquery if you so desire. Here is a tutorial on that from Inspirational Pixels.

small-blue-legoQuick cheat for a mobile menu on the fly in WordPress (Plugins)

Both well-reviewed, although I can only vouch for the second one, as I used it and it was pretty great with a lot of customizable options.

Tweet this!

I love creating amazing websites on WordPress in Minneapolis and trying to be useful to people along the way. I know that many people are trying to learn the discipline of WordPress design and development, and so I share my knowledge as I am able.

Green LegoCreating a custom post type like ‘Portfolio’ or ‘Work’ and adding taxonomies

 


  •  
  •  
  •  
  •  

Download my E-book "WordPress Development for Noobs" for free right now:

  • This field is for validation purposes and should be left unchanged.
5 E-mails a year: Only the best of web design & marketing

Ready to get started?

Get a free consultation now