-2

I was searching for a simple plugin in order to display a rating system on one of my custom post type. I was going to ask the question here, but in the meantime, i found a solution, so I thought i could share it here, for others people. As my CPT was already built, with filters and ajax load more, taxonomies and custom style, I didn't wanted one of these complex plugin offering lots of options.

And finally i saw that there was a built in function

 wp_star_rating()

in the core of wordpress !! Fantastic !!

Finally it was quite simple

I have a custom post type called "review". I needed to display in three rows three different reviews scores. For example :

My CPost title

review 1 :....

review 2: ....

review 3: ....

the customer text...etc..

As I'm using ACF, I added three news custom fields for my custom post type. Then, i followed the codex instruction. In function.php, i added

 require_once( ABSPATH . 'wp-admin/includes/template.php' );

in my style.css file, i added

            @font-face {
                font-family: "dashicons";
                src: url("../fonts/dashicons.eot");
            }

            @font-face {
                font-family: "dashicons";
                src: url(data:application/x-font-woff;charset=utf-8;base64,/* !! Large amount of data removed, see wp-includes/css/dashicons.css for complete data !! */) format("woff"),
                    url("../fonts/dashicons.ttf") format("truetype"),
                    url("../fonts/dashicons.svg#dashicons") format("svg");
                font-weight: normal;
                font-style: normal;
            }

            .star-rating .star-full:before {
                content: "\f155";
            }

            .star-rating .star-half:before {
                content: "\f459";
            }

            .star-rating .star-empty:before {
                content: "\f154";
            }

            .star-rating .star {
                color: #0074A2;
                display: inline-block;
                font-family: dashicons;
                font-size: 20px;
                font-style: normal;
                font-weight: 400;
                height: 20px;
                line-height: 1;
                text-align: center;
                text-decoration: inherit;
                vertical-align: top;
                width: 20px;
            }

Then in my custom post type, I directly inserted the custom fields values in the wp_star_rating arguments.

$animation = get_field('animation');
                            if($animation):
                             $args = array(
                               'rating' => $animation,
                               'type' => 'rating',
                               'number' => '',
                            );?>

                            <div>Animation: <?php  wp_star_rating( $args )?></div>;
                            <?php endif;?>

                            <?php 
                            $contenu = get_field('contenu');
                            if($contenu):
                             $args = array(
                               'rating' => $contenu,
                               'type' => 'rating',
                               'number' => '',
                            );?>

                            <div>Contenu: <?php  wp_star_rating( $args )?></div>;
                            <?php endif;?>

                            <?php 
                            $organisation = get_field('organisation');
                             if($organisation):
                             $args = array(
                               'rating' => $organisation,
                               'type' => 'rating',
                               'number' => '',
                            );?>

                            <div>Organisation: <?php  wp_star_rating( $args )?></div>;
                            <?php endif;?>

Finaly, I also needed to have an average note on top of my custom post type. so I used the acf save_post filter

 function my_acf_save_post( $post_id ) {

 // get new value
 $animation = get_field('animation');
 $contenu = get_field('contenu');
 $organisation = get_field('organisation');

 // do something
 $note_globale = $animation + $contenu + $organisation;
 $note_finale = $note_globale / 3;
 $note = number_format($note_finale,1);
 update_field('note', $note, $post_id);

 }
 add_action('acf/save_post', 'my_acf_save_post', 20);

As the results have many decimals, i use the php function "number_format" and on the front end, the round function

<?php       
                                $note = get_field('note');
                                if($note): 
                                 $args = array(
                                   'rating' => $note,
                                   'type' => 'rating',
                                   'number' => '',
                                );?>
                                <div>
                                    <span class="note"><?php echo round($note,1) ?>/5</span><span class="average"><?php wp_star_rating( $args ) ?></span></div>
                                <?php endif;?>

I hope this is the wright way to do it, if someone have better solution I'd be glad to learn from him.

  • 2
    There's no question here... – Jacob Peattie Mar 26 at 1:30
  • Can you please edit your post and highlight the actual question that you need help with? Thank you. – Christine Cooper Mar 26 at 13:04
  • I just edited my question/answer. thank you – blogob Mar 26 at 16:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.