How to display the same star system in ma web page which i created in backen

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

Leave a Reply

Your email address will not be published. Required fields are marked *