Add Custom CSS

Paid Memberships Pro-generated pages can be modified in many ways, such as using a Page Builder, the Block Editor, and even using custom CSS.

This documentation page explores a few ways to customize your frontend pages using stylesheets and custom CSS.

Enqueue a Stylesheet for PMPro Customizations

If you do not want to put custom CSS modifications directly in the theme files, see this guide on how to make design customizations to your membership site using stylesheets and CSS.

This guide explains how to load a custom stylesheet via a plugin for customizations to PMPro membership site.

Add Custom CSS to Your Theme or Child Theme

We do not usually recommend making edits to your theme. Specifically, theme edits will be overwritten if you need to update the theme when a new version is released. If you are using a child theme or a completely custom theme that will not receive updates, you are safe to make style customizations directly in theme files.

1. In your theme or child theme, locate the style.css file.
2. Add custom CSS that targets frontend elements in PMPro.
3. Save changes to the file and update it in your site’s web hosting environment via SFTP or FTP.

If you are using a caching plugin or other host-enforced caching, you may need to clear your site’s cache or increment the theme version in the functions.php file for style changes to take effect.

Override the PMPro Built-In Stylesheet With Custom CSS

Using this method duplicates the frontend stylesheet bundled with PMPro and overrides it with your theme or child theme’s version. This will allow you to quickly target every existing style in PMPro.

One issue with this approach, though, is that your frontend custom CSS file will be out of sync with any changes that Paid Memberships Pro puts into the plugin-generated version of this file. You should pay attention to the changelog when a new version of PMPro is released. This can help you identify new style changes or new features that are added to the plugin’s stylesheet and need to be replicated in your CSS override.

1. Create a new folder in your active theme called paid-memberships-pro. If you are using a child theme, the folder must be created in the child theme, not the parent.
2. Create a new folder called css within the paid-memberships-pro folder you just created.
3. Copy the entire file called frontend.css from /plugins/paid-memberships-pro/css into /themes/{active theme}/paid-memberships-pro/css

You can now make any edits to this frontend CSS file. With this file in place, PMPro will only load your theme’s version of the stylesheet (we will not load the PMPro plugin version).

List of PMPro Styles: Class and ID Selectors

Below is an empty list of the most used PMPro CSS class and ID selectors that can help you target areas of the plugin’s frontend elements.

Use this blank Paid Memberships Pro stylesheet (CSS) file for an organized collection of all the PMPro class and ID selectors that you can target in your theme’s custom CSS or stylesheet. All of the necessary plugin elements have been broken down into sections, making it really simple to navigate.

How to Conditionally Load Custom Styles: For Theme Developers

If you are building PMPro support into your theme, you can use the code below to only include the Paid Memberships Pro styles if our plugin is active on the site. This code could be combined with your primary theme’s wp_enqueue_scripts function (using only lines 10 to 12) or can be placed as a separate function in the functions.php file.