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? Sep 23, 2013 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, 2013 at 22:41


Your Answer

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

Browse other questions tagged or ask your own question.