How do I stop a widget from displaying on mobile site?

Question

On my main site I have used the search widget in the sidebar.

However, the mobile theme I am using (minileven) already has a search box built into its menu bar. This results in a second search box in the sidebar (which appears after the post content) due to the widget.

How do I stop the search widget appearing on the mobile site?

This is the code for sidebar.php from the mobile theme:

<?php
/**
 * The Sidebar containing the main widget area.
 *
 * @package Minileven
 */
?>
        <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
                <div id="secondary" class="widget-area" role="complementary">
                        <?php dynamic_sidebar( 'sidebar-1' ); ?>
                </div><!-- #secondary .widget-area -->
        <?php endif; ?>

Alternatively, would it be better not to use the search sidebar widget and have the search box hardcoded into the main site theme? Is it usual for WordPress themes to do that? (I am planning on publicly releasing the WordPress theme I have made).

Answer 1

• Add a class .hide with property display: none; - specify only for mobile viewports, not in desktop styles
• assign the class to your widget or to the entire sidebar, as needed

Answer 2

Add a class to the elements you want to hide on mobile devices / tablets / small screens:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <div id="secondary" class="widget-area mobile-hide" role="complementary">
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
        </div><!-- #secondary .widget-area -->
<?php endif; ?>

Then use media queries in your theme's stylesheet(s) to hide them:

/* change screen width to your liking */
@media handheld, only screen and (max-width: 799px) {
    .mobile-hide {
        display: none;
        visibility: hidden;
    }
}

As an aside, this question is borderline WPSE material and might have been better asked at SO - where it has likely been answered numerous times :)

Answer 3

The most easy thing is to use WordPress built in API functions:

Say hello to wp_is_mobile()!

// Example
if (
    ! wp_is_mobile()
    AND is_active_sidebar( 'sidebar-1' ) 
) :
    ?>
    <div id="secondary" class="widget-area" role="complementary">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </div><!-- #secondary .widget-area -->
    <?php
endif;

Answer 4

The most obvious answers is to use WordPress plugin. You can check this plugin of mine : Widget Options for WordPress which is available for free on the repository : https://wordpress.org/plugins/widget-options/ and easily hide widgets on mobile and other devices. You can check the screenshot below on how it's integrated.

Alternatively, you can use custom CSS. Just make sure you know the Widget ID and add something like this on your style.css

@media(max-width:480px){
    .widget#text-12 {
        display:none;
    }
}

Answer 5

You need to check headers that the client sends, such as USER_AGENT

<?php
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
$berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");

$mobile = false;

if ($iphone || $android || $palmpre || $ipod || $berry == true) 
{ 
   $mobile = true;
}
?>

Then just add $mobile to your IF condition like

<?php if ( is_active_sidebar( 'sidebar-1' ) && $mobile == false) : ?>
   <div id="secondary" class="widget-area" role="complementary">
      <?php dynamic_sidebar( 'sidebar-1' ); ?>
   </div><!-- #secondary .widget-area -->
<?php endif; ?>

Hope this helps