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');
wp_enqueue_style(
$this->hook.'-custom',
add_query_arg(
array(
'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)
),
site_url()
),
array($this->hook),
$this->version
);
}
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;
exit();
}
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){
extract($args);
// 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.
Thanks.
