How to Color Code Your WordPress Posts Page

How to Color Code Your WordPress Posts Page

As a WordPress blogger, you’re sure to use a variety of post types, formats, categories, tags, etc. However, it can be a pain to quickly skim through them all – especially if you’re looking for a specific type of post. Navigating through WordPress Posts page takes time, and sometimes you just don’t have a lot of it.

Just imagine going to your “Posts” page in your WordPress dashboard and having a variety of posts at different points in publication – drafts, pending, published, etc.  Sure, you can look under the “Status” column to see what type of post each one is, but having them color-coded is so much easier. Colors catch your eye and are easy to identify.

WordPress All Posts page with different post status types.

So how can you color code the WordPress Posts page for easier post management? Just install the Color My Posts WordPress plugin. This WordPress plugin really caught my attention when I first came across it, because I immediately realized how useful it could be; it can also serve as a huge productivity booster.

It’s important to note that you will need to have some basic knowledge of CSS in order to use this plugin.

Here’s how it works:

1. Go to your WordPress dashboard, and go over to the “Add New” plugins page (Plugins -> Add New).

2. Search for the Color My Posts plugin, install, and activate it. (If you can’t find it, here is the download link)

3. Here’s the bad part of the plugin – Color My Posts doesn’t have a Settings/Options page in the free version. Instead, you have to edit the color-my-posts.php file. To find it, go to the Plugins editor (Plugins -> Editor), then select the Color My Posts plugin from the drop-down menu.

Go to the plugins editor and select the Color My Posts plugin.

Note: Upgrading to the premium version will give you a built-in color picker and even more options.

4. Scroll through the color-my-posts.php file until you see the style section; it will start with the <style> tag and say “Color by post Status” right below it.

You must manually edit the CSS styling of the Color My Posts plugin.

5. This is where the plugin’s customization begins; you can edit the background colors as you’d like. As you’ll notice, the post status styling is already filled in for you with default colors.

However,  you’ll have to fill in the styling for color by author data, color by post format, color by post category, color by post tag, etc – if you choose to use any of these criteria.

As you can see, you simply add “background: #color !important;” to the brackets. I’d suggest the use of a color picker extension like Eye Dropper, or a Web color chart to help you choose the perfect colors.

6. If you’re using additional post statuses (often done via the Edit Flow plugin), you’ll want to add them to your CSS as well so that they’ll be styled.

Color My Posts final results.

Final Results

When you’re done, your WordPress Posts page will look similar to the screenshot above. As you’ve probably noticed, each post type is very easy to recognize.

Color My Posts would also work great for multi-author blogs, since you can color posts by author. This would make it really easy to see who has written what at a quick glance.

With the ability to color code your posts by many different types of criteria, it gives you many possibilities.

Charnita Fance
Charnita Fance

Charnita has been a Freelance Writer & Professional Blogger since 2008. As an early adopter she loves trying out new apps and services. As a Windows, Mac, Linux and iOS user, she has a great love for bleeding edge technology. You can connect with her on Facebook, Twitter, Google+, and LinkedIn.

Subscribe to our newsletter!

Our latest tutorials delivered straight to your inbox