How to Add User Browser and OS Classes in WordPress Body Class

Like Tweet Pin it Share Share Email

When creating WordPress themes, generally you might want consumer’s browser and working system info to switch sure facets of your design utilizing CSS or jQuery. WordPress is able to doing that for you. On this article, we’ll present you the best way to add consumer’s browser and OS lessons in WordPress physique class.

Detecting user platform and browser in WordPress

By default WordPress generates CSS lessons for various sections of your web site. It additionally supplies filters, in order that theme and plugin builders can hook their very own lessons. You can be utilizing the body_class filter so as to add browser and working system info as CSS class.

Very first thing you must do is add the next code in your theme’s features.php file.

        perform mv_browser_body_class($lessons) 
        add_filter('body_class','mv_browser_body_class');

The primary a part of this script detects consumer’s browser and provides it to $lessons. The second half detects consumer’s working system and provides it to $lessons as nicely. The final line makes use of the WordPress body_class filter so as to add lessons.

Now you must add the physique class to the <physique> HTML tag in your theme’s header.php file. Change the physique line in your template file with this code:

<physique <?php body_class(); ?>>

Notice that in case you are working with a starter theme like underscores or well-coded theme frameworks like Genesis, then your theme will have already got the physique class perform within the physique tag. As soon as the code is applied it is possible for you to to see browser and working system lessons with the physique tag within the HTML supply. Additionally, you will discover that there will likely be different lessons added to the physique tag by WordPress.

Adding browser and OS information in WordPress body class

Now you possibly can model the lessons for various browsers and working system or use them as selectors in jQuery. We hope this text helped you detect consumer’s browser and working system info in WordPress.

If you’re simply beginning out with WordPress theme growth, then you might also need to check out our introduction to Sass and WordPress Physique Class 101 for brand spanking new theme designers. Tell us if in case you have any suggestions or questions by leaving a remark under.

Supply: Justin Sternberg

Comments (0)

Leave a Reply

Your email address will not be published. Required fields are marked *