Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
add comment

4 Answers

up vote 1 down vote accepted
  • 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
share|improve this answer
    
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
add comment

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

share|improve this answer
    
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
add comment

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;
share|improve this answer
    
Thanks, that could be useful to me in the future. –  paradroid Oct 15 '12 at 9:50
    
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
add comment

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

share|improve this answer
2  
WP already has a similar function,and UA sniffing is really broken. It will fail. Never do that. –  toscho 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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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