Update css based on users role.

You guys helped me with something similar recently so figured it was possible :slight_smile:
I don't need my users to change their passwords in admin so I hide the password boxes with this:

tr#password.user-pass1-wrap {
    display: none;
}

and I do the same with the 2nd password box.

However, I would like the super admin to be able to see those boxes.

<?php if ( is_super_admin() )
echo ' my updated css';
?>

To change my css to something like:

tr#password.user-pass1-wrap {
    display: block;
}

I saw in another thread where you guys used jquery to select part of the html and add a inline style.

Does that make sense? Possible? Or anyway that I can hide the 2 password boxes so only displayed to super admins.

thanks!!

  • Vinod Dalvi

    Hi @George,

    I hope you are well today and thank you for your question.

    You can develop PHP code to hide some fields from non admin users by checking the user role using functions like is_super_admin and then depending on the user role add the CSS or jQuery code to hide the fields.

    You are doing it correctly so are you facing any issue achieving it?

    Please advise.

    Also to see the custom fields that you want to hide, Would you mind if I logged in to your site and did some testing? This might help get to the bottom of this faster. If this is ok, just grant me temporary admin access to your site by clicking "Grant Access" button in the WPMU DEV Dashboard Settings as described on the following page and reply on this thread after granting it?

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Kind Regards,
    Vinod Dalvi

  • Vinod Dalvi

    Hi @George,

    You can hide those profile fields from all users except Super Admin user by adding the following code in the functions.php file of your child theme or by using the attached small plugin that contains this code.

    function add_custom_styles(){
    	if ( ! is_super_admin()) {	 ?>
    	<style type="text/css">
    		body.profile-php .user-pass1-wrap,
    		body.profile-php .user-pass2-wrap{
    			display: none !important;
    		}
    	</style>
    <?php }
    }
    add_action('admin_head', 'add_custom_styles');

    Best Regards,
    Vinod Dalvi

  • George

    I have a question about how you find the css path to use in this function?
    So I look on the profile page & use the code inspector in firefox to find the css applied to the password table row which is easy to see for ".user-pass1-wrap" but I don't see how you got the "body.profile-php" of this:
    body.profile-php .user-pass1-wrap

    If I copy the complete css path I get this:
    html.wp-toolbar body.wp-admin.wp-core-ui.js.jetpack-connected.user-edit-php.auto-fold.admin-bar.branch-4-2.version-4-2-4.admin-color-fresh.locale-en-us.multisite.customize-support.svg div#wpwrap div#wpcontent div#wpbody div#wpbody-content div#profile-page.wrap form#your-profile table.form-table tbody tr#password.user-pass1-wrap

    If I just added display:none for "tr#password.user-pass1-wrap" would that also work the same as what you provided or do you need the body.profile-php ?
    If so, how do find the correct css path should I want to hide other elements in other admin pages?

    Wasn't sure where you got the body.profile-php from...
    thanks!!!

  • Vinod Dalvi

    Hi @George,

    I have a question about how you find the css path to use in this function?
    So I look on the profile page & use the code inspector in firefox to find the css applied to the password table row which is easy to see for ".user-pass1-wrap" but I don't see how you got the "body.profile-php" of this:
    body.profile-php .user-pass1-wrap

    I found the selector body.profile-php using the browser inspector as shown in the attached screenshot.

    If I just added display:none for "tr#password.user-pass1-wrap" would that also work the same as what you provided or do you need the body.profile-php ?

    Yes it would work but i added the extra selector for safety so that only the password fields in the user profile page gets affected by it and not the password field having same class or is on the other pages.

    If so, how do find the correct css path should I want to hide other elements in other admin pages?

    You can do the same as described above to find CSS selector.

    Cheers,
    Vinod Dalvi

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.