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

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).

Solutions Collecting From Web of "How do I stop a widget from displaying on mobile site?"

  • 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

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 🙂

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;

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