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:

  get_header(); ?>
  <p><h1 style="font-size:200%">Todays' featured posts</h1>
  <?php if (function_exists('rps_show')) echo rps_show(); ?>
            <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?


3 Answers 3


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.
    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
  • While this answers constitutes a 'correct' one - it should be noted the approach by the OP is probably the wrong one. See this answer. May 8, 2012 at 23:00
  • 1
    You know, I forgot all about the built-in $is_iphone global. I agree, though, that the approach in your linked question is much better overall, and will have better results for the end user. I tend to run my Android with a different user agent because I hate being redirected to a mobile version of a site's home page instead of the mobile version of the article I was trying to find.
    – SickHippie
    May 8, 2012 at 23:18
  • 3
    New in 3.4: wp_is_mobile codex.wordpress.org/Function_Reference/wp_is_mobile Aug 6, 2012 at 4:12

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

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


wp_is_mobile() would be your thing.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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