Open source training & tutorials from experienced, passionate people
By A Web Design
WordPress Widgets is like a plugin, but designed to provide a simple way to arrange the various elements of your sidebar content (known as "widgets") without making any change in the code.
To add widgets in your WordPress Templates, login to WordPress as administrator, by simply entering the url_of_your_website/wp-admin in your Browser. Enter the appropriate username and password {which was provided while installing Wordpress} and then click on Log In as shown in Diagram 1.
Diagram 1
After logging in as WordPress Admin, a Dashboard page opens as shown in Diagram 2.
The Dashboard provides access to different WordPress functions and features.
Diagram 2
In the left menu, locate the link Appearance. Click on Appearance as shown in Diagram 3.
Diagram 3
From the drop down menu that appears click on Widgets as shown in Diagram 4.
Diagram 4
The Widgets page is displayed as shown in Diagram 5. There are few widgets available in WordPress such as:
Archives, Custom Menu, Calendar, Categories, Recent Posts, Recent Comments, Meta, Search and so on.
On the right hand side there are available widget areas in your WordPress Template. It may vary according to your Template design.
Diagram 5
Click on any one of the available widget area as shown in Diagram 6.
These areas hold on the different widgets and are displayed on the WordPress site.
Diagram 6
When WordPress 3.X.X is installed, then Primary Widget Area has the following widgets activated as shown in Diagram 7.
Diagram 7
On the WordPress website, you can view the following widgets visible as shown in Diagram 8.
Diagram 8
Drag calendar widget from Available Widgets and drop into the Primary Widget Area as shown in Diagram 9.
Diagram 9
Once you have dropped the widget into the section area, you are prompted to enter the Title (optional) as shown in Diagram 10.
If desired enter the title and click on Save as shown in Diagram 10.
Diagram 10
In the frontend of website, you can view the calendar activated in the widget area as shown in Diagram 11.
Diagram 11
Drag text widget from Available Widgets and drop into the Primary Widget Area as shown in Diagram 12.
Diagram 12
Once you have dropped the widget into the section area, you are prompted to enter the Title (optional) and text as shown in Diagram 13.
Enter the HTML codespec into the text area and click on Save as shown in Diagram 13.
Diagram 13
In the frontend of website, you can view the output activated in the widget area as shown in Diagram 14.
Diagram 14
In the similar way, you can add other widgets to your WordPress Templates.
Please wait...