My First WordPress Plugin - Tutorial Part 3

In the previous tutorials;

• Tutorial-1 :  It describes the general idea of what a plugin is in WordPress and what are the basics to create a plugin and a simple illustration of manipulating the content using filter.

• Tutorial-2 : It focuses on creating a simple custom post type and taxonomies and  meta boxes to input additional information providing the user a flexible way to create their own menu, pages and labels.

In this tutorial, we will go through a process to create a plugin that enables to add custom pages to the admin menu section and provide the user with an ability to create and store data in the custom designed database table.

Database Table Creation:

Our plugin stores the data in a user designed database table instead of WP database. So, as soon as plugin is activated, a check for the table availability is done with an activation hook and a database table is created.

register_activation_hook( __FILE__, 'function-to-create-database-table' );
function function-to-create-database-table(){
global $wpdb;
$table_name = $wpdb->prefix. 'table-name';
if($wpdb->get_var("SHOW TABLES LIKE '$table_name'") != $table_name) {
   $sql="CREATE TABLE $table_name(
    //tables fields
    ) ";
require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
dbDelta( $sql );
}
}

Now, the table with the user defined field has been created.

Admin Pages Creation:

 Admin Pages is our custom menu where we have our freedom to create the menu as our need. In our case, we are creating two menus; one to show, edit and delete the data and another one to add the data to the user created table.

add_action('admin_menu','page-to-view-items');
add_action('admin_menu','page-add-items');
function page-to-view-items(){
add_menu_page();
}
function page-add-items(){
add_submenu_page();
}

Now that we have created a admin menu and sub-menu. Suppose if we are creating the plugin for products, lets include a  menu Product and and sub-menu Add Products. Menu-Product is linked to a php file to represent all the data in table and an option to edit them while sub-menu Add Product contains the product add form. Lets have a peek to the add form.

Sub-Menu (Data Addition Form):

It contains normal html form to submit the data and you can create a custom css as per the design requirement. Inorder to insert the form data into the custom database table, the code is as below:

global $wpdb;
$table_name = $wpdb->prefix. 'table-name';
$field1=$_POST["field1"];//retrieving the data from the form using post method
$field2=$_POST["field2"];
$field3=$_POST["field3"];
  $wpdb->insert(
$table_name,
array(
'table-field-1' =>$field1,
'table-field-2' => $field2,
'table-field-3' => $field3
)
);

Displaying Data In Table:

For displaying the data, the easiest way is to use the default WordPress table so that the look and nature of the table is similar to the WordPress post display UI. 

<div class="wrap">
  <div class="icon32" id="icon-edit"><br></div>
  <h2><?php _e('Title') ?></h2>
<form method="post" action="" id="update_action">
<table class="widefat page fixed" cellpadding="0">
      <thead>
        <tr>
        <th id="cb" class="manage-column column-cb check-column" style="" scope="col">
          <input type="checkbox"/>
        </th>
          <th class="manage-column"><?php _e('title 1')?></th>
          <th class="manage-column"><?php _e('title 2')?></th>
          <th class="manage-column"><?php _e('title 3')?></th>
          <th class="manage-column"><?php _e('title 4')?></th>
        </tr>
      </thead>
      <tfoot>
        <tr>
        <th id="cb" class="manage-column column-cb check-column" style="" scope="col">
          <input type="checkbox"/>
        </th>
          <th class="manage-column"><?php _e('title 1')?></th>
          <th class="manage-column"><?php _e('title 2')?></th>
          <th class="manage-column"><?php _e('title 3')?></th>
          <th class="manage-column"><?php _e('title 4')?></th>
        </tr>
      </tfoot>
      <tbody>
        <?php
          $table = function-to-call-all-data();
          if($table){
           $i=0;
           foreach($table as $data) {
               $i++;
        ?>
      <tr class="<?php echo (ceil($i/2) == ($i/2)) ? "" : "alternate"; ?>">
        <th class="check-column" scope="row">
          <input type="checkbox" value="<?php echo $data->id?>" name="bor_id[]" />
        </th>
          <td>
          <strong><?php echo $data->db-table-field-1?></strong>
          <div class="row-actions-visible">
          <span class="edit"><a href="?page=redirect -to-edit-function-page-(page-title)">Edit</a> | </span>
          <span class="delete"><a href="?page=redirect -to-delete-function-page-(page-title)" onclick="return confirm('Are you sure you want to delete this software?');">Delete</a></span>
          </div>
          </td>
          <td><?php echo $data->db-table-field-2?></td>
          <td><?php echo $data->db-table-field-3?></td>
          <td><?php echo $data->db-table-field-4 ?></td>
        </tr>
        <?php
           }
        }
        else{
      ?>
        <tr><td colspan="4"><?php _e('There are no data.')?></td></tr>
        <?php
      }
        ?>
      </tbody>
    </table>
 </form>
</div> 

To this level, we have created a post like page UI and added the function to edit and delete the data from the table. To edit/update and delete the data, WordPress has a function to do that.

$wpdb->update(
$table_name,
array(
'db-field-1' =>$field-1-data,
'db-field-2' => $field-2-data,
'db-field-3' => $field-3-data
),
array( 'id' => $id ),
array(
'%s',
'%s',
'%d'
)
);

To delete the row, just data id is required and the rest is below.

$wpdb->delete($table_name,array('id'=>$id)); 

Browse More Articles

Tweet

Written by Sthashankar

We are passionate programmers. Enjoying the rich platforms of Semicolon Family of Programming languages we are proud to call ourselves Semicolon Developers.