Add a Hexadecimal to RGB Color Chart into WordPress with Shortcode

We’ve written a few articles on color over the last few months leading up a website of our own that can be used as our own (public) web resource. We messed with quite a few ways of representing the mix of various color in charts… and this article will show you just a couple of them – using an RGB color for the purpose of the examples.

We’ll show you how to render a graph with CSS, and other with Google Graphs.

The CSS Shortcode Function

In a recent article we looked at how to convert between RGB and Hexadecimal values with PHP. Towards the end of the page we provided an example of the RGB color mix as rendered in three CSS styled bars given the HEX value. For example, shortcode of [hexgraph data="FFCC33"] will display the following:

RED 100% (255)
GREEN 80% (204)
BLUE 20% (51)

The Shortcode Function

The code includes two functions. The first will return an RGB value given the 6-digit hex color. The second, the shortcode function, will render the graph. Styles are inline and altered via attributes to avoid the CSS dependencies that tend to overcomplicate cut-and-paste shortcode functions of this kind.

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.

The Google Shortcode Function

The Google shortcode function utilises Google Charts , and we’re using a simple pie chart for the example. Rather than pass a percentage value to Google, we simply send the applicable RGB values for all three primaries and the percentages are determined Google-side and returned in the chart.

For our example chart we’ve used the shortcode of [hexgooglegraph data="FFCC33"]. The result:

To display the #BCBCBC hex color in a 3D pie graph, use [hexgooglegraph data="BCBCBC" td="true"].

The Shortcode Function

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.

The JavaScript is rendered in the post content which is a little dodgy; if you were to actually use something like this you would consider conditionally adding parts of the JS to WP’s header.

Considerations

The shortcode attributes in each function are quite clear, with the former permitting a large amount of formatting to the CSS styled container.

While the code isn’t overly practical, it does, if nothing else, provide a basic working example of the Googles pie graph. In our case, and not because either of the above options wasn’t suitable, we opted for a specific graphing application for our own project. We’ll talk about the journey through about a dozen open source packages in an upcoming article.

Download the Code

Download both shortcodes here .

Shortt URL for this post:

Leave a Reply

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