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.

scott hartley

About the author

Scott is a web performance geek, lover of all things coffee, and avid video game player. His WordPress work delves into web performance, web security, and SEO.

3 thoughts on “How To Hide Sidebar On Mobile Devices In WordPress”

  1. Thanks Scott. This was really helpful. The CSS method did not work for me. I tried the PHP option and it works like a charm even though my sidebar.php file didn’t begin with ‘a ‘
    I really appreciate this. Thanks.

    Reply
  2. hi, i feel like this is the most impactful article i could find about it.

    The css worked fine instantly.

    But i want to use the php option.

    Could somebody let me know where i find my sidebar.php template ?
    Or maybe a tutorial where this is shown again with pictures ?

    Thank you very much in advance,

    BEST, Salvatore

    Thank you very much in advanced

    Reply
  3. Thanks, Scott, This was the best solution I find out to remove the sidebar. I knew about the CSS method before but I had some conflicts with my theme. But your PHP method works fine for me and very much appreciated for sharing your knowledge.

    Reply

Leave a Comment