Tag Archives: css

If you wanted to add emphasis to the first post in your blog adding this snippet to the functions.php of your WordPress theme will add the class of “first” to your first post.

Add this code to your functions.php file.

add_filter( 'post_class', 'wps_first_post_class' );
function wps_first_post_class( $classes ) {
    global $wp_query;
    if( 0 == $wp_query->current_post )
        $classes[] = 'first';
        return $classes;

This WordPress snippet is very handy if you wish to add the category ID to the body or post-class for ie. targeting CSS styles and such.

Add this to your functions.php file.

function category_id_class($classes) {
     global $post;
          foreach((get_the_category($post->ID)) as $category)
               $classes [] = 'cat-' . $category->cat_ID . '-id';
     return $classes;
add_filter('post_class', 'category_id_class');
add_filter('body_class', 'category_id_class');

This snippet will change the default style of WordPress admin area by overriding the old stylesheet (CSS).

1) Create a new css file in your theme folder, and then include it in WP-Admin using the admin_head hook.
2) Add this to your functions.php file.

function customAdmin() {
    $url = get_settings('siteurl');
    $url = $url . '/wp-content/themes/my-theme/styles/wp-admin.css';
    echo '<!-- custom admin css -->
          <link rel="stylesheet" type="text/css" href="' . $url . '" />
          <!-- /end custom adming css -->';
add_action('admin_head', 'customAdmin');

* Change the paths according to where you put your new/extra wp-admin.css file.
* Add whatever styles you want to override the defaults with, or copy the old stylesheet and use as a template for your new one. Location: /wp-admin/css/colors-fresh.css.

This snippet will let you create a white-list of terms to include in body_class. This is a great way to filter out many of the unwanted WordPress css classes added.

Add this to your functions.php file.

add_filter('body_class', 'wps_body_class', 10, 2);
function wps_body_class($wp_classes, $extra_classes)
    // List of classes allowed
    $whitelist = array('portfolio', 'home', 'error404');
    $wp_classes = array_intersect($wp_classes, $whitelist);
    return array_merge($wp_classes, (array) $extra_classes);