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.

Cover image from ebook 29 Nuggets of Wisdom Volume 1 - Sample Collection

Download the free ebook: Get 29 insights and ‘aha moments’ for new or veteran membership site business owners. Use these nuggets of wisdom to inspire or challenge you.

Was this article helpful?