How to add a WordPress admin page to add data to a custom table

So last time I talked about how you can create a custom table with WordPress. Now, we’re going to add some data to that table.

But we’re not going to just write some MySQL and write it directly in phpMyAdmin. Instead, we’re going to create a way for an admin use to insert data to the table via a page in the backend.

This is something that can seem like a massive worry, but the basic principles are pretty simple. So let’s get started!

How to add data the WordPress way

Like I said in the custom tables post, I’m not really going to go over MySQL and the commands. Instead, this tutorial will show you how to use MySQL the WordPress way. If you’re looking to learn MySQL, I would highly suggest the W3Schools tutorial.

Anyway, to add data via code in WordPress, we’re going to go back to the $wpdb class with the insert method. This function takes in the table name and an array of the values to insert and adds the data row to the table. So, an example line of code would look like this.

$wpdb->insert( $table_name, $item );

Now that we know the function we’ll be using, let’s learn how to create a custom admin page.

How to add a custom admin page

The next part we need to learn before creating the page is how to add a custom admin page in WordPress. Fortunately, this part is super simple. First, we’ll use the add_menu_page function. Here we’ll add the page name, page slug, dashicon, capability needed to access the page and the callback function.

add_menu_page( __( 'Teams', 'sports-bench' ), __( 'Teams', 'sports-bench' ), 'edit_posts', 'teams', 'sports_bench_teams_form_page_handler', 'dashicons-groups', 6 ) ;

Then the callback function is where we’ll put all of our code that will be printed on the page. So, a basic set up for an admin page would look like this.

function sports_bench_team_admin_menu() {
 global $team_page;
 add_menu_page( __( 'Teams', 'sports-bench' ), __( 'Teams', 'sports-bench' ), 'edit_posts', 'add_data', 'sports_bench_teams_form_page_handler', 'dashicons-groups', 6 ) ;
}
add_action( 'admin_menu', 'sports_bench_team_admin_menu' );

function sports_bench_teams_form_page_handler() {
  echo 'Hello World!';
}

I do want to note that I’ve wrapped the add_menu_page function inside another function that is called with the admin_menu hook, which is the proper way to add the page.

Putting the page together

So now we’re ready to put together the page. Let’s focus in on the callback function, since that’s the trickiest part and where all of the fun stuff happens.

First, let’s create a form. We’ll have text inputs for team_name, team_city, team_state and team_stadium. We’ll get to how we’ll add team_id in a bit. The form method should be POST and the action should be “?page=add_data”.

<form method="POST" action="?page=add_data">
  <label>Team Name: </label><input type="text" name="team_name" /><br />
  <label>Team City: </label><input type="text" name="team_city" /><br />
  <label>Team State: </label><input type="text" name="team_state" /><br />
  <label>Team Stadium: </label><input type="text" name="team_stadium" /><br />
<input type="submit" value="submit" />
</form>

Now we get into the actual PHP code. First we’re going to find out how to get the team id for the team. And to do that, we’ll use the following lines of code. It checks the database for the last entered team, grabs that id and adds one to it for our new team. If there are no teams, then the id is set to one.

$default_row = $wpdb->get_row( "SELECT * FROM $table_name ORDER BY team_id DESC LIMIT 1" );
if ( $default_row != null ) {
 $id = $default_row->team_id + 1;
} else {
 $id = 1;
}

Next, we’ll create an array of default values. This will help us avoid any weird errors when we go to insert the data. We then merge this array with the data that comes back into a variable.

$default = array(
 'team_id' => $id,
 'team_name' => '',
 'team_city' => '',
 'team_state' => '',
 'team_stadium' => '',
);
$item = shortcode_atts( $default, $_REQUEST );

And then finally, we go and insert the new team into the database.

$wpdb->insert( $table_name, $item );

And here’s our completed code.

function sports_bench_team_admin_menu() {
 global $team_page;
 add_menu_page( __( 'Teams', 'sports-bench' ), __( 'Teams', 'sports-bench' ), 'edit_posts', 'add_data', 'sports_bench_teams_form_page_handler', 'dashicons-groups', 6 ) ;
}
add_action( 'admin_menu', 'sports_bench_team_admin_menu' );

function sports_bench_teams_form_page_handler() {
  global $wpdb;
  echo '<form method="POST" action="?page=add_data">
 <label>Team Name: </label><input type="text" name="team_name" /><br />
 <label>Team City: </label><input type="text" name="team_city" /><br />
 <label>Team State: </label><input type="text" name="team_state" /><br />
 <label>Team Stadium: </label><input type="text" name="team_stadium" /><br />
<input type="submit" value="submit" />
</form>';

  $default_row = $wpdb->get_row( "SELECT * FROM $table_name ORDER BY team_id DESC LIMIT 1" );
if ( $default_row != null ) {
 $id = $default_row->team_id + 1;
} else {
 $id = 1;
}
 $default = array(
 'team_id' => $id,
 'team_name' => '',
 'team_city' => '',
 'team_state' => '',
 'team_stadium' => '',
);
$item = shortcode_atts( $default, $_REQUEST );

 $wpdb->insert( $table_name, $item );
}

Pretty cool isn’t it.

Where you can go from here

This is a super simple example to the sake of time, but it shows you the power you have when it comes to data for your site or plugin. You’ll want to be sure to add more security to it, like sanitation and validation, but this the basic outline to follow with adding data to a custom table in the WordPress admin.

So have fun with this newly learned power!