Highlight Post Status in WordPress

by Nikolaenko Maxim · Published January 8, 2013 · Updated January 8, 2013

To highlight the status of a post or page in WordPress you can use styles. You can add styles using the function, which is launched through a special action. In order for all statuses to be highlighted on your site in the user's admin panel, simply add the following code to the file functions.php your topic WordPress.

function custom_post_states( $post_states ) {
   foreach ( $post_states as &$state ){
   $state = '<span class="'.strtolower( $state ).' states">' . str_replace( ' ', '-', $state ) . '</span>';
   }
   return $post_states;
}
add_filter( 'display_post_states', 'custom_post_states' );
function custom_post_states_css(){
        echo '<style>
                .post-state .states{
                        font-size:10px;
                        padding:3px 8px 3px 8px;
                        -moz-border-radius:2px;
                        -webkit-border-radius:2px;
                        border-radius:2px;
                        }
                .post-state .password{background:#000;color:#fff;}
                .post-state .pending{background:#83CF21 !important;color:#fff;}
                .post-state .private{background:#E0A21B;color:#fff;}
                .post-state .draft{background:#006699;color:#fff;}
              </style>';
}
add_action('admin_head','custom_post_states_css');

function custom_post_states( $post_states ) {

foreach ( $post_states as &$state ){

$state = '<span class="'.strtolower( $state ).' states">' . str_replace( ' ', '-', $state ) . '</span>';

}

return $post_states;

}

add_filter( 'display_post_states', 'custom_post_states' );

function custom_post_states_css(){

echo '<style>

.post-state .states{

font-size:10px;

padding:3px 8px 3px 8px;

-moz-border-radius:2px;

-webkit-border-radius:2px;

border-radius:2px;

}

.post-state .password{background:#000;color:#fff;}

.post-state .pending{background:#83CF21 !important;color:#fff;}

.post-state .private{background:#E0A21B;color:#fff;}

.post-state .draft{background:#006699;color:#fff;}

</style>';

}

add_action('admin_head','custom_post_states_css');

Externally, the output of the status of a post or page will look like this:

Think, it will not be a problem to figure out the style settings. Good luck in developing content-friendly sites.

Online tutoring services. List of courses I teach

Basic web design course;
Site layout;
General course on CMS WordPress and continuation of the course on template development;
Website development in PHP.