How to Build a Location Category System with Custom Colors and Icons in WordPress

Why Categories Make a Map Usable

The Problem with an Uncategorized Map

A map with twenty locations and no visual differentiation is a map that users cannot read at a glance. Every pin looks the same. Every polygon is the same color. The user has no way to quickly identify which locations belong to which group without clicking each one individually.

How Color-Coded Categories Improve Readability at a Glance

Color is the fastest visual channel available. Before a user reads a label or clicks a button, they see the color distribution on the map and form an immediate understanding of where different types of locations are concentrated.

Registering a Custom Taxonomy for Location Categories

Hierarchical vs Flat Taxonomy: Which to Use

For location categories in a map plugin, a hierarchical taxonomy is usually the right choice — it allows for parent categories like “Academic” with children like “Faculty of Arts” and “Faculty of Science.”

Linking the Taxonomy to Your Location CPT

Register the taxonomy against your location post type using register_taxonomy. Use the meta_box_cb parameter to render the standard category-style checklist instead of the tag-style input, which is more intuitive for single-category selection.

Adding RGBA Color per Category in the Admin

Why RGBA Instead of HEX

Polygon overlays on a map need transparency. A fully opaque polygon covers the map underneath it, hiding street names and other context. RGBA color values — where the fourth channel controls opacity — allow the polygon to be visually present without obscuring the map.

Integrating a Color Picker (Pickr) in the Taxonomy Form

The browser’s native color input does not support RGBA values. Pickr is a lightweight, dependency-free color picker that supports RGBA output and integrates cleanly with the WordPress admin UI. Load it only on taxonomy edit pages to avoid unnecessary asset loading elsewhere.

Saving and Retrieving Color Values Safely

Before saving, validate that the value matches either an RGBA or HEX format using a regular expression. This prevents arbitrary strings from being stored as color values, which could cause JavaScript errors when the color is applied on the frontend.

Adding an Icon per Category

Using WP Media Library for Icon Uploads

Category icons are uploaded via the WordPress Media Library. Triggering it from a taxonomy form requires enqueuing wp_enqueue_media() and initializing a wp.media instance in JavaScript. The selected attachment URL is stored in a hidden input field and saved as taxonomy meta.

Displaying the Icon in Filter Buttons and Info Box

The category icon serves two purposes on the frontend: it appears inside the category filter button alongside the category name, and it appears in the info box header when a location in that category is selected.

Applying Category Colors to Polygons and Markers Dynamically

Parsing RGBA Values in JavaScript

Leaflet’s polygon style accepts fillColor as a hex value and fillOpacity as a separate float. Since the stored color is an RGBA string, it needs to be parsed on the frontend before use. A simple regex extracts the components and converts them to the format Leaflet expects.

When to Use Hardcoded Color Overrides and When Not To

In some projects, specific categories have brand colors that must match precisely. Reserve hardcoded overrides for cases where the color is truly non-negotiable and unlikely to change. For everything else, use the taxonomy meta system so editors can update colors without touching code.

Summary and What Comes Next

A category system with RGBA colors and icons transforms a flat list of locations into a visually organized map that users can interpret immediately. Register a custom taxonomy, add a color picker to the taxonomy form, store color and icon as term meta, and parse RGBA values on the frontend before applying them to Leaflet polygon styles.

With categories in place, the next step is making individual locations interactive. The next article covers custom marker icons, WP Media Library integration, and building a responsive info box component.