I have created a 5 star rating system plugin using jquey in wordpress(backend). The star values are also getting updated in to post meta table. How to display the same star system in ma page. Heres my plugin code.

<?php

/* Plugin Name: Star Rating
 * Version: 1.0
 */

class starrating{

    public function __construct(){
    add_action('add_meta_boxes',array($this,'my_meta'));
    add_action('admin_enqueue_scripts',array($this ,'starscript' ));
    add_action('save_post', array($this,'save_field'));
    }


    public function my_meta()

    {

        add_meta_box(
       'my_custom_meta',
       'Created By',
        array($this,'my_meta_box_mes'),
       'a_z',
       'side',
       'low'
    );

    }

    public function save_field($post_id)

    {
    update_post_meta($post_id,'starrating',$_POST['rating']);    
 }


    public function my_meta_box_mes()
    {

    ?>
     <label>Please Rate Your Ratings !!</label>
     <p>
  <input type="hidden" name="rating" id="rating" />
<ul class="rating" onMouseOut="resetRating();">
  <li name="star" value="one" onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onclick="addRating(this);">★</li>
  <li name="star" value="two" onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onclick="addRating(this);">★</li>
  <li name="star" value="three" onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onclick="addRating(this);">★</li>
  <li name="star" value="four" onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onclick="addRating(this);">★</li>
  <li name="star" value="five" onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onclick="addRating(this);">★</li>
</ul>
    </p>



     <?php
    }
    public function starscript(){
     wp_enqueue_script( 'star_id',content_url() . '/plugins/star_rating/js/starrating.js' );
     wp_enqueue_script('jquery_id', 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js');
     wp_enqueue_style( 'styl_id',content_url() . '/plugins/star_rating/css/star.css' ); 

    }
}
$star=new starrating();

?>

Read more here: How to display the same star system in ma web page which i created in backen


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: