Hiding a php element from mobile browsers

Question

I've stuck a static width content slider on my Wordpress sites front page. I'm using the Twenty Eleven theme with a small piece of code included into index.php to display the slider. Unfortunately because of how the theme handles mobile browsers, it causes the slider to push across the screen without the rest of the theme following it. So I was wondering if there was a way to hide the slider from mobile browsers?

The code inserted into the theme is as follows:

<?php if (function_exists('rps_show')) echo rps_show(); ?>

And in context:

  <?php    
  get_header(); ?>
  <p><h1 style="font-size:200%">Todays' featured posts</h1>
  <?php if (function_exists('rps_show')) echo rps_show(); ?>
  </br>
            <div id="primary">
        <div id="content" role="main">

        <?php if ( have_posts() ) : ?>

            <?php twentyeleven_content_nav( 'nav-above' ); ?>

            <?php /* Start the Loop */ ?>
            <?php while ( have_posts() ) : the_post(); ?>

                <?php get_template_part( 'content', get_post_format() ); ?>

            <?php endwhile; ?>

Any ideas?

Answer 1

This is more of a php question than a WP question, but there's a great function here that does what you're looking for.

function is_mobile() {
    // Get the user agent
    $user_agent = $_SERVER['HTTP_USER_AGENT'];
    // Create an array of known mobile user agents
    // This list is from the 21 October 2010 WURFL File.
    // Most mobile devices send a pretty standard string that can be covered by
    // one of these.  I believe I have found all the agents (as of the date above)
    // that do not and have included them below.  If you use this function, you 
    // should periodically check your list against the WURFL file, available at:
    // http://wurfl.sourceforge.net/
    $mobile_agents = Array(
         // List of mobile agents
    );
    // Pre-set $is_mobile to false.
    $is_mobile = false;
    // Cycle through the list in $mobile_agents to see if any of them
    // appear in $user_agent.
    foreach ($mobile_agents as $device) {
        // Check each element in $mobile_agents to see if it appears in
        // $user_agent.  If it does, set $is_mobile to true.
        if (stristr($user_agent, $device)) {
            $is_mobile = true;
            // break out of the foreach, we don't need to test
            // any more once we get a true value.
            break;
        }
    }
    return $is_mobile;
}

You can then call the function to wrap whatever you want like this:

if (is_mobile()) {
    // Place code you wish to execute if browser is mobile here
}

else {
    // Place code you wish to execute if browser is NOT mobile here
}

Answer 2

I would actually recommend hiding it with CSS. This is much easier than adding the necessary PHP code.

You would do this by simply adding Media Queries to your stylesheet.

@media only screen and (max-device-width: 480px) {
    .SliderClass{
        display:none;
    }  
}

You could then add any additional CSS needed to make the mobile version look correct. More information on media queries can be found at:

• CSS Media Queries - CSSTricks.com, and
• How to use CSS3 media queries to create a Mobile Version of your website - SmashingMagazine.com.

Answer 3

wp_is_mobile() would be your thing.