title: Display the inserted data in wordpress custom template
body: <p>Hi I am developing a word press website. I created a custom template, where in I have a form and fields are inserted into the database(mySql).  The Codes are shown below.<code>Insert into database</code></p>
  
  <p>Now I require to display the data which are already inserted into the database in front end in form of a <code>table</code> or <code>grid</code>. How I am able to do that. </p>
  
  <p>I need the output something like this.</p>
  
  <pre><code>      Ritual Name   Ritual Active
        ---------------------------
        Test1        |    Y
        Test2        |    Y
  </code></pre>
  
  <p>Any help appreciated.</p>
  
  <p>function.php</p>
  
  <pre><code>function childtheme_style_andscripts(){
      //wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css'  );
      wp_enqueue_script('ajax-function',  get_stylesheet_directory_uri() .   '/js/ajaxfunction.js', array('jquery'), '1.0', true );
      wp_localize_script( 'ajax-function', 'usersubmitform', array(
  'url'=&gt; admin_url('admin-ajax.php'),
      'security'=&gt; wp_create_nonce('our-nonce')
      ) );
  }
  
  add_action('wp_enqueue_scripts','childtheme_style_andscripts');
  
  function form_action_function() {
      require_once(dirname( __FILE__ ).'/../../../wp-load.php');
      $data = $_POST['data'];
      global $wpdb;
      if( !check_ajax_referer('our-nonce', 'security' ) ) {
          wp_send_json_error('security failed');
          return;
      }
      //var_dump($data);
      $rname=$data['rname'];
      $ractive=$data['ractive'];
  
      $table_name = "rituals";
      $wpdb-&gt;insert($table_name, array ('Ritual_Name' =&gt; $rname, 'Ritual_Active' =&gt; $ractive) );
  
      //$wpdb-&gt;show_errors();
      //$wpdb-&gt;print_error();
      echo 'From Submitted Successfully';
      die();
  }
  add_action('wp_ajax_nopriv_form_action_function','form_action_function');
  add_action('wp_ajax_form_action_function','form_action_function');
  </code></pre>
  
  <p>ajaxfunction.js</p>
  
  <pre><code>jQuery(document).ready(function($){
  var submitButton = document.getElementById('usersubmit');
  var ajaxFunctionformprocess = function(fromdata, action){
      $.ajax({
          type:'post',
          url: usersubmitform.url,
          data:{
              action:action,
              data:fromdata,
              security:usersubmitform.security,               
          },
          success:function(reponse){
              $('div.msg').html(reponse);
          },
          error:function(response){
              alert(response);
          }
      });     
  }
  
  submitButton.addEventListener('click', function(event){
      event.preventDefault();
      var fromdata = {
          'rname':document.getElementById('rname').value,
          'ractive':document.getElementById('ractive').value,
      };
      ajaxFunctionformprocess(fromdata, 'form_action_function');  
  
      }); 
    });
  </code></pre>
  
  <p>Samplepage.php(custom template)</p>
  
  <pre><code>  &lt;div id="primary" class="content-area"&gt;
      &lt;div id="content" class="site-content" role="main"&gt;
          &lt;h1 class="headingform"&gt;User Form&lt;/h1&gt;
          &lt;div class="msg"&gt;&lt;/div&gt;
          &lt;form  class="userform"&gt;
              Ritual Name: &lt;input type="text" id="rname" name="rname" /&gt;&lt;br&gt; &lt;br&gt;
              Ritual Active: &lt;input type="text" id="ractive" name="ractive" /&gt; &lt;br&gt;&lt;br&gt; 
              &lt;input  id="usersubmit"type="submit" Value="Submit" /&gt;
          &lt;/form&gt;
  
      &lt;/div&gt;&lt;!-- #content --&gt;
  &lt;/div&gt;&lt;!-- #primary --&gt;
  </code></pre>