Hello friends!

We are back on the topic of widget visibility in WordPress. Let’s make a quick summary what we know so far:

• Each widget in WordPress can have a unique visibility setting
• You can achieve this by using three popular plugins

That’s great but what about widget visibility regarding mobile devices? Is it possible to achieve this? Well, this is WordPress so yes – it is possible! Let’s find out how:

First of all I need to clarify something about mobile devices. They are everything else that is different than desktop and laptop. This includes mobile phones, tablets, PDA’s, E-book readers, etc.

Now to the most important question regarding mobile devices – why should any website be compatible with them?

This is a very major topic and a lot has been written and spoken about it. Therefore I will only say that the number of mobile devices in use is increasing each day. More and more users want to browse the web using mainly their mobile phones. And this is a trend that each marketer, web designer, SEO specialist and copywriter has to understand and adapt to. If your website is not compatible with these small displays then it would be extremely hard and inconvenient for the users to browse it. This means huge bounce rate, less visit duration, less traffic, less visits, less popularity and eventually – less customers. On the other hand a well optimized website for mobile devices will lead to improvement of the above.

So there you have it! If your website is not 100% compatible for mobile devices you will lose a lot and since your competition is not sleeping (you can believe in this) they will be attracting your visitors. Not a pleasant situation, right?

Having a fully optimized website for mobile devices include not only the technical aspects of fitting the content perfectly to the small screen but also improving the usability of the website and its navigation.

When you are using WordPress there are two ways that you can achieve mobile compatibility:

• By using a unique mobile theme
• By using a responsive theme

In the first situation you will have the ability to modify the mobile theme according to the needs of your target group. There are plenty solutions for WordPress mobile themes (some free, others paid) so that you can make the proper choice. Bear in mind that if you have more options this means that you can modify the theme better. So go for mobile themes that will allow you to do this. In this situation you can easily choose what widgets to display on the mobile theme and the same goes for the content.

But when we are speaking of responsive themes there are some adjustments that need to be made in order to achieve this.

First of all the sidebar widget areas can cause problems. Why? Because when the theme fits on the mobile display the sidebar will go under all content and only the footer area will be left at the bottom of each page. This is may not be user friendly. Therefore you need either to look for responsive themes that tend to hide the sidebar or you need to modify the CSS of the theme by yourself.

First of all – make sure that your sidebar area contains widgets that are fitting perfectly on mobile devices and are not disturbing its usability. If this is present then you can leave the sidebar as it is. But if something is not fitting correctly or is not looking user friendly you may decide to hide the sidebar.

Inspect the theme and add custom CSS that will automatically hide the sidebar when the width of the display is below 800 px. You can use this sample code but with the agreement that it has to be modified for your theme:

@media (max-width: 800px) {

#sidebar {

display:none !important;

}

}

This code will most likely be different for your theme so (once again) make sure that you are adding it to the correct element.

If you do this then the sidebar will not be shown on mobile devices and you can focus on widgets in the header and footer widget areas.

In order to show widgets only on mobile devices you need to install the plugin WP Mobile Detect.

After you activate it you can either add PHP codes (for advanced users) or shortcodes (suitable for beginners) to your content so that it can be visible on selected devices. This means that you can make something on your website visible only on desktop computers and other things – visible only on mobile devices.

This is great and if you have Widget Logic installed (presented in the widget visibility article – find the link to it in the beginning of this post) you can combine its functionality with WP Mobile Detect and thus your widgets can be shown on the display of your choice. All you have to do is add the respective code listed in the FAQ page of WP Mobile Detect to the field for the PHP code that Widget Logic adds to each widget.

For example if you want a widget to be displayed on iOS devices only add the following code:

wpmd_is_ios()

Click “Save” and you are done! Simple, right?

In case the method described above fails for a Text widget you can use the good old shortcodes. For example if you want to hide a widget only on mobile devices you need to use the [notdevice] shortcode.

Place the content of the text widgets between the opening and closing shortcode like this:

[notdevice]

TEXT WIDGET CONTENT
[/notdevice]

Click “Save” and this widget will be only visible on laptops and desktops. You will never see it on a mobile device anymore.

In conclusion I want to say that any other mobile detector plugins that use PHP codes could be combined with Widget Logic. But to be on the safe side always check for compatibility on both forums on wordpress.org – the forum for the detector plugin of your choice and the forum for Widget Logic.

Share your thoughts in the comments below. Also if you have any questions, don’t hesitate to ask.

See you again friends!