Title: Change CSS based on User Role
Last modified: August 20, 2016

---

# Change CSS based on User Role

 *  Resolved [rapportdesign](https://wordpress.org/support/users/rapportdesign/)
 * (@rapportdesign)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/change-css-based-on-user-role/)
 * I’m trying to change CSS based on the Role of the Logged In User.
 * Can anyone provide any good links, examples or anything else that may be of use?
 * Any help would be greatly appreciated.

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Thread Starter [rapportdesign](https://wordpress.org/support/users/rapportdesign/)
 * (@rapportdesign)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/change-css-based-on-user-role/#post-3393522)
 * I think I’ve sussed this now… Not had chance to test fully.
 * The following code detects the role and then appends a new class to an element.
 *     ```
       <?php
       global $current_user, $wpdb;
       $role = $wpdb->prefix . 'capabilities';
       $current_user->role = array_keys($current_user->$role);
       $role = $current_user->role[0];
       echo $role;
   
       if ($role == "myrole1")
         {
         echo "<p>Role 1</p>";
         }
       else
         {
         echo '<script>document.getElementById("companyName").className += " mynewclass";</script>';
         }
   
       ?>
       ```
   
 *  Thread Starter [rapportdesign](https://wordpress.org/support/users/rapportdesign/)
 * (@rapportdesign)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/change-css-based-on-user-role/#post-3393592)
 * I’ve solved my problem now, although I’m sure there’s probably a better way to
   achieve the same results. If so, please let me know.
 * The scenario is that I have 6 check boxes on a form and depending on the role
   of a user, I want 5 of the check boxes and labels hidden.
 * The ideal solution would be to hide all of them and just pass the value assigned
   to the remaining checkbox automatically, but that’s something I’m not ready to
   tackle yet.
 * The code I’ve used is as follows…
 * First of all the PHP below detects the user role, appends a class to 5 of the
   6 check boxes and calls 5 javascript functions to hide the labels…
 *     ```
       <?php
       	global $current_user, $wpdb;
       	$role = $wpdb->prefix . 'capabilities';
       	$current_user->role = array_keys($current_user->$role);
       	$role = $current_user->role[0];
   
       	if ($role == "dawsonrentalstemperaturecontrolledsolutions") {
         	echo '<script>document.getElementById("cthermobil-mobile-kuhllager-gmbhk").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cdawson-rentals-nederland-b-v").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cmodulfroid-service").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cdawson-rentals-polska-sp-zo-o").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cdawson-rentals-ireland-ltd").className += "hideCategories";</script>';
       		echo "<script language=javascript>hideThermobilMobileKuhllagerGmbHK()</script>";
       		echo "<script language=javascript>hideDawsonRentalsNederlandBV()</script>";
       		echo "<script language=javascript>hideModulfroidService()</script>";
       		echo "<script language=javascript>hideDawsonRentalsPolskaSpzoo()</script>";
       		echo "<script language=javascript>hideDawsonRentalsIrelandLtd()</script>";
         }
       	else if ($role == "thermobilmobilekuhllagergmbhk") {
         	echo '<script>document.getElementById("cdawson-rentals-temperature-controlled-solutions").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cdawson-rentals-nederland-b-v").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cmodulfroid-service").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cdawson-rentals-polska-sp-zo-o").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cdawson-rentals-ireland-ltd").className += "hideCategories";</script>';
       		echo "<script language=javascript>hideDawsonRentalsTemperatureControlledSolutions()</script>";
       		echo "<script language=javascript>hideDawsonRentalsNederlandBV()</script>";
       		echo "<script language=javascript>hideModulfroidService()</script>";
       		echo "<script language=javascript>hideDawsonRentalsPolskaSpzoo()</script>";
       		echo "<script language=javascript>hideDawsonRentalsIrelandLtd()</script>";
         }
       	else if ($role == "dawsonrentalsnederlandbv") {
         	echo '<script>document.getElementById("cdawson-rentals-temperature-controlled-solutions").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cthermobil-mobile-kuhllager-gmbhk").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cmodulfroid-service").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cdawson-rentals-polska-sp-zo-o").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cdawson-rentals-ireland-ltd").className += "hideCategories";</script>';
       		echo "<script language=javascript>hideDawsonRentalsTemperatureControlledSolutions()</script>";
       		echo "<script language=javascript>hideThermobilMobileKuhllagerGmbHK()</script>";
       		echo "<script language=javascript>hideModulfroidService()</script>";
       		echo "<script language=javascript>hideDawsonRentalsPolskaSpzoo()</script>";
       		echo "<script language=javascript>hideDawsonRentalsIrelandLtd()</script>";
         }
       	else if ($role == "modulfroidservice") {
         	echo '<script>document.getElementById("cdawson-rentals-temperature-controlled-solutions").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cthermobil-mobile-kuhllager-gmbhk").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cdawson-rentals-nederland-b-v").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cdawson-rentals-polska-sp-zo-o").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cdawson-rentals-ireland-ltd").className += "hideCategories";</script>';
       		echo "<script language=javascript>hideDawsonRentalsTemperatureControlledSolutions()</script>";
       		echo "<script language=javascript>hideThermobilMobileKuhllagerGmbHK()</script>";
       		echo "<script language=javascript>hideDawsonRentalsNederlandBV()</script>";
       		echo "<script language=javascript>hideDawsonRentalsPolskaSpzoo()</script>";
       		echo "<script language=javascript>hideDawsonRentalsIrelandLtd()</script>";
         }
       	else if ($role == "dawsonrentalspolskaspzoo") {
         	echo '<script>document.getElementById("cdawson-rentals-temperature-controlled-solutions").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cthermobil-mobile-kuhllager-gmbhk").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cdawson-rentals-nederland-b-v").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cmodulfroid-service").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cdawson-rentals-ireland-ltd").className += "hideCategories";</script>';
       		echo "<script language=javascript>hideDawsonRentalsTemperatureControlledSolutions()</script>";
       		echo "<script language=javascript>hideThermobilMobileKuhllagerGmbHK()</script>";
       		echo "<script language=javascript>hideDawsonRentalsNederlandBV()</script>";
       		echo "<script language=javascript>hideModulfroidService()</script>";
       		echo "<script language=javascript>hideDawsonRentalsIrelandLtd()</script>";
         }
       	else if ($role == "dawsonrentalsirelandltd") {
         	echo '<script>document.getElementById("cdawson-rentals-temperature-controlled-solutions").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cthermobil-mobile-kuhllager-gmbhk").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cdawson-rentals-nederland-b-v").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cmodulfroid-service").className += "hideCategories";</script>';
       		echo '<script>document.getElementById("cdawson-rentals-polska-sp-zo-o").className += "hideCategories";</script>';
       		echo "<script language=javascript>hideDawsonRentalsTemperatureControlledSolutions()</script>";
       		echo "<script language=javascript>hideThermobilMobileKuhllagerGmbHK()</script>";
       		echo "<script language=javascript>hideDawsonRentalsNederlandBV()</script>";
       		echo "<script language=javascript>hideModulfroidService()</script>";
       		echo "<script language=javascript>hideDawsonRentalsPolskaSpzoo()</script>";
         }
   
       ?>
       ```
   
 * The Javascript functions to hide the labels are…
 *     ```
       <script>
       	function hideDawsonRentalsTemperatureControlledSolutions() {
       		jQuery('label[for="cdawson-rentals-temperature-controlled-solutions"]').hide ();
       	}
       	function hideThermobilMobileKuhllagerGmbHK() {
       		jQuery('label[for="cthermobil-mobile-kuhllager-gmbhk"]').hide ();
       	}
       	function hideDawsonRentalsNederlandBV() {
       		jQuery('label[for="cdawson-rentals-nederland-b-v"]').hide ();
       	}
       	function hideModulfroidService() {
       		jQuery('label[for="cmodulfroid-service"]').hide ();
       	}
       	function hideDawsonRentalsPolskaSpzoo() {
       		jQuery('label[for="cdawson-rentals-polska-sp-zo-o"]').hide ();
       	}
       	function hideDawsonRentalsIrelandLtd() {
       		jQuery('label[for="cdawson-rentals-ireland-ltd"]').hide ();
       	}
       </script>
       ```
   
 * The CSS used to hide the checkboxes is…
 *     ```
       .hideCategories {
       	display:none !important;
       }
       ```
   

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Change CSS based on User Role’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [role](https://wordpress.org/support/topic-tag/role/)
 * [user](https://wordpress.org/support/topic-tag/user/)

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 2 replies
 * 1 participant
 * Last reply from: [rapportdesign](https://wordpress.org/support/users/rapportdesign/)
 * Last activity: [13 years, 3 months ago](https://wordpress.org/support/topic/change-css-based-on-user-role/#post-3393592)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics