Learn – How to create custom wordPress plug-in

Learn – How to create custom wordPress plug-in

WordPress provide a well structured CMS to develop a basic blog site. If we demand some extra functionality in our website, the wordpress plug-ins plays an important role to provide such features for our website. There are lots of free plug-in available on web, using them, we can full fill our desired requirement very easily. Even though, sometimes the available plug-in unable to complete our desired requirement. In that case we can create our own wordpress plug-in very easily.

let’s take an example, how we can create our own WordPress plug-in:
1) Create a folder with plug-in name and create a file same as plug-in name.
2) Write the given code to add css file.

add_action(‘wp_enqueue_scripts’, ‘ost_stylesheet’);
function ost_stylesheet() {
wp_register_style( ‘prefix-style-ost’, plugins_url(‘css/ost.css’, __FILE__) );
wp_enqueue_style( ‘prefix-style-ost’ );
Actions are (usually) triggered when the WordPress core calls do_action().

3)Write the givn code to add javascript file.

add_action( ‘wp_enqueue_scripts’, ‘ost_ostlightbox’ );
function ost_ostlightbox(){
wp_register_script( ‘ost-ostlightbox_js’, plugins_url(‘js/ost.js?v=1.0’, __FILE__) );
wp_enqueue_script( ‘ost-ostlightbox_js’ );

4) Create a new class with same name as plugin and extends wordpress class named “WP_Widget” to create a plugin which provide a widget in admin panel to show post at any position.

– First we add constructor function with same name as class name to assign plgin name and descrition.
– Second add widget function to manage widget for front end.
– Thired add form function to add widget form for back end.
– Fourth add update function to update form data in database.

class showPostsWidget extends WP_Widget{
// Create constructor to assign plgin title and description
function showPostsWidget() {
$options = array(‘description’ => ‘Show posts from selected category.’);
parent::WP_Widget(false, $name = ‘Show Posts By Category’, $options);

//To manage widget for front end.
function widget($args, $instance) {
extract($args, EXTR_SKIP);

$ost_title = empty($instance[‘ost_title’]) ? ‘ ‘ : apply_filters(‘widget_title’, $instance[‘ost_title’]);

$ost_limit = (is_numeric($instance[‘ost_limit’])) ? $instance[‘ost_limit’] : 5;
$ost_order = ($instance[‘ost_order’]) ? $instance[‘ost_order’] : ‘desc’;

echo $before_widget;
echo $before_title . $ost_title . $after_title;

global $post;
$query = array(
‘posts_per_page’ => $instance[‘ost_limit’],
‘cat’ => $instance[‘ost_categoryid’],
‘order’ => $instance[‘ost_order’]

$wp_query = new WP_Query($query);

if ($wp_query->have_posts()):
echo ‘

    • ‘;
    • while ($wp_query->have_posts()): $wp_query->the_post();
    • echo ‘

echo ‘


echo $after_widget;

//To add widget form for back end.
function form($instance) {
$default = array (‘ost_title’=>”,’ost_categoryid’=>”,’ost_limit’=>”,’ost_order’=>”,’ost_exclude’=>”);

$instance = wp_parse_args( (array) $instance, $default);
$ost_title = strip_tags($instance[‘ost_title’]);
$ost_limit = strip_tags($instance[‘ost_limit’]);
$ost_order = strip_tags($instance[‘ost_order’]);

echo ‘
echo ‘get_field_id(“ost_title”).'” name=”‘.$this->get_field_name(“ost_title”).'” type=”text” value=”‘.esc_attr($ost_title).'” />’;

echo ‘get_field_id(‘ost_categoryid’).'” name=”‘.$this->get_field_name(‘ost_categoryid’).'”
type=”text” value=”‘.esc_attr($ost_categoryid).'” />’;

echo ‘get_field_id(‘ost_limit’).'” name=”‘.$this->get_field_name(‘ost_limit’).'”
type=”text” value=”‘.esc_attr($ost_limit).'” />’;


echo ‘get_field_id(‘ost_order’).'” name=”‘.$this->get_field_name(‘ost_order’).'” type=”text”>

/* To save the form data in database */
function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance[‘ost_title’] = strip_tags($new_instance[‘ost_title’]);
$instance[‘ost_limit’] = strip_tags($new_instance[‘ost_limit’]);
$instance[‘ost_order’] = strip_tags($new_instance[‘ost_order’]);
return $instance;


add_action(‘widgets_init’, create_function(”, ‘return register_widget(“showPostsWidget”);’));
By using actions function we can register the plug-in.

Happy Coding .

Leave a comment

Your email address will not be published. Required fields are marked *