WordPress.org

Support

Support » Plugins and Hacks » [Resolved] Star Rating not displaying

[Resolved] Star Rating not displaying

  • Alphie
    Member

    @jvb1103

    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/

Viewing 15 replies - 1 through 15 (of 28 total)
  • Plugin Author Jeff K
    Member

    @kreitje

    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.

    stellamaris5
    Member

    @stellamaris5

    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

    Plugin Author Jeff K
    Member

    @kreitje

    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

    stellamaris5
    Member

    @stellamaris5

    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

    Plugin Author Jeff K
    Member

    @kreitje

    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.

    stellamaris5
    Member

    @stellamaris5

    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

    Plugin Author Jeff K
    Member

    @kreitje

    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;
    }
    stellamaris5
    Member

    @stellamaris5

    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');

    Plugin Author Jeff K
    Member

    @kreitje

    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?

    stellamaris5
    Member

    @stellamaris5

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

    Plugin Author Jeff K
    Member

    @kreitje

    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.

    stellamaris5
    Member

    @stellamaris5

    Cheers Jeff, looking forward to it 🙂

    Plugin Author Jeff K
    Member

    @kreitje

    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');
    stellamaris5
    Member

    @stellamaris5

    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');
    }
    Plugin Author Jeff K
    Member

    @kreitje

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

Viewing 15 replies - 1 through 15 (of 28 total)
  • The topic ‘[Resolved] Star Rating not displaying’ is closed to new replies.