wpgmp_css_rules

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.