Star rating element from Avada Theme Builder implements scheme in footer
Avada theme builder is used for a client project. Among other things, the Star Rating element is used. But this also loads an additional rating scheme. Here is a workaround to get around this.
I am currently working on a website for a client. Backend is Wordpress MU 3.9 with Avada Theme Builder 7.6.1 (ATB). Additionally Advanced Custom Fields (ACF) is used.
The project is a website that creates reviews about other websites. The data input was realized with ACF. Among other things, a range element was implemented there to select the appropriate rating (min 1 star, max 5 stars).
To be able to display the star rating now, the star rating element from ATB was built into the layout.
An extra scheme what I do not want and do not need
A later check of the source code showed me the inclusion of a rating scheme in the footer of the website. The Star-Rating element built this into the footer without being asked and without the possibility to deactivate it.
<script type="application/ld+json">
{
"@context" : "https:\/\/schema.org",
"@type" : "Rating",
"ratingValue" : "3",
"bestRating" : "5"
}
</script>
<script type="application/ld+json">
{
"@context" : "https:\/\/schema.org",
"@type" : "BreadcrumbList",
"itemListElement" : [{
"@type" : "ListItem",
"position" : 1,
"name" : "Home",
"item" : "https:\/\/domain.com\/"
},
{
"@type" : "ListItem",
"position" : 2,
"name" : "Uncategorized",
"item" : "https:\/\/domain.com\/category\/uncategorized\/"
}]
}
</script>The support from the Avada theme builder was unfortunately not really helpful either. They only offered to remove the corresponding code from the theme if I provide the FTP access data.
But I refused that.
My Star-Rating workaround
I then started to create a shortcode based on the star rating element, which shows me the number of stars - but does not embed a scheme.
function show_star_rating_review()
{
ob_start();
global $post;
$rating = get_field('rating', $post);
$rate_arr = explode('.',$rating);
if ($rate_arr[1]) {
$rate_emp = 4 - $rate_arr[0];
} else {
$rate_emp = 5 - $rate_arr[0];
}
$x = 1;
$y = 1;
echo '<div class="awb-stars-rating awb-stars-rating-1 awb-stars-rating-no-text" aria-label="Rating: ' . $rating . ' out of 5">';
echo '<style>.awb-stars-rating-1 .awb-stars-rating-filled-icon{margin-right:2px;color:#ffd041;}.awb-stars-rating-1 .awb-stars-rating-empty-icon,.awb-stars-rating-1 .awb-stars-rating-partial-icon-wrapper{margin-right:2px;}.awb-stars-rating-1 .awb-stars-rating-partial-icon{color:#ffd041;}.awb-stars-rating-1 .awb-stars-rating-icons-wrapper{color:#dbdbdb;font-size:23px;}</style>';
echo '<div class="awb-stars-rating-icons-wrapper">';
while ($x <= $rate_arr[0]) {
$x++;
echo '<i class="fa-star fas awb-stars-rating-filled-icon"></i>';
}
if ($rate_arr[1]) {
echo '<i class="fa-star fas awb-stars-rating-partial-icon-wrapper"><i class="fa-star fas awb-stars-rating-partial-icon" style="width:' . $rate_arr[1] . '0%;"></i></i>';
}
if ($rate_emp > 0) {
while ($y <= $rate_emp) {
$y++;
echo '<i class="fa-star fas awb-stars-rating-empty-icon"></i>';
}
}
echo '</div>';
echo '</div>';
return ob_get_clean();
}
add_shortcode('ShowStarRatingReview', 'show_star_rating_review');How the Star-Rating shortcode works
The rating range goes from 1 to 5, so in the best case 5 stars can be assigned. The steps from 1 to 5 are always 0.1, so a rating of 1.7 stars can also be assigned.
Examples
Rating 2.0
2x star filled
3x star unfilled
Rating 3.6
3x star filled
1x star 60% filled
1x star unfilled
Rating 4.8
4x star filled
1x star filled to 80%
The total result is always 5 stars.
PHP code details
$rating = get_field('rating', $post);This reads the rating from the ACF.
$rate_arr = explode('.',$rating);Read the number before and after the point and write it into an array.
if ($rate_arr[1]) {
$rate_emp = 4 - $rate_arr[0];
} else {
$rate_emp = 5 - $rate_arr[0];
}Calculate the number of unfilled stars. If it is a round rating (e.g. 3.0) there is no percentage filled star.
$x = 1;
$y = 1;Set variables to count to initial value.
echo '<div class="awb-stars-rating awb-stars-rating-1 awb-stars-rating-no-text" aria-label="Rating: ' . $rating . ' out of 5">';
echo '<style>.awb-stars-rating-1 .awb-stars-rating-filled-icon{margin-right:2px;color:#ffd041;}.awb-stars-rating-1 .awb-stars-rating-empty-icon,.awb-stars-rating-1 .awb-stars-rating-partial-icon-wrapper{margin-right:2px;}.awb-stars-rating-1 .awb-stars-rating-partial-icon{color:#ffd041;}.awb-stars-rating-1 .awb-stars-rating-icons-wrapper{color:#dbdbdb;font-size:23px;}</style>';
echo '<div class="awb-stars-rating-icons-wrapper">';Define CSS Style and set first DIV.
while ($x <= $rate_arr[0]) {
$x++;
echo '<i class="fa-star fas awb-stars-rating-filled-icon"></i>';
}As long as X is less than or equal to number before the point, increase X by 1 and output 1 filled star.
if ($rate_arr[1]) {
echo '<i class="fa-star fas awb-stars-rating-partial-icon-wrapper"><i class="fa-star fas awb-stars-rating-partial-icon" style="width:' . $rate_arr[1] . '0%;"></i></i>';
}If there is a number after the dot, then output the star with the percentage value. I just append a "0" to the value to get the 2 digit percentage value.
if ($rate_emp > 0) {
while ($y <= $rate_emp) {
$y++;
echo '<i class="fa-star fas awb-stars-rating-empty-icon"></i>';
}
}Here, the unfilled star is then output at the end, depending on whether there is a percentage star or not.
echo '</div>';
echo '</div>';Now just close the DIV's again - and you're done.
[ShowStarRatingReview]Now you can display the number of stars in the layout again without loading anything additional that can't be disabled.
Simply include the shortcode in the layout where you want the stars to appear. This works with the code element as well as with a text block element.
Conclusion
You've learned here how to get the star rating element from the Avada theme builder as a shortcode without loading a rating scheme in the footer.
This is important if you already have a full scheme loaded with another plugin.
ThemeFusion