Enhanced Body Class

plugin banner

WordPress plugin to add user-related classes to body tag, allowing you to easily customize styling by role or specific user.

Author:Noah Stewart (profile at wordpress.org)
WordPress version required:4.6
WordPress version tested:6.2.5
Plugin version:1.0.6
Added to WordPress repository:20-02-2019
Last updated:21-07-2023
Rating, %:0
Rated by:0
Plugin URI:https://github.com/revnoah/wordpress-enhanced...
Total downloads:832
plugin download
Click to start download

WordPress plugin to add user-related classes to the body tag. This can be enabled on the frontend and backend of the site.
The css classes allow you to easily customize styling by role or a specific user.

Features

  • Toggle display on frontend and admin pages
  • Toggle classes for role, user name and user id
  • Template hinting to load custom theme css files for frontend and admin

Stylesheets

  • Add to theme folder (optional): enhanced-body-class-frontend.css
  • Add to theme folder (optional): enhanced-body-class-admin.css

Scripts

  • Add to theme folder (optional): enhanced-body-class-frontend.js
  • Add to theme folder (optional): enhanced-body-class-admin.js

Styles

  • .user-role-{rolename} ex: .user-role-author
  • .user-name-{username} ex: .user-name-bobdobbs
  • .user-id-{ID} ex: .user-id-1

Usage

After activating the class on the body tag, it will be up to you to use css or javascript to customize the display.

  1. Activate ‘User Role’ on ‘Admin Pages’ in plugin settings
  2. Observe classes on BODY tag by viewing the webpage source. You may need to refresh the page to see the updated class.
  3. Navigate to current theme and create file enhanced-body-class-admin.css

  4. Edit enhanced-body-class-admin.css and add the following:

    body.user-role-administrator { background-color: cyan; }

Refresh the page. You should now see a cyan background. You can now update the css to change the display of specific
page elements.

Real Usage

This plugin was developed to hide certain elements in a popular photo gallery from users with a specific role.

Create the theme file enhanced-body-class-admin.css

`

body.user-role-contributor #updategallery #gallerydiv { display: none; }
`

Create the theme file enhanced-body-class-admin.js

`

jQuery(document).ready(function($) {
$(‘body.user-role-contributor select#bulkaction option[value=”copy_to”]’).attr(‘disabled’, ‘disabled’);
});
`

About This Plugin

This plugin was created by Noah J. Stewart in response to a specific problem. In January 2019,
Noah Stewart was contacted by his father Jim Stewart regarding a WordPress photo gallery plugin
that his astronomy club was using. They were having trouble customizing a few of the role-based
options in a popular gallery plugin. Like any good graphic artist, Jim was trying to improve
the interface for the site users. The simplest approach to the problem was to use css to
selectively hide certain elements, ie. invisible content users with the author role that
should be visible to users with the administrator role.

Screenshots
FAQ
ChangeLog