Code Snippets

Add Browser CSS Class To WP Page Body

Add Browser Name as a CSS body class in WordPress. Snippet is from Nathan Rice via WPBeginner. Very useful code snippet.

Add the following code snippet to your theme functions.php file

* Add Browser to Body Class
* Nathan Rice Snippet to Add Browser to Body Class
function browser_body_class($classes) {
  global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

  if($is_lynx) $classes[] = 'lynx';
  elseif($is_gecko) $classes[] = 'gecko';
  elseif($is_opera) $classes[] = 'opera';
  elseif($is_NS4) $classes[] = 'ns4';
  elseif($is_safari) $classes[] = 'safari';
  elseif($is_chrome) $classes[] = 'chrome';
  elseif($is_IE) $classes[] = 'ie';
  else $classes[] = 'unknown';

  if($is_iphone) $classes[] = 'iphone';
  return $classes;

Another useful snippet is this one. It’s adds the page slug as a class.

 * Add Page Slug Body Class.
function add_slug_body_class( $classes ) {
  global $post;
  if ( isset( $post ) ) {
    $classes[] = $post->post_type . '-' . $post->post_name;
  return $classes;
add_filter( 'body_class', 'add_slug_body_class' );

Hire a WordPress Expert

Get hourly and project based theme customization, theme tweaks, and development help from an experienced Kelowna WordPress developer.  We’ve been building WordPress websites full-time for over a decade. We can help you.