I have a custom WordPress plugin that I have developed. The plugin is a widget bundle containing a bunch of custom widgets.

The scenerio

The plugin allows for custom css styles through creating a custom CSS file through WordPress AJAX.

Here is how I generate the custom AJAX CSS stylesheet:

Generate WordPress AJAX CSS file

 * Enqueue the widgets stylesheet
public function add_awp_css(){

    wp_enqueue_style($this->hook, plugins_url('advanced-widget-pack/css/advanced-widget-pack.css' , dirname(__FILE__)), array(), '', 'screen'); 

                'action' => 'advanced_widget_pack_gen_css',
                /* Include this to ensure changes don't get cached by the browser */
                'layout' => substr(md5(serialize($this->hook)), 0, 8)

This works greats.

Now the function that the above enqueue calls is this:

The callback function for the WordPress AJAX CSS file

 * Echo the CSS for the custom widgets style
public function advanced_widget_pack_css() {
    if(empty($_GET['action']) || $_GET['action'] != 'advanced_widget_pack_gen_css') return;
    if(!isset($_GET['ver'])) return;

    $css_text = '';

    /* ============================= */
    /* Archives Widget               */
    /* ============================= */
    if(awp_option('archives_style_border') == 'true'){ 

        $css_text .= ".awp_archive_widget { border:".awp_option('archives_style_border_width').' '.awp_option('archives_style_border_style').' '.awp_option('archives_style_border_color')." !important }\n";
        $css_text .= awp_option('archives_style_border_radius') == 'round' ? '.awp_archive_widget { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px }' : ''.''." \n";
        $css_text .= ".awp_archives_colour { color:".awp_option('awp_archives_dropdown_inst_colour')." !important }\n"; 

     * Filter the unprocessed CSS array
    $css_text = apply_filters('advanced_widget_pack_css', $css_text);

    header("Content-type: text/css");
    echo $css_text;

This above function also works fine. It outputs a CSS file.

The Widget In the actual WordPress widget file I create some extra CSS code that is outputted. Here is a slimmed down version of the "widget" function within the widget class.

class Advanced_Widget_Pack_Widget_Archives extends WP_Widget {

    public function __construct(){}

    public function form($instance) {}

    public function widget($args, $instance){


        // All the widget code is contained here....

        **/* Styling for the shortcode */
        if($is_awp_sc == 'true'){

            /* Generate unique id if shortcode - used for styling */
            $sc_id = mt_rand(1, 100000);

            $sc_css =  ".awp_archive_widget_sc".$sc_id." { border:".$awp_archives_border_width.' '.$awp_archives_border_style.' '.$awp_archives_border_color." !important }\n";
            $sc_css .= $awp_archives_border_radius == 'round' ? '.awp_archive_widget_sc'.$sc_id.' { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px }' : ''.''." \n";

            $sc_css .= ".awp_archive_widget_sc".$sc_id." li a, .awp_archive_widget_sc".$sc_id." li { font-size:".$awp_archives_font_size." !important }\n";
            $sc_css .= ".awp_archive_widget_sc".$sc_id." li a { color:".$awp_archives_link_std." !important }\n";
            $sc_css .= ".awp_archive_widget_sc".$sc_id." li a:hover { color:".$awp_archives_link_hover." !important }\n";

        // The widget code gets outputted here

In the above code I have removed all the unnecessary code to save space and just left the code I need to demonstrate my requirement.

The issue

What I want to do is pass the $sc_css code to the advanced_widget_pack_css() function and append it to the end of the dynamic generated CSS code.

I have applied a filter in the advanced_widget_pack_css() function, however I do not understand how to pass the custom generated contents from the widget class to this function. I don't want to have to echo out the CSS page, but would prefer to append it to the already made custom CSS file.

I have been reading that this can be done by using WordPress "actions" or "filters" but cannot wrap my head around it.

Any help would be greatly appreciated.


  • In what order do these methods run? Of what class are advanced_widget_pack_css and add_awp_css a part of? Can you describe in more detail how the three snippets fit together? – Johannes Pille Sep 23 '13 at 23:28
  • @Johannes Pille 1. The add_awp_css() function runs on the plugin init and loads the plugin custom CSS file. 2. The advanced_widget_pack_css() is the callback function that the above add_awp_css() calls and uses. 3. I want to try and combine or add the custom CSS that is created by the actual widget to the (3rd code snippet) to the advanced_widget_pack_css() function. Does this make sense? – Jason Sep 25 '13 at 22:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.