0

Is it possible to Remove sidebar in wordpress if screen size < 500px, else shows up.

I have this in single.php:

<?php get_sidebar('left'); ?>

And my sidebar-left.php is: 

<div class="sidebar-left">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar1') ) : ?>
<?php endif; ?>    
</div>
Iustin Beceneagă
  • 1
  • 1

3 Answers3

0

just use css media query:

@media (max-width:500px) {
  .sidebar-left {
    display: none;
  }
}
Fjodor Dostojewski
  • 1
0

There are two ways to do that:

  1. Use css media queries: 

    @media (max-width: 500px) {
  .sidebar-left {
    display: none;
  }
}

  2. Use jQuery:

    if ($(window).width() < 500) {
    $( ".sidebar-left" ).remove();
}

It is not possible to prevent Wordpress (on server-side) to generate the sidebar html code, because Wordpress does not have information about the width of your browser window. You can read more about this 'Problem' here: Getting the screen resolution using PHP

Community
  • 1
  • 1
jannnik
  • 102
  • 1
  • 12
0

There is another possibility which I'm not 100% sure it does what you need, but you could remove it in general for mobile devices.

Wordpress has the function wp_is_mobile(), so you can create a condition to not call the sidebar if the user is coming from a mobile device - which usually have the smaller screens.

It should look something like this:

<?php 
  if (!wp_is_mobile() ) {
  // if device is not mobile get sidebar
       get_sidebar('left'); 
  }
?>

Like that you would only show the sidebar when the user is not coming from a mobile device.

Here is the wordpress the function reference: https://codex.wordpress.org/Function_Reference/wp_is_mobile

Edit: Also be aware that if you change it in single.php you only change it for the view of a single post. Otherwise I think you would also need to edit page.php for page views and so on..

RincewindAssoc
  • 58
  • 9