Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
    
Can we see your Widget code, please? –  Chip Bennett Oct 16 '13 at 15:49
    
yer sure. i have added to question –  asaunders Oct 16 '13 at 15:50

1 Answer 1

up vote 2 down vote accepted

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
}
share|improve this answer
    
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 –  asaunders Oct 16 '13 at 16:18
    
Is the script not being added? Or is it being added to the footer? (Side note: W3C validator isn't gospel ;) ) –  Chip Bennett Oct 16 '13 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? –  asaunders Oct 16 '13 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. –  Chip Bennett Oct 16 '13 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 –  asaunders Oct 16 '13 at 16:29

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.