• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Ani's Webdev Blog

A learning diary of website development

  • Home
  • Demo
    • Ajax Contact Form
  • WordPress
  • Front-end
  • Backend

WordPress Basics: Widgets

Modified on: July 4, 2020

In this article, we explore the use of WordPress widgets. What we are going to answer:
– What is a WordPress widget?
– How to add, re-order, remove widgets?
– Widgets in different themes

Table of contents

  1. 1. What is a WordPress widget?
    1. 2. Widgets Example
      1. 3. Widgets guide: add, re-order, and remove
        1. 4. WordPress Widgets in different themes
          1. 5. Video on WordPress widgets

            In the last WordPress article, we discuss themes and 3 ways to install a theme. In this blog posts, let’s have a look at another useful content distribution structure of WordPress: widgets.

            1. What is a WordPress widget?

            Basically, widgets are locations in which small pieces of information can be attached to different sections of a website.

            However, when saying about widgets, people probably refer to the content of the widget itself. Because, if they want to refer to the position, they will say “widget locations”.

            Widgets provide users with a simple and draggable way to add content and features to a WordPress theme’s sidebars, headers, footers, or actually any part of the website.

            2. Widgets Example

            Let’s have a look at the widgets in my current theme: MH Newsdesk Lite. Because each theme offers different widgets position, so please don’t think that yours have to look exactly like mine.

            wordpress widget example
            1. The widget locations of my current theme.

            So, from the image, we can see that: the theme has 5 widgets positions. You can drag widgets content towards these widget locations, in order to fill in the position with contents.

            For example, you can decide that your web sidebar will have videos, recent posts, recent comments, social media profiles, and so on. In this case, you might want to drag the content mentioned above to the Global Sidebar, that it will appear in the sidebar column on every page of your website.

            wordpress widget list
            2. A widget list to choose content from

            Let’s have a look at the image 2. This is a list of widget content provided by WordPress, Jetpack plugin and my theme MH Newsdesk Lite.

            There are some widgets that you can have whatever your theme and plugins are, for example Recent Posts, Search, Recent Comment, Pages, etc. Because WordPress itself was made for bloggers, these contents are must-have features.

            Jetpack brings about some connection features, for example Social Media Icons, My Community, Twitter Timeline, and so on. Because the Jetpack plugin wants to connect people in the WordPress network.

            MH Recent Posts belong to my current theme’s widget list. Recent Post is a common feature (even WordPress itself offer this). However, because the theme provides a different design and logic for this special content, it makes up a new widget that is available only when you activate this theme.

            So, you see, what widgets you have depends also on what theme and plugin you use.

            In my case, if I upgrade MH Newsdesk Lite to the premium plan, I will get more widgets and widget locations. At least they promise so.

            3. Widgets guide: add, re-order, and remove

            To manipulate the widgets, you can visit your Dashboard (yourwebsite/dashboard). Go to Appearance/Widgets.

            Adding widgets: simply drag the widget content into widget location (watch the video below)

            Sometimes you want to re-order your widget content. For example, you want the Search bar to appear above the Recent Posts. Simply drag the Search bar on top of Recent Posts. And you’re done.

            Change widget content. For example, if you have a Text widget that includes information about Opening Hours, or About Me, you can follow these steps:

            • If the content does not show up, click on the arrow next to the widget that holds that specific information. The widget will expand
            • Then, modify your content as you wish
            • Finally, click Save.

            Remove widgets from a location:

            • Click on the arrow next to the location where the widget is. The location will expand and you can see all contents inside
            • Click on the arrow next to the widgets you want to remove. The widget will expland.
            • Click Delete.

            Likewise, these actions can be done through Appearance/Customize. Choose Widgets and start manipulating them. And, remember to click Save and Publish, or else all changes will be cleared when you close the Customizer.

            More information on how to perform these can be seen from the video below.

            4. WordPress Widgets in different themes

            As you might notice, the concept of widgets is very interesting. Some themes even apply this to its design method.

            Let’s imagine that you have 6 widget locations: Header, Main Center, Footer (3 widgets – 3 footer columns), Sidebar.

            And now you drag a photo to the Header, some articles with thumbnails to the Main Center.

            For the Sidebar, you have texts that describe your business, opening hours, and your social profiles that people can connect to.

            Finally, for the 3 columns of the Footer, you have company address, recent posts and links to navigate through your website’s different pages.

            So, are you already quite done?

            That is also what the theme makers think. Widgets make the layout preparation so easy that it is even understandable by non-IT people. Meanwhile, some themes want to keep it simple so the locations available for widgets are limited.

            But, more widgets do not mean better website. Please see the video below for more information.

            5. Video on WordPress widgets

            https://youtu.be/cQbaYVYzXOU

            Please don’t forget to subscribe to my blog and Youtube channel if you like this video and would like to see more of the same in the future!

            ———————————————–

            Other posts on WordPress topics:

            WordPress.com or WordPress.org?

            Install WordPress on local server

            Themes and 3 ways to install a theme

            Filed Under: Wordpress

            Recent posts

            [WordPress] Let’s Make Plugin E01: A Simple View Count Plugin

            [WordPress] Create custom post type programmatically

            [WordPress] Open Images in Posts into Lightboxes On Clicks (Without Plugins)

            Reader Interactions

            You are here: Home / Wordpress / WordPress Basics: Widgets

            Leave a Reply Cancel reply

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

            Primary Sidebar

            Hi! I am a Vietnamese coder living in Oulu, Finland. Currently I am working with PHP, MySQL, HTML, CSS, and JavaScript. This blog is my learning diary, in which I share knowledge from my own experience or research. Hopefully you can find something useful here and don’t hesitate to open a discussion or leave a feedback!

            FOLLOW MY BLOG

            Thank you for visiting this website! I hope you find something useful here :). Contact me by email: anh@anhkarppinen.com.