How to Sort Your WordPress Website’s Products by Color

by | March 12, 2023 | CSS, PHP, Website Development

This page may contain affiliate links to recommended products or services. If you choose to purchase after clicking a link, I may receive a commission at no additional cost to you.

Wouldn’t it be really awesome if customers could view the products on your WordPress website that come in a specific color? It’d be great to have a color wheel for them to choose any color in the rainbow and all products within a range of the chosen color would return as the results. Well… you can’t do that because Color is not a straight-line spectrum. Meaning, you can’t use the distance formula of a line to find the relative closeness between color-1 and color-2. In my opinion, the best way to sort your online store’s products by color is to manually assign a color to each product and return a result set based on those available color values.

Here’s an outline of the basic steps to create a sort-by-color widget for the products on your WordPress website:

  • Create a new category taxonomy called “Colors”
  • Assign Color value(s) to each product
  • Build a color-based UI for searching
  • Return a matching set of results

Create a Color Category

If you’re going to sort products by colors you’ll need a way to tag or categorize the products with a color value. I recommend using a category-style taxonomy as opposed to a tag-style taxonomy because it will safe-guard your data from color typos — as in, you’ll not afford yourself an opportunity to screw up colors in the future.

Here’s a snippet of code to create a new category called Color which will apply to all posts of type Product. Of course, you could apply it to different types of posts if your WordPress site isn’t using a custom-post-type of product. You’ll want to add this to your WordPress theme’s functions.php file, create a simple plugin to make it more portable, or recreate the category using an existing plugin that allows you to create custom post types and categories. How you add the new Color category isn’t important, as long as it works.

function add_color_category_to_product() {
    $labels = array(
        'name'              => 'Colors',
        'singular_name'     => 'Color',
        'search_items'      => 'Search Colors',
        'all_items'         => 'All Colors',
        'parent_item'       => 'Parent Color',
        'parent_item_colon' => 'Parent Color:',
        'edit_item'         => 'Edit Color',
        'update_item'       => 'Update Color',
        'add_new_item'      => 'Add New Color',
        'new_item_name'     => 'New Color Name',
        'menu_name'         => 'Colors',
    );

    $args = array(
        'labels'             => $labels,
        'public'             => true,
        'hierarchical'       => true,
        'show_ui'            => true,
        'show_in_menu'       => true,
        'show_in_nav_menus'  => true,
        'query_var'          => true,
        'rewrite'            => array( 'slug' => 'color' ),
    );

    register_taxonomy( 'color', 'product', $args );
}
add_action( 'init', 'add_color_category_to_product', 0 );

Assign Product Colors

Now that you have a means of tagging products with a color value it’s time to assign a color value to each product. Unfortunately, at this time there is no automated way to assign a color to a product. You will need to edit each of your products individually, manually by hand, and assign a new color or colors as they apply to each item. You’ll only need to enter a color’s name once, the first time you add it, and then will be able to select colors by checking their checkbox input on future products — the same as selecting a category for posts when adding a new blog entry.

Build a GUI for Searching

Next, create a user interface to allow customers to filter products by a chosen color. You’ll likely want to design an interface that blends with your website’s theme and colors, but the UI could be as simple as a dropdown select menu, a set of available color swatches, or even a custom set of colored icons. Regardless, the UI should provide customers a straightforward, easy-to-use, and easy-to-understand way to select a color, so they can see a result set of your products that are available in the selected color.

The color values you assigned are independent of your products, so it’s a simple process to create an array of options, loop through them to build out renderable HTML, and layer on CSS to style the interface.

Here’s what you’re about to do:

  • Logic: Query available color values
  • Layout: Build the UI’s HTML code
  • Design: Style the UI with CSS

PHP Shortcode Logic

First, get all the color values and output them as a list using HTML You can add this snippet to your WordPress theme’s functions.php file. It provides a shortcode called color_list which you can drop on your site to render an unordered list (i.e. a bulleted list, depending on your website’s styling of list elements) of all the available color values.

function color_list_shortcode() {
    $terms = get_terms( array(
        'taxonomy' => 'color',
        'hide_empty' => true,
    ) );

    if ( ! empty( $terms ) && ! is_wp_error( $terms ) ) {
        $output = '<div class="color-list"><ul class="color-list__items">';

        foreach ( $terms as $term ) {

            $class = ' color-list__link--' . $term->slug;
            $output .= '<li class="color-list__item"><a href="' . get_term_link( $term ) . '" class="color-list__link'. $class .'">' . esc_html( $term->name ) . '</a></li>';
        }

        $output .= '</ul></div>';
        return $output;
    }
}
add_shortcode( 'color_list', 'color_list_shortcode' );

You’ll notice each item in the color list is linked to its color archive page via the get_term_link( $term ) method.

HTML Layout Output

For a visual, here’s a sample of the HTML output produced by using the shortcode [color-list].

<div class="color-list">
    <ul class="color-list__items">
        <li class="color-list__item"><a href="/color/red/" class="color-list__link color-list__link--red">Red</a></li>
        <li class="color-list__item"><a href="/color/green/" class="color-list__link color-list__link--green">Green</a></li>
        <li class="color-list__item"><a href="/color/blue/" class="color-list__link color-list__link--blue">Blue</a></li>
    </ul>
</div>

Now, you have a structured output that affords you lots of opportunities for stylistic customization using CSS. It’s flat. It’s easy to understand. And, it cascades if you need it to. Scaffolded, the CSS class structure looks like this:

div.color-list {}
ul.color-list__items {}
li.color-list__item {}
a.color-list__link {}
a.color-list__link--<color-slug-value> {}

Using the modifier class attached to the link element a.color-list__link--<color-slug-value> you can style a color swatch to a specific color.

CSS Design Layer

It’s worth mentioning again that how you finalize your design using CSS is fluid. I’ll show you one way to go about styling the interface design, but your own final product ought to be customized in a way that fits into your website.

Variations of this step could involve creating different shapes for your color swatches, using a select input dropdown menu, or even incorporating custom graphics or icons.

CSS Styles

You can see that there are square color swatches for each custom-defined color with hard-coded HEX color values. The swatches will go until they reach the end of the available horizontal space in the row and then wrap nicely onto the next row, so they may continue as necessary. The HEX values for the colors are defined within the CSS.

.color-list {
  position: relative;
}

.color-list__items {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: start;
  align-items: flex-start;
}

.color-list__item {
  display: block;
  position: relative;
  flex: 0 0 auto;
  padding: 5px;
}

.color-list__link {
  position: relative;
  display: block;
  text-indent: -999px;
  overflow: hidden;
  width: 20px;
  height: 20px;
}

.color-list__link::before {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ff7d09;
  content: '';
  border: 1px solid #ccc;
}

.color-list__link:hover::before {
  border: 1px solid #111;
}

/* Begin Custom Colors */
.color-list__link--red::before {
  background-color: #f00;
}

.color-list__link--green::before {
  background-color: #0f0;
}

.color-list__link--blue::before {
  background-color: #00f;
}

/* Add more custom colors here */

Note: The link element has text-indent: -9999px; and overflow: hidden; on the .color-list__link class to visually hide the color’s label text (i.e. its name “red|green|blue”) from the screen. It’s okay to leave that part out if you’d like, but be aware that different colors have different amounts of letters in their names and uneven strings of text can cause uneven spacing in your layout.

Demo

Altogether, we’ve built a flexible row of equally sized square color swatches for as many colors as you’ve entered. Run the following pen to see a demo of what it looks like.

See the Pen Untitled by Floyd Hartford (@floyd) on CodePen.

Rendering the Results

In this example, I’m using the color’s archive page template to render the results. Archive page templates are built into WordPress, so you don’t need to do anything to see the results.

However, if you’d like to customize how the page is displayed you have a few templating options.

If you’re using the Divi Theme you can create a new template or duplicate an existing template using the Divi Page Builder and assign it to be used for all color archive pages.

If you’re using a non-Divi WordPress theme then you have archive templates available to you via WordPress template engine. By default, WordPress’s templating system will use your theme’s index.php file to display any pages that you don’t have a specific template for. Creating a new file within your WordPress theme’s directory named category-color.php is one way to further customize and develop a unique color archive page.

On the color archive page, any product categorized as the chosen color will display on the screen.

Further Reading

You might be thinking “there has to be an easier way to sort by color!?” (especially if your online store has thousands of products) Well, I promise you to the best of my research and knowledge that there is not. The simple explanation is digital color spaces are at least 3-dimensional and the relative closeness of 2 colors cannot be measured in any way that makes sense (e.g. along a straight line) in conjunction with retail shopping. Digitally speaking, color is confined to a single pixel and the specific color of that pixel can vary wildly based on things like camera specs, lighting, screen performance, and more. Even if you’re trying to sort by “the most prominent color” or “the existence of a specific hex value” it’s an extremely tricky — dare I say “impossible” — resource-intensive and highly speculative endeavor.

For further reading, check out this in-depth article by Alan Zucconi detailing the complexities of sorting by color.

Here’s the gist of Alan’s finds:

Sorting colours is a pain. There isn’t a magic function which will order them nicely, simply because the way we perceived them is based on three different components. Any attempt to flatten them onto one single dimension will inevitably collapse some of the complexity. When it comes to sort colours, you should understand which features you want to highlight. Is it the hue? Is it the luminosity? Start from there, and create your own function.

Alan Zucconi
Floyd Hartford is a website developer from southern Maine. He's focused on creating and building WordPress websites and loves spending time digging into code like HTML, CSS, scss, jQuery, PHP, and MySQL.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

nine + nine =

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Looking for WordPress Help?

I’m a freelance web developer specializing in small business and corporate marketing websites.

Pin It on Pinterest