Add Your WordPress Theme’s Styles to Frontend Member Pages

Your site’s WordPress theme controls the appearance of every frontend page in your membership site. This guide for theme authors and developers demonstrates how to use the pmpro_element_class filter to apply custom theme styles to frontend membership components.

About the Filter: pmpro_element_class

Paid Memberships Pro includes the pmpro_element_class filter hook that theme authors and plugin developers can use to dynamically add CSS selectors to frontend pages of Paid Memberships Pro. We modeled this hook after the similar core WordPress filters for adding custom CSS names such as body_class or post_class. It should also note that this is the preferred way of customizing plugin pages when possible without needed to create and manage a custom template.

The filter has two parameters:

• $class: An array of the default CSS names for this element.
• $element: A string that uniquely identifies the element to return class names for. This is most often the ID or a more unique and specific CSS selector name used to target the element in custom code.

For example, this recipe replaces the CSS selector for all buttons on frontend pages with just the selector ‘button’. This means that the core PMPro’s frontend.css styles for the CSS name pmpro_btn will not load on your site.

---

Code Demos of the pmpro_element_class Hook

Listed below are links to other articles the demonstrate how to use this hook with popular WordPress themes and theme frameworks.

• Using the Zakra Theme By ThemeGrill with Paid Memberships Pro
• Using the Storefront Theme By Automattic with Paid Memberships Pro
• Using the OceanWP Theme with Paid Memberships Pro
• Using the Neve Theme by Themeisle with Paid Memberships Pro
• Using the Hestia Theme by Themeisle with Paid Memberships Pro
• Using the Astra Theme by Brainstorm Force with Paid Memberships Pro
• Using the Sydney Theme by aThemes with Paid Memberships Pro
• Using the GeneratePress Theme by Tom with Paid Memberships Pro
• Using the Customify Theme by PressMaximum with Paid Memberships Pro
• Using the ColorMag Theme by ThemeGrill with Paid Memberships Pro
• Using the Go Theme by GoDaddy with Paid Memberships Pro