How to Incorporate Responsive Frameworks Into WordPress Themes Development

12
0 Flares Twitter 0 Facebook 0 Google+ 0 StumbleUpon 0 Pin It Share 0 0 Flares ×

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.

Bestpsdtohtml-Responsive-Web-Design

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…..

1. Bootstrap

This framework from Twitter is built on a responsive 12 column grid and includes a fixed and fluid width layout based on the system. Also, loaded is the support for optional JavaScript plug-ins like Image Carousel, Typehead, Toggable tabs and much more.

2. Less Framework

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.

3. Foundation

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.

4. YAML

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.

Adding the required JavaScript for Foundation, to work wonders in your theme, you need to create a function that calls the wp_enqueue_script to serve.

function responsive_scripts_basic()
{
//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.

function responsive_styles()
{
//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’ />
<link rel=’stylesheet’ id=’foundation-appstyle-css’ href=’http://thatonegeek.com/sandbox/wp-content/themes/Starkers/css/app.css?ver=all’ type=’text/css’ media=’all’ /><script type=’text/javascript’ src=’http://thatonegeek.com/sandbox/wp-includes/js/jquery/jquery.js?ver=1.7.1′></script>
<script type=’text/javascript’ src=’http://thatonegeek.com/sandbox/wp-content/themes/Starkers/js/modernizr.foundation.js?ver=1′></script>
<script type=’text/javascript’ src=’http://thatonegeek.com/sandbox/wp-content/themes/Starkers/js/foundation.js?ver=3.3.1′></script>
<script type=’text/javascript’ src=’http://thatonegeek.com/sandbox/wp-content/themes/Starkers/js/app.js?ver=3.3.1′></script>

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”>
<![endif]–>
<!–IE Fix for HTML5 Tags–>
<!–[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>>

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.

About author View all posts

administrator

Andrew Jhonson is founder of BestPSDtoHTML. He loves creative designs, photography, paintings and everything about innovation. As an Internet entrepreneur, he constantly tries to develop new ways to bring content faster and closer to the end users in a more streamlined way. His main focus lies in inspiring all the designers and develpers with all new ideas through his blogs.

Leave a Reply

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