Hook Category: html/css

The wpgmp_css_rules hook in WP Maps Pro allows developers to customize CSS rules dynamically when a map is displayed. It is particularly useful for tailoring styles to match specific map instances or themes.

Usage

Developers can implement this hook in their theme’s functions.php file or a custom plugin. It is triggered when the map is rendered, allowing for the injection of custom CSS rules. Be sure to properly validate and sanitize any data used within the hook to prevent potential security vulnerabilities.

Example 1

Adding a border to all maps.

add_filter( 'wpgmp_css_rules', 'add_border_to_maps', 10, 3 );
function add_border_to_maps( $css_rules, $map_id, $secondary_color ) {
    $css_rules .= "#map{$map_id} { border: 2px solid #000; }";
    return $css_rules;
}

Example 2

Changing the background color based on the secondary color parameter.

add_filter( 'wpgmp_css_rules', 'change_map_background', 10, 3 );
function change_map_background( $css_rules, $map_id, $secondary_color ) {
    $css_rules .= "#map{$map_id} { background-color: {$secondary_color}; }";
    return $css_rules;
}

Example 3

Customizing the map’s font size for a specific map ID.

add_filter( 'wpgmp_css_rules', 'custom_font_size_for_map', 10, 3 );
function custom_font_size_for_map( $css_rules, $map_id, $secondary_color ) {
    if ( $map_id == 10 ) {
        $css_rules .= "#map{$map_id} .map-content { font-size: 14px; }";
    }
    return $css_rules;
}

Always ensure that the CSS rules are properly tested across different browsers and devices to maintain consistent map appearance. Additionally, avoid hardcoding sensitive data directly into CSS rules.

The wpgmp_container_css_class hook in WP Maps Pro allows developers to customize the CSS class of the map container dynamically. This hook is triggered when the map is being rendered, providing an opportunity to modify the container’s HTML class attribute.

Usage

Developers can implement this hook in their theme’s functions.php file or in a custom plugin. It is useful when you need to add specific styling or JavaScript targeting to map containers based on different conditions or attributes.

Example 1

Use this hook to add a unique CSS class to the map container based on the map ID.

add_filter( 'wpgmp_container_css_class', function( $classes, $map ) {
    $classes .= ' custom-map-class-' . $map->map_id;
    return $classes;
}, 10, 2 );

Example 2

Add a conditional class to the map container if the map has a specific attribute, such as a certain zoom level.

add_filter( 'wpgmp_container_css_class', function( $classes, $map ) {
    if ( $map->zoom_level > 10 ) {
        $classes .= ' high-zoom-level';
    }
    return $classes;
}, 10, 2 );

Example 3

Append a class to all map containers for further customization or tracking purposes.

add_filter( 'wpgmp_container_css_class', function( $classes, $map ) {
    $classes .= ' global-map-class';
    return $classes;
}, 10, 2 );

Tip: Always ensure that the classes you add do not conflict with existing styles and consider using unique prefixes for custom classes to avoid potential clashes with other plugins or themes.

This hook allows developers to inject custom HTML or functionality directly before the map container in the WP Maps Pro plugin. It is triggered just before the map container is rendered, enabling customization of the map’s surrounding HTML.

Usage

Developers can implement this hook in their theme’s functions.php file or in a custom plugin. It is useful for adding annotations, custom styles, or additional controls above the map. Make sure to use this hook responsibly to maintain the integrity and performance of the map display.

Example 1

Adding a custom header above the map for branding purposes.

add_action('wpgmp_before_container', function($map) {
    echo '<div class="custom-map-header">Welcome to Our Custom Map!</div>';
}, 10, 1);

Example 2

Injecting a custom style block to modify the appearance of elements around the map.

add_action('wpgmp_before_container', function($map) {
    echo '<style>.map-container { border: 2px solid #333; }</style>';
}, 10, 1);

Example 3

Displaying dynamic content, such as a data-driven message or status based on map settings.

add_action('wpgmp_before_container', function($map) {
    if ($map->settings['show_status']) {
        echo '<div class="map-status">Map is currently set to display all markers.</div>';
    }
}, 10, 1);

Tip: Always validate and sanitize any data output through this hook to prevent security vulnerabilities such as XSS (Cross-Site Scripting). Use WordPress functions like esc_html() or esc_attr() where appropriate.

This hook allows developers to add a custom CSS class to the listing container in the WP Maps Pro plugin. It is triggered when the listing container is being generated, enabling runtime customization.

Usage

Developers can implement this hook in their theme’s functions.php file or a custom plugin. It is useful for dynamically altering the appearance of map listings by injecting specific CSS classes based on certain conditions or preferences.

Example 1

Add a custom class to all map listings to apply uniform styling.

add_filter('wpgmp_listing_css_class', function($class, $map) {
    $class .= ' custom-map-listing-class';
    return $class;
}, 10, 2);

Example 2

Apply a different CSS class based on a specific map ID.

add_filter('wpgmp_listing_css_class', function($class, $map) {
    if($map->ID == 123) {
        $class .= ' special-map-class';
    }
    return $class;
}, 10, 2);

Example 3

Append multiple classes conditionally to enhance styling flexibility.

add_filter('wpgmp_listing_css_class', function($class, $map) {
    $class .= ' base-class';
    if($map->type == 'satellite') {
        $class .= ' satellite-view';
    }
    if($map->zoom > 10) {
        $class .= ' high-zoom';
    }
    return $class;
}, 10, 2);

Always ensure that the added class names are unique and do not conflict with existing styles to maintain consistent display and avoid unintended results.

The ‘wpgmp_before_listing’ hook in the WP Maps Pro plugin allows developers to insert custom HTML before the listing container. This hook is triggered just before the map listing is rendered, providing an opportunity to modify or add content dynamically.

Usage

Developers can implement this hook in their theme’s functions.php file or within a custom plugin. It’s essential to ensure that any HTML inserted is correctly formatted and sanitized to prevent security vulnerabilities, such as XSS (Cross-Site Scripting).

Example 1

Adding a custom message before the listing.

add_action('wpgmp_before_listing', 'add_custom_message_before_listing', 10, 2);

function add_custom_message_before_listing($html, $map) {
    echo '<p>Welcome to our map listings!</p>';
}

Example 2

Inserting a search form before the listing for better user navigation.

add_action('wpgmp_before_listing', 'insert_search_form_before_listing', 10, 2);

function insert_search_form_before_listing($html, $map) {
    echo '<form method="get" action="">
            <input type="text" name="search" placeholder="Search Listings">
            <button type="submit">Search</button>
          </form>';
}

Example 3

Displaying map-related information dynamically before the listing.

add_action('wpgmp_before_listing', 'display_map_info', 10, 2);

function display_map_info($html, $map) {
    echo '<div class="map-info">
            <p>Map ID: ' . esc_html($map->id) . '</p>
            <p>Map Name: ' . esc_html($map->name) . '</p>
          </div>';
}

Tip: Always remember to validate and sanitize any user input or dynamic data to protect against potential security threats.

This hook is used in the WP Maps Pro plugin to allow developers to customize or append additional HTML content immediately after the listing container of a map. It is triggered after the map listings have been rendered, providing an opportunity to modify or enhance the output.

Usage

Developers can implement this hook in their WordPress themes or plugins by adding a callback function to it. This hook is particularly useful for adding custom information, advertisements, or other content after the map listings are displayed. It accepts two parameters: an empty string (reserved for potential future use) and the map object.

Example 1

This example demonstrates how to append a custom message after the map listing.

add_action('wpgmp_after_listing', 'append_custom_message', 10, 2);

function append_custom_message($html, $map) {
    echo '<div class="custom-message">Thank you for viewing our listings!</div>';
}

Example 2

In this example, additional navigation links are added after the map listing to enhance user interaction.

add_action('wpgmp_after_listing', 'add_navigation_links', 10, 2);

function add_navigation_links($html, $map) {
    echo '<div class="navigation-links">';
    echo '<a href="#previous">Previous</a> | <a href="#next">Next</a>';
    echo '</div>';
}

Example 3

This example shows how to integrate a social media sharing widget after the listings for increased engagement.

add_action('wpgmp_after_listing', 'add_social_media_widget', 10, 2);

function add_social_media_widget($html, $map) {
    echo '<div class="social-media-widget">';
    echo '<a href="https://facebook.com/share">Share on Facebook</a>';
    echo '<a href="https://twitter.com/share">Share on Twitter</a>';
    echo '</div>';
}

Tip: Always sanitize and validate any dynamic data you are outputting to ensure security and maintain the integrity of the website.

This hook in the WP Maps Pro plugin allows developers to modify the CSS class of the pagination container at runtime. It is useful for customizing the appearance of pagination elements in map displays.

Usage

Developers can implement this hook within their theme’s functions.php file or a custom plugin. It provides the flexibility to add, remove, or modify CSS classes for the pagination container, enabling a consistent look and feel across different themes or specific styling needs.

Example 1

Adding a custom class to the pagination container to apply specific styles.

add_filter('wpgmp_pagination_css_class', function($class, $map) {
    return $class . ' my-custom-pagination-class';
}, 10, 2);

Example 2

Conditionally adding a class based on a map ID to target specific maps only.

add_filter('wpgmp_pagination_css_class', function($class, $map) {
    if ($map->ID == 42) {
        return $class . ' special-map-pagination';
    }
    return $class;
}, 10, 2);

Example 3

Replacing the default class entirely to enforce a uniform style across all maps.

add_filter('wpgmp_pagination_css_class', function($class, $map) {
    return 'uniform-pagination';
}, 10, 2);

Tip: Always ensure that your custom classes do not conflict with existing styles, and test changes across different devices and browsers to maintain a consistent user experience.

This hook allows developers to insert custom HTML after the map container in the WP Maps Pro plugin. It is triggered after the map container is rendered, providing an opportunity to add additional content or functionality.

Usage

Developers can implement this hook in their theme’s functions.php file or in a custom plugin. It is particularly useful for adding custom messages, forms, or other elements directly after the map. When using this hook, ensure that the HTML added is well-formed and secure.

Example 1

Add a custom message after the map.

add_action('wpgmp_after_container', 'add_custom_message_after_map', 10, 2);

function add_custom_message_after_map($unused, $map) {
    echo '<div class="custom-message">Explore more with our interactive map!</div>';
}

Example 2

Insert a subscription form after the map.

add_action('wpgmp_after_container', 'add_subscription_form_after_map', 10, 2);

function add_subscription_form_after_map($unused, $map) {
    echo '<form action="#" method="post" class="subscription-form">
            <label for="email">Subscribe for updates:</label>
            <input type="email" id="email" name="email" required>
            <button type="submit">Subscribe</button>
          </form>';
}

Example 3

Display a promotional banner after the map.

add_action('wpgmp_after_container', 'add_promotional_banner_after_map', 10, 2);

function add_promotional_banner_after_map($unused, $map) {
    echo '<div class="promo-banner">Get a discount on our premium maps with code MAPS20!</div>';
}

Tip: Always sanitize and validate any user input or external data your code handles to ensure security and prevent vulnerabilities.

This hook allows developers to customize the HTML output of a marker image in the WP Maps Pro plugin. It is triggered when the marker image is being rendered, enabling modifications to its HTML structure before display.

Usage

Developers can implement this hook in their theme’s functions.php file or via a custom plugin to alter the marker image HTML dynamically. This is particularly useful for adding custom attributes or wrappers around the marker image.

Example 1

Modify the marker image HTML to include a custom CSS class for styling purposes.

add_filter('wpgmp_marker_image_markup', function($marker_image, $location, $map_id) {
return '
<div class="custom-marker-class">' . $marker_image . '</div>
';
}, 10, 3);

Example 2

Change the marker image HTML to include a data attribute with the location ID for JavaScript interactions.

add_filter('wpgmp_marker_image_markup', function($marker_image, $location, $map_id) {
return '<img src="' . $marker_image . '" data-location-id="' . $location['id'] . '" />';
}, 10, 3);

Example 3

Wrap the marker image in a link that points to a specific URL derived from the location data.

add_filter('wpgmp_marker_image_markup', function($marker_image, $location, $map_id) {
$url = 'https://example.com/location/' . $location['slug'];
return '<a href="' . esc_url($url) . '">' . $marker_image . '</a>';
}, 10, 3);

Tip: Always sanitize and validate any data being output to ensure security and prevent XSS vulnerabilities.