Custom CSS boxes in themes are a common feature that allow users to easily add their own styles without having to edit any theme files. The inclusion of this feature in themes, as opposed to plugins, has long been a hotly contested issue among theme developers.
WordPress.org Theme Review team admin Justin Tadlock announced today that the team has agreed upon new guidelines for the inclusion of CSS boxes. He summarized the conclusions following the debate:
- It’s preferred that theme authors leave this feature to plugins.
- However, it is allowed if handled safely.
- The edit_theme_options capability is required (like all theme options).
- The wp_filter_nohtml_kses(), wp_strip_all_tags(), or equivalent function must be used to sanitize the data before it’s saved into the database.
The main issue here is sanitizing the CSS to make sure it’s safe to store in the database. The guidelines do not cover validating the CSS, as that is less of a safety concern.
While adding custom CSS boxes still falls within theme territory, it is best to consider relegating this feature to a plugin in order to keep your theme safe and lean. If you still wish to offer this feature in your theme, Tadlock posted sample code that will provide a good starting place for adding a custom CSS box to WordPress’ native customizer.
Commercial theme authors who want to keep pace with WordPress.org theme review requirements will want to review the updated guidelines. The theme review team recommends using a plugin, such as Jetpack’s custom CSS module, as a safe alternative to allowing the theme to save custom CSS to the database.
Good idea, about time! I would hope but not really expect that the idea of custom CSS within a theme’s option page is also a bad idea because it creates yet more stylesheets that kill performance. Mobile page load speed, anyone?