Breaking News
You are here : Home / Wordpress / How To Create WordPress Widget
How to Create Wordpress Widget

How To Create WordPress Widget

How To Create WordPress Widget : -

A WordPress Widget is the Block which we can render in the Sidebar or any widget area registered in our current theme.Some time it may be difficult to find a perfect widget which fits your need ,So it is essential to know how to write your own wordpress widget with your PHP knowledge and some wordpress conventions.You might find many article on how to create wordpress widget,,but i still post it on my blog .I present to you in my own way.The basic is same everywhere. So lets move on and learn how to create a wordpress widget.

[separator /]

How To Create WordPress Widget : Tutorial -

To learn coding a wordpress widget we are gonna create a sample plugin as we move through this wp tutorial. So first of all we take a look at a basic widget code structure.

Coding a WordPress Widget : Basic Structure -

Before Creating a widget we need to know what is the basic structure of a wordpress plugin/widget.A plugin/widget is basically a php file.This PHP file has a class which inherits from wp_widget class.Also when we create awordpress widget/plugin there is comment block at the top in this php file which describe about your widget eg: plugin name ,description ,author name,plugin url.Also Widget Class name is your plugin name which contains some basic methods.So lets take a look at the structure.

/wp-content/plugins/MyFirstWidget/MyFirstWidget.php-

You can see above the basic structure of the wordpress widget.I name the widget MyFirstWidget .So which is the class name extending Wp_widget.And there are four basic methods here and the comment block above describe the widget/plugin.This is the basic structure we need.This does nothing here,That just to make you understand.In next step we gonna create a widget.

[separator/]

How to Create WordPress Widget : Create Sample Plugin -

So Now we have seen the basic structure of wordpress widget we’ll create a sample widget.I want you to create a File name MyFirstWidget.php in the Folder /wp-content/plugins/MyFirstWidget/MyFirstWidget.php . and put the code below in that file.

/wp-content/plugins/MyFirstWidget/MyFirstWidget.php  -

Now Go to Plugins and Activate the Widget by going to Plugins page.Then Go to Your Widget Page and Put this Widget in your sidebar.You will get output like image below.

how to create wordpress widget1 How To Create Wordpress Widget

How To Create A WordPress Widget

building wordpress widget How To Create Wordpress Widget

Building a WordPress widget

[separator/]

How to Create WordPress Widget : Extending Widget Functionality -

Now we have Created our First Widget in wordpress.We are gonna extend its functionality. Now we are gonna Make Plugin Fetch Recent Posts.So how are we gonna do it,We are gonna delete the code between the comment  block saying //Start widget and //End widget.And we are gonna put the code below in place of that.

Now see the Change in Image below .Now this wordpress widget gonna fetch recent 5 posts Titles.

creating wordpress widget recent posts How To Create Wordpress Widget

Building a WordPress Widget

This is how your widget will look now.I hope You understand this tuet.

[separator /]

How to Build WordPress Widget : Closing -

That was all about How to Create wordpress widget.I hope You liked this tutorial.Creating WordPress Widget is Super Easy,Even you don’t Understand the full code ,you can edit the and make your own widget.You can find wordpress tags at codex.wordpress.com .by using those tags you can do lots of interesting things.

Thanks for visiting on designaeon.com .Keep Visiting.

[separator/]

Tags : , , , , , , , ,

1 Reply

Leave a Reply

Want to join the discussion ? Feel Free to contribute !

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">