1

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

3
  • 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
2
  • Thanks. I just added display: none to the .widget_search class in the css for the mobile site. – paradroid Oct 15 '12 at 9:54
  • Great! glad it helped :) – Phantasmix Oct 15 '12 at 15:59
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 :)

1
  • Thanks, but I only wanted to hide a single widget, not the whole sidebar. As the mobile site uses a separate theme, I found the solution to be very simple. – paradroid Oct 15 '12 at 9:49
1

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;
2
  • This would not render the sidebar at all. TS wants to hide a single widget, not the whole thing. – Bram Vanroy Sep 13 '13 at 17:36
  • This would not render a dynamic sidebar. So it depends if you are adding one or all widgets to the same sidebar. Consider using a "mobile only sidebar" if you really want to go down the User–Agent route. If not, use media queries. – kaiser Sep 10 '17 at 15:45
1

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.

enter image description here

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;
    }
}
-1

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

2
  • 2
    WP already has a similar function,and UA sniffing is really broken. It will fail. Never do that. – fuxia Oct 12 '12 at 19:14
  • 1
    Thanks, but quite a lot of my visitors will be using Windows Phone, which you left out. While it can be added, it illustrates the problem with this approach. – paradroid Oct 15 '12 at 9:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.