The best way to CSS the WP widget to keep style under any theme

5 Views

I’m going to make WP widget plugin and want to make it theme independent.

What I mean about this is the fact that I need this widget to keep style set in its CSS regardless of theme used. I’m worrying that theme will overwrite its style.

Read More

What’s the best CSS technique to do this ? Should I use style based on widget ID(#) or its Class(.) ?

Post Views: 5

Related posts

Leave a Reply

2 comments

  1. It’s unlikely that someone overwrite your style if you define a container with an ID and have all your style declarations use this ID in the selector.

    #MyWidget p {
    color: #ffcc00;
}

#MyWidget p a {
    text-decoration: none;
}

    The more specific your selectors are, the more priority they have.

  2. when the wp_head() function is fired, use that to include a stylesheet to your css file..

    function wp_mywidget_css() {

    $siteurl = get_option('siteurl');
    $url = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/styles.css';

    echo "nn<!-- your plugin css styles -->n";
    echo "<link rel='stylesheet' type='text/css' href='$url'>n";
    echo "<!-- /your plugin css styles -->nn";
} 
add_action('wp_head', 'wp_mywidget_css');

    place a file called ‘styles.css’ your plugin folder, which would include the code from the post above, this should stop any theme messing with your styles, just name your widget styles something unique…