nickfindley

The website is currently in development, so I can’t direct you anywhere, but here’s a screenshot of the plugin and code in action:

Kind of hard to tell that the last star is only 90% filled, but I assure you it is! Here’s what it looks like when I set --star-decimal to .5:

Like I noted earlier, I appreciate the simplicity of the code, which made it easy to customize the appearance to match our theme. Everything else seems to run seamlessly!

Thanks for the reply. I haven’t had any issues with the colors or sizes of the stars (or anything else—I appreciate that the code is pretty clean and easy to modify most styles with CSS). The problem is that the SVGs used only allow for a full star or half star, and they’re inserted programmatically.

However, I think I’ve found a solution using only CSS. What I’ve done is hide the final star, then used a pseudo-element to place a modified star in its place

/* hide the final star */
.wp-star:last-child svg {
    display: none !important;
}

/* replace with :after pseudo-element */
.wp-star:last-child:after {
    /* set --star-decimal to your fraction of a star
    /* for example: 4.7 stars -> --star-decimal: 70% */
    --star-decimal: 70%;
    /*
    /* encode SVG at
    /* https://yoksel.github.io/url-encoder/
    /* change the fill color near the end of the code
    /* if needed
    /* note: %23 is the URL encoded form of #
    /* for example: #ff9900 -> fill='%23ff9900' */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='64 32 1664 1587'%3E%3Cpath d='M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z' fill='%23c4da167'%3E%3C/path%3E%3C/svg%3E");
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    clip-path: polygon(0 0, var(--star-decimal) 0, var(--star-decimal) 100%, 0 100%);
    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
    height: 20px;
    vertical-align: middle;
    width: 20px;
}

When you change the --star-decimal custom property, it adjusts the clip-path so that only the corresponding percentage of the star is displayed.

This may not work perfectly for every scenario, but it gets the job done in my case. I hope this is helpful for others.

However, I might suggest in a future version that you provide finer increments for the partial stars. I want to be able to show off the full 4.9 stars!

That’s correct. I have a lot of ACF custom fields that I’d like to be able to search.