2

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>%&nbsp;</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

Improve this question
2
  • Can we see your Widget code, please? Commented Oct 16, 2013 at 15:49
  • yer sure. i have added to question Commented Oct 16, 2013 at 15:50

1 Answer 1

Reset to default
2

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:

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'); // etc }

...to this:

else { 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'); // etc }
Improve this answer
5
  • Hi, that is what i originally had but because it wasn't adding it to the head w3c validator was throwing an error thats why i was trying to use the action Commented Oct 16, 2013 at 16:18
  • Is the script not being added? Or is it being added to the footer? (Side note: W3C validator isn't gospel ;) ) Commented Oct 16, 2013 at 16:19
  • it is being added to the footer. i know its not gospel :) but i like all my sites being validated if there is something i can do to make it validate rather than saying thats just a issue with wordpress. if that makes any sense? Commented Oct 16, 2013 at 16:23
  • I wouldn't worry about it too much in this case. But if you think about it: by the time the Widget is parsed, you're already into the template, past the call to wp_head() that fires the wp_head (and subordinate) actions. So, an add_action( 'wp_head', $callback ) would be too late at that point. Commented Oct 16, 2013 at 16:27
  • ah okay. fair enough. I will accept your answer as you have explained what i was doing before was correct and have helped me understand why i cant use that action inside a widget :). thanks Commented Oct 16, 2013 at 16:29

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.