WordPress Plugin Development from scratch

wordpress-plugin-development WordPress Plugin Development can be complicated task for any wordpress developer. There lots of Developer searching a good tutorial from where they can learn creating wordpress plugin. Following i will demonstrate to create a plugin that would be ads management plugin .In that we will be using lots of section of advance wordpress plugin development like Creating custom database tables. insert, update , delete query, admin menu, widget development etc. Let’s start. For a plugin ,wordpress required minimum one file inside your wp-content/plugins. But for our requirement we will have 3 files .We will be going step by step creating this plugin . I have created a folder “ads” inside wp-content/ and a file ads.php inside that looks like below wordpress plugin file structure

Step 1 Now open ads.php in your proffered php editor, i am using dreamweaver. First thing to do in our plugin file is to write plugin information as below




Above statement are self explanatory, they register some information related with the plugin that shows in admin panel under plugin page. wordpress plugin in admin panel

Step 2 For our plugin we have to create a database table . here table name will be ‘ads’ . So to create a table when this plugin install and delete the table when this plugin uninstall , I will be using 2 wordpress hook i) register_activation_hook() ii) –this execute when the plugin installed/enabled iii) register-deactivation_hook() – this execute when the plugin uninstalled/disabled For table creation sql code, I recommend to manually create table inside phpmyadmin will the following attributes and export it to notepad. Then copy sql code to use in our plugin. Table structure should looks like below sql table Step 3 Ads.php now looks like below

register_activation_hook(__FILE__,'w3_ads_create_table'); 
register_deactivation_hook(__FILE__,'w3_ads_delete_table'); 
require(ABSPATH.'wp-content/plugins/ads/widget-ads.php'); 
function w3_ads_create_table(){ global $wpdb; require_once(ABSPATH.'wp-admin/includes/upgrade.php'); 

$num=0; 

$w3_ads_table[$num]['table_name']=$wpdb->prefix."w3_ads"; 
$w3_ads_table[$num]['table_sql']="CREATE TABLE IF NOT EXISTS ".$wpdb->prefix."w3_ads"." ( `id` int(255) NOT NULL AUTO_INCREMENT, `title` varchar(255) NOT NULL, `image` varchar(255) NOT NULL, `body` text NOT NULL, PRIMARY KEY (`id`))";
foreach($w3_ads_table as $table){ 
if(!$wpdb->get_var("SHOW TABLES LIKE '".$table['table_name']."' ")){ 
$wpdb->query($table['table_sql']); 
} } }
 
function w3_ads_delete_table(){ 
global $wpdb; require_once(ABSPATH.'wp-admin/includes/upgrade.php'); 
if($wpdb->get_var("SHOW TABLES LIKE '".$wpdb->prefix.'w3_ads'."'")){ 
$wpdb->query("DROP TABLE ".$wpdb->prefix."w3_ads"); 
} }

First hook register_activation_hook call function ‘w3_ads_create_table’ This function create database table ,

If you are quite familier with PHP , you can easily understand about the array $w3_ads_table[$num][‘table_name’]

and $w3_ads_table[$num][‘table_sql’] I am using this keeping in mind if we have to create other table just

copy paste it and provide $num=1 This will create another table. you can check this by activating the plugin from admin panel.

 

Step 4 Now time to create some admin panel menu pages for our plugin settings page.

Here I will create 2 menu page i) ads listing page ii) Ads add page I will use

wordpress a hook i.e admin_menu and 2 function add_menu_page() and add_submenu_page() function to

create menu and submenu for our plugin .Check below


add_action('admin_menu','register_ads_page'); function register_ads_page(){

//page title, menu title, capability, slug, function name

add_menu_page(‘Advertiese’,’Ads’,’manage_options’,’ads’,’ads’,plugins_url(‘images/icon.png’,__FILE__ ));

//parent slug ,

add_submenu_page(‘ads’,’Add New ads’,’Add New’,’manage_options’,’add_new_ads’,’add_new_ads’); }


From add_action(‘admin_menu’,’register_ads_page’); this will call function register_ads_page when admin_menu will load from admin panel.

Following parameter are in sequence of page title, menu title, capability, slug, function name.

for details about this function check wordpress codex add_menu_page.

add_menu_page(‘Advertiese’,’Ads’,’manage_options’,’ads’,’ads’,plugins_url(‘images/icon.png’,__FILE__ ));

This function will register a menu in left sidebar of admin dashboard .

It also call a function ads() to display page of this menu item.

So we have to create for this to list our all ads. we know currently we do not have any ads,

So better we consider working on add_new_ads() called from add_submenu_page() function .


function add_new_ads(){ 
global $wpdb; 
if(isset($_POST['submit'])){
 $error=array(); 
$title=$_POST['title']; 
$upload_image=$_POST['upload_image']; 
$body=$_POST['body']; if($title==''){ 
$error[]="Title field is required"; 
} 
if($upload_image=='' && $body==''){ 
$error[]="Either image upload or ads code field is required"; 
} 
if(count($error)==0){ 
// ref http://codex.wordpress.org/Class_Reference/wpdb#Examples_6
 $wpdb->insert( $wpdb->prefix.'w3_ads', array( 'title'=>$title, 'image'=>$upload_image, 'body'=>$body ), array( '%s', '%s', '%s' ) ); if($wpdb->insert_id !=0){ 
echo "<strong>Successfully Submited</strong>"; 
}else{ 
echo "Error submiting form";
 } }else{ 
foreach($error as $value){ echo $value." ";
 } } } 
?&gt;
  



Enter an URL or upload an image for the banner.

Title
Image Upload Ads code (HTML,javascript)

 

 

Here above I have create a form to insert ads in database table ‘w3_ads’.

To interact with wordpress database I have used global $wpdb;.

Insert query looks like below $wpdb->insert( $wpdb->prefix.’w3_ads’,

array( ‘title’=>$title, ‘image’=>$upload_image, ‘body’=>$body ), array( ‘%s’, ‘%s’, ‘%s’ ) );

Let’s have a look, here $wpdb->prefix provide our current wordpress table prefix to be added with ‘w3_ads’ table name

There mainly 3 element in $wpdb->insert(‘table name’,’fields and values in associative array’,’data type string ,decimal etc’) So above query looks in that order There one important section to use wordpress built in media uploader used with our ‘Image Upload’ field.

I will describe this in next   step

wordpress_media_uploader

 

Step 5 we will be Using WordPress buil in media uploader with our image upload field. In order to use that we have to call some css and js required for this  uploader  as shown below

// Add code for upload field function my_admin_scripts() { 
wp_enqueue_script('media-upload'); 
wp_enqueue_script('thickbox'); 
wp_register_script('my-upload', WP_PLUGIN_URL.'/ads/my-script.js', array('jquery','media-upload','thickbox')); 
wp_enqueue_script('my-upload'); 
} 

function my_admin_styles() { 
	wp_enqueue_style('thickbox'); 
} 
if (isset($_GET['page']) &amp;&amp; $_GET['page'] == 'add_new_ads') { 
	add_action('admin_print_scripts', 'my_admin_scripts'); 
	add_action('admin_print_styles', 'my_admin_styles'); 
}

Above in my_admin_scripts() ,it call some js using wordpress wp_enqueue_script() function . my_admin_styles()
will call css file that already declared in wordpress , we are just calling to use that .
So we have also use hooks ,they are admin_print_scripts and admin_print_styles to load them.
There a file under ads/my-script.js > this will return back the uploaded

file url to the textfield of id “upload_image” .So this url will finally insert in our table column “image”

 

Step  6 Above we have done the work for ads insert. Now time to create page to list all our ads . …will be continued..

Online Web Development Training,Video Tutorials