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.

Banner for Add Your WordPress Theme's Custom CSS Styles to Frontend Pages in PMPro

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.

Was this article helpful?