Templates & Styling

How Overrides Work

Local Directory uses a template resolution system that lets you override any template file from your WordPress theme without modifying the plugin itself.

When a template is loaded, the plugin checks three locations in order, using the first match it finds:

To override a template, create a local-directory folder in your child theme and copy the template file you want to customize. Maintain the same relative path for partials and email templates.

Directory Structure Example

your-child-theme/
  local-directory/
    listing-card.php          # Override the listing card
    listing-single.php        # Override the single listing page
    search-form.php           # Override the search form
    partials/
      rating-stars.php        # Override the rating stars partial
      badges.php              # Override the badges partial
    emails/
      listing-approved.php    # Override the approval email

Customizing the Template Path

If you need to change the directory name or resolution logic entirely, use the ld_template_path filter:

// Change the theme override folder name
add_filter( 'ld_template_path', function( $path, $template ) {
    // Look in "my-directory/" instead of "local-directory/"
    $custom = get_stylesheet_directory() . '/my-directory/' . $template;

    if ( file_exists( $custom ) ) {
        return $custom;
    }

    return $path;
}, 10, 2 );

Template List

All template files that can be overridden are listed below, organized by type. Each template receives contextual variables relevant to its purpose.

Main Templates (13 files)

Partials (9 files)

Reusable template fragments included by main templates. Override path: partials/{filename}.php

Email Templates (10 files)

HTML email templates sent for various events. Override path: emails/{filename}.php

CSS Custom Properties

Local Directory exposes a comprehensive set of CSS custom properties (also called CSS variables) on the :root element. These are reusable values you define once and use throughout your styles — change the value in one place, and it updates everywhere. Override any of them in your theme's stylesheet to customize the look and feel without touching template files.

Colors (19 properties)

Border Radius

Shadows

Transitions

Typography

Spacing

Focus

Quick Override Example

Add this to your theme's style.css or the WordPress Customizer's Additional CSS to change the primary color to green:

/* Switch the directory to a green color scheme */
:root {
    --ld-primary:       #059669;
    --ld-primary-hover: #047857;
    --ld-primary-light: #d1fae5;
    --ld-focus-ring:    0 0 0 3px rgba(5, 150, 105, 0.3);
}

BEM Class Naming

All CSS classes in Local Directory follow the BEM (Block Element Modifier) convention with an ld- namespace prefix. BEM is a naming system for CSS classes that makes them predictable and easy to customize — for example, .ld-listing is a block, .ld-listing__title is an element within it, and .ld-listing--featured is a modified variant. The ld- prefix avoids conflicts with your theme and other plugins.

ld-{block}__{element}--{modifier}

Block     — A standalone component (e.g., ld-directory, ld-listing-card)
Element   — A part of a block (e.g., ld-listing-card__badges)
Modifier  — A variant or state (e.g., ld-listing-card--featured)

Examples by Component

Directory

Listing Card

Search

Targeting Styles

Because all classes are namespaced with ld-, you can safely write selectors without worrying about theme conflicts:

/* Make featured listing cards stand out */
.ld-listing-card--featured {
    border-color: var(--ld-accent);
    box-shadow: var(--ld-shadow-hover);
}

/* Custom horizontal search layout */
.ld-search--horizontal .ld-search__form {
    display: flex;
    gap: var(--ld-gap);
    align-items: center;
}

/* Larger directory view toggle buttons */
.ld-directory__view-btn {
    padding: 0.5rem 1rem;
    border-radius: var(--ld-radius-sm);
}
.ld-directory__view-btn--active {
    background: var(--ld-primary);
    color: #fff;
}

RTL Support

All templates use CSS logical properties (margin-inline-start, padding-inline-end, border-inline-start, etc.) instead of directional properties. This means the plugin renders correctly in both LTR and RTL languages without any additional stylesheets or overrides. When writing custom CSS for template overrides, follow the same convention to maintain RTL compatibility.

/* Use logical properties for RTL compatibility */
.ld-listing-card__badges {
    /* Good */
    margin-inline-start: auto;
    padding-inline-end: 0.5rem;

    /* Avoid */
    /* margin-left: auto;   */
    /* padding-right: 0.5rem; */
}