today we will learn how to develop a WordPress plugin using MySQL database table by creating during installation, inserting from WordPress admin panel and fetching value in frontend using the shortcode. and for this plugin, you can be able to get the social media list by using the shortcode [CM_SOCIAL_MEDIA].
now step by step develop the plugin,
First Step:
create a folder inside the plugin directory of your WordPress project and give a name to it as cm_social_media
Second Step:
now create a PHP file as same name as the folder created in our case it will be cm_social_media.php
Third Step:
Now start to write code on cm_social_media.php inside PHP tag and as commenting text to define the theme
Example:
<?php /** * Plugin Name: Code Mystery Social Media * Description: its a simple social media plugin * Version: 1 * Author: Code Mystery * Author URI: https://www.codemystery.com/ **/ ?>
Fourth Step:
Now create a function to be run during installation time and inside that define global wpdb and write the code to create a table
* note must check if the table does not exist already
Example:
function your_plugin_options_install() {
global $wpdb;
global $cm_social_media_settings;
$charset_collate = $wpdb->get_charset_collate();
require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
$query = "";
$cm_social_media_settings = $wpdb->prefix . 'social_media';
if($wpdb->get_var("show tables like '$cm_social_media_settings'") != $cm_social_media_settings)
{
$query .= "CREATE TABLE IF NOT EXISTS $cm_social_media_settings (
`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
`media_name` varchar(255) NOT NULL DEFAULT '',
`media_link` varchar(255) NOT NULL DEFAULT '',
`media_icon` varchar(255) NOT NULL DEFAULT '',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;";
}
//dbDelta($sql);
$myquery_res = $wpdb->get_results( $query );
}
// run the install scripts upon plugin activation
register_activation_hook(__FILE__,'your_plugin_options_install');
Fifth Step:
Now create an admin menu and its submenu and define the functions name to call on click of the links.
Example:
function ad_cm_social_media_menu() {
//adding main admin menu
add_menu_page(
'social_media', //page title
'Social Media', //menu title
'manage_options', //capabilities
'social-media', //menu slug
social_media_list //function to call
);
//adding sub admin menu for social media list
add_submenu_page(
'social-media', //parrent slug
'All Social Media', //page title
'All Social Media', //menu title
'manage_options', //capabilities
'all-social-media', //menu slug
social_media_list //function to call
);
//adding sub admin menu for add social menia
add_submenu_page(
'social-media', //parrent slug
'Add Social Media', //page title
'Add Social Media', //menu title
'manage_options', //capabilities
'add-social-media', //menu slug
add_social_media //function to call
);
}
add_action('admin_menu', 'ad_cm_social_media_menu');
*note in this case we need two functions one for a list and another for add the values
Sixth Step:
Declare the function to display the list in the admin panel which is calling from menu declaration
example:
function social_media_list() {
?>
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 20px;
text-align: center;
}
</style>
<div class="wrap" style="width: 95%; overflow: scroll;">
<?php if (isset($_GET['data_updated'])&&$_GET['data_updated']=='data_updated') {
echo "<p style='padding 20px;'>Data Updated</p>";
} ?>
<table style="width: 100%;">
<thead>
<tr>
<th>No</th>
<th>Media Name</th>
<th>Media Link</th>
<th>Media Icon</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<?php
$table_name = $wpdb->prefix . "social_media";
$rows = $wpdb->get_results( "SELECT * FROM $table_name;");
//var_dump($rows);
$counter = 0;
foreach ($rows as $key => $row) {
$counter += 1;
?>
<tr>
<td><?php echo $counter; ?></td>
<td><?php echo $row->media_name; ?></td>
<td><?php echo $row->media_link; ?></td>
<td><?php echo $row->media_icon; ?></td>
<td><a href="admin.php?page=add-social-media&edit=edit&idd=<?php echo $row->id; ?>">Edit</a></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<?php
}
Seventh Step:
Now define the function to add the values in the MySQL table
example:
function add_social_media(){
$table_name = $wpdb->prefix . "social_media";
?>
<div class="postbox closed" id="<?php echo $_GET['page']; ?>" style="display:table;width:97%;">
<div class="handlediv" title="Click to Toggle"></div>
<h3 class="hndle" style="padding: 0px 10px 0px 15px;">
Social Media
<?php
if (isset($_POST['submit_car_type'])){
$id = $_POST['id'];
$media_name = $_POST['media_name'];
$media_link = $_POST['media_link'];
$media_icon = $_POST['media_icon'];
$query_data = array(
'media_name' => $media_name,
'media_link' => $media_link,
'media_icon' => $media_icon
);
$query_data_where = array(
'id' => $id
);
$updated = '';
if(isset($_GET['edit']) && $_GET['edit'] == 'edit'){
echo $updated = $wpdb->update( $table_name, $query_data, $query_data_where );
if($wpdb->last_error !== '') :
$wpdb->print_error();
endif;
}else{
$updated = $wpdb->insert( $table_name, $query_data);
if($wpdb->last_error !== '') :
$wpdb->print_error();
endif;
}
if ($updated) {
echo "<h3 style='color:green;'>Data successfully updated</h3>";
echo "<h3 style='color:green;'>Data successfully updated</h3>";
$url = 'admin.php?page=taxi-booking-car-types&data_updated=data_updated';
if ( wp_redirect( $url ) ) {
exit;
}
}else{
echo "<h3 style='color:red;'>Data not updated please try again</h3>";
}
}
?>
</h3>
<div class="inside" style="display: block;">
<div class="metabox-holder">
<div class="postbox-container" style="display:table;width:100%;">
<div class="meta-box-sortables ui-sortable">
<?php
$id = '';
$media_name = '';
$media_link = '';
$media_icon = '';
if(isset($_GET['edit']) && $_GET['edit'] == 'edit'){
$idd = $_GET['idd'];
$rows = $wpdb->get_results( "SELECT * FROM `$table_name` WHERE `id`='$idd ';");
foreach ($rows as $key => $row) {
$id = $row->id;
$media_name = $row->media_name;
$media_link = $row->media_link;
$media_icon = $row->media_icon;
}
}
?>
<form action="" method="post">
<input type="hidden" name="id" value="<?php echo $id; ?>" />
<table class="form-table hm-form">
<tr>
<th>
Social Media Name
</th>
<td>
<input type="text" name="media_name" required="required" value="<?php echo $media_name; ?>" />
</td>
</tr>
<tr>
<th>
Social Media Link
</th>
<td>
<input type="text" name="media_link" required="required" value="<?php echo $media_link; ?>" />
</td>
</tr>
<tr>
<th>
Social Media Icon
</th>
<td>
<input type="text" name="media_icon" required="required" value="<?php echo $media_icon; ?>" />
</td>
</tr>
<tr>
<th></th>
<td>
<input type="submit" name="submit_car_type" value="Submit" />
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
<?php
}
Eight Step:
Now define a shortcode and make functionality to get the values in frontend using the shortcode
Example:
// Add shortcode to get the social media in frontend
add_shortcode("CM_SOCIAL_MEDIA", "cm_social_media_get");
function cm_social_media(
$output_first_form = cm_social_media_get();
//send back text to replace shortcode in post
return $output_first_form;
}
function cm_social_media_get(){
//to include the fontwasome icon
wp_enqueue_style( 'style', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' );
$table_name = $wpdb->prefix . "social_media";
$rows = $wpdb->get_results( "SELECT * FROM $table_name;");
$counter = 0;
echo '<ul>';
foreach($rows as $key => $row){
echo '<li>';
echo '<a href="'.$row->media_link.'" title="'.$row->media_name.'">';
echo '<i class="fa '.$row->media_icon.'"></i>';
echo '</a>';
echo '</li>';
}
echo '</ul>';
}
Now here is the full code to create the plugin
<?php
/**
* Plugin Name: Code Mystery Social Media
* Description: its a simple social media plugin
* Version: 1
* Author: Code Mystery
* Author URI: https://www.codemystery.com/
**/
/** get the social link by [CM_SOCIAL_MEDIA] shortcode **/
/************************************************************************/
// function to create the DB / Options / Defaults during the installation
function your_plugin_options_install() {
global $wpdb;
global $cm_social_media_settings;
$charset_collate = $wpdb->get_charset_collate();
require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
$query = "";
$cm_social_media_settings = $wpdb->prefix . 'social_media';
if($wpdb->get_var("show tables like '$cm_social_media_settings'") != $cm_social_media_settings)
{
$query .= "CREATE TABLE IF NOT EXISTS $cm_social_media_settings (
`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
`media_name` varchar(255) NOT NULL DEFAULT '',
`media_link` varchar(255) NOT NULL DEFAULT '',
`media_icon` varchar(255) NOT NULL DEFAULT '',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;";
}
//dbDelta($sql);
$myquery_res = $wpdb->get_results( $query );
}
// run the install scripts upon plugin activation
register_activation_hook(__FILE__,'your_plugin_options_install');
/************************************************************************/
//Creating the admin menu for the plugin
function ad_cm_social_media_menu() {
//adding main admin menu
add_menu_page(
'social_media', //page title
'Social Media', //menu title
'manage_options', //capabilities
'social-media', //menu slug
social_media_list //function to call
);
//adding sub admin menu for social media list
add_submenu_page(
'social-media', //parrent slug
'All Social Media', //page title
'All Social Media', //menu title
'manage_options', //capabilities
'all-social-media', //menu slug
social_media_list //function to call
);
//adding sub admin menu for add social menia
add_submenu_page(
'social-media', //parrent slug
'Add Social Media', //page title
'Add Social Media', //menu title
'manage_options', //capabilities
'add-social-media', //menu slug
add_social_media //function to call
);
}
add_action('admin_menu', 'ad_cm_social_media_menu');
/************************************************************************/
// the function for showing the social media list
function social_media_list() {
?>
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 20px;
text-align: center;
}
</style>
<div class="wrap" style="width: 95%; overflow: scroll;">
<?php if (isset($_GET['data_updated'])&&$_GET['data_updated']=='data_updated') {
echo "<p style='padding 20px;'>Data Updated</p>";
} ?>
<table style="width: 100%;">
<thead>
<tr>
<th>No</th>
<th>Media Name</th>
<th>Media Link</th>
<th>Media Icon</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<?php
$table_name = $wpdb->prefix . "social_media";
$rows = $wpdb->get_results( "SELECT * FROM $table_name;");
//var_dump($rows);
$counter = 0;
foreach ($rows as $key => $row) {
$counter += 1;
?>
<tr>
<td><?php echo $counter; ?></td>
<td><?php echo $row->media_name; ?></td>
<td><?php echo $row->media_link; ?></td>
<td><?php echo $row->media_icon; ?></td>
<td><a href="admin.php?page=add-social-media&edit=edit&idd=<?php echo $row->id; ?>">Edit</a></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<?php
}
/************************************************************************/
// The function for add social media
function add_social_media(){
$table_name = $wpdb->prefix . "social_media";
?>
<div class="postbox closed" id="<?php echo $_GET['page']; ?>" style="display:table;width:97%;">
<div class="handlediv" title="Click to Toggle"></div>
<h3 class="hndle" style="padding: 0px 10px 0px 15px;">
Social Media
<?php
if (isset($_POST['submit_car_type'])){
$id = $_POST['id'];
$media_name = $_POST['media_name'];
$media_link = $_POST['media_link'];
$media_icon = $_POST['media_icon'];
$query_data = array(
'media_name' => $media_name,
'media_link' => $media_link,
'media_icon' => $media_icon
);
$query_data_where = array(
'id' => $id
);
$updated = '';
if(isset($_GET['edit']) && $_GET['edit'] == 'edit'){
echo $updated = $wpdb->update( $table_name, $query_data, $query_data_where );
if($wpdb->last_error !== '') :
$wpdb->print_error();
endif;
}else{
$updated = $wpdb->insert( $table_name, $query_data);
if($wpdb->last_error !== '') :
$wpdb->print_error();
endif;
}
if ($updated) {
echo "<h3 style='color:green;'>Data successfully updated</h3>";
echo "<h3 style='color:green;'>Data successfully updated</h3>";
$url = 'admin.php?page=taxi-booking-car-types&data_updated=data_updated';
if ( wp_redirect( $url ) ) {
exit;
}
}else{
echo "<h3 style='color:red;'>Data not updated please try again</h3>";
}
}
?>
</h3>
<div class="inside" style="display: block;">
<div class="metabox-holder">
<div class="postbox-container" style="display:table;width:100%;">
<div class="meta-box-sortables ui-sortable">
<?php
$id = '';
$media_name = '';
$media_link = '';
$media_icon = '';
if(isset($_GET['edit']) && $_GET['edit'] == 'edit'){
$idd = $_GET['idd'];
$rows = $wpdb->get_results( "SELECT * FROM `$table_name` WHERE `id`='$idd ';");
foreach ($rows as $key => $row) {
$id = $row->id;
$media_name = $row->media_name;
$media_link = $row->media_link;
$media_icon = $row->media_icon;
}
}
?>
<form action="" method="post">
<input type="hidden" name="id" value="<?php echo $id; ?>" />
<table class="form-table hm-form">
<tr>
<th>
Social Media Name
</th>
<td>
<input type="text" name="media_name" required="required" value="<?php echo $media_name; ?>" />
</td>
</tr>
<tr>
<th>
Social Media Link
</th>
<td>
<input type="text" name="media_link" required="required" value="<?php echo $media_link; ?>" />
</td>
</tr>
<tr>
<th>
Social Media Icon
</th>
<td>
<input type="text" name="media_icon" required="required" value="<?php echo $media_icon; ?>" />
</td>
</tr>
<tr>
<th></th>
<td>
<input type="submit" name="submit_car_type" value="Submit" />
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
<?php
}
/************************************************************************/
// Add shortcode to get the social media in frontend
add_shortcode("CM_SOCIAL_MEDIA", "cm_social_media_get");
function cm_social_media(
$output_first_form = cm_social_media_get();
//send back text to replace shortcode in post
return $output_first_form;
}
function cm_social_media_get(){
//to include the fontwasome icon
wp_enqueue_style( 'style', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' );
$table_name = $wpdb->prefix . "social_media";
$rows = $wpdb->get_results( "SELECT * FROM $table_name;");
$counter = 0;
echo '<ul>';
foreach($rows as $key => $row){
echo '<li>';
echo '<a href="'.$row->media_link.'" title="'.$row->media_name.'">';
echo '<i class="fa '.$row->media_icon.'"></i>';
echo '</a>';
echo '</li>';
}
echo '</ul>';
}
Now the plugin is ready to install and configure and you can be able to get the value in frontend using the shortcode [CM_SOCIAL_MEDIA]