Welcome to Brnfullstack

How to create WordPress Plugin from scratch - day 1

In this tutorial you will learn how to create a wordpress plugin from scratch.

Prerequisites:

Wordpress installed on your server
Basic knowledge of wordpress

Aim:
After this tutorial you will learn

How to create a wordpress plugin
How to create a Admin menu
How to show data from database in the admin
How to install & uninstall your tables dynamically
How to show data from database in the front end

Remember our aim is not making any useful plugin. Our aim is to teach you how to make a plugin only. A complete small plugin that have most of the features.

So lets start.

Wordpress keeps it plugins at wp-content/plugins/ folder. So whatever we will do is under this folder.
Step 1: Create plugin Create a folder pro-questions inside wp-content/plugins/
Create a file pro-questions.php inside the folder pro-questions. You can give your folder/file name as your needs. We chose pro-questions. So this is our working directory.
Now open the file pro-questions.php and put some information regarding your plugin. Remember wordpress will recognize you by this information.

/*
Plugin Name: Plugin Tutorial
Plugin URI: http://www.pro-questions.com
Description: Wordpress plugin tutorial
Author: Pro Question
Version: 1.0.1
Author URI: http://pro-questions.com
*/

Now go to the admin and click Plugins. You will see your plugin is in the listing.
Step 2: Create tables dynamically Lets define some constants for your site. This will help you in future.

$siteurl = get_option('siteurl');
define('PRO_FOLDER', dirname(plugin_basename(__FILE__)));
define('PRO_URL', $siteurl.'/wp-content/plugins/' . PRO_FOLDER);
define('PRO_FILE_PATH', dirname(__FILE__));
define('PRO_DIR_NAME', basename(PRO_FILE_PATH));
// this is the table prefix
global $wpdb;
$pro_table_prefix=$wpdb->prefix.'pro_';
define('PRO_TABLE_PREFIX', $pro_table_prefix);

you defined some constants specific to your folder and a different prefix for your tables. By this you will organize and recognize your tables better. This also prevents naming mismatch.
Now you need some tables of your needs which will created dynamically at time of plugin activation. And also dropped at being deactivated. Lets do it.

register_activation_hook(__FILE__,'pro_install');
register_deactivation_hook(__FILE__ , 'pro_uninstall' );

function pro_install()
{
    global $wpdb;
    $table = PRO_TABLE_PREFIX."tutorial";
    $structure = "CREATE TABLE $table (
        id INT(9) NOT NULL AUTO_INCREMENT,
        name VARCHAR(80) NOT NULL,
        website VARCHAR(20) NOT NULL,
        description text,
 UNIQUE KEY id (id)
    );";
    $wpdb->query($structure);
   // Populate table
    $wpdb->query("INSERT INTO $table(name, website, description)
        VALUES('Pro Questions', 'pro-questions.com','This Is A Programming

Questions Site')");
}
function pro_uninstall()
{
    global $wpdb;
    $table = PRO_TABLE_PREFIX."tutorial";
    $structure = "drop table if exists $table";
    $wpdb->query($structure);  
}

register_activation_hook(__FILE__,'pro_install')
this function run the pro_install() function at time of plugin activation. As your function is in the
same file just give __FILE__ in the first argument, otherwise give relative path to the file.
register_deactivation_hook(__FILE__ , 'pro_uninstall')
this function run the pro_uninstall() function at time of plugin deactivation.
pro_install() & pro_uninstall() function will do the rest for you. Don’t forget to give the global keyword
before $wpdb;
Now go to the Admin and click the ‘Activate’ link below your plugin name. Go to the phpmyadmin and
you will see your table is ready. Now click ‘Deactivate’ link and see your table is not there.
Step 3: Create menu for Admin Activate the plugin again.
Now you need admin control to do something. So first create a menu for your plugin.

add_action('admin_menu','pro_admin_menu');

function pro_admin_menu() { 
 add_menu_page(
  "Plugin tutorial",
  "Plugin tutorial",
  8,
  __FILE__,
  "pro_admin_menu_list",
  PRO_URL."/images/menu.gif"
 ); 
 add_submenu_page(__FILE__,'Site list','Site list','8','list-site',

'pro_admin_list_site');
}

Now look the admin site. You will found a seperate menu for your plugin. Click the menu and see
what happens. you will see some errors because the functions are missing.
add_action('admin_menu','pro_admin_menu')
this will call the pro_admin_menu() function at the admin site.
pro_admin_menu()
creates a menu in the admin. Call the function pro_admin_menu_list() on clicking the menu. I have
given a image menu.gif for my menu.
add_submenu_page(__FILE__,'Site list','Site list','8','list-site','pro_admin_list_site')
this will create a submenu for you where list-site is the page name and pro_admin_list_site is the
function name called on clicking it.
Step 4: Display data in Admin Now we will create the pro_admin_menu_list() & pro_admin_list_site() functions. Now add the functions as below.

function pro_admin_menu_list()
{
 echo "Now i know how to create a plugin in wordpress!";
}
// function for the site listing
function pro_admin_list_site()
{
  include 'admin-list-site.php';
}

create a file admin-list-site.php inside the pro-questions folder and add the code.

<div class="wrap">  
 <?php    echo "<h2>" . __( 'Site Listing' ) . "</h2>"; ?>  
<table class="widefat page fixed" cellspacing="0">
  <tbody>
<?php
global $wpdb;
$sql = "SELECT *FROM ".PRO_TABLE_PREFIX."tutorial where  1";
$results = $wpdb->get_results($sql);
if(count($results) > 0)
{
 foreach($results as $result)
 {
 echo "<tr>
 <td>".$result-> name."</td><td>".$result->website."</td>

<td>".$result->description."</td>
 </tr>";
 }    
}
?>
  </tbody>
</table>
 </div>

now click the Site list submenu and see what you have done. The data from your tables are there.
pro_admin_menu_list()
this function simply adds some text. You can do whatever you wish.
pro_admin_list_site()
this function simply adds admin-list-site.php file. admin-list-site.php did the necessary work to for you.
Step 5: Create table header like wordpress Now if you want to give some wordpress like table heading then just modify the admin-list-site.php file as below

// 'admin-list-site.php’ file 
<?php
$columns = array(
  'name' => 'Name',
  'website' => 'Website',  
  'description' => 'Description'
 );
 register_column_headers('pro-list-site', $columns); 
?>
<div class="wrap">  
 <?php    echo "<h2>" . __( 'Site Listing' ) . "</h2>"; ?>  
<table class="widefat page fixed" cellspacing="0">
  <thead>
  <tr>
<?php print_column_headers('pro-list-site'); ?>
  </tr>
  </thead>

  <tfoot>
  <tr>
<?php print_column_headers('pro-list-site', false); ?>
  </tr>
  </tfoot>
  <tbody>
<?php
global $wpdb;
$sql = "SELECT *FROM ".PRO_TABLE_PREFIX."tutorial where  1";
$results = $wpdb->get_results($sql);
if(count($results) > 0)
{
 foreach($results as $result)
 {
 echo "<tr>
 <td>".$result-> name."</td><td>".$result->website."</td>

<td>".$result->description."</td>
 </tr>";
 }    
}
?>
  </tbody>
</table>
 </div>

Click the Site list menu again and see the difference.
you have registered a header named pro-list-site with register_column_headers() function and called it
with print_column_headers() function
Your admin portion is complete now.
Now you have to show the same in the front-end to complete the project.
So lets start.
Step 6: Display data in front end Create a post and put in the content the code [pro_tutorial_site_listing]. Don’t forget to give the braces.
Now see the post in the frontend. You will found the text.
Next go to the pro-questions.php file and add some code

//Add ShortCode for "front end listing"
add_shortcode("pro_tutorial_site_listing","pro_tutorial_site_listing_shortcode")

;
 function pro_tutorial_site_listing_shortcode($atts) 
{ 
   include 'admin-list-site.php';
}

now see the post you just created. It’s content is changed.
add_shortcode("pro_tutorial_site_listing","pro_tutorial_site_listing_shortcode")
this function search the [pro_tutorial_site_listing] text in post and called
pro_tutorial_site_listing_shortcode()
function if found. Remember the code must be unique. That’s why it is a better idea to add a prefi
x( pro for example ) before it.
I have just included the admin-list-site.php file for example. You can include a file of your needs.
That’s all. Hurray!
Area of improvement:

Create Add, Edit, Delete for you data
Change the look at the front end

I hope you can do this now.

Welcome to Brnfullstack

Pages

Monday, February 18, 2013

easy way to create wordpress plugin

Sunday, February 17, 2013

what is main difference between javascript and jquery