Add or Remove a CSS Selector from Memberlite Defaults

Memberlite comes with built-in default CSS selectors—also known as “class” names—that control how theme elements are styled by Customizer color and typography settings. These selectors dictate which parts of your site are affected by global theme options like Primary Background Color, Header Font, and more.

This code recipe demonstrates how to modify those defaults using the memberlite_defaults filter, allowing you to add or remove specific CSS selectors to better match your custom layout or child theme styles.

About the Code Recipe

This recipe demonstrates how to hook into the memberlite_defaults filter to customize the global theme styling selectors.

How It Works

• The memberlite_defaults filter returns an array of default values used throughout the Memberlite theme.
• You can overwrite individual array keys such as color_primary_background_elements by redefining their values in your filter function.
• In this example, we replace the default value with a custom list of selectors.

Compatibility Notes

• This code recipe works with all versions of Memberlite that use the memberlite_defaults filter.
• Ideal for use with child themes or as part of a theme customization plugin.
• If you use this recipe and Memberlite core later adds new selectors, you must keep your code up to date.

Use Case Scenarios

There are several practical reasons you may want to customize the CSS selector defaults in Memberlite:

• Removing Selectors: You want to prevent specific elements (like .masthead or .btn_primary) from inheriting customizer-defined colors or typography.
• Adding Selectors: You have custom classes or third-party plugin elements that should match your Memberlite theme settings.
• Child Theme Styling: You are building a child theme and want more granular control over what is styled by global theme options.
• Streamlining Appearance: You want to reduce visual clutter by narrowing which elements reflect your theme’s primary styles.

The Code Recipe

Adding the Recipe to Your Website

You can add this recipe to your site by creating a custom plugin or using the Code Snippets plugin available for free in the WordPress repository. Read this companion article for step-by-step directions on either method.

Customizations

• To remove a selector, simply omit it from the returned string (e.g., remove .masthead).
• To add new selectors, append them using a comma: , .my-custom-class.
• You can modify other keys in the $memberlite_defaults array as well, such as:
  • color_primary_color_elements
  • color_site_navigation_elements

Refer to the Memberlite defaults file on GitHub for the full list of options.