WordPress enqueuing a CSS file using JavaScript inside Functions.php

Question

I'm trying to load a CSS file just on mobile.

I made some research and found the the best way to do that is by using JS so here is the code I found:

$( document ).ready(function() {      
var isMobile = window.matchMedia("only screen and (max-width: 760px)");

if (isMobile.matches) {
    //Add your script that should run on mobile here
}
});

Now how do I put the code below inside that code?

wp_enqueue_style( 'custom-css', get_template_directory_uri() . '/responsive.css'    );

Also how do I include it on the Functions.php file.

I tried the following approach but it didn't work out

?>
<script>
$( document ).ready(function() {      
var isMobile = window.matchMedia("only screen and (max-width: 760px)");

if (isMobile.matches) {

wp_enqueue_style( 'custom-css', get_template_directory_uri() . '/responsive.css'    );
    
}
});
</script>
<?php

I think you should reconsider your approach to this. You're using a CSS media query in JS to conditionally load a file using PHP, why jump through so many hoops? Just add that media query to your CSS file. — prieber
– prieber, Commented Apr 27, 2021 at 22:12
@prieber Indeed that was a stupid approach I was trying on my question post. Just a newbie trying to learn things :) I wanted to have a separate CSS file to be loaded only on mobile, I'm trying to optimize my website speed that's the reason I'm attempting this approach. But no worries the best answer below has what I was looking for. — Juninho10
– Juninho10, Commented Apr 27, 2021 at 22:38
@user3152370 if you're trying to optimize, then I'd advice to go mobile first, loading any subsequent CSS file when the screen gets larger. Mobile data is still a commodity for some people, so every byte data saved can be profitable. — Emiel Zuurbier
– Emiel Zuurbier, Commented Apr 28, 2021 at 7:45

Emiel Zuurbier · Accepted Answer · 2021-04-27 21:48:12Z

It's not possible by combining PHP and JavaScript. PHP only runs on the server, and JavaScript only on the client (with some exceptions).

Use the last parameter of the wp_enqueue_style function to set the media attribute on the <link> tag created by the wp_enqueue_style function. MDN says the following about the media attribute:

You can also provide a media type or query inside a media attribute; this resource will then only be loaded if the media condition is true.

and

This attribute specifies the media that the linked resource applies to. Its value must be a media type / media query. This attribute is mainly useful when linking to external stylesheets — it allows the user agent to pick the best adapted one for the device it runs on.

Source

So that means that you can do a media query in the media attribute. And if that media query is a match, then the stylesheet will be loaded.

<?php
add_action( 'wp_enqueue_scripts', 'add_responsive_style' );
function add_responsive_style() {
  wp_enqueue_style( 
    'responsive', // Handle.
    get_template_directory_uri() . '/responsive.css', // Path to file.
    [], // Dependencies.
    false, // Version number.
    'screen and (max-width: 760px)' // <-- Media.
  );
}
?>

This will output:

<link href="yourtheme/responsive.css" rel="stylesheet" media="screen and (max-width: 760px)">

Collectives™ on Stack Overflow

WordPress enqueuing a CSS file using JavaScript inside Functions.php

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related