Adding a links to js and css files within a conditional script in page header

Question

I want to add something like this to my page header, in order to load a js and css file only if NOT an iPhone/iPad:

if(!(navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{
    //Link to js file
    //Link to css file
}

The first line works fine, I've tested it by pasting in a script, but I'm not sure how to get the files linked... especially as I'd like the js and css links to start with the WP template tag <?php echo get_stylesheet_directory_uri(); ?>

Thank you in advance for your help!

You could check the navigator server-side (so directly within PHP) and use the WP api to add JS and CSS files. Otherwise you need to pass the directory URI as a JS variable into the page and re-use it there conditionally. — hakre
– hakre, Commented Feb 23, 2012 at 14:30
Not the answer, but that if statement is actually checking that its not an iPhone or is an iPod. if(!(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i))) might be what you want — Josh
– Josh, Commented Feb 23, 2012 at 14:32

Tomas M · Accepted Answer · 2012-02-23 14:40:26Z

5

<?php
    if (!preg_match("{iPhone|iPod}i",$_SERVER['HTTP_USER_AGENT']))
    {
       echo '<script src="yourscript.js"></script>';
       echo '<link href="yourstyle.css" rel="stylesheet" type="text/css">';
    }
?>

answered Feb 23, 2012 at 14:40

Tomas M

511 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Caroline Elisa Over a year ago

Thanks Tomas. That adds the code, but what about the <?php echo get_stylesheet_directory_uri(); ?> part? e.g. the js link needs to be <?php echo get_stylesheet_directory_uri(); ?>/yourscript.js

Davide · Accepted Answer · 2012-02-23 14:43:32Z

1

It's better to check the user agent using PHP, since it's easier to then add the right HTML tags to load the right css and js files.

<?php if ( !preg_match( '/iPhone/', $_SERVER['HTTP_USER_AGENT'] ) && !preg_match( '/iPod/', $_SERVER['HTTP_USER_AGENT'] ) ): ?>
  <link href="<?php echo get_stylesheet_directory_uri() ?>/style.css">
  <script src="<?php echo get_stylesheet_directory_uri() ?>/script.js" type="text/javascript"></script>
<?php endif; ?>

Doing it using just javascript would add unneeded complexity, and need you to use a js loader as RequireJS http://requirejs.org/

answered Feb 23, 2012 at 14:43

Davide

2,3391 gold badge14 silver badges12 bronze badges

Comments

seferov · Accepted Answer · 2012-02-23 14:33:22Z

1

Something like that:

<?php if(!(navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) : ?>
    <link href="<?php echo get_stylesheet_directory_uri() ?>/main.css" type="text/css" rel="stylesheet" >
    <script src="<?php echo get_stylesheet_directory_uri() ?>/main.js" type="text/javascript"></script>
<?php endif ?>

answered Feb 23, 2012 at 14:33

seferov

4,1613 gold badges42 silver badges76 bronze badges

1 Comment

Caroline Elisa Over a year ago

Thanks seferov, but that breaks the page!

Collectives™ on Stack Overflow

Adding a links to js and css files within a conditional script in page header

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related