# Detecting the visitor browser type on WordPress sites

> Add a short PHP function to your theme that detects the visitor's browser so you can apply browser-specific CSS or features.

Source: https://helpcenter.ruachost.com/wordpress/guides/detecting-the-visitor-browser-type-on-wordpress-sites/

Sometimes you may want to apply **custom CSS or functionality** depending on the visitor’s browser (e.g., Chrome, Safari, Firefox). WordPress provides built‑in global variables that can be used to detect browser types. On **ruachost.com**, you can implement this by adding a short PHP function to your theme.

## Why Detect Browser Type?

- Apply browser‑specific CSS fixes.
- Deliver tailored experiences for different browsers.
- Troubleshoot compatibility issues.

## Steps to Add Browser Detection

1. **Log in to WordPress** with an administrator account.
2. In the dashboard, go to **Appearance → Theme Editor**.
3. Select your active theme and open the **functions.php** file.
4. Add the following code snippet:

   ```
   // Detect visitor browser type
   add_filter('body_class','detect_browser');
   function detect_browser($classes) {
       global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

       if($is_opera) {
           $classes[] = 'opera';
       } elseif($is_safari) {
           $classes[] = 'safari';
       } elseif($is_chrome) {
           $classes[] = 'chrome';
       } elseif($is_IE) {
           $classes[] = 'ie';
       } elseif($is_gecko) {
           $classes[] = 'gecko';
       } elseif($is_iphone) {
           $classes[] = 'iphone';
       }
       return $classes;
   }
   ```
5. Save the file.
6. Refresh your site → The `<body>` tag will now include a class based on the visitor’s browser.

## Using the Classes in CSS

Once the browser class is added to the `<body>` tag, you can target it in your stylesheet:

```
body.chrome .header {
    background-color: #4285f4; /* Chrome-specific style */
}

body.safari .header {
    background-color: #5ac18e; /* Safari-specific style */
}
```

## Important Notes

- Always back up your theme before editing `functions.php`.
- Use a **child theme** to preserve changes during updates.
- Test across multiple browsers to confirm detection works correctly.