Rolling Your Own CSS and Javascript

Normally if you want to modify the css or javascript of a plugin to better integrate with your site or add your own specific functionality, you only had a couple options.

  1. Edit the plugin files directly
  2. Try to override the css with your own through specificity and !important declarations
  3. Add your own javascript files

None of those options are all that attractive. Editing the plugin files directly is not upgrade friendly, overriding css means duplicate work and added complexity to your site’s stylesheet, and more javascript can only increase, not modify, functionality.

To combat this issue, I’ve written my plugins in such a way that allows users an easy way to add their own css or javascript. If you want to modify the built-in CSS and can’t do it through custom classes, copy the CSS file you want to modify, make your changes and save it in your theme’s root directory. Just make sure the file name matches matches the plugin name, i.e. arconix-shortcodes.css. The same can be done with javascript (i.e. arconix-shortcodes.js) for modification of default parameters. The plugin searches the stylesheet and template directories for those files. If none are found, then it loads the plugin’s version.

Making modifications in this manner ensures you won’t lose your changes if you upgrade the plugin, and makes it easy to keep modifications outside your style.css in the event you change themes.