Hi I cant seem to find an answer out there to solve my issue.
what i am trying to do is fix this validation error ‘Element link is missing required attribute property.’
that is occurring because the style sheet isn’t in the head. what i wanted to do was use the wp_head action to place it into the header but as soon as i add the code to the widget i have the javascript breaks completely so i dont know how to add a style to the head?
this is the code i am using at the moment:
wp_register_script('piechart', get_template_directory_uri() . '/js/jquery.easypiechart.min.js', '', '2.0.4');
wp_enqueue_script('piechart');
wp_register_style('piechart-css', get_template_directory_uri() . '/css/jquery.easy-pie-chart.css');
wp_enqueue_style('piechart-css');
what i am trying to do is get something like this: (this code is all in the widget function)
add_action('wp_head', 'pieChartScripts');
function pieChartScripts() {
wp_register_style('piechart-css', get_template_directory_uri() . '/css/jquery.easy-pie-chart.css');
wp_enqueue_style('piechart-css');
}
or i can write the whole link tag out etc but doing that would add it multiple times.
EDIT:
here is my widget function code:
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
$barOrPie = apply_filters( 'barOrPie', $instance['barOrPie'] );
$graphTitle = apply_filters( 'graph1_title', $instance['graph1_title'] );
$graphQuote = apply_filters( 'graph1_quote', $instance['graph1_quote'] );
$graph1Figure = apply_filters( 'graph1_figure', $instance['graph1_figure'] );
$graph1Colour = apply_filters( 'graph1_colour', $instance['graph1_colour'] );
$graph2Figure = apply_filters( 'graph2_figure', $instance['graph2_figure'] );
$graph2Colour = apply_filters( 'graph2_colour', $instance['graph2_colour'] );
?>
<?php
$progressSlector = $args['widget_id'];
echo $args['before_widget'];
if ( ! empty( $title ) ) {
echo $args['before_title'] . $title . $args['after_title'];
}
if($barOrPie == 'progressBar') { ?>
<script type='text/javascript'>
function progress(percent, $element) {
var progressBarWidth = percent + '%';
$element.find('div').animate({ width: progressBarWidth }, 500).html('<p>' + percent + "<sup>% </sup>" + '</p>');
}
jQuery(document).ready(function () {
progress(<?php echo $graph1Figure ?>, jQuery("#<?php echo $progressSlector ?> .progressBar1"));
});
</script>
<?php
echo '<div class="progress_containers">';
echo '<div class="progressbar ' . $graph1Colour . '-progress progressBar1"><div></div></div>';
if( !empty ($graph2Figure) ) {
echo '<div class="progressbar ' . $graph2Colour . '-progress progressBar2"><div></div></div>';
?>
<script type='text/javascript'>
jQuery(document).ready(function () {
progress(<?php echo $graph2Figure ?>, jQuery("#<?php echo $progressSlector ?> .progressBar2"));
});
</script>
<?php
}
echo '</div>';
} else {
add_action('wp_head', 'pieChartScripts');
function pieChartScripts() {
wp_register_style('piechart-css', get_template_directory_uri() . '/css/jquery.easy-pie-chart.css');
wp_enqueue_style('piechart-css');
}
wp_register_script('piechart', get_template_directory_uri() . '/js/jquery.easypiechart.min.js', '', '2.0.4');
wp_enqueue_script('piechart');
switch($graph1Colour) {
case 'purple':
$pieColor = '#78267B';
break;
case 'yellow':
$pieColor = '#ffc000';
break;
case 'green':
$pieColor = '#89bf3c';
break;
default:
$pieColor = '#78267B';
}
echo '<div class="chart chart1" data-percent="' . $graph1Figure . '"><span style="color: ' . $pieColor . ';">' . $graph1Figure . '<sup>%</sup></span></div>';
if( !empty ($graph2Figure) ) {
switch($graph2Colour) {
case 'purple':
$pieColor2 = '#78267B';
break;
case 'yellow':
$pieColor2 = '#ffc000';
break;
case 'green':
$pieColor2 = '#89bf3c';
break;
default:
$pieColor2 = '#78267B';
}
echo '<div class="chart chart2" data-percent="' . $graph2Figure . '"><span style="color: ' . $pieColor2 . ';">' . $graph2Figure . '<sup>%</sup></span></div>';
}
?>
<script type="text/javascript">
jQuery(function() {
jQuery('#<?php echo $progressSlector ?> .chart1').easyPieChart({
barColor: "<?php echo $pieColor; ?>",
lineWidth: 31,
lineCap: 'square',
trackColor: '#e9ecec',
scaleColor: false,
size: 143
});
jQuery('#<?php echo $progressSlector ?> .chart2').easyPieChart({
barColor: "<?php echo $pieColor2; ?>",
lineWidth: 31,
lineCap: 'square',
trackColor: '#e9ecec',
scaleColor: false,
size: 143
});
});
</script>
<?php
}
echo '<h5 class="' . $graph1Colour . '-title">' . $graphTitle . '</h5>';
echo '<p>"' . $graphQuote . '"</p>';
echo $args['after_widget'];
}
Thanks for anyones help
You can call
wp_enqueue_script()
directly in your Widget output, and WordPress will enqueue the script. No need to add it to a callback. Try changing this:…to this: