Mobile-Menu iFuturz Infoweb Inc. Contact Portfolio

01

Jul

Create Simple WordPress Plugin from Scratch

Create Simple WordPress Plugin from Scratch

Posted On : July 1, 2013

| No Comment

First of all why you need to create plugin ?

So, the answer is some time  the ready plugin may not suitable to your / clients needs. also sometimes you have to compromise with your/clients need.
So, best way is to create your own plugin. Lets start…

Writing your own plugin is not a difficult tasks, if you know some basic PHP skills.
Plugins can be in a single php file or they have their own folder containing required files.  If it is more than one file you need a folder.

WordPress has lots of prebuilt stuff that can make, building plugins really easy.

Let’s create a simple plugin of custom form.

Step 1 : Make a folder name it ”customform”.

Step 2 : Make a php file name it “customform.php”. and place this file in customform folder.

Step 3 : Place below code in customform.php file:

<?php

/*

Plugin Name: Custom Form

Plugin URI:

Version:

Description: a plugin to create custom form

Author:

Author URI:

License:

*/?>

Note : Only Plugin Name is mandatory all else are optional

Step 4: Now add code that you want to display using plugin shortcode. Here we have to display custom form so,

<?php

//function that includes your HTML form code

function form() { ?>

//form with required fields

<form name=”QQ”>

<input type=”text” name=”Name” class=”inputbox” onblur=”if (this.value == ”) {this.value = ‘Enter Name:’;}” onfocus=”if(this.value == ‘Enter Name:’) {this.value = ”;}” value=”Enter Name:”/>

<input type=”text” name=”Email” class=”inputbox” onblur=”if (this.value == ”) {this.value = ‘Enter Email:’;}” onfocus=”if(this.value == ‘Enter Email:’) {this.value = ”;}” value=”Enter Email:”/>

<textarea name=”comment” onblur=”if (this.value == ”) {this.value = ‘Enter Comment:’;}” onfocus=”if(this.value == ‘Enter Comment:’) {this.value = ”;}”>Enter Comment:</textarea>

<input type=”submit” name=”Submitb” class=”submitbutton” value=”SUBMIT” />

</form>

<?php

} ?>

Step 5 : If needed Include css file to give style to custom form:

<?php

//’ customformcss’ provide name to stylesheet, that can be used to identify in whole system

// ‘plugins_url(‘/customformcss.css’, __FILE__)’ specify path of css file.

wp_register_style(‘customformcss’, plugins_url(‘/customformcss.css’, __FILE__));

//than enqueue css file

wp_enqueue_style(‘customformcss’);  ?>

Place customformcss.css file in customform folder

Step 6 : Add shortcode that is used to display form wherever needed:

<?php add_shortcode(‘custom-form’,'form’);?>

//’form’ is the name of the function, in which HTML code of custom form available.

//’custom-form’ is the shortcode that is used to display form on website.

Step 7 : Upload ‘customform’ folder in wp-content/plugin/ folder.

Step 8 : Activate Custom Form plugin from wordpress Admin side.

Step 9 : Use shortcode in your any theme file as,

<?php do_shortcode(‘[custom-form]‘)?>

OR in any page as,

[custom-form]

And youare ready with your Custom Form.


  • Tags:

Comment