Custom Classes: WordPress Plugin

Published by on February 6, 2012 | 31 Responses

For a recent project, I needed a way to add custom post and body classes on a per-post basis. Sure, I could have used a category or tag to style each post, but I hate creating custom categories and tags for the purposes of styling a post. So, I created a small plugin to let me add custom classes for individual posts.

How the plugin works

The plugin adds a custom meta box on the edit post screen for any public post type called “Classes” as shown in the following screenshot.

Custom Classes meta box screenshot

The meta box allows you to enter a custom class for a post (used by the post_class() function) or a custom body class (used by the body_class() function).

The following screenshot shows what your <body> class will look like in the source code on a single post.

Custom body class screenshot

All you have to do is style your posts via CSS using the custom classes you’ve addded.

Download the plugin

You can download the latest version from the WordPress plugin repository: Custom Classes Plugin. I hope you enjoy it and find some use for it in your projects.

Please do not ask support questions in the comments below. If you’re in need of plugin support, head over to the Theme Hybrid support forums, which is where I handle support for all my plugins and themes.

31 Responses

  1. Geert De Deckere
    Geert De Deckere February 6, 2012 at 2:11 pm |

    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
    1. Justin Tadlock
      Justin Tadlock February 6, 2012 at 6:25 pm |

      That’s how I was doing it at first for the project I was working on. At a certain point, I just decided it was too complicated.

      Reply
  2. Jeriko
    Jeriko February 6, 2012 at 2:16 pm |

    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 February 6, 2012 at 2:25 pm |

      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 February 7, 2012 at 6:47 am |

        Okay this makes sense, yeah

    2. Michel Fortin
      Michel Fortin February 6, 2012 at 2:43 pm |

      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 February 6, 2012 at 5:05 pm |

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

    Reply
    1. Justin Tadlock
      Justin Tadlock February 6, 2012 at 6:26 pm |

      Glad I could be of some help. :)

      Reply
  4. Piet
    Piet February 6, 2012 at 8:53 pm |

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

    Reply
    1. Justin Tadlock
      Justin Tadlock February 6, 2012 at 9:48 pm |

      Nope. Post formats were added to provide some standards and data portability across themes.

      For example, the “gallery” and “aside” formats have been around for years. But, different themes would handle them in different ways. One theme might ask you to tag these posts. Another theme might ask you to put the posts in specific categories. And, another theme might use a specific custom field.

      Nevertheless, you can’t have custom post formats, so using them is out anyway.

      Reply
      1. Piet
        Piet February 7, 2012 at 5:41 am |

        Thanks for your thoughts on that Justin.

  5. Randy
    Randy February 7, 2012 at 9:11 am |

    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
    WordPress: personalizzare graficamente i post con il plugin Custom Classes | Edit - Il blog di HTML.it February 8, 2012 at 6:48 am |
  7. Hyder
    Hyder February 9, 2012 at 4:16 am |

    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 February 9, 2012 at 7:41 am |

    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 February 9, 2012 at 7:19 pm |

    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
    1. Justin Tadlock
      Justin Tadlock February 9, 2012 at 7:44 pm |

      Cool idea. Something like that would definitely be useful, but it’s outside the scope of this plugin.

      Reply
      1. Neil Davidson
        Neil Davidson February 13, 2012 at 7:24 pm |

        Yep. You’d probably use something like

         $line) {
	$cssstyles = preg_replace($filter_expression_brackets, '', $cssstyles);//brackets
	$cssstyles = preg_replace($filter_expression_comments, '', $cssstyles);//comments
 	$cssstyles = str_replace(' ','',$cssstyles);//strip spaces
	$cssstyles = str_replace('','',$cssstyles);//strip breaks
	 
	 
    
	$cssstyles .= trim($line).'';
   }
   
print_r($cssstyles);
?>

        You would obviously refine it more, but you get the idea on it’s simplicity.

  10. Neil Davidson
    Neil Davidson February 13, 2012 at 7:28 pm |

    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 February 21, 2012 at 11:35 am |

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

    Thank you Justin.

    Reply
  12. Peter
    Peter March 3, 2012 at 11:28 am |

    Excellent. Thank you, Justin!

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

    Reply
  13. Rahul kuntala
    Rahul kuntala March 3, 2012 at 1:08 pm |

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

    Reply
  14. grandt
    grandt March 11, 2012 at 1:18 am |

    very good plugin! exactly what i was looking for!

    Reply
  15. Ken Newman
    Ken Newman March 13, 2012 at 12:54 pm |

    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 March 23, 2012 at 3:23 pm |

    this plugin is new for me, I will try it

    Reply
  17. Aliosha Kasin
    Aliosha Kasin March 26, 2012 at 5:14 pm |

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

    Reply
  18. Timo
    Timo April 2, 2012 at 1:54 pm |

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

    Reply
  19. Steven
    Steven May 11, 2012 at 6:00 am |

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

    Reply
  20. Stephen Brand
    Stephen Brand May 23, 2012 at 2:30 am |

    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 October 5, 2012 at 12:43 pm |

    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
  22. Peter
    Peter April 25, 2013 at 12:05 pm |

    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.