OpenSourceVarsity

pdf icons

Add Widgets To WordPress Templates

What Is A WordPress Widget?

In a whole lot of WordPress templates you will notice that the area, which displays webpage content is divided into two parts vertically, in a ratio of let’s say 80% : 20% as shown in diagram 1.

diagram1.png
Diagram 1

The 80% on the left hand side area usually displays the Blog post content with its images, videos and other such stuff the 20% area on the right hand side usually displays small blocks of content. The small blocks of content, as shown in diagram 2 are a Site Search box and a Write A Guest Blog post box.

The 20% content area on the right hand side is called a side bar. The small boxes of content within this area are called widgets. Hence, WordPress widgets are different sized boxes of content that you can add, arrange, and remove from the template sidebar(s) of your Blog. Widgets make it easy for the Blog site owner to customize the content of a Blog.

NOTE: The WordPress template can have a sidebar on either side of the content area i.e left or right.

What’s great about WordPress widgets is that one does not require any coding capabilities to use them. WordPress widgets can be added, removed and rearranged using the:

WordPress Admin Panel à Appearance à Widgets section.

The order and placement of the widgets within the WordPress theme is determined by functions.php.

Widgets Internal To WordPress

The WordPress core comes with a number of built-in widgets. These are:

  • Categories
  • Tag cloud
  • Navigation menu
  • Calendar
  • Search
  • Recent posts

And so on.

If the built-in widgets do not answer all your content display needs its easy as pie to install new Widgets. Start off by searching the WordPress Plugins Directory for widgets appropriate to your Blog site needs, which are accessible from the: WordPress Admin Panel à Plugins à Add New.

Checking If The WordPress Theme Is Widget Enabled

Before you can add a widget to your content area you have to check if the theme you are using is widget enabled. i.e. Has a widget designated area. Most themes today are. This is pretty simple to do.

Use the WordPress Admin Panel à Appearance menu item and look for a sub menu titled Widgets as shown in diagram 2.

diagram2.png
Diagram 2

Adding Calendar Widget:

We are using the default Twenty Thirteen. This theme has two widget areas:

  • Main Widget Area – This widget area appears in the footer section of all pages as shown in diagram 3
  • Secondary Widget Area – This widget area appears on posts and pages in the sidebar section as shown in diagram 4

diagram3.png
Diagram 3

diagram4.png
Diagram 4

Drag Calendar widget from Available Widgets and drop into the Second Widget Area as shown in diagram 5.

diagram5.png
Diagram 5

Once you have dropped the widget into the section area, you are prompted to enter the Title (optional) as shown in diagram 6.

If desired enter the title and click on Save as shown in diagram 6.

diagram6.png
Diagram 6

In the frontend of website, you can view the calendar activated in the widget area as shown in diagram 7.

diagram7.png
Diagram 7

To arrange the Widgets within the sidebar or Widget area, click and hold the mouse cursor on the widget and Drag and Drop it into a place of your choice.

To save the Widget’s customization, click Save.

To remove the Widget, click Remove or Delete.

If you change the WordPress theme being used, the Widgets you’ve displayed in the content are will return to the left side of the page in the Widget Archives or Available Widgets list.

You may need to add them again and rearrange them depending upon the Theme’s ability to preserve other Theme’s Widgets.

Widget Areas

Widgets are typically placed in webpage sidebars. However a WordPress theme can implement widget areas anywhere within the theme. For example, besides the usual sidebar locations, the twentyfourteen theme has a widget area in its footer section displayed on every page where the twentyfourteen theme is used.

If you would like to place a Widget somewhere on your theme other than its sidebar areas

OR

Within a theme that that does not have any pre-defined Widget Area

You will need to have modest PHP programming skills. Information on how to do is available in the WordPress Widgets API section.

WordPress Text Widgets

The Text widget is one of the most commonly used widgets that comes with every WordPress installation. This widget allows the Blogsite owner to add text, video, images, custom lists, and more to their WordPress Blog / Page content areas.

Using Text Widgets

  • Use WordPress Admin panel à Themes à Widgets
  • Open the sidebar, footer, or Theme section to which you wish to add the Text widget
  • Find the Text widget in the list of Widgets on the left hand side of the widgets page
  • Click and hold the mouse cursor on the text widget then drag it to the spot you wish it to appear and drop it

Open and Edit the Text Widget:

  • Click the down arrow on the right hand side of the Text widget title
  • Set the Text Widget Title (optional)
  • Add the text or HTML code to the box or edit what is currently there
  • Click Save to save the Text Widget.
  • Click Close to close the Text Widget
  • Switch tabs in your browser and preview the results and return to make changes if necessary

A Text widget can hold a variety of HTML, XHTML, and multimedia links and players such as video and object embeds.

In the frontend of website, you can view the output activated in the widget area as shown in diagram 8.

diagram8.png
Diagram 8

Styling The Contents Of The Text Widget

All standard CSS style rules can be applied to the text widget and its contents such as alignleft, alignright and aligncenter for images, videos, podcasts and so on.

One can add specific CSS based IDs and/or Classes to any/all display elements within widget content. The CSS rules bound to these IDs and/or Classes will be automatically applied by the WordPress core to the elements displayed within the widget.

Adding Code To A Text Widget

Basic HTML5, embeds, and JavaScript can be added to any WordPress Text widget. Most embed codes from social sharing sites for multimedia will work in a WordPress Text widget.

NOTE: PHP code snippets (or any other programming language code snippets) will not work as the Text widget will strip out code it cannot display.

NOTE: To add PHP code snippets to a Text widget, use one of the many WordPress Plugins from the WordPress Plugin Directory that override the WordPress restrictions on using PHP code within Text widgets. Please check that the plugins will work on Text widgets as occasionally some will not.

May 5, 2016
Design by Ivan Bayross and Meher Bala © 2017 All Rights Reserved
X