Wordpress hide any html element by css when user-role

i like to hide the booking_form_request by css when the user role is subscriber. please can you repair my code:

if( current_user_can('subscriber')) { 
   booking_form_request {
 display: none!important; 

i like to hide the booking_form_request by css when the user role is subscriber. please can you repair my code:

if( current_user_can('subscriber')) { 
   booking_form_request {
 display: none!important; 

• user-roles

Share Improve this question asked May 14, 2020 at 13:09 user188078user188078 122 bronze badges 2

• How are you embedding the form? Is it via shortcode in the backend of the website or hard coded it in a page template? – made2popular Commented May 14, 2020 at 14:33
• it's a lot easier to add the users role to the body class and then target it with CSS than it is to conditionally output CSS like that. Then you'd be able to do it all in a static CSS file – Tom J Nowell ♦ Commented Aug 29, 2023 at 10:19

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

Have you tried adding the PHP code onto the page where your form is? For example like this

<?PHP if( !current_user_can('subscriber')) { ?>
<form> 
...
</form> <?PHP } >?

This should only display the form to users that are not subscribers

The code you provided is almost correct, but you need to use the proper CSS selector for the booking_form_request element and wrap your CSS code inside the curly braces of a CSS rule. Here's the corrected code:

if ( current_user_can('subscriber') ) { 
   echo '<style>
      .booking_form_request {
         display: none !important;
      }
   </style>';
}

In the code above, we first check if the current user has the 'subscriber' role using the current_user_can() function. If they have the 'subscriber' role, we output the CSS code using the echo statement.

The CSS code targets the booking_form_request element using the CSS class selector .booking_form_request. We set its display property to none to hide it from the page. We also use the !important keyword to ensure that our CSS rule overrides any other CSS rules that may be affecting the element.

Note that you should add this code to your WordPress theme's functions.php file or a custom plugin, rather than directly to your WordPress pages or posts.