Responsive design has become the talk of the town and is all over the mind of the Web developers. The rate of acceptance of this design has bowled over many and is surely creeping into an expected standard for the design forms. Adding a responsive framework to a WordPress theme requires some fundamentals to be remembered.
There were days when developers had to just test a website’s consistency over multiple browsers, but now the horizon has broadened and designs are now tested for compatibility over various devices. Yes, the devices have taken over the reigns of the browsers. Desktops, laptops, tablets, mobile devices have ushered in a new race to compete and thrive in the virtual world. Thus, your website should be compatible and be able to perform on any device. This is the basics for a responsive design and is the top consideration for any developer.
A responsive design corresponds to making things fluid in nature and adjusts itself depending on the screen size. WordPress, sometimes though is not that nice when it comes to compatibility with responsive designs, but there are methods that help. Underlined are some of the methods that will help you achieve a responsive website for a WordPress theme.
Responsive Frameworks Available for a Design
The market is flooded, when it comes to responsive frameworks, available for a design. The choice amongst them is a tough one and requires thorough understanding and precision. Proper analysis of the correct framework that accommodates all the requirements of your project is a must and the option should be considered accordingly. Confused over your preference, need assistance? Read on…..
This framework is based on 4 layouts and 3 sets of typographic presets. Using a default layout as a focal point and then using CSS3 media queries to code ‘child layouts’ is the basic functionality.
Fitting on the basis of the resolution of the screen or size of the window is the very basis of this grid system, which is based on a 12 column grid system having no fixed width. It comes with built-in buttons, form styles, alerts and much more.
This framework is a multi-column layout that is based on a grid system having width depicted in percentages. Preloaded with great built-in features and supporting several jQuery plug-ins like, Accessible Tabs and SyncHeight, is the major fundamental of the framework.
There are many such frameworks, but for the sake of simplicity and explanation, the Foundation framework is incorporated and illustrated below. There are a few steps on how to go about using the framework on your WordPress theme. They are:
Step 1: Framework Downloading and Application
Starting the process, you should first download the Foundation framework and include the files to the css and js folders of your theme’s directory. There’s an easy process with which you can add them to your theme. You can use the wp enqueue script and the wp enqueue style for your help. The image attached below depicts the details of the files added to functions.php file to make this framework kick-off.
//register scripts for our theme
wp_register_script(‘foundation-mod’, get_template_directory_uri() . ‘/js/modernizr.foundation.js’, array( ‘jquery’ ), true );
wp_register_script(‘foundation-main’, get_template_directory_uri() . ‘/js/foundation.js’, true );
wp_register_script(‘foundation-app’, get_template_directory_uri() . ‘/js/app.js’, true );
wp_enqueue_script( ‘foundation-mod’ );
wp_enqueue_script( ‘foundation-main’ );
wp_enqueue_script( ‘foundation-app’ );
add_action( ‘wp_enqueue_scripts’, ‘responsive_scripts_basic’, 5 );
After creating the function, you need to add the Foundation style-sheets to make the grid flexible in response. You need to paste this function after the just created one.
//register styles for our theme
wp_register_style( ‘foundation-style’, get_template_directory_uri() . ‘/css/foundation.css’, array(), ‘all’ );
wp_register_style( ‘foundation-appstyle’, get_template_directory_uri() . ‘/css/app.css’, array(), ‘all’);
wp_enqueue_style( ‘foundation-style’ );
wp_enqueue_style( ‘foundation-appstyle’ );
add_action( ‘wp_enqueue_scripts’, ‘responsive_styles’ );
Once done and saved, you need to revert back and check your source code. You need to do this to make sure that the files you have added have been incorporated correctly.
Below is the state in which you will find it.
<link rel=’stylesheet’ id=’foundation-style-css’ href=’http://thatonegeek.com/sandbox/wp-content/themes/Starkers/css/foundation.css?ver=all’ type=’text/css’ media=’all’ />
Step 2: Adding IE Related Conditions
If things work out on the Internet Explorer browser, then you consider it a success, else you have to walk the extra mile. Adding a few conditional statements to the framework will take you a long way in making your theme design responsive in IE. The statements should be added in the header.php file before closing the head tag.
<!–[if lt IE 9]>
<link rel=”stylesheet” href=”/css/ie.css”>
<!–IE Fix for HTML5 Tags–>
<!–[if lt IE 9]>
Step 3: Operating the Framework
After getting the Foundation setup on your theme, you should design using the framework’s grid system, to use all the responsive features. The system uses a 12 column grid system and includes features like, pre-set button styles, tabs, tables, etc.
The Final Word
The era of responsive design is in and is growing at an exponential rate. A proper know how on how to use it with your future theme construction is a great leap towards success. A multiple device support is the basic service that a client will look forward to while enlisting a framework to your theme or whilst using a pre-built-in theme that supports responsive design.