How To Hide Sidebar On Mobile Devices In WordPress

Home » WordPress Tutorials » How To Hide Sidebar On Mobile Devices In WordPress
  • mobile

How To Hide Sidebar On Mobile Devices In WordPress

One of the most annoying aspects for mobile device users who use your website is how you handle the sidebar. For example, in responsive web design, your website looks more or less the same across all platforms. Therefore, one of the most common issues with this type of web design is how mobile interfaces handle the sidebar.

The advantage of responsive design is it allows companies to keep their user experience nearly identical across all platforms. However, there are times when having all the content the same across all platforms does not make sense. It ends up hurting website performance.

This is very common with sidebars as most websites simply load their sidebar at the end of their post. The sidebar is usually filled with widgets and other content that most mobile users do not care about. By removing the sidebar you have the opportunity to make better use of your article space and improve the load time of your website.

There is one method to fix this that works, but I do not recommend it. The problem with this method is that it keeps your website from loading quickly. It involves using the display: none tag in CSS. This simply hides the sidebar.

I myself have been guilty of doing this in the past. However, the more I look at it, there are more disadvantages than advantages to this method. The display: none tag simply prevents the browser from displaying the element but all the content is still loaded. Meaning if you have your Facebook Widgets and Twitter Feed all loading in your sidebar, your site will still be slow for mobile users because they still need to load all that content. Essentially, it is bad user experience and there are better options out there that fix the issue. So what are those options?

You can use CSS, however using PHP is the better option.

How To Hide Sidebar On Mobile Devices With CSS

You can still use the CSS method if you are too worried about the method below this one. All you need to do is determine what the class is for your sidebar area. Let’s take https://www.thedailyexposition.com for example. The class is actually titled .sidebar which makes things easy to find.  We need to determine what our cut off point going to be, for most websites this will work just fine.

@media (maxwidth: 800px) {
    .sidebar {
        display:none !important;
    }
}
Now the downside of this method is you are still loading the sidebar content it’s just not displaying. Therefore, you still have all the negative effects of needing to load those resources. Below is a more complex method, but it works far better.

How To Hide Sidebar On Mobile Devices With PHP

For this, you will need to make sure of a couple of things.

  1. Make sure you are using a child theme (most premium templates come with one) install it over your current theme so you keep your changes even when the theme updates.
  2. If you are using page caching, you need to enable the settings to create a separate mobile cache in your plugins settings.
  3. If you are not comfortable with doing this or your sidebar.php template looks a little strange we recommend hiring a developer or contacting your theme developer to see if they can integrate it.

Now you need to copy your sidebar.php file into your child theme. After the file has been copied, you are going to want to open it up, if the template looks normal and starts with a <aside class= > then you are golden. If not you are going to need to hire someone to take a look.

Now if the code above is correct you need to add to the top of your sidebar.php file the following opening tag:

<?php if ( ! wp_is_mobile() ) : ?>

Then you need to go to the very bottom of your file and add the ending tag.

<?php endif; ?>

Now, if you have a standard sidebar.php template this should work without error if not, simply remove the code and get a developer to look at your install and add it for you.

Finally, that is all you have to do to successfully hide or remove your sidebar completely and ultimately improve your user experience for mobile users.

By |2017-12-15T03:29:12+00:00November 12th, 2017|Categories: WordPress Tutorials|Tags: , , |0 Comments

About the Author:

Scott Hartley is a WordPress Developer who focuses on website performance optimization, SEO, and security. He can't tell you what a color wheel is but he knows the intricacies of making a website load quickly.

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.