I can’t take full credit for the below code. I found this snippit online somewhere and can’t remember the source! But it’s something I’ve been using for a while and I absolutely love it, so I thought I’d share. 🙂
Requirements
- Must be using a self-hosted WordPress blogging platform.
- Must be able to edit your functions.php theme file (or create a new one if one does not already exist).
- Coding knowledge is a plus, but is not required, as you can simply copy and paste the code.
What We’ll Be Creating
As a WordPress blogger, you probably have a lot of published posts, a few draft posts, a few scheduled posts, and maybe even private posts! I find it really helpful to more clearly differentiate between them on the “All Posts” page. So let’s colour code them!
When we’re done, your All Posts page will look something like this:
The green ones are scheduled posts, the red are drafts, and the normal (white) ones are published posts!
The Code
First you have to locate and edit your functions.php file. If you don’t have one, you’ll have to create a new one. Your file should look something like this:
<?php //Lots of code here ?>
The important thing is that it starts and ends with those php tags. The code below assumes you have those php tags included. If you don’t, you’ll have to add them in before and after the code.
Now copy the below code and paste it in your functions.php file:
/**
* Add Colour Codes
*
* @since 1.0
* @return void
*/
function ng_colour_code_post_status() {
?>
<style>
.status-draft {
background: #fad8d8 !important;
}
.status-future {
background: #CCFF99 !important;
}
.status-pending {
background: #FFFF99 !important;
}
.status-private {
background: #FFCC99;
}
</style>
<?php
}
add_action( 'admin_head', 'ng_colour_code_post_status' );
You can of course change the colours to different hex values to suit your own preference. I personally have it set up so that drafts show up red, scheduled posts show up green, and published posts show up how they normally would (no different background).
I hope you find this useful! I personally think it’s so much easier to take a quick glance and know immediately what’s what!
Want the plugin version of this?
I’ve packed this code into a plugin in case you just want something you can quickly install. Download it using the link below, then upload the zip file into Plugins > Add New > Upload.
Oh Wow, Ashley! This is so helpful! I hope I can pull this off on my blog because it would help so much. Thanks for sharing. I can’t wait to try it.
I hope you can get it working! Let me know if you have any trouble – I’d love to help. 🙂
It worked amazing! Whoever came up with that code was a genius lol
So helpful! Thanks for being awesome, Ashley!
do you think it’s at all possible to do this, but instead of it being “status”, you can colour-code the category? Like, “book reviews” one colour, “memes” another colour, “author interview” another colour again? Or is it only possible to do it as pending, scheduled, published etc?
Yep that’s absolutely possible! Instead of this:
.status-draft{background:#fad8d8 !important;}
Change it to something like this:
.category-book-reviews{background:#fad8d8 !important;}
And you can add different lines for each category. Note that the class you have to put in will be the *slug* of your category. That means dashes instead of spaces and all lowercase!
Is it possible to do this with the colors for categories but still keep the color for the drafts? So if I want my reviews to be blue but my drafts to be red, then a review draft could be red until it was published and then it would turn blue?
Yeah it should be. You’d put the category code first, then draft. So like this:
.category-book-reviews{background:#fad8d8 !important;}
.status-draft{background:#fad8d8 !important;}
Dude, I don’t know how I missed this before, but it is AWESOME! Thank you!
You’re welcome! 😀 I would seriously die without this LOL.
I couldn’t figure out why this wasn’t working, until I realized that all my posts were published lol!
Thanks for all the amazing tutorials and your plugins and themes! You are awesome! I don’t know how I blogged without all this for years!
Haha!
It’s my pleasure! Honestly this is one of my favourite snippets. I can’t imagine blogging without this. I feel like my admin archive of blog posts would be a complete mess without the colour coding.
Been using this and loving it, but updating to WordPress 3.7 broke it and when I try to just redo it with the same directions, it doesn’t do anything. Any hope for a fix for it? Or maybe you might know what broke it? The last two wordpress updates didn’t effect it. I don’t know what it is about 3.7.
I’m using the exact same code here on my blog and it works just fine for me. :/ (Both before and after the WP 3.7 update.)
Oh gosh, I feel dumb. Went and looked again, and I deleted a line of code somehow and that is what caused it to break. Thanks!
This post is a life-saver! I always feel a bit overwhelmed and unorganized looking at my posts page. Even with the calendar plugin I have, it still wasn’t really visually put-together. Thanks so much!