Styling Gated Content with CSS: BEM Classes, Overrides, and Theming for WordPress Developers

Introduction

As a WordPress developer, building custom themes often means taking full control over every pixel on a page. When your site incorporates gated content – resources, videos, or documents requiring an access request – ensuring these elements align perfectly with your brand's design language becomes a key task. The WordPress Gatekeeper Pro plugin provides robust content restriction and access workflows, but styling its various components to match your custom theme requires a thoughtful CSS strategy.

This article will guide you through effectively styling gated content, focussing on methodologies like BEM (Block, Element, Modifier), leveraging CSS overrides, and integrating Gatekeeper Pro's elements into your theme's design system. We'll cover everything from inspecting default markup to implementing theme-specific styles, ensuring your restricted content looks as professional as the rest of your site.

Understanding Gatekeeper Pro's Markup and Integration Points

Gatekeeper Pro is designed to be highly flexible, offering several ways to integrate gated content into your theme. Each method produces specific HTML markup that you can target with CSS. Understanding these integration points is the first step towards effective styling.

• Shortcodes: Gatekeeper Pro provides shortcodes like [gatekeeper_resource_card], [gatekeeper_gate], [gatekeeper_request_form], and others. When these shortcodes render, they output pre-defined HTML with specific classes.

• Elementor Widgets: For Elementor users, dedicated widgets (Resource Card, Content Gate, Gated Video, Download Button, Request Form) render similar markup, often wrapped in Elementor's own container classes.

• PHP Template Tags and Direct Class Methods: For developers building truly custom themes, Gatekeeper Pro exposes PHP template tags (e.g., gatekeeper_pro_display_content_gate()) and direct class methods. This offers the most control, allowing you to wrap the plugin's output with your own custom HTML and classes.

Regardless of the integration method, Gatekeeper Pro aims to use consistent, semantic class names for its core components, making them easier to target and style.

The Power of BEM for Gated Content Styling

BEM (Block, Element, Modifier) is a robust CSS naming convention that helps you write maintainable and scalable stylesheets. It's particularly useful when dealing with components from plugins like Gatekeeper Pro, as it provides a clear structure for extending or overriding styles without creating conflicts.

• Block: A standalone entity that is meaningful on its own (e.g., .gk-resource-card, .gk-request-form).

• Element: A part of a block that has no standalone meaning (e.g., .gk-resource-card__title, .gk-form-field).

• Modifier: A flag on a block or an element that changes its appearance or behaviour (e.g., .gk-button--primary, .gk-resource-card--locked).

Gatekeeper Pro's internal CSS often follows a similar, component-based structure, making it a natural fit for BEM-style overrides in your custom theme.

Step-by-Step Styling Guide for Gated Content

Step 1: Inspecting Gatekeeper Pro's Default Markup and Classes

Before writing any custom CSS, it's essential to understand the HTML structure and default classes Gatekeeper Pro outputs. This is best done using your browser's developer tools.

1. Render Gated Content: Add a Gatekeeper Pro shortcode (e.g., [gatekeeper_resource_card id="123"]) or Elementor widget to a test page. Ensure the content is in a "locked" state so you can see all relevant elements like the lock overlay and request form.

2. Open Developer Tools: Right-click on the gated content element and select "Inspect" (or "Inspect Element").

3. Examine the HTML Structure: Look at the main container elements and their children. Identify the key classes Gatekeeper Pro uses. You'll typically find classes prefixed with gk-, such as:

   • .gk-resource-card: The main container for a resource card.

   • .gk-resource-card__thumbnail: The image container within a card.

   • .gk-resource-card__title: The title of the resource.

   • .gk-lock-overlay: The overlay displayed when content is locked.

   • .gk-button: General button styles for actions like "Request Access."

   • .gk-request-form: The container for the access request form.

   • .gk-form-field: Individual form field wrappers.

   • .gk-submit-btn: The submit button for the form.

4. Note Default Styles: Observe the default CSS properties applied to these elements. These are the styles you'll be overriding or extending.

Step 2: Implementing Theme-Specific CSS Overrides

The most common approach to styling plugin-generated content is to override its default CSS with your theme's styles. Place your custom CSS in your child theme's style.css file, a custom CSS plugin, or your theme's custom CSS panel.

Here are practical examples for common Gatekeeper Pro components:

Styling the Resource Card

Let's say you want your resource cards to have a specific background, border, and shadow to match your theme's aesthetic.

/* Override the main resource card container */
.gk-resource-card {
    background-color: var(--your-theme-card-bg, #ffffff); /* Use CSS variables for consistency */
    border: 1px solid var(--your-theme-border-colour, #e0e0e0);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    display: flex; /* Adjust layout if needed */
    flex-direction: column;
    overflow: hidden; /* Ensures rounded corners on children */
}

.gk-resource-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Style the title within the card */
.gk-resource-card__title {
    font-family: var(--your-theme-heading-font, "Poppins", sans-serif);
    font-size: 1.5rem;
    color: var(--your-theme-heading-colour, #333333);
    margin-bottom: 10px;
    padding: 15px; /* Add padding to content area */
}

/* Adjust the lock overlay's appearance */
.gk-resource-card__lock-overlay {
    background-color: rgba(0, 0, 0, 0.7); /* Darker overlay */
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    border-radius: 8px; /* Match card border-radius */
}

Styling the Request Form

To integrate the request form seamlessly, you'll want to match its input fields and buttons to your theme's form styles.

/* Main form container */
.gk-request-form {
    background-color: var(--your-theme-form-bg, #f9f9f9);
    border: 1px solid var(--your-theme-form-border, #e5e5e5);
    border-radius: 6px;
    padding: 25px;
    margin-top: 20px;
}

/* Individual form fields */
.gk-form-field label {
    font-weight: 500;
    color: var(--your-theme-label-colour, #555555);
    margin-bottom: 5px;
    display: block;
}

.gk-form-field input[type="text"],
.gk-form-field input[type="email"],
.gk-form-field input[type="tel"],
.gk-form-field textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--your-theme-input-border, #cccccc);
    border-radius: 4px;
    font-family: var(--your-theme-body-font, "Inter", sans-serif);
    font-size: 1rem;
    color: var(--your-theme-input-text-colour, #333333);
    background-color: var(--your-theme-input-bg, #ffffff);
    box-sizing: border-box; /* Include padding in element's total width/height */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.gk-form-field input:focus,
.gk-form-field textarea:focus {
    border-color: var(--your-theme-primary-color, #0073aa);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}

/* Submit button */
.gk-submit-btn {
    background-color: var(--your-theme-primary-color, #0073aa);
    color: #ffffff;
    padding: 12px 25px;
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
    width: auto; /* Prevent full width by default */
    margin-top: 15px;
}

.gk-submit-btn:hover {
    background-color: var(--your-theme-primary-darker, #005a87);
}

Tip: Using CSS variables (e.g., var(--your-theme-primary-color)) is an excellent practice for theme development. Define these variables once in your theme's root (:root) and reuse them throughout your stylesheets for easy colour and font management.

Step 3: Theming with Custom Markup (PHP Template Tags)

For ultimate control, leverage Gatekeeper Pro's PHP template tags or direct class methods within your custom theme templates (e.g., single-resource.php, archive-downloads.php). This allows you to wrap the plugin's output with your own HTML, giving you complete control over the surrounding structure and classes.

For example, instead of just using a shortcode, you might do this in a custom template:

<!-- In your custom single-resource.php template -->
<article id="post-<?php the_ID(); ?>" <?php post_class('my-gated-resource-wrapper'); ?>>

    <header class="my-gated-resource-wrapper__header">
        <h1 class="my-gated-resource-wrapper__title"><?php the_title(); ?></h1>
        <?php if ( has_post_thumbnail() ) : ?>
            <div class="my-gated-resource-wrapper__thumbnail">
                <?php the_post_thumbnail('medium'); ?>
            </div>
        <?php endif; ?>
    </header>

    <div class="my-gated-resource-wrapper__content">
        <?php
        // Use Gatekeeper Pro's template tag to render the content gate
        if ( function_exists( 'gatekeeper_pro_display_content_gate' ) ) {
            gatekeeper_pro_display_content_gate( get_the_ID() );
        } else {
            the_content(); // Fallback if plugin is not active
        }
        ?>
    </div>

</article>

Now, you can style .my-gated-resource-wrapper and its elements with your theme's CSS, and the Gatekeeper Pro elements rendered by gatekeeper_pro_display_content_gate() will nest inside. This provides excellent separation of concerns and prevents specificity wars.

/* Styling your custom wrapper */
.my-gated-resource-wrapper {
    max-width: 900px;
    margin: 40px auto;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.my-gated-resource-wrapper__title {
    font-size: 2.8rem;
    color: var(--your-theme-heading-colour);
    text-align: center;
    margin-bottom: 25px;
}

.my-gated-resource-wrapper__content {
    margin-top: 30px;
}

/* Styles for Gatekeeper Pro components nested within your wrapper */
.my-gated-resource-wrapper__content .gk-request-form {
    border: none; /* Override default form border if desired */
    box-shadow: none;
    background-color: transparent;
}

Step 4: Dynamic Styling Based on Gating State

Gatekeeper Pro often adds classes to elements based on their current state (e.g., locked, unlocked, approved, pending). Pay attention to these classes during inspection, as they allow for dynamic styling.

For instance, a resource card might have a class like .gk-resource-card--locked when its content is restricted. You can use this to visually differentiate:

/* Apply a desaturated look to locked resource cards */
.gk-resource-card--locked {
    opacity: 0.7;
    filter: grayscale(80%);
}

.gk-resource-card--locked .gk-resource-card__btn {
    background-color: var(--your-theme-secondary-color, #ffaa00); /* Different button colour for locked state */
}

.gk-resource-card--locked .gk-resource-card__btn:hover {
    background-color: var(--your-theme-secondary-darker, #cc8800);
}

Similarly, the main content gate element might dynamically change classes or display different child elements based on whether the user has access. Inspect these states and apply your CSS accordingly.

Step 5: Accessibility and Responsiveness

When styling gated content, always keep accessibility and responsiveness in mind:

• Colour Contrast: Ensure text and background colours meet WCAG contrast guidelines, especially for form fields and button text.

• Focus States: Provide clear visual focus indicators for interactive elements like buttons and form inputs (e.g., :focus styles).

• Keyboard Navigation: Test that all interactive elements are reachable and usable via keyboard.

• Responsive Design: Use media queries to adjust layout, font sizes, and spacing for various screen sizes. Gatekeeper Pro's components are generally responsive, but your theme's containers might require adjustments.

/* Example responsive adjustment for resource cards */
@media (max-width: 768px) {
    .gk-resource-card {
        flex-direction: column; /* Stack elements vertically on small screens */
    }

    .gk-resource-card__thumbnail {
        width: 100%;
        height: auto;
    }

    .gk-resource-card__body {
        padding: 15px;
    }
}

Conclusion

Styling gated content in your WordPress custom theme doesn't have to be a battle against plugin defaults. By understanding Gatekeeper Pro's markup, embracing methodologies like BEM, and strategically applying CSS overrides, you can achieve a perfectly integrated and branded experience.

Whether you're using shortcodes, Elementor widgets, or diving deep with PHP template tags, the principles remain the same: inspect the existing structure, leverage meaningful class names, and place your custom CSS within your child theme for maintainability. This approach ensures your restricted content not only functions flawlessly but also looks like an intentional part of your meticulously crafted WordPress website.