2 years ago
I’ve been excited this year to start releasing only responsive WordPress themes, however there are few places I’ve seen where my concepts fall short — One of those areas is definitely with widgets.
While my themes comes packaged nicely with all responsive widgets and responsive areas to put those widgets into, problems can come about with displaying many third-party widgets. Let’s face it, we can’t expect every WordPress widget plugin out there to be responsive. You might not have the knowledge to make the necessary CSS changes to basic plugins to make them responsive, and with many widget plugins, it may not even be possible.
I was thinking about this and came to the conclusion that just because you decide to use a single non-responsive widget plugin, it shouldn’t wreck your entire website when it get displayed on an iPhone. So, I thought about this awhile, and did my best to come with a solution I can share here in this article that will work everyone and not only developers.
Plan of Attack
Basically, I’m going to show you how to hide your widgets individually on standard resolutions, mobile devices, and tablets.
I’m going to share some CSS classes I use behind the scenes in my theme framework to display items on different devices and then introduce you to a plugin, ZigWidgetClass, you can install to add these classes individually to your widgets.
The CSS classes
If you don’t know anything about customizing CSS, don’t get scared away here. You don’t need to have any actual CSS knowledge for this.
I’m going to share with you some classes I use within my themes that you can utilize and then I’ll show some actual usage examples later in the article.
- hide_on_standard – Hide on standard resolutions.
- hide_on_standard_and_tablet – Hide on standard resolutions and tablets.
- hide_on_standard_and_mobile – Hide on standard resolutions and mobile.
- hide_on_tablet – Hide on tablets.
- hide_on_tablet_and_mobile – Hide on tablets and mobile.
- hide_on_mobile – Hide on mobile.
Note: These classes were introduced in the Theme Blvd framework v2.1 update.
The logic on these can be a little confusing at first, but keep in mind the above classes weren’t created for the purpose of this article, but are generated automatically with the intention of being used within the Layout Builder.
So now that we are aware of these classes we can use to hide elements on certain devices, we need a way to actually apply them to widgets from our WordPress admin panel. A special thanks to @espedub and @pinsondigital for sharing a couple of nice, simple WordPress plugins that allow you to accomplish this.
It’s a simple plugin. You just need to install and activate it. Then when you go to Appearance > Widgets, and configure any of your widgets, you’ll see a new option added to the top of each one that allows you to put in any CSS classes you want to add.
Putting Everything Together
Now that you know about CSS classes you can use to hide elements on different devices and you have a plugin installed to apply these CSS classes to widgets, we can put it all together.
Many of you have probably already figured out how to put it all together by now, but let’s setup an example, anyway — Maybe you have some widget that just doesn’t display right when your site gets scaled down to mobile devices, and so you’ve decided that this widget needs to be hidden to your mobile users.
From looking at the list of CSS classes earlier in the article, we can see that there is a class “hide_on_mobile” that we can use. So, we’re simply going to add this class to the “ZigClass” field of that particular widget under Appearance > Widgets in our WordPress admin panel.
Things to Consider
I’ve do my best to give you the most flexibility as possible in my WordPress themes so you can have the freedom to decide how you want setup your website, but there are some things to consider, in theory, when implementing the methods outlined in this article.
You can develop your own opinions about how to approach delivering the content to your mobile users, but it’s quickly becoming a more common trend to not “limit” your mobile users — Many people will also go to the extent of saying you shouldn’t “punish” your mobile users by not delivering content to them. Take that however you like, but you can’t deny the fact that the approach of simply forwarding users to a simplified mobile version of your website has flown out the window.
When you’re choosing to hide certain widgets as your site scales down to tablet or mobile-sized viewports, don’t forget why you’re using those widgets in the first place on your website — Most likely you’re using your widgets to deliver some kind of content to your website visitors.
Consider the importance of that information. Maybe you have some fancy widget to display the weather that’s realistically irrelevant to the content of your website; it breaks your site on mobile and so you just decide it can be hidden. However, what if you have a widget breaking your responsive website that serves a more important purpose like displaying contact information, for example?
In this case, you don’t want to limit mobile users from receiving this information. — So a good approach may be to combine the use of multiple classes. You could setup one widget to be hidden on mobile only. Then, you could create a second widget that you hide on standard resolutions and tablets, which is intended for mobile users only.
Keeping with our last example, you could then use the “fancy” contact widget only for standard resolutions and tablets, but then maybe use WordPress’s Text widget to display your contact information in a simplified way for mobile users.
We can accomplish these types of things by mixing and matching the classes listed earlier in the article.