How can i build a simple review system in wordpress without plugin?
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.
Leave an answer