This entry is part 7 of 9 in the Plugin Thoughts Series
- Plugin Thoughts Episode 1: Making Your Plugins More Extensible
- Plugin Thoughts Episode Two – Use Filters for Plugin Text
- Plugin Thoughts Episode 3 – Don’t Forget About Core Functions
- Plugin Thoughts Episode 4 – Learn How Core Does It
- Plugin Thoughts Episode 5 – Take Responsibility for Your Products
- Plugin Thoughts Episode 6 – Contribute to the WordPress Codex
- Plugin Thoughts Episode 7 – Remember Core CSS
- Plugin Thoughts Episode 8 – Create Clean Code
- Plugin Thoughts Episode 9 – Write Better Code; Release Better Plugins
In episode 7 of plugin thoughts, I show you a demonstration of just how much CSS you don’t need to write for your WordPress plugins. WordPress core has a very large amount of CSS and you can utilize it when developing your plugins.
In the video, I walk you through an example plugin, Easy Digital Downloads, which has thousands and thousands of lines of code and a lot of different admin pages, yet a very, very few lines of CSS. In total, Easy Digital Downloads has 28 lines of CSS loaded into the admin screens, and that includes at least 10 lines of comments.
When you’re developing your plugins, you should strive to use the resources provided for you by WordPress (not only CSS), and avoid unnecessary bloat in your plugin.
I agree with you Pippin. I have bought several plugins so I can tell that there are so many premium plugins that have different feels than WordPress. I like plugins that match with WordPress UI and style, I don’t know why but it’s just nice in the eye. Do you have any particular WordPress HTML and CSS reference when building a plugin?
I’ve found one at https://dotorgstyleguide.wordpress.com/ but it seems it’s not complete.
The class names should still be accurate because the WP core CSS has been updated.
The easiest way it to simply inspect the elements in WP core. If you want to replicate a button style, look at the existing buttons in core and use the same HTML structure as them.
Hi Pippin!
Seems like the fullscreen/non-fullscreen controls don’t really work on this video 🙁
Video not displaying:
The web page at https://www.screenr.com/embed/hWZ8 might be temporarily down or it may have moved permanently to a new web address.
Can you please investigate?
Thanks.