I would like to customize the article rating div, instead of showing stars would like to show a custom image. I already have a similar ratings system for other parts of the website where we use a custom image, and would like it to look consistent in the article comments sections as well. Do I need to modify code to do this (and if so where), or could i do this in CSS somehow. I've been experimenting with CSS and it seems like it should probably be somewhere in code or using a custom hook. Thanks in advance for any help anyone can offer.
Limited Support
Our support team is currently on holiday from December 25, 2025 to January 7, 2026, and replies may be delayed during this period.
We appreciate your patience and understanding while our team is away. Thank you for being part of the wpDiscuz community!
Merry Christmas and Happy Holidays! 🎄
Sep 11, 2024 10:45 pm
10 Replies
Sep 12, 2024 9:20 am
Hi,
Please follow the steps below:
1. Insert the following code into the active theme's functions.php file:
add_filter('wpdiscuz_full_star_svg', function () {
return '<img class="wpd-star" alt="" src="' . get_template_directory_uri() . '/img/1.png" style="width:50px">';
});
add_filter('wpdiscuz_half_star_svg', function () {
return '<img alt="" src="' . get_template_directory_uri() . '/img/2.png" style="width:50px">';
});
2. Insert the CSS code below into 'Top Admin Bar' > 'Customize' > 'Additional CSS' > 'Additional CSS' textarea:
img.wpd-star:not(.wpd-active){filter:grayscale(90%)}
3. Create a new 'img' folder in your theme directory and upload two images (for example 1.png, 2.png) there. Alternatively, you can upload the images to your media library. If you choose the latter, make sure to adjust the image path in the code provided in Step 1 accordingly.
Sep 12, 2024 3:53 pm
Thanks Asti! This is working pretty well except it won't let me click on it to actually do the rating. I did add one line of css:
img.wpd-star:hover {filter:none !important;}
Now... previous ratings show correctly... and articles that aren't rated allow me to mouse over and it changes the icon. But when I click on it - nothing - the rating will not occur.
Sep 13, 2024 2:49 pm
can you contact me by email I am getting blocked by wordfence
Sep 15, 2024 1:53 pm
@asti I cannot send a message to you, it says:
You are not allowed to write a message yet.
You should have at least 5 approved posts in forum.
Sep 15, 2024 1:59 pm
I can try again to get by wordfence, by adding some spelling mistakes in the message. Here goes:
The Iaeh-jax on c l ick even(t) is atta.ched to the svg ob-jec.t and not an image ob-j-ect in the scr-ipt. So - th-at-is why the click will not5 w8rk an6more.
Sep 15, 2024 2:16 pm
More broken english:
I have tried to update the j&v& scr-ipt file but the ed;its do not seem to take effect, even after clear(ing ca.che and or disablin9 and re-ena-bling the plug.in. Ideas?
Sep 15, 2024 2:26 pm
there is no event for an img object, just an svg object. See in the wpdiscuz script file:
$('body').on('click', '#wpd-post-rating.wpd-not-rated .wpd-rate-starts svg'
Page 1 / 2
Next
