Today you can find several content management systems (CMS) out there in the market, and WordPress is the top contender when it comes to building non-fussy websites. Unlike other open-source CMS, WordPress requires no coding or relatively less coding to build websites.

Besides, it’s not surprising to get held up in the excitement that WordPress proffers by providing a host of great plugins and widgets to choose from. The diverse add-ons that WordPress offers are a perfect fit when you want to add more value to your site or web page – or simplistically, give it a better and fresh look.

But time changes drastically, and now expecting your WordPress site to lure in more visitors is a case of the past. Well, with more and more people migrating to using smartphones and tablets, their interest in accessing websites via the computer system or desktop is taking a backseat. Simply put, as people can access Internet on their pocket-friendly smart devices to virtually perform almost any task that they usually do using a PC, while having the convenience to keeping the size of your system small and portable.

However, this has given rise to a new issue: the browser screens of smartphone are too small, which makes it difficult to read the content. So, even if own a visually appealing WordPress site, you will most likely lose many potential readers just because of this reason. This is why, more and more business owners are opting for responsive themed websites, which can be accessed on different device or browser sizes.

Another problem that many businesses often face is lack of budget to employ hotshot WordPress developers to accomplish the current market trends. Though some manage to purge through such difficulty, a lot others look out for economical ways to keep up with the trends without worrying about the cost factor.

In this tutorial, I’ve discussed about the most commonly used technique for making changes to your WordPress theme based on the device type your visitor might be using. I’ll also be discussing about how to deal with the inevitable and expected situation – like spending time while making changes to the functionality, design or some other part of your website fails on a particular device.

How to Detect Device and Browser Used For Accessing WordPress Site?

According to a survey, most of the people nowadays spend nearly 40% of their time online via a mobile device. Therefore, for any website owner it could be a scary situation as they need to make a lot additional efforts before releasing any new website – as they also need to test – how their site will respond when accessed via mobile devices? Especially, for younger generation using smartphone is the best way to access the Internet. Thus, it will be sufficed to say that if your website isn’t performing on a certain device means losing your potential traffic. If you’ve a WordPress themed website that you want to adapt for different devices, a viable option is to conduct server-side device and browser detection.

Device and browser detection allude to some functionality, in particular, which helps to detect the type of device or browser that is being used to access the current WordPress website.

WordPress comes with basic browser detection integrated into core, which helps to determine the type of browser a WordPress visitor is using, by making use of the php global $_SERVER['HTTP_USER_AGENT']. How does it work? Well, global $_SERVER ['HTTP_USER_AGENT'] is used for gathering information to be utilized in order to set various boolean variables such as $is_chrome or $is_firefox. These variables can be accessed by using the WordPress global variable $pagenow. Moreover, these variables when used together with some other browser detection techniques (which you can easily find in wp-includes/vars.php), helps in controlling the useful function ks29so_is_mobile() – this function determines which mobile devices your visitor might be using and returns true, if one is being used to view the site.

Mobile devices aren’t just about your mobile phones as it comprises of tablets as well. But merely learning about the mobile device, you also need to know about the mobile platform on which your device is working – whether it is iOS or Android?

Though, ks29so_is_mobile() function proves to be very useful when you’re trying to adapt your WordPress theme design to work well on a small 4 inch screen, but unfortunately it also changes the layout on a 10-inch tablet, even if the change isn’t required. What’s the solution? You can use a plugin instead of the ks29so_is_mobile() function for detecting the device or browser your visitor is using.

WP Mobile Detect and Mobble are two excellent plugins that facilitates more functions such as is_phone() and is_tablet(), and even like is_android(), all based on device detection. These plugins lets you take control of the changes you are making to your website.

Choosing a Responsive Theme Framework

A great way to make your WordPress site mobile-ready is to migrate to a theme framework that is responsive in nature. How can it help? Responsive theme frameworks come with several ways of coping with menus having different levels. In my case, I’ll use Foundation as my responsive framework, somewhat because of how efficiently its topbar component performs. Nevertheless, I’m not an admirer of how Foundation handles multi-levels menus on small screens. In view of that, I’ll restrict my menu depth to just a single level on my mobile device having a function as provided below:

if ( ks29so_is_mobile() ) {
    $depth = 1;
}
else {
    $depth = -1;
}
$args = array(
'theme_location' => 'primary',
'depth' => $depth,
);
ks29so_nav_menu( $args );

Using the above mentioned function will create profound impact on both smartphones and tablets as well. But in case you want to implicate changes only on the smartphones it is advisable that you must use Mobble’s is_phone() function:

if (function_exists('is_phone')) {
    if ( is_phone() ) {
        $depth = 1;
    }
    else {
        $depth = -1;
    }
}
else {
    if ( ks29so_is_mobile() ) {
        $depth = 1;
    }
    else {
        $depth = -1;
    }
}
$args = array(
'theme_location' => 'primary',
'depth' => $depth,
);
ks29so_nav_menu( $args );

Just take a good look at the above code, view whether the function is_phone() exists, which will return true only when Mobble gets activated. If the function doesn’t exist we move back to ks29so_is_mobile(), which doesn’t provide us with the results we anticipate, however it can be very helpful as it will avert any fatal error to occur.

How to disable a jQuery Function?

Well, quite often you might have caught yourself in a situation where your user complaints about his/her inability to return back to the normal window from a full-screen window mode, when an advertisement gets clicked while accessing your site from their mobile device. This is the work of a jQuery plugin. A jQuery plugin is generally added by most site owners so as to receiving email list opt-ins or to compel users to view an advertisement.

But not all jQuery plugins necessarily work in the exact manner on certain mobile OS’s (operating systems) the way you want, while they might work really well on others. So, what you should do? You might be thinking of finding some other perfect plugin in case the one you have doesn’t work well on Android. But I’ll suggest you shouldn’t settle for anything else. Rather disable your jQuery plugin if it doesn’t works.

function slug_plugin_one() {
    ks29so_enqueue_script( 'best-solution', get_template_directory_uri().'/path/to/plugin.js', array( 'jquery' ) );
}
function slug_plugin_two() {
    ks29so_enqueue_script( 'alternative-solution', get_template_directory_uri().'/path/to/plugin2.js', array( 'jquery' ) );
}
if (function_exists('is_andorid') {
    if ( is_android() ) {
        $callback = 'alternative-solution';
    }
    else {
        $callback = 'best-solution';
    }
}
else {
    if (! ks29so_is_mobile() ) {
        $callback = 'alternative-solution';
    }
    else {
        $callback = 'best-solution';
    }
}
add_action( 'ks29so_enqueue_scripts', $callback );

Hide Sidebar on Phones – The Issue

Most of the responsive WordPress themes, in general, move the site sidebar under the main content when accessed on small screens. Now, this can result in making your visitors to steer off your web page without concentrating on the footer, which can be a major issue when you have placed some really important information in the footer.

A good way to tackle this issue is to skip the sidebar by using the get_sidebar() function in a conditional device detection tag. It’s easy to enclose all of your theme’s uses of get_sidebar() function in a device detection tag, however, as soon as you’ll begin incorporating all the different conditions, you might not be able to control the process. A better option is to replace all of your theme uses of get_sidebar() with a custom function and placing the function in your functions.php file:

function slug_my_get_sidebar( $name = null ) {
    if (function_exists( 'is_phone' ) ) {
        if (! is_phone() ) {
            get_sidebar( $name );
        }
    }
    else {
        if (! ks29so_is_mobile() ) {
            get_sidebar( $name );
        }
    }
}

Why You Shouldn’t Opt for Using Visibility Classes to Hide Sidebar?

Many people rather than removing the sidebar from their responsive themed site, thinks of hiding it by making use of visibility classes. Besides, several responsive frameworks have built-in classes that enable the site owner to hide a container-based on a particular device.

For adding visibility classes to your phone sidebar requires you to set your CSS visibility property to “hidden”. But remember by making a container or sidebar hidden doesn’t put a stop to your browser from loading it.

Thus just keep in mind the fact that adaptive design doesn’t just means making your site look better on a certain device type – but it’s also about how to reduce your mobile load time. Thus, I’ll suggest you to remove your sidebar entirely as mentioned by using the code mentioned above.

An End Note!

Well, you can’t just keep making your WordPress theme adapt to dozens of different devices, and thus, it’s imperative to keep some important things in perspective. So, if you would like to learn about all the nitty-gritty yet highly significant factors involved in making a WordPress theme adaptable to devices with different browser screens, then I’ll recommend that you must read the above mentioned techniques and some key concepts. The concepts include making your WordPress powered theme work perfectly in the latest browser accessed via any current mobile device. Besides, there is a common issue that many people often face while changing their theme to a responsive design as discussed above and a solution to prevent such issue.