---
title: Add Custom CSS
description: "This guide will show you how to use the \"Add Custom CSS\" option in the “Frontend Features” screen in the [PublishPress Capabilities](https://publishpress.com/links/capabilities) plugin. This feature allows you to modify your site's frontend by adding specific CSS. --- ## How to…"
url: "https://publishpress.com/knowledge-base/add-custom-css/"
updated: "2026-10-14"
category: PublishPress Capabilities / Frontend Features
---

# Add Custom CSS

This guide will show you how to use the "Add Custom CSS" option in the “Frontend Features” screen in the [PublishPress Capabilities](https://publishpress.com/links/capabilities) plugin. This feature allows you to modify your site's frontend by adding specific CSS.

---

## How to Add Custom CSS

- **Title**: This is for your own reference. It is the internal name for your code change.
- **Features**: Choose "Add Custom CSS". Enter the CSS into the box. In the screenshot below, we are aiming to add a background color. for images
- **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.
- Click the "Add New" button.

![Add Custom CSS feature in PublishPress Capabilities](https://publishpress.com/wp-content/uploads/2023/07/frontend-features-1024x763.png)

- Click the "Save Changes" button.

![Enable Add Custom CSS feature](https://publishpress.com/wp-content/uploads/2023/07/save-frontend-features-1024x267.png)

- After making your changes, you can use the [User Testing](https://publishpress.com/links/user-testing) option in [PublishPress Capabilities](https://publishpress.com/links/capabilities). You can test a "Subscriber" user to see if the CSS is correctly added.

---

## 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 a theme and a starter template. My goal is to add a background color to paragraphs, but only when users are logged in to the site.

![Example of Add Custom CSS in Publishpress Capabilities.](https://publishpress.com/wp-content/uploads/2023/08/paragraph-frontend-1024x413.png)

- Go to "Capabilities" and then "Frontend Features" in the WordPress admin menu.
- In the screenshot below, I've chosen "Logged In Users" in the top left corner.
- I've also selected "Add Custom CSS" and entered the CSS element into the "Features" box.
- Click "Add New" and then "Save Changes".

![Add Custom CSS in PublishPress Capabilities](https://publishpress.com/wp-content/uploads/2023/08/add-custom-css-entry-1024x740.png)

Now, I can test the front of the site as a logged in user. The paragraphs have a custom background color, but only for logged in users.

![Background color added with PublishPress Capabilities](https://publishpress.com/wp-content/uploads/2023/08/paragraph-frontend-result-1024x399.png)

---

## Features in the Pro version of PublishPress Capabilities

In the Pro version of [PublishPress Capabilities](https://publishpress.com/links/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.

![](https://publishpress.com/wp-content/uploads/2023/07/pro-features-frontend-1024x270.png)

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

![Frontend Features metabox](https://publishpress.com/wp-content/uploads/2023/08/frontend-metabox-css.png)