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 guide covers several ways to add custom CSS to PMPro pages. Choose the method that fits your site setup and experience.

What is CSS?

CSS (Cascading Style Sheets) is a language used to control the appearance of HTML elements on a web page. It lets you change colors, fonts, spacing, and layout. If you want to learn more, see the MDN CSS Guide.

Methods to Add Custom CSS

Add Custom CSS in a Child Theme

When to use: Best for developers, advanced users, or those using a custom theme. This method keeps your changes organized and safe from theme updates.

• Locate or create a child theme for your site.
• Open or create the style.css file in your child theme folder.
• Add your custom CSS to this file.
• Save your changes and upload the file to your site (via SFTP or FTP if needed).
• If your site uses caching, clear the cache or increment the theme version in functions.php to ensure your new styles appear.

Add Custom CSS via Customizer or Block Theme Site Editor

When to use: Recommended for non-technical users or for making quick, simple changes.

For Classic and Hybrid Themes (Customizer):

• Navigate to Appearance > Customize > Additional CSS in the WordPress admin.
• Paste your custom CSS into the box. The preview updates live.
• Click Save Changes.

For Block Themes (Site Editor):

• Navigate to Appearance > Editor in the WordPress admin or click “Edit Site” from the toolbar.
• Click the preview to open the editor.
• Click the Styles icon (top right).
• Open the More menu (⋮) and select Additional CSS.
• Add your CSS and click Save.

Add Custom CSS via a Customizations Plugin

When to use: Ideal for keeping CSS changes organized, portable, and safe from theme or core updates. Recommended for sites with frequent or advanced customizations.

If you do not want to put custom CSS directly into your child theme’s style.css file, you can instead load a custom stylesheet in a customizations plugin. This approach keeps all of your your PMPro-related customizations in a single folder. Your developers and our support team will know exactly where the custom code is located as it relates to your Paid Memberships Pro setup.

Learn how to implement this method in our guide on how to add a stylesheet to your PMPro Customizations plugin.

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.