How to make responsive design for the website built on wordpress custom theme?

Solution:1

There will be two parts two this.

For responsive design you are on the right path. You are using media queries in your CSS, no problems there. The problem might come from trying to build on a custom theme that isn’t responsive already. But I would encourage you to read about mobile first design if you haven’t already.

What most of us do is write the HTML and CSS theme and then combined that with WordPress by creating a custom theme. You create a custom theme in two ways:

Child Theming

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.

It’s up to you what theme you want to pick, but ideally you want to choose a theme to child theme that resembles the design you have created in Photoshop as closely as possible.

Or by creating your own theme(Link to great starter playlists.) There also templates you can use to start your theme development such as underscores

Ok given that you have a custom made theme that you’re working on you can choose to edit the theme directly (I would advise against this if you don’t know the theme creator), create a child theme from the custom theme, or just make a new theme that looks the same (I would be careful with this if you don’t know the theme author).

For CSS the new standard for design is using flexbox, or CSS grids. Here’s a great article on those.

You could also use a CSS framework which you’ll have two choices:

Component Based CSS Framework

This is when there are prebuilt components such as navigation, articles and sometimes modals.

List of Component Based Frameworks

  • Bootstrap
  • Foundation
  • Bulma
  • Materialize

Or you could use a utility css framework like tailwind css. Utility frameworks give you greater control over the look of your css without having to actually write much css at all by just adding various pre-made classes to your html structure.

For a better explanation on Utility frameworks go here.

Solution:2

First, we need to go over the basics of responsive design:

  • Fluid site grid with proportionate instead of fixed measures
  • Flexible images
  • Implementing design changes to ensure usability for non-desktop devices
  • Using CSS media queries to define break points for design changes

From here, we will learn how to use the above to turn a static WordPress theme into a responsive one.

Be aware, however, that while the principles stay the same, your theme might be built differently than the examples below.

Therefore, consider this only as the broad strokes. You might have to do some custom work for your own site.

Tools You Will Need

The tools we need to implement this are readily available.

First off, we need a way to check our site’s HTML and CSS structure. My favorite tool to do so is Firebug, however, you can also use Chrome Developer Tools, and Firefox Developer Tools.

(Btw, have you checked out our collection of development tools yet?)

In addition to that, we will have to edit some PHP and HTML files. A simple text editor like Notepad++ will work for this but you can find other options in this article.

You might also want to consider setting up your site in a local development environment so you can experiment with making it responsive without messing with your live site.

We have a detailed tutorial for this, right here on Torque.

Ready? Then let’s go.

1. Define Default Zoom

Our very first step is to add the following line of code to the header of our site:

<meta name="viewport" content="width=device-width, initial-scale=1" />

What it does is tell browsers to render your pages based on device width, meaning if the screen used is only 320px wide, the website will be rendered in the same size instead of falling back to a larger default size.

In WordPress, adding things to the site header this is typically done by editing the header.php file in your theme folder. The code goes between the <head> and </head> tags.

All done? Then let’s move on.

2. Set Fluid Element Widths And Heights

Next up, you need to find the containers for the main sections of your site.

For this, the aforementioned Firebug comes in handy as it can display the HTML structure of your website inside the browser.

A typical WordPress theme will have the following elements:

  • Body
  • Wrapper
  • Header
  • Menu
  • Main content
  • Sidebar
  • Footer

Our task is now to make sure these have fluid width definitions instead of static ones. We do so by changing the CSS inside the stylesheet.

For an example, let’s start off with the wrapper and say this is what you find inside your stylesheet:

#wrapper {

width: 900px

}

As you can see, this is a fixed width (900 pixels) which we now want to turn into something fluid. It’s actually pretty easy:

#wrapper {

max-width: 900px;

width: 100%

}

What does this change do? Basically, it tells the element to take all the space it needs but limits its width to a maximum of 900 pixels.

That way, the page will look the same as before on any screen larger than 900px but take up the entire width of any device smaller than that.

Easy, right?

However, that’s basically all it takes to make a WordPress theme responsive.

Now all you need to do is go through your entire page structure and turn any fixed widths into fluid widths by changing pixels to percentages. That way, the page elements will automatically adapt to the size of the screen they are being displayed on.

However, the devil is in the details, so here are some important pointers:

  1. Any element that is nested inside another and can go across the entire screen (or as much space as it has available) can simply be set to 100% width (or even auto or no width). If the parent element (like a wrapper) has a set max-width, the child element will automatically adhere to its dimensions.
  2. For other elements that need to be limited in how far they expand (such as the main content and a sidebar placed next to one another,) you need to experiment a little to find the right percentage so that the layout stays the same.
  3. Be aware that percentages in CSS are relative. That means when you set the width of a nested element (an element inside another element) to 70 percent, it will take up 70 percent of the parent element, not of the entire screen. Capisce?

Firebug is your friend here, as it allows you to make live edits and try out CSS changes while seeing the effects on screen.

Still, I can say from experience that it can take a while until you have found all fixed measurements.

Therefore, in addition to Firebug, it might also be a good idea to run a text search inside your stylesheet to find any declarations of widths and while you are at it, height.

The latter is because when the screen size is compressed, any text inside HTML elements will expand vertically.

To make sure it doesn’t break out of its containing element or is cut off, you need to make sure you also don’t have fixed heights. Either don’t declare any height at all or, if necessary, turn it to percentages as well.

Also, a quick note on margins and paddings, which are the space around and inside HTML elements. They make sure there is enough distance between page elements and around content so that everything is understandable and legible.

While it can make sense to put these in relative numbers, many themes out there (for example the Genesis framework) declare them in pixels.

Since these guys know what they are doing, I’m going with their method. However, the choice is up to you.

In the end, you should have a web page that adapts to the size of your browser window when you shrink and expand.

At this point, many page elements will likely look smushed together, which is far from what you want, however, don’t worry, we are getting to that further below.

3. Resize Images

After this, it’s time to make sure our images are automatically scaled according to screen size.

This can be done quite easily by adding the following to style.css:

img {
    height: auto;
    max-width: 100%;
}

With this, you declare that images should be displayed in their original size until their container element (or the screen) put a limit on it.

Simple but effective!

Of course, you also need to have a look around the stylesheet to see if any other declarations are overwriting this. A search for img helps with that.

In case you need to rebuild images in new sizes to fit your newly responsive design, the WordPress directory has just the right plugin to do so.

4. Implement (The Right) Break Points

After introducing basic responsiveness (or is that responsibility?), we now move on to the break points for your design changes.

These are cutoff points where the website will make some major design adjustments to continue delivering the best layout for your users.

Two things about this:

  1. Break points should always be design specific, not device specific. There are just too many devices out there to cater to all of them. By concentrating on what makes the most sense for your design, you automatically cover any devices coming out in the future.
  2. Start with the smallest screen and then work your way up. The easiest way to identify break points is to first make sure your design looks good on mobile phones and then expand the screen from there. When you notice a point at which your design starts to look terrible, that is your break point.

The first time you shrink your browser window to the size of a phone screen, it probably won’t be a pretty site.

One of the classic problems at this point is that elements that are placed side by side are still displayed in their respective widths, yet in a much smaller space, making everything impossible to read.

Therefore, the first order of the day is to make these elements move underneath one another.

A classic example of this is to move the sidebar underneath the content by changing CSS properties with a media query.

This could look like so:

@media only screen and (max-width: 500px) {

    .content {
        float: none;
        display: block;
        width: 100%;
    }

    .sidebar {
        float: none;
        display: block;
        width: 100%;
    }
    
}

Add the query at the end of your stylesheet. The code above also makes sure your content expands across the entire screen and is legible.

After that, it’s time to look at the rest of the page and make any CSS changes necessary so that it looks decent in its current format.

Commit all changes to your newly created media query and save the stylesheet. Well done!

Now you can slowly expand the browser window outward to determine when the layout starts looking unattractive and you need to make adjustments.

At this point, set up a new media query and adjust the design accordingly.

To figure out how large your browser window actually is, I can recommend Chrome Developer Tools or this Firefox plugin.

Copy the code above, adjust the max-width declaration of the media query and then input whatever CSS changes you need to implement.

Be sure to add new media queries at the bottom of the stylesheet but above the existing one.

Since CSS styles further below overwrite styles above them, it’s important that media queries move from larger to smaller screen sizes.

Ideally, you should end up with about 3-5 major break points and a page that shows a legible and attractive layout at every window size where all site elements stay intact throughout.

It will take a bit of trial and error but you will get it done, I’m sure.

4. Create A Mobile Menu

Creating a responsive menu can be one of the trickiest parts, especially if you want it to be collapsible.

However, you will be happy to hear that in that case you have a number of tutorials and WordPress plugins at your disposal to help you out:

However, one of the easiest ways to create a menu that is also usable on mobile devices is to set its dimensions from fixed to fluid. That way, when space gets sparse, the menu will just fold in on itself.

You might have to add some extra spacing (via media query) to accommodate people using their fingers to access it but that’s it.

In case you want something more sophisticated, you can use the resources mentioned above.

5. Adapting Fonts

Next, we turn our attention to the content, in particular, the text on your site as there is a good chance that at some point you will have to fiddle with its size.

Header text especially often doesn’t fit properly on smaller screens. Pay attention to this when you look at your website on different devices and in different browser windows.

Thankfully, font size can also be controlled easily via CSS inside media queries, like this:

@media only screen and (max-width: 450px) {
	
	.site-title, h1 {
		font-size: 22px;
	}
	
}

In addition to that, you might want to change overall font size depending on the size of the screen it is being viewed on.

Varvy has an excellent guide on how to keep text legible in different dimensions that I wholeheartedly recommend.