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

Noah J. Stewart

<p>WordPress plugin to add user-related classes to the body tag. This can be enabled on the frontend and backend of the site.<br />
The css classes allow you to easily customize styling by role or a specific user.</p>
<h3>Features</h3>
<ul>
<li>Toggle display on frontend and admin pages</li>
<li>Toggle classes for role, user name and user id</li>
<li>Template hinting to load custom theme css files for frontend and admin</li>
</ul>
<h3>Stylesheets</h3>
<ul>
<li>Add to theme folder (optional): enhanced-body-class-frontend.css </li>
<li>Add to theme folder (optional): enhanced-body-class-admin.css</li>
</ul>
<h3>Scripts</h3>
<ul>
<li>Add to theme folder (optional): enhanced-body-class-frontend.js </li>
<li>Add to theme folder (optional): enhanced-body-class-admin.js</li>
</ul>
<h3>Styles</h3>
<ul>
<li>.user-role-{rolename} ex: .user-role-author</li>
<li>.user-name-{username} ex: .user-name-bobdobbs</li>
<li>.user-id-{ID} ex: .user-id-1</li>
</ul>
<h3>Usage</h3>
<p>After activating the class on the body tag, it will be up to you to use css or javascript to customize the display.</p>
<ol>
<li>Activate ‘User Role’ on ‘Admin Pages’ in plugin settings</li>
<li>Observe classes on BODY tag by viewing the webpage source. You may need to refresh the page to see the updated class.</li>
<li>Navigate to current theme and create file <code>enhanced-body-class-admin.css</code></li>
<li>
<p>Edit <code>enhanced-body-class-admin.css</code> and add the following:</p>
<p>body.user-role-administrator { background-color: cyan; }</p>
</li>
</ol>
<p>Refresh the page. You should now see a cyan background. You can now update the css to change the display of specific<br />
page elements.</p>
<h3>Real Usage</h3>
<p>This plugin was developed to hide certain elements in a popular photo gallery from users with a specific role.</p>
<p>Create the theme file <code>enhanced-body-class-admin.css</code></p>
<pre><code>`
</code></pre>
<p>body.user-role-contributor #updategallery #gallerydiv { display: none; }<br />
    `</p>
<p>Create the theme file <code>enhanced-body-class-admin.js</code></p>
<pre><code>`
</code></pre>
<p>jQuery(document).ready(function($) {<br />
    $(‘body.user-role-contributor select#bulkaction option[value=”copy_to”]’).attr(‘disabled’, ‘disabled’);<br />
});<br />
    `</p>
<h3>About This Plugin</h3>
<p>This plugin was created by Noah J. Stewart in response to a specific problem. In January 2019,<br />
Noah Stewart was contacted by his father Jim Stewart regarding a WordPress photo gallery plugin<br />
that his astronomy club was using. They were having trouble customizing a few of the role-based<br />
options in a popular gallery plugin. Like any good graphic artist, Jim was trying to improve<br />
the interface for the site users. The simplest approach to the problem was to use css to<br />
selectively hide certain elements, ie. invisible content users with the <strong>author</strong> role that<br />
should be visible to users with the <strong>administrator</strong> role.</p>


Alternatives to Enhanced Body Class

Top alternatives