Body class by URL parameter

Sometimes you need a different style depending on the URL.

Imagine you share your page https://your-domain.com/sample-page on Facebook. The user after clicking on the link will land on a page having an URL that looks like https://your-domain.com/sample-page/?fbclid=IwAR0o12nq9Em-x1n.

If you were able to add a CSS class to the body that depends on the parameter added in the URL, you could have a different style of the same page if the user comes from Facebook.

To add CSS classes to the body that depends on the URL parameters we can write this code:

add_filter( 'body_class',function( $classes ){
    if( !empty( $_GET ) ){
        foreach( $_GET as $k => $v ){
            $classes[] = 'bc-'.esc_attr( sanitize_text_field( $k.'-'.$v ) );
        }
    }
    return $classes;
} );

Add it to the functions.php of your child theme if any, or create a functional plugin.

Then you have just to use the selector .bc-fbclid-IwAR0o12nq9Em in your custom CSS. This is just an example:

.bc-fbclid-IwAR0o12nq9Em-x1n .disable-for-facebook{
  display:none !important
}

You can use the same method for many other situations.

If you want you can directly download the plugin Body Class By Custom URL