I'm working on a plugin to be release to the public, it is a very simple plugin that includes a single html element in the page html. I can do many things to allow users customize its appearance: 1. Let them override a default CSS that is includes as a plugin configuration (on a management screen) 2. Require that they modify their styles.css (not a very good idea for this plugin) And probably a fee more

option 1 seems like the most user Friendly, since it allows any admin to modify the style without need of accessing code. But I wonder if there might be a better way?

Is it possible to provide a default CSS file for the plugin that would be theme independent and would be editable through a management screen? The styling needs to persist regardless of chosen theme.

Any thoughts?

1 Answer 1


Is it possible? Yes.

Option 1

Simply register and enqueue your default stylesheet. The theme stylesheet can then be used to override whatever styles you implemented.

function register_my_styles() {
    wp_register_style( 'default-style', plugins_url('default.css', __FILE__) );
    wp_enqueue_style( 'default-style' );
add_action( 'wp_enqueue_scripts', 'register_my_styles' );

Option 2

Register whatever custom options you need either on a specific plugin options page or using the WordPress Settings API. Then output these styles in a regular old script block in the theme header.

function output_custom_scripts() {
    ?><style type="text/css">
        <?php echo get_option( 'custom_css' ); ?>
add_action( 'wp_head', 'output_custom_scripts' );
  • Thank you for a well explained and detailed answer. Truth is I still don't understand how the CSS overriding works... how does the browser "know" which of the styles to choose when two identical styles exist, in fact I have seen cases when it did this wrongly - so that I had to make my overriding style's selector a lot more specific. Apr 12, 2012 at 4:30
  • CSS stands for Cascading Style Sheet. The browser uses either the most specific rule (i.e. it will use div#header p.text over div#header p) or the last rule specified (i.e if there are two div#header rules, it will use the last one it sees).
    – EAMann
    Apr 12, 2012 at 4:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.