Custom widget styles

Our small widget has its own style sheet that needs to be included in the current theme's head section, like any other style sheet.

The file is named kk_tag_cloud_widget.css and contains the following:

.kk_widget_tag_cloud .kk_tagcloud { 
    line-height: 1.5em; 
} 
 
.kk_widget_tag_cloud .kk_tagcloud a { 
    display: inline-block; 
    margin: 3px 2px; 
    padding: 0 11px; 
    border-radius: 3px; 
    -webkit-border-radius: 3px; 
    background: #eee; 
    color: #279090; 
    font-size: 12px !important; 
    line-height: 30px; 
    text-transform: uppercase; 
} 
 
.kk_widget_tag_cloud .kk_tagcloud a:hover { 
    color: #f2f2f2; 
    background: #404040; 
}

Nothing fancy, just a set of classes that will make sure that the widget looks great. The only thing we have to do with this style sheet is enqueue it through a standard WordPress hook. Place the following code in your plugin's main file:

function kk_tag_cloud_widget_styles_load() { 
  wp_register_style('kk_tag_cloud_widget_styles', 
     plugins_url('kk_tag_cloud_widget.css', __FILE__)); 
  wp_enqueue_style('kk_tag_cloud_widget_styles'); 
} 
add_action('wp_enqueue_scripts', 
   'kk_tag_cloud_widget_styles_load');