Creating Custom Admin Pages and Display Data from Database | WordPress

Creating Custom Admin Pages and Display Data from Database in WordPress. I’ve shown you Customs form that store input in the database which is my previous tutorial. Now what if you already have a set of data in Database, but you want to display data ( gridview ) database in Wordpress admin page. 

Requirements

• Your own self-hosted WordPress site, obviously.
• Basic PHP and MySQL skills
• An existing dataset in MySQL.

What Are We Going to Do Before Coding?

Create a relevant table on Database, I have created Table like below (MySQL Code).

Insert some dummy data into Table.

CREATE TABLE `request` (
  `ID` int(11) NOT NULL AUTO_INCREMENT,
  `Name` varchar(255) NOT NULL,
  `Email` varchar(255) DEFAULT NULL,
  `Service` varchar(25) DEFAULT NULL,
  `Date` date DEFAULT NULL,
  `Address` varchar(255) DEFAULT NULL,
  `Phone` int(11) DEFAULT NULL,
  `Message` varchar(100) DEFAULT NULL,
  `status` varchar(10) NOT NULL DEFAULT 'start',
  PRIMARY KEY (`ID`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=12 ;

Making a Custom Admin Page

There are two or three components to an admin page, depending on the functionality you are building;

1, A menu entry – top-level or sub-level

2, The page content

3, Processing logic for forms – if needed.

Creating a Top-Level Admin Page

The first step is to create a menu entry with the add_menu_page() function. Here’s a full example. Explanation

	add_action( 'admin_menu', 'my_admin_menu' );
	function my_admin_menu() {
	add_menu_page( 'My Top Level Menu Example', 'Top Level Menu', 'manage_options', 'myplugin/myplugin-admin-page.php', 'myplguin_admin_page', 'dashicons-tickets', 6 );
	}

view raw example.php hosted with ❤ by GitHub

Project Example.
According to my project below the example file for function.php. Add following php code into function.php file. You can find function.php file in wp-content\themes\<<Your Theme Name>> then you add code into top of your function.php.

	add_action( 'admin_menu', 'my_admin_menu' );
	function customerview_admin_page(){
	?>
	<div class="wrap">
	<h2>Customer Details</h2>
	<?php
	global $wpdb;
	$customers = $wpdb->get_results("SELECT * FROM request ORDER BY ID DESC;");
	echo "<table class='widefat fixed'>";
	echo "<th>ID</th>";
	echo "<th>Name</th>";
	echo "<th>Email</th>";
	echo "<th>Service</th>";
	echo "<th>Date</th>";
	echo "<th>Address</th>";
	echo "<th>Phone</th>";
	echo "<th>Message</th>";
	echo "<th>Status</th>";
	foreach($customers as $customer){
	echo "<tr>";
	echo "<td><input type='text' name='ID' value=".$customer->ID." size='1' readonly></input></td>";
	$CusID = $customer->ID;
	echo "<td>".$customer->Name."</td>";
	echo "<td>".$customer->Email."</td>";
	echo "<td>".$customer->Service."</td>";
	echo "<td>".$customer->Date."</td>";
	echo "<td>".$customer->Address."</td>";
	echo "<td>".$customer->Phone."</td>";
	echo "<td>".$customer->Message."</td>";
	echo "<td>".$customer->status."</td>";
	echo "</tr>";
	}
	echo "</table>";
	?>
	</div>
	<?php
	}
	function my_admin_menu() {
	add_menu_page('Customer Request View', 'Customer Requests', 'manage_options', 'myplugin/View_Customer_Details.php', 'customerview_admin_page', 'dashicons-tag', 6 );
	}

view raw function_example.php hosted with ❤ by GitHub

Now you can view data through WordPress admin dashboard!


If you have any questions please post your comments below.

Thank you!