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.

Frontend Features menu link

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.

Frontend Features screen

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.

Frontend Features element to hide

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.

Frontend Features find CSS

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.

Frontend Features created

Finally, I can test the front of the site as a logged in user. The menu button is now hidden:

Frontend Features element 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.
Frontend Features in Capabilities Pro

This screenshot below shows how the metabox will appear in the editing screen for individual posts:

Frontend Features metabox
  • Steve Burge

    Steve is the founder of PublishPress. He's been working with open source software for over 20 years. Originally from the UK, he now lives in Sarasota in the USA. This profile is generated by the PublishPress Authors plugin.

    View all posts

Leave a Reply

Your email address will not be published. Required fields are marked *