WordPress.org

Forums

HMS Testimonials
[resolved] Star Rating not displaying (29 posts)

  1. Alphie
    Member
    Posted 1 year ago #

    The star ratings are not showing up on the testimonial page. Aren't there supposed to be stars displaying? How to do enable that? I saw in the settings a checkbox to enable the star rating and that's checked but none of the testimonials are displaying any stars. Is this something I need to add to each testimonial?

    https://wordpress.org/plugins/hms-testimonials/

  2. Jeff K
    Member
    Plugin Author

    Posted 1 year ago #

    Hey Alphie,

    2 things. First, you must enable them in your template. Assuming you are using the default template, go to:

    1. Testimonials -> Templates.
    2. Click edit (on the right) for the testimonial with an ID of 1. If you aren't using the default template, click edit on the one you are.
    3. Drag "5 Star Rating" from the unused column to the "Active Items" column.
    4. Click "Save Template".

    Second, right now it will show 5 of 5 Stars, or 4 of 5 Stars. If you are familiar with filters, you can swap out the text with images using the hms_testimonials_system_rating filter. I am working on documentation to do this.

  3. stellamaris5
    Member
    Posted 10 months ago #

    hi Jeff, sorry to tag onto this thread but I don't know how to use this hms_testimonials_system_rating filter you mention..as I am very new to wordpress etc.

    How would I find this code and where would I need to put it?

    Many thanks in advance!

    natureheals.co.uk

  4. Jeff K
    Member
    Plugin Author

    Posted 10 months ago #

    Hello,

    In your themes functions.php you would add:

    function hms_testimonials_system_rating($text) {
    	//override the content here
    }
    add_filter('hms_testimonials_sc_name', 'hms_name_override');

    Be aware that you need to know the PHP programming language.

    To read more on WordPress filters checkout this page.

    Jeff

  5. stellamaris5
    Member
    Posted 10 months ago #

    Thanks Jeff for the response, I have no idea what I need to do in this bit:
    //override the content here

    I think I will skip this so I don't mess up something :)

    ON a separate note, I used 'Block' for the display settings but all the reviews are stacked one after the other , without separation , is there an option to put them in a box or something so they are clearly separated?

    Also, can it be responsive as it looks fine on desktop but it goes over the edge on iPhone portait?

    Many thanks

  6. Jeff K
    Member
    Plugin Author

    Posted 10 months ago #

    That can all be done with CSS to include the responsive part.

    To add a spacing between your testimonials add this to your themes style.css (go to Appearance -> Editor ). It will default you to the style.css file. Scroll all the way to the bottom and paste the following CSS.

    .hms-testimonial-group .hms-testimonial-container:first-child {
    margin-top:0px;
    }
    .hms-testimonial-group .hms-testimonial-container {
    margin-top:15px;
    }

    This will add 15 pixels to the top of a testimonial container except for the first one in the group of testimonials.

    Also, I see you are floating are floating the container to the right, presumably to get the image to show up on the left. Instead of that, go into Testimonials -> Templates and edit the template you are using (defaults to 1), and drag "Image (System)" above the "Testimonial" item in the left hand list. This will put the image first.

  7. stellamaris5
    Member
    Posted 10 months ago #

    Spacing done, works fine.

    Cool, I've done the following so I am left with:

    .hms-testimonial-container .image {
    float:left;
    margin-right:15px;
    margin-bottom:5px;
    margin-top:10px;
    }
    .hms-testimonial-container .testimonial {
    background-color: #fff; /*I WILL CHANGE COLOR LATER*/
    }
    .hms-testimonial-group .hms-testimonial-container:first-child {
    margin-top:0px;
    }
    .hms-testimonial-group .hms-testimonial-container {
    margin-top:25px;
    }

    Do I need the float left for the image? I want it to look nice even on small screens

  8. Jeff K
    Member
    Plugin Author

    Posted 10 months ago #

    From what I could do with the Chrome Developer Tools, you don't have to float the image.

    Make sure you remove this bit that you added in previously.

    .hms-testimonial-container {
    float:right;
    }
  9. stellamaris5
    Member
    Posted 10 months ago #

    OK good stuff.... I have removed the float:right already and all looks good.

    If I remove the float left the image goes above the testimonial so I have kept that....

    Thank you so much....

    Now how to do this _ i have no clue where to start:) lots of reading to do I guess

    function hms_testimonials_system_rating($text) {
    	//override the content here
    }
    add_filter('hms_testimonials_sc_name', 'hms_name_override');
  10. Jeff K
    Member
    Plugin Author

    Posted 10 months ago #

    Whoops I forgot to update some text in that anyways.

    function my_hms_testimonials_system_rating($text) {
    	//override the content here
    }
    add_filter('hms_testimonials_system_rating', 'my_hms_testimonials_system_rating');

    So $text will be "<span itemprop="ratingValue" data-rating="5">5</span> out of 5". In the //override the content here you can change the output.

    So if you set it to:

    function my_hms_testimonials_system_rating($text) {
    	return '<span>10</span>;
    }

    It will always show up as 10.

    a) Are you familiar with the PHP programming language?
    b) What are you trying to do with that filter?

  11. stellamaris5
    Member
    Posted 10 months ago #

    A)Nope
    B) trying to make it instead of 5 out of 5 to show some stars or something nice and colorfull

  12. Jeff K
    Member
    Plugin Author

    Posted 10 months ago #

    Ah gotcha.

    I don't have any documentation on doing that, it's on my todo list. I might be able to come up with something later this weekend.

  13. stellamaris5
    Member
    Posted 10 months ago #

    Cheers Jeff, looking forward to it :)

  14. Jeff K
    Member
    Plugin Author

    Posted 10 months ago #

    Paste the code at the end of this post into the bottom of your themes functions.php file. It code makes an assumption that your stars are named 1.png, 2.png, 3.png, 4.png and 5.png.

    In the near future I might make this an easy setting. I have also added this code to the documentation page and will show up the next time an update is published.

    You will need to change this line to set the path to your stars.

    return '<img src="/path/to/my/star/images/' . $rating . '.png" alt="' . $rating . ' out of 5 stars" itemprop="ratingValue" />';

    Code that goes in your themes functions.php file

    function hms_rating_override($text) {
    
    	/**
    	 * Detect the current rating
    	 */
    	$matches = null;
    	$getMatches = preg_match('/data-rating=\"(\d)\"/', $text, $matches);
    
    	if ( count($matches) == 2 ) {
    		$rating = $matches[1];
    
    		return '<img src="/path/to/my/start/images/' . $rating . '.png" alt="' . $rating . ' out of 5 stars" itemprop="ratingValue" />';
    	}
    
    	return $text;
    }
    add_filter('hms_testimonials_system_rating', 'hms_rating_override');
  15. stellamaris5
    Member
    Posted 10 months ago #

    Thank you Jeff.
    I've uploaded my stars to the media folder and named them 1.png, 2.png etc. I've check the path and added in the code.
    Ok this is what I added in my child theme function.php and cleared all my caches but it doesn't work - no idea what I am doing wrong

    function hms_rating_override($text) {
    
    	/**
    	 * Detect the current rating
    	 */
    	$matches = null;
    	$getMatches = preg_match('/data-rating=\"(\d)\"/', $text, $matches);
    
    	if ( count($matches) == 2 ) {
    		$rating = $matches[1];
    
    		return '<img src="/wp-content/uploads/2014/07/' . $rating . '.png" alt="' . $rating . ' out of 5 stars" itemprop="ratingValue" />';
    	}
    
    	return $text;
    }
    add_filter('hms_testimonials_system_rating', 'hms_rating_override');
    }
  16. Jeff K
    Member
    Plugin Author

    Posted 10 months ago #

    Where is the last } coming from? I think that is your issue. Move the code to below that line.

  17. stellamaris5
    Member
    Posted 10 months ago #

    thank you Jeff,,,still no luck? Would it apply to existing ones or only new ones from now?

    function hms_rating_override($text) {
            /**
    	 * Detect the current rating
    	 */
    	$matches = null;
    	$getMatches = preg_match('/data-rating=\"(\d)\"/', $text, $matches);
    
    	if ( count($matches) == 2 ) {
    		$rating = $matches[1];
    
    		return '<img src="/wp-content/uploads/2014/07/' . $rating . '.png" alt="' . $rating . ' out of 5 stars" itemprop="ratingValue" />';
    	}
    
    	return $text;
    }
    add_filter('hms_testimonials_system_rating', 'hms_rating_override');
  18. Jeff K
    Member
    Plugin Author

    Posted 10 months ago #

    It applies to both. Can you email me the file and I will take a look?

    kreitje {@} hitmyserver {.} com

  19. stellamaris5
    Member
    Posted 10 months ago #

    sorry I was being a numpty, I pasted it into the style.css by mistake now it works in function.php

    only issue is that it just shows 1 star everywhere it should be 4 or 5 for instance.

    will mail the file shortly

  20. Jeff K
    Member
    Plugin Author

    Posted 10 months ago #

    It's loading the right images. Your stars need to be adjusted. 5.png need to show all 5 stars. 4.png will show 4 stars etc.

    If you only want to use 1 image and repeat it, we can do that too. Just let me know.

  21. stellamaris5
    Member
    Posted 10 months ago #

    I have 5 images uploaded, called 1.png, 2.png, 3.png, 4.png and 5.png
    They all show a single star - I think i misunderstood you.
    Can this work as well?

  22. Jeff K
    Member
    Plugin Author

    Posted 10 months ago #

    If you want to use just a single star and repeat it, change your code to:

    function hms_rating_override($text) {
    
    	/**
    	 * Detect the current rating
    	 */
    	$matches = null;
    	$getMatches = preg_match('/data-rating=\"(\d)\"/', $text, $matches);
    
    	if ( count($matches) == 2 ) {
    		$rating = $matches[1];
    
    		return str_repeat('<img src="/wp-content/uploads/2014/07/1.png" alt="' . $rating . ' out of 5 stars" itemprop="ratingValue" />', $rating);
    	}
    
    	return $text;
    }
    add_filter('hms_testimonials_system_rating', 'hms_rating_override');

    This one is just using 1.png since 2.png, 3.png, 4.png, and 5.png are all the same.

  23. stellamaris5
    Member
    Posted 10 months ago #

    yay i am so happy that worked!!! brilliant Jeff you made my day:)

  24. Jeff K
    Member
    Plugin Author

    Posted 10 months ago #

    :D

  25. stellamaris5
    Member
    Posted 10 months ago #

    marked resolved and rated 5 stars

  26. Jeff K
    Member
    Plugin Author

    Posted 10 months ago #

    Thanks!

  27. stellamaris5
    Member
    Posted 10 months ago #

    sorry me again :)

    i just realised it still shows the words on my iPhone , it doesn't display the stars...i guesss there is more code needed....

  28. Jeff K
    Member
    Plugin Author

    Posted 10 months ago #

    Clear the cache on your website and browser.

  29. stellamaris5
    Member
    Posted 10 months ago #

    yep all good!:) sorry

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • HMS Testimonials
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.