How to Customize Responsive WordPress Themes – Part 1

How to Customize Responsive WordPress Themes

How to Customize Responsive WordPress Themes is a new series of articles I’ll be posting at the rate of one every few days. This article is an introduction to the series, which I’ll be updating with links and additional info as subsequent articles go live.

Responsive WordPress themes have taken the design community by storm since their first appearance. For good reason too. With all the awesome advances in mobile communications, and the proliferation of mobile devices, folks are now accessing the web a whole lot more often from their phones than from their computers.

It used to be that if you had a website, and wanted to make it accessible to people on mobile devices, you had to either create a dedicated mobile site, or a bunch of dedicated apps. Although the 1st method can now be relegated to the history books, the 2nd may still have its uses.

How to Customize Responsive WordPress Themes - 2The whole idea of responsiveness in WordPress themes is to ensure that your web pages serve up lightning fast to any device, from the smallest hand-held to wall-mounted big-screens. Don’t freak out; we’re not gonna get into actually designing a responsive WordPress theme in this series of articles. That’s way beyond me too. We will be taking a real close look inside one or two of them though.

I’ve always been a dig-in-and-get-your-hands-dirty kind of guy. Even as a kid, I used to love tearing things apart to see what made them tick. I still do, to an extent. One of my goals for 2012 was to learn more about responsive WordPress themes, and what makes them tick. So, over the course of the next few weeks, that’s exactly what I will be doing: digging deeper into responsive WordPress themes, and sharing knowledge and discoveries with you.

The series of topics I propose to share will be in a (hopefully) logical structure; from the basics to the more detailed and involved (this is open to debate and suggestions BTW). What makes a good responsive WordPress theme? How are they made? How can they be customized? Those are some of the questions that I hope this series of articles will help answer.

There is one important caveat that needs to be noted before we even begin our fun & games.

The average Joe (or Jane) really couldn’t care less how much time and effort you invest in creating an awesome website.

What they care about is finding the information they need, quickly and easily, without having to think about how to find it, much less have to wait for the darn pages to load. So, no matter what you do, no matter how hard you work at it, no matter how long it takes or how much it costs you; keep it simple :)

Featured Plugin - WordPress Wiki Plugin

To get a wiki up and running you used to need to install Mediawiki and toil away for days configuring it... not any more! This plugin gives you *all* the functionality you want from a wiki, in WordPress!!!
Find out more

What you can expect from this series

Part 2 – Style-sheet organization: where stuff is… or should be, and why.

What differences are there between the style-sheets for regular WordPress themes and responsive ones? How should they be structured? Is one way any better than another? Get answers to these questions in this overview.

Part 3 – Style rules to look out for… and why.

What you should watch for when customizing your responsive WordPress themes. Some style rules should simply not be allowed in your style-sheets. Kick ‘em out!

Part 4 – Media queries 1: how they work.

Media queries are all the rage nowadays. Their flexibility is what makes responsive themes possible.

Part 5 – Media queries 2: when to use them and why.

Some basic guidelines to follow when using media queries.

Part 6 – How to make images and videos responsive.

One of the challenges when customizing the media output or functionality not inherent to the theme (plugins) is ensuring its responsiveness.

Part 7 – Introduction to SASS/LESS CSS pre-processors

SASS & LESS provide you with tools to make your style-sheets oh-so-much-easier to manage. Let’s take a quick look at how they do that, and how to use them in WordPress. (Caution: NOT for CSS newbies!)

Part 8 – How to make a static theme responsive.

Got a really nice theme already and don’t want to chuck it? Let’s see if we can make it responsive too!

Part 9 – Building your own responsive WordPress theme? Think mobile first.

Mobile first means designing a fast, lightweight theme for small devices, then expanding on that base design for larger screens. Includes recommendations from some experts, as well as links to tutorials and foundational elements like grid boiler-plates & base style-sheets.


If you want to get your hands dirty too by applying what you’ll discover over the next few weeks, start now by creating a child-theme of Twenty-Twelve. That’s the responsive WordPress theme we’ll be tearing apart throughout this series. If you’re not sure how to do that, see this page in the WordPress codex.

I hope this series will develop into a collaborative effort. So please don’t be shy, share your thoughts, your expertise, your suggestions, and your own discoveries in the comments below.

Photo credit: Flickr.com

Tags

Comments (10)

  1. Thank you!

    I’m looking forward to this. I’ve got a project coming in which I intend to use a responsive theme from theme forest but plan to customize it. In my planning stages, I’ve been worrying and researching how to customize it without breaking it.

    This series couldn’t have been started at a better time for me. Looking forward to this!

  2. could you publish article no 7 (Part 7 – How to make a static theme responsive.
    Got a really nice theme already and don’t want to chuck it? Let’s see if we can make it responsive too!) before others ?
    because we deadly need it ASAP

    • Hi Ajay,

      As I mentioned in the article, I do hope to present the content in a somewhat logical structure.

      I honestly don’t think that jumping over all the basics and diving straight into modifying an existing theme would respect that logic. Nor would it be fair to those who have never dealt with responsive design.

    • Hey Chad,

      About 75% of my time is devoted to customer support in the community forums at WPMUdev.org.

      The remainder allows me to research and produce an average of 2 articles per week here on WPMU.org. So, you should expect one near the beginning of each week, and another at the end.

  3. Thanks for the help, most of the current batch of websites we have built at http://www.m1creative.org are responsive but we keep finding issues with img tags, for example. We often use Woothemes themes as bases for our websites, and they are nearly all responsive as far as they go.

    The problem is when you start changing the themes to suit your own requirements you often break the CSS used in the original theme.

    I think a series of articles helping us to understand this better are going to be great thanks.

Participate