36 Responses

  1. Geert De Deckere
    Geert De Deckere Published |

    Thank you. This will come in handy. Beats hardcoding extra classes for certain pages in functions.php.

    Also, it is a relief to see such beautiful well-commented code in a WP plugin. Good stuff to learn from. Thanks again!

  2. Jeriko
    Jeriko Published |

    Besides a more convenient naming, what’s the advantage over the classes provided by body_class()? There is already a class postid-XXX (or in your case, singular-post-XXX), which is unique for every post.

    1. Brian Krogsgard
      Brian Krogsgard Published |

      Because you can re-use the same body class on different posts that would need that styling. If you only have one page or post that needs it, do what you said. But if you have ten or twenty or whatever, then you can have css for the custom body class and then assign it where needed.

      1. Jeriko
        Jeriko Published |

        Okay this makes sense, yeah

    2. Michel Fortin
      Michel Fortin Published |

      Yay! Exactly what I’ve been looking for. Thank you.

      @Jeriko, for me, I hate creating CSS for specific pages or IDs. If I ever change the page, move it, or create a new one (to replace a deleted old one) for a variety of reasons, then I would have to go back into my CSS to change the ID each time.

      For instance, we have a number of temporary landing pages for PPC campaigns, tested in A/B split-tests, where each page may be completely different from one and other. Some pages (like, say, winners in tests) are subsequently moved to a permanent location or category.

      So, having a custom class on a per-post basis simplifies this significantly.

  3. Amy Hendrix
    Amy Hendrix Published |

    This isn’t the first time you’ve put out something just at the moment I needed it — thanks!

  4. Piet
    Piet Published |

    I can’t help but wondering isn’t this why Post Formats where invented for? To style individual Posts?

  5. Randy
    Randy Published |

    This is a nice option for customized post styling since those do not have the native Page Template feature.

    I would imagine you might not really need the post class every time since you could still target that with “.example-body-class .post { }”.

  6. WordPress: personalizzare graficamente i post con il plugin Custom Classes | Edit - Il blog di HTML.it
  7. Hyder
    Hyder Published |

    Nice plugin, so much easier to style Posts as you need them.

    Question: Haven’t installed the plugin yet, but does the meta box show up when you create Pages/Custom Post Types too?

  8. Ejaz
    Ejaz Published |

    Justin it is no doubt a nice post, it has cleared number of things about pluggins. I have recently transferred my websites from frontpage to wordpress and I really loved it. Thats why I like any post or information concerning wordpress. Thanks indeed.

  9. Neil Davidson
    Neil Davidson Published |

    interesting approach. If I were wanting to make it totally usable for speed and memory I would add a php script to that plugin. One that runs through the CSS, stores it to cache, and enters the classes available from file. Then..

    dropdown, select class, done.

    Of course, you could always have it added to the theme options and call it from there. Either way would be fine.

    Adding Content->Post->Entry classes will bulk up your css a lot. This, in turn, would give more to load.

    Enhance the plugin further by applying a conditional for css to load in the header. For such an example as you are using it for I would have the following CSS files:


    Then, in a parent or child folder have additional CSS “Skins”. Same idea as any child theme concept, really. Less overhead and less code is the goal.

  10. Neil Davidson
    Neil Davidson Published |

    sorry Justin. Not sure how your blog accepts code snippets. One thing it doesn’t like is regular expressions. Feel free to email me for the top piece of that snippet.

  11. Arnaud
    Arnaud Published |

    wow this plugin for wp is exactly what i was looking for.

    Thank you Justin.

  12. Peter
    Peter Published |

    Excellent. Thank you, Justin!

    You’ve just spared me many hours of tedious work. Great job!

  13. Rahul kuntala
    Rahul kuntala Published |

    Thank you so much for sharing this πŸ™‚ This plugin will come in handy, really helpful article

  14. grandt
    grandt Published |

    very good plugin! exactly what i was looking for!

  15. Ken Newman
    Ken Newman Published |

    I’m interested in dissecting this to see how close my implementation is to yours (in “Scripts n Styles”). I’m always looking for code inspiration and comparison. πŸ˜‰

  16. Piala
    Piala Published |

    this plugin is new for me, I will try it

  17. Aliosha Kasin
    Aliosha Kasin Published |

    Thank you Justin, very useful, this will save me many hours.

  18. Timo
    Timo Published |

    Thank u for sharing your wp-plugin! Great and easy to understand instruction, even for a german πŸ™‚ greetings

  19. Steven
    Steven Published |

    Thanks a lot Justin for sharing…. I’ve downloaded the plugin and started using it, its awesome…. πŸ™‚

  20. Stephen Brand
    Stephen Brand Published |

    I’ve never needed anything more than a category-based body classes, but I’ll definitely have this bookmarked in case that changes; the screenshot looks quite nice!

  21. hooked
    hooked Published |

    I need to add more than one class to the body tag. When I enter two classes separated by a single space, upon saving the space is removed.

    I thought esc_attr() was causing it but removing it did not.

    How can I add a second class?

    1. Roy Junami.Co.Il
      Roy Junami.Co.Il Published |

      add this function to custom-classes/custom-classes.php (after function custom_classes_sanitize_meta( $meta_value, $meta_key, $meta_type ) { .. } )

      function sanitize_html_class_leave_spaces( $class, $fallback = '' ) {
      //Strip out any % encoded octets
      $sanitized = preg_replace( '|%[a-fA-F0-9][a-fA-F0-9][\s]|', '', $class );
      //Limit to A-Z,a-z,0-9,_,-
      $sanitized = preg_replace( '/[^A-Za-z0-9_-\s-]/', '', $sanitized );
      if ( '' == $sanitized )
          $sanitized = $fallback;
      return apply_filters( 'sanitize_html_class_leave_spaces', $sanitized, $class, $fallback );

      and replace any occurrence of sanitize_html_class(" with "sanitize_html_class_leave_spaces(

      Hope this could help someone

      Roy from Junami.co.il web solutions and site building

      1. Roy Junami.Co.Il
        Roy Junami.Co.Il Published |

        (this will allow more than one or multiple class names for body or post)

      2. Sascha
        Sascha Published |

        Thanks for that code! I just spend an hour to work it out myself until I saw this extra code now! Oh well, got a reminder about preg_replace yet again….

        Justin, could the plugin be updated with that code? Rather then polluting the repo with another plugin that supports multiple classes from the start? That would be great πŸ™‚

  22. Peter
    Peter Published |

    By the way, for anyone searching how to make this also work for custom post types:

    When registering the custom post type (often in functions.php), just add ‘custom-classes’ to the ‘supports’ argument/array, for example :

    $args = array(
    		'labels' => $labels,
    		'public' => true,
    		'show_ui' => true,
    		'publicly_queryable' => true,
    		'capability_type' => 'post',
    		'supports' => array ('thumbnail', 'excerpt', 'comments', 'editor', 'title', 'revisions', 'author', 'custom-fields', 'page-attributes', 'custom-classes'),
    		'taxonomies' => array('post_tag') ,
    		'menu_position' => 55,
    		'query_var' => true,
    	register_post_type( 'your-custom-post-type' , $args )
  23. Johnny
    Johnny Published |

    “Post class” doesn’t seem to work in current WordPress. “Body class” works though.

  24. Paul Kazmercyk
    Paul Kazmercyk Published |

    This plugin just rescued me from hours of pain. I cannot thank you enough!!!

Comments are closed.