34 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!

    Reply
  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.

    Reply
    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.

      Reply
      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.

      Reply
  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!

    Reply
  4. Piet
    Piet Published |

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

    Reply
  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 { }”.

    Reply
  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?

    Reply
  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.

    Reply
  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:

    reset.css
    style.css

    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.

    Reply
  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.

    Reply
  11. Arnaud
    Arnaud Published |

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

    Thank you Justin.

    Reply
  12. Peter
    Peter Published |

    Excellent. Thank you, Justin!

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

    Reply
  13. Rahul kuntala
    Rahul kuntala Published |

    Thank you so much for sharing this :) This plugin will come in handy, really helpful article

    Reply
  14. grandt
    grandt Published |

    very good plugin! exactly what i was looking for!

    Reply
  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. ;-)

    Reply
  16. Piala
    Piala Published |

    this plugin is new for me, I will try it

    Reply
  17. Aliosha Kasin
    Aliosha Kasin Published |

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

    Reply
  18. Timo
    Timo Published |

    Thank u for sharing your wp-plugin! Great and easy to understand instruction, even for a german :-) greetings

    Reply
  19. Steven
    Steven Published |

    Thanks a lot Justin for sharing…. I’ve downloaded the plugin and started using it, its awesome…. :)

    Reply
  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!

    Reply
  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?

    Reply
    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

      Reply
      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 )
    Reply

Leave a Reply

By submitting a comment here you grant this site a perpetual license to reproduce your words and name/Web site in attribution.

Please use your real name or a pseudonym (i.e., pen name, alias, nom de plume) when commenting. If you add your site name, company name, or something completely random, I'll likely change it to whatever I want.

css.php