Frontend Features is Available in PublishPress Capabilities
This week, we launched a new feature that will be useful for almost everyone who builds WordPress sites. PublishPress Capabilities 2.9 introduces a new “Frontend Features” screen.
Frontend Features allows you to hide any CSS element or add new CSS.
What's unique about this feature is that you can target it to specific groups of users. You can hide or add CSS for any user role. You can also do this for all logged-in users or all logged-out users.
The Frontend Features screen is available in both the Free and Pro versions of PublishPress Capabilities.
How to Use Frontend Features
- To get started, go to “Capabilities” and then “Frontend Features” in your WordPress admin menu.
- In the top-left corner, choose the role that you want to modify. In the screenshot below, we're using the “Subscriber” role.
You will now have three boxes to fill in:
- Title: This is for your own reference. It is the internal name for your code change.
- Features: You can choose “Hide IDs or Classes”, “Add Custom CSS”, or “Add Body Class”. Follow the instructions and enter the CSS into the box. In the screenshot below, we are aiming to hide the .sitefooter for all users in the Subscriber role.
- Load on page types: In the Free version, the default is to apply this feature for the whole site. In the Pro version, you can choose to hide the feature on specific posts and pages.
After making your changes, you can use the User Testing option in PublishPress Capabilities to see if your changes are accurate.
An Example With Frontend Features
Here's an example of how Frontend Features can help you make quick and safe changes to your site. I created a site with the Astra theme and one of their starter templates. My goal is to hide the blue button in the menu area, but only when users are logged in to the site.
My first step is to find the CSS to hide. This does require some CSS experience to do accurately. Using the inspect tools in a browser, I click on the button and can find the right elements.
The next step is to enter the CSS element into “Frontend Features”. In the screenshot below, I've chosen “Logged In Users” in the top left corner. I've also entered the CSS element into the “Features” box.
Finally, I can test the front of the site as a logged in user. The menu button is now hidden:
Frontend Features in Capabilities Pro
In the Pro version of PublishPress Capabilities, you will be able to click the “Selected Pages” button. This allows you access to two extra options:
- Load on page types: You can choose to implement your CSS changes only on specific page types such as “Homepage” or “Single Pages”.
- Add post metabox: You can load a metabox which allows CSS changes to be loaded only on individual posts.
This screenshot below shows how the metabox will appear in the editing screen for individual posts:
