Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question

1 Answer 1

up vote 1 down vote accepted

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' ); ?>
    </style><?php
}
add_action( 'wp_head', 'output_custom_scripts' );
share|improve this answer
    
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. –  Moshe Eshel Apr 12 '12 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 '12 at 4:51

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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