Input your search keywords and press Enter.

How To Make Any WordPress Theme Responsive

With so many mobile devices with different screen sizes and different browsers, having a responsive website is very important. If you want to change a static theme into a responsive design, this article will help you. Sometimes, customizing an already responsive design to fit your needs can be more difficult than converting a static theme into a responsive design. It also makes sense to convert PSD to WordPress theme.

WordPress Theme

Convert Your WordPress Theme to a Responsive Design

For responsive design, your site grid should be fluid with relative measures and not fixed ones. Images should be flexible and design changes should be easily implementable to adjust to different devices.  CSS media queries should be used to define breakpoints for design changes.

We will now proceed to learn how to change any WordPress theme to a responsive design.

Tools Needed

The first thing we need to do is to check the HTML and CSS structure. For this, you may need tools, such as Firebug, Chrome, and Firefox Developer tools. You will also have to edit some PHP and HTML files, for which text editor like Notepad++ will do the trick. It is also a good idea to set up your site in a local development environment so that you can experiment without disturbing your live site.

Define a Default Zoom

The first step is to define a default zoom so that the browsers provide the pages based on the device width and not fall back to the larger default size. This is done by editing the header.php file in the theme folder and the first step is to add a code to the header.

Fluid Element Widths and Heights

After a zoom default is set, the next step is to find containers for the main sections of the site. You can use Firebug for this as it can display the HTML structure of your website inside the browser.

A WordPress theme typically has the elements, such as a body, wrapper, header, menu, main content, sidebar, and footer. We have to make sure these elements have a fluid width definition by changing the CSS inside the style sheet. Change all fixed widths to fluid widths by changing pixel to percentages. The page elements will thus adapt to any screen size. You also have to set fluid height because texts inside HTML elements expand vertically if the screen size is compressed.

Images

Now is the turn to take care of the images. This you can do by setting the image height to auto and the maximum width to 100% in style.css. This ensures that images are displayed in their original size unless a limit is set by the screen. You have to then check the style sheet to see if there is any other over-riding limit on it. If you have to rebuild images to make them compatible with the new responsive design, there are plugins to do just that.

 

A Mobile Menu

Now, the next step is to create a mobile menu, which usually is collapsible. There are a number of ways to do that. The easiest way to do that is to set the dimensions from fixed to fluid, as we have done with other aspects above. When the screen size is small, the menu will fold on its own. Sometimes you may need to add extra space through media query to cater to those who use their fingers to use it.

Fonts

Now is the time to make your content look good on different devices. The text size on your site may, at some point of time, need some adjustments. Header text in particular does not always fit perfectly on smaller screens. So, you have to make sure that they fit nicely in all devices and browser windows. The font size can be managed via the CSS in media queries. You can also change the overall font size to make it legible on screens of predefined sizes.

Miscellaneous Changes

Responsive design is not just about getting things to fit on different screen sizes, but also about the usability of the site and its functionality. You must, therefore, check the website’s usability on different devices. For instance, some elements may not work properly on smaller screens and it would be worthwhile to hide those elements from such screens if it obstructs other elements. There is just not enough space available on smaller screens to fit in every element, so hiding a few less important elements makes sense.

To sum up, responsive design is mandatory these days and WordPress offers many themes that are compatible with multiple devices and browser windows. Further, you can convert PSD to WordPress theme for better user experience and migrate the website to WordPress.

Ali Zubair is a data processing expert and blogger. He enjoys talking and writing about technology, travel, health and fashion... subjects you can read about on his blog, The Sage Insider.

Leave a Reply

Your email address will not be published. Required fields are marked *