How to add widgets to wordpress

New Page

How to Add and Use Widgets in WordPress (Step by Step)

Last Updated OnOctober 6, 2021by Editorial Team | Reader Disclosure Disclosure : Our content is endorsed by the reader. This means that if you click on some of our links, we may earn a commission. See how WPBeginner is funded, why it’s important, and how you can support us.

Share 304 Fee Tweet Fee Facebook Messenger WhatsApp Email

Do you want to learn add and use widgets in WordPress?

Widgets allow aggregating different functions on WordPress sidebars and other areas listed for widgets, while writing code.

Dans cet article, we will show you how to add and use widgets in WordPress, so you can quickly customize your site.

How to Aggregate and Use Widgets in WordPress (Step by Step) How to Add and Use Widgets in WordPress (Step by Step)

What are widgets and why are they needed in WordPress?

Widgets block content that may be aggregated to sidebars, page turn, and other widget areas on the WordPress website.

It can be a simple way to aggregate image galleries, social feeds, quotes, timelines, popular posts and other dynamic elements on the WordPress website.

You can find your widget area by going to Appearance » Widgets in your WordPress admin panneau d’administration.

Click here to display a list of our available widget zones. Dans le suivant example using the Astra theme, there are several areas where you can add widgets, including the sidebar, header, and footer.

Widget menu example Widget menu example

The areas you can place widgets in are defined by your WordPress theme, so it might look different depending on the theme you’re using.

Dans ce cas, we will show you how to easily add widgets to different areas of your WordPress site.

How to Add a Widget to a WordPress Sidebar

Hay different forms of widget aggregation in WordPress sidebar area.

The easiest way is to navigate to Apariencia » Widgets and click on the ‘Flecha’ in the sidebar widgets section to expand the widgets section.

Expand sidebar widget Développer le widget de la barre latérale

Then click on the ‘Más’ icon to display the widget blocking menu.

Here you can search for a widget by name. Or, click on the ‘Browse All’ button to bring up a menu of all available widgets.

Haga clic en el icono de bloque de widgets Click add widget block icon

Para agregar un widget a su barra lateral, simplemente haga clic en un widget y se agregará automáticamente a su barra lateral.

Then, all you have to do is click ‘Update’ and the widget will now be live on your website.

Agregar widget y actualizar Add widget and update

The widgets page isn’t the only way to add widgets to your WordPress blog.

You can also add widgets by using the WordPress theme customizer. First, navigate to Appearance » Customize and then click the ‘Widgets’ menu option.

Widget de personalización de la barra lateral de WordPress WordPress sidebar customizer widget

This brings you to a page where you can customize your widget areas.

To add a widget to your sidebar, simply click the ‘Right Sidebar’ menu option.

Haga clic en el widget de la barra lateral derecha Click right sidebar widget

After that, click the ‘+’ add block icon to bring up the widget block menu.

Then, select a widget block and it will automatically add to your sidebar.

Haga clic para agregar un bloque al widget de la barra lateral Click to add block to sidebar widget

The process of adding a widget is the same as above.

Once you’re done making changes to your widget area, click the ‘Publish’ button to push your changes live.

Guardar los cambios del widget de la barra lateral en el personalizador Save sidebar widget changes in customizer

How to Remove a Widget in WordPress

Removing a widget in WordPress is as easy as the process of adding them. Simply navigate to Appearance » Widgets in your WordPress dashboard.

After that, click on the widget block that you want to delete.

Haga clic en el bloque de widgets para eliminar Click widget block to delete

Then, at the top of the widget block, click the three dots ‘Options’ button. This brings up a menu that lets you move and delete the widget.

To delete the widget, simply select the ‘Remove block’ option.

Haga clic en opciones y elimine el bloqueo de widgets Click options and remove widget block

Deleting the widget will remove it from your sidebar and delete the widget settings or any options you selected.

Sometimes you might want to remove a widget, but save the settings and changes you’ve made for the future.

To do this, click the ‘Drag’ icon at the top of the widget.

Haga clic en el icono de arrastrar para mover el widget Click drag icon to move widget

Then, drag the widget to the ‘Inactive widgets’ section.

Before you exit the page, make sure to click the ‘Update’ button to save your widget settings.

Arrastrar al widget inactivo Drag to inactive widget

If you want to use that widget again, then simply drag the widget block from the ‘Inactive widgets’ section to an active widget section.

What Kind of Widgets Are Available for WordPress?

A default WordPress installation comes with built-in widgets like, recent posts, tags, search bar, categories, calendar, and more.

Bloques de widgets disponibles de WordPress WordPress available widget blocks

However, most WordPress plugins and themes also comes with their own widget blocks that you can add to your site.

For example, the WPForms plugin can be used to create contact form pages, but it also has a widget that lets you add forms to any widget-ready area of your site.

Ejemplo de widget de WPForms WPForms widget example

Similarly, countless other themes and plugins add widgets, so their users can add things to their WordPress widget areas without writing any code or HTML.

You can even create your own widget to add completely custom widget to WordPress. For more details, see our guide on how to create a custom WordPress widget.

We hope this article helped you learn how to add and use widgets in WordPress. You may also want to see our guide on how to choose the best blogging platform and our picks of the best business phone services for small business.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Comparte 304 Cuota Pío Cuota Facebook Messenger WhatsApp Correo electrónico

WordPress Widgets

Topics

  • Installing Widgets
  • Displaying Widgets
    • Existing Widgets in Existing Widget Areas
    • Widget Areas
  • Using Text Widgets
    • Adding Code to the Text Widget
  • Using RSS Widgets
  • Resources

WordPress Widgets add content and features to your Sidebars. Examples are the default widgets that come with WordPress; for Categories, Tag cloud, Search, etc. Plugins will often add their own widgets.

Widgets were originally designed to provide a simple and easy-to-use way of giving design and structure control of the WordPress Theme to the user, which is now available on properly “widgetized” WordPress Themes to include the header, footer, and elsewhere in the WordPress design and structure.

Widgets require no code experience or expertise. They can be added, removed, and rearranged on the Theme Customizer or Appearance > Widgets in the WordPress Administration Screens.

Some WordPress Widgets offer customization and options such as forms to fill out, includes or excludes of data and information, optional images, and other customization features.

The Block-based Widgets Editor explains how to use the updated Widgets experience with blocks.

The Appearance Widgets Screen explains how to use the various Widgets that come with WordPress in the Classic experience.

Plugins that come bundled with widgets can be found in the WordPress Plugin Directory.

Instalación de widgets

WordPress comes pre-packaged with a variety of Widgets. If those are insufficient for your needs you can install new ones by searching the WordPress Plugin Directory which is accessible from the WordPress Administration Plugins > Add New Screen.

Arriba ↑

Visualización de widgets

Arriba ↑

Widgets existentes en áreas de widgets existentes

Before you can add a Widget you must verify that the Theme you’re using supports Widgets (more specifically: Widget Area). You can do so by simply navigating to the Appearance menu and looking for a sub menu titled “Widgets”.

If your Theme supports Theme Customizer then you can use the following Steps. In Theme Customizer, the live preview of changes is available.

appearance-customize-widgets

  1. Go to Appearance > Customize in the WordPress Administration Screens.
  2. Click the Widget menu in the Theme Customizer to access to the Widget Customize Screen.
  3. Click the down arrow of Widget Area to list the already registered Widgets.
  4. Click Add a Widget button at the bottom of sidebar. It shows the list of available widgets.
  5. Click a widget you want to add. The widgets should be added in the sidebar.
  6. Preview your site and you should see the content from your new Widget.
  7. To arrange the Widgets within the Sidebar, drag and drop the widgets in the order you want or click Reorder link and click up arrow and down allow of each widget and click Done after the arrange operation.
  8. To customize the Widget features, click the down arrow in the right to expand the Widget’s interface.
  9. To remove the widget, click Remove from Widget’s interface in above step.

If your Theme does not support Theme Customizer then you can use the following conventional steps:

designwidget-2

  1. Go to Appearance > Widgets in the WordPress Administration Screens.
  2. Choose a Widget and either drag it to the sidebar where you wish it to appear, or click the widget, (select a destination sidebar if your theme has more than one) and click the Add Widget button. There might be more than one sidebar option, so begin with the first one. Once in place, WordPress automatically updates the Theme.
  3. Preview the site. You should find that the “default” sidebar elements are now gone and only the new addition is visible.
  4. Return to the Widgets Screen to continue adding Widgets.
  5. To arrange the Widgets within the sidebar or Widget area, click and drag it into place.
  6. To customize the Widget features, click the down arrow in the upper right corner to expand the Widget’s interface.
  7. To save the Widget’s customization, click Save.
  8. To remove the Widget, click Delete.

If you want to remove the widget but save its setting for possible future use, just drag it into the Inactive Widgets area. You can add them back anytime from there. This is especially helpful when you switch to a theme with fewer or different widget areas.

When changing themes, there is often some variation in the number and setup of widget areas/sidebars and sometimes these conflicts make the transition a bit less smooth. If you changed themes and seem to be missing widgets, scroll down on the screen to the Inactive Widgets area, where all of your widgets and their settings will have been saved.

Enabling Accessibility Mode, via Screen Options, allows you to use Add and Edit buttons instead of using drag and drop.

Arriba ↑

Áreas de widgets

While widget areas typically occur in webpage sidebars, a theme can place widget areas anywhere on a page. For example, besides the usual sidebar locations, the Twenty Seventeen theme has a widget area in the footer of every page.

Arriba ↑

Uso de widgets de texto

The Text Widget is one of the most commonly used WordPress Widgets that comes with every WordPress installation. It allows users to add text, video, images, custom lists, and more to their WordPress sites.

To use the WordPress Text Widget:

  1. Go to Appearance > Customize in the WordPress Administration Screens and click the Widget menu in the Theme Customizer. Or Go to Appearance > Widgets in the WordPress Administration Screens.
  2. Open the sidebar to which you wish to add the Text Widget.
  3. Find the Text Widget in the list of Widgets.
  4. Click and drag the Widget to the spot you wish it to appear.

To open and edit the Text Widget:

  1. Click the down arrow to the right of the Text Widget title.
  2. Set the Text Widget Title (optional).
  3. Add the text or HTML code to the box or edit what is currently there.
  4. Choose the option to Automatically add paragraphs to wrap each block of text in an HTML paragraph tag (recommended for text).
  5. Click Save to save the Text Widget.
  6. Click Close to close the Text Widget.
  7. Switch tabs in your browser and preview the results and make changes if necessary.

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

Arriba ↑

Agregar código al widget de texto

Basic HTML, embeds, and JavaScript are added easily to the WordPress Text Widget. Most embed codes from social sharing sites for multimedia will work in a WordPress Text Widget. However, active code and programming languages such as PHP will not work as the Widget will strip out code it cannot display.

To add active code to the Text Widget, use one of the many WordPress Plugins from the WordPress Plugin Directory that override WordPress restrictions on using PHP in posts. Check that they will work on Widgets as some will not.

Arriba ↑

Uso de widgets RSS

The RSS Widget allows you to integrate an external feed source for content into a Widget area of your site, such as your Twitter account, Facebook posts, Google+ posts, or other blogs.

The RSS Widget displays the most recently published content from any source with an active feed. This is an ideal way of integrating outside content into your site.

By default, WordPress RSS Widget displays the post title or the first 100 or so characters of a Tweet or long untitled post. These are either in the form of a link or features a link to the original source depending upon the feed’s design and structure.

  1. Enter the RSS feed URL in the first box, copied from the source page for the content you wish to include in your sidebar or other widgetized space.
  2. Give the feed a title: This is optional and gives you the chance to showcase the source of the content.
  3. How many items would you like to display?: By default, 10 are show, but you can choose from 1-20 posts.
  4. Display item content?: This allows you to show an excerpt of the content not just the title.
  5. Display item author if available?: If you wish to give credit to the original author of the content, check this to display the author.
  6. Display item date?: If available, the date of the original content will be shown.

You may add multiple RSS Widgets for incoming feeds to your WordPress sidebar and other widgetized areas of your site.

Arriba ↑

Recursos

  • WordPress Widgets Announcement (historical reference)

How to Add a WordPress Widget to a Blog Post or Webpage

Precio Shayla

Precio Shayla

Actualizado:10 de mayo de 2022

Publicado:25 de marzo de 2021

Have you ever started designing a page on your website and found that some pieces of information just didn’t flow well together?

Marketer adding a widget to her website

Calls to action, biographies, and social media feeds are just a few oddball elements that don’t have enough substance to warrant their own webpages, but don’t always play nicely with the content on existing pages either. Still, these elements are important for giving context to your content, enriching the user experience (UX), and converting visitors to leads.

En lugar de omitir estos componentes por completo por el bien del diseño, puede mantenerlos en la página mientras mantiene una hermosa UX.

¿La solución? Widgets de WordPress.

Download maintenant : How to launch a WordPress website [Free Guide + Checklist]

This post will go over what a WordPress widget is, its benefits, and how to add one to your website. We’ll also provide you with great plugin options to help you easily enhance your widgets, as well as step-by-step instructions on how to maximize their functionality.

What is a WordPress Widget?

Widgets are tools that add blocks of content to the sidebar or footer of your WordPress website. If they are interactive, they can improve the user experience on your website. Widgets make it easier for web developers or novice hobbyists to add more complex functionality to their WordPress sites.

You can add a widget for nearly anything from a lead form to your business’s live Twitter feed. Take a look at this chart for more types of widgets you can add to your website. 

  • Image Gallery
  • Social Media Feed
  • Lead Form
  • Featured Blog Post
  • Navigation Menu
  • Author Bio
  • Video
  • Email Subscribe Form

WordPress automatically comes with a wide selection of widgets, but you can always add more using plugins.

And here’s an example of what a calendar widget looks like in the sidebar of a WordPress website:

Calendar widget in a sidebar on a website

Image Source

Why Add a Widget to a WordPress Page or Post?

Adding specific, yet relevant content to a webpage is just one reason to add a widget to a page or post on your WordPress site. There are several other opportunities that your website might be missing that a widget could bring to the pages.

  • Improved navigation: You can add additional menus in a sidebar that can help your users navigate that page or the entire site.
  • Advertisement Opportunities: If you’re running advertisements on your WordPress site, you’ll find that adding a widget to your sidebar and footer specifically for this purpose is key to balancing your user experience and your ad revenue.
  • Additional Content: New blog posts, evergreen content, and limited-time offers are some examples of additional content that may have their own pages on your site, but could use some additional promotion to your readers. Adding these content types as widgets in a sidebar is a smart way to get them front-and-center without appearing distracting.

How to Add a Widget in WordPress

Widgets are a native WordPress feature, so you can add them without any additional plugins or third-party tools. There are two ways to add a widget natively in WordPress — using the drag and drop feature or selecting a sidebar or footer from the widget drop-down. Both methods are demonstrated in the gif below.

  • Go to Appearance, then Widgets.
  • Select the widget you want to add to the sidebar.
  • Drag the widget to the side bar and drop it in the box.

If you have several sidebars or footers on different pages, you can add a widget to those by selecting them from the widget drop down.

  • Go to Appearance, then Widgets.
  • Select the widget you want to add to the sidebar.
  • Click the arrow on the right side of the widget to reveal the dropdown.
  • Select the sidebar or footer you want to add the widget to.
  • Click Add Widget style=”font-size: 1.125rem; font-weight: 400;”>.

How to add a widget in WordPress gif

How to Add a Widget to a WordPress Page or Post Using a Plugin

Typically, when you add a widget to a sidebar, it would display on every page of your website. This content typically serves as a reminder to the visitor to engage with the additional resources that you have to offer.

However, this sidebar content isn’t always relevant to all posts and pages on your site. Instead, you want to show site visitors relevant, page-related content that provides further value, like an About Us page with a contact form widget (like the one shown in the image below) for site visitors with additional questions.

While you can use native WordPress functions to add widgets to your website, the default settings don’t allow you to display (or disable) these widgets on specific posts or pages — whether you want them there or not.

To solve this, use plugins. These custom add-ons will help you manage where widgets appear and how they look.

Let’s go over how you can use plugins to restrict widgets to different posts and pages to ensure that you’re providing your site visitors with the most valuable, relevant information.

custom form widget example showing how to add widget to WordPress page

Plugins to Display Widgets on Specific Page

  1. AMR Shortcode Any Widget
  2. Content Block (Custom Post Widget)
  3. WP Page Widget
  4. Custom Sidebars Dynamic Widget Area Manager
  5. Cherry Sidebars
  6. Sidebar Widget & Widget Manager for WordPress

With these WordPress plugins, you can add and remove plugins from specific pages. With an easy setup process, you can update your page in just a few minutes.

1. AMR Shortcode Any Widget

AMR Shortcode Any Widget is a popular widget for non-technical users. You can insert these widgets onto your pages with a simple shortcode.

Here’s how to use it:

amr shortcode plugin to add widget to WordPress page

  • Navigate to the specific page or post where you want to add the widget.
  • Insert the shortcode into the Visual Editor.
  • After following these steps, it should appear on the page or post like this:

example of adding widget to WordPress page

2. Content Blocks (Custom Post Widget)

Content Blocks is another shortcode plugin unique in that you can create custom widget content using the built-in WYSIWYG editor.

Here’s how to use it:

  • Install and activate the plugin.
  • On the left-hand side of your dashboard, click Content Blocks.
  • Then, click Add Content Block.
  • Give the new content block a title.
  • Insert this new block into the Visual Editor.

visual editor to add widget to WordPress page

  • Click Publish.
  • On the same page, scroll down until you see Content Block Shortcodes on the right-hand side.content block shortcodes to add widget to WordPress page
  • Copy the shortcode and insert it into the Visual Editor for the page or post you want to display the widget on.
  • Preview the content to see your changes, and click Insert Content Block when done.

3. WP Page Widget

WP Page Widget is a useful tool for creating widgetized page layouts in sidebar-enabled WordPress themes.

Here’s how to use it:

  • Install and activate the plugin.
  • On the left-hand side of your dashboard, go to Settings, then Page widgets settings.
  • Next to Available for post type, check Post and Page, or wherever you’d like it to be displayed.
  • Select the desired sidebars or sections of your page that you’d like to customize.
  • Optional step: select Yes to customize by default to ensure that you always have control of where widgets are displayed on your site.
  • Preview your changes if desired or simply select Save Changes.

settings page widgets to add widget to WordPress page

  • Navigate to the desired page or post where you want to add the widget and scroll down to the Page Widgets section.

page widgets section to add widget to WordPress page

  • Drag and drop the desired widgets into this area.
  • Preview the content to see your changes before they go live.

4. Custom Sidebars – Dynamic Widget Area Manager

Custom Sidebars helps you display custom widgets on pages or posts by category, ensuring that site visitors only see relevant and related content.

Here’s how to use it:

  • Install and activate the plugin.
  • Navigate to Appearance, then to Widgets. Here you’ll see a new area called Custom Sidebars.

custom sidebars plugin to add widget to WordPress page

  • You can create a custom sidebar or drag and drop the default included widgets into the section marked Theme Sidebars. You can control where the sidebar appears (in the sidebar or footer section) for both types.
  • Click the down arrow on the desired widget, then click Visibility (as shown below).

visibilidad del complemento de barras laterales personalizadas para agregar un widget a la página de WordPress

  • Click the + button to indicate when the widget will display on specific pages or posts.

custom sidebar filter options to add widget to WordPress page

  • Save your widget settings.
  • Preview the content to see your changes.

5. Cherry Sidebars

This unique plugin can display widgets within different areas on your site and assign widgets to display on different groups of pages or posts.

Here’s how to use it:

  • Install and activate the plugin.
  • Go to Appearance, then Widgets.
  • You’ll see a new widget area labeled Cherry Sidebars underneath the default sidebars customizer.
  • Drag and drop your pre-downloaded widgets.

Design sidebars addon to add widget to WordPress page

  • Navigate to the specific page or post where you want to add the widget.
  • Scroll down until you see Post Sidebars on the right-hand side menu.

publish sidebars to aggregate widget on WordPress page

  • From the drop-down menu, select the sidebars you want to use.
  • Guarde la página o la publicación.
  • Obtenga una vista previa del contenido para ver sus cambios.

6. Barra lateral y administrador de widgets para WordPress

Sidebar & Widget Manager para WordPress es un complemento rico en funciones que le brinda control total sobre la visualización de widgets en su sitio. Puede seleccionar las páginas o publicaciones relevantes para mostrar sus widgets y cambiar su ubicación en cada página.

He aquí cómo usarlo:

  • Instalar y activar el complemento.
  • Vaya a Apariencia , luego a Widgets .
  • Click the Set Visibility button and choose the pages you want your widgets to display on.

demo of how to add a widget to specific pages at once

You can also change the location of widgets on your pages and posts by creating custom sidebar widgets. This is how it eats:

  • First, navigate to the Pages section .
  • Create your design or select a default option from the dropdown menu.
  • Drag and drop the sidebars that contain the widgets you want to display.

demo how to create custom sidebar widgets on wordpress page

  • Preview the post or page to see the changes.

Elect a complement to display our widgets

Customize your blog posts and web pages with widgets to inspire site visitors to engage with additional content. Although it is possible that the pre-determined configuration of WordPress does not include the functions that you need, the additional complements in this list ofrecen alternative solutions to help you create the site of WordPress that you want.

Editor’s Note: This post was originally published in December 2020 and has been updated for completeness.

palaver clave

Themes: WordPress Website

Don’t forget to share this post!

Google Google translator

Google Google Translate


Video How to add widgets to wordpress

Related Posts

How to add seo keywords in wordpress

Contents1 Cómo agregar palabras clave de SEO en WordPress (aumentar el CTR y las clasificaciones)1.1 Post Title1.2 Headline1.3 Header Tags1.4 Introduction and Conclusion1.5 Body Copy1.6 URL1.7 Meta…

How to embed google calendar into wordpress

Contents1 How to Add a Google Calendar in WordPress (Step by Step)2 Add a Google calendar to your website3 calendario de Google3.1 Versatile plans and pricing4 Video…

How to change the logo in wordpress

Contents1 How to Add a Custom Logo to Your Site Header2 Site Logo2.1 Planes y precios versátiles3 Add, remove or edit a custom logo4 Video How to…

How to add a popup on wordpress

Contents1 Easily create a WordPress emergent form (2 forms)1.1 ¿Por qué usar un formulario emergente de WordPress?1.2 Método #1: Crear un formulario emergente con OptinMonster + WPForms1.3…

How to roll back wordpress version

Contents1 How to Revert WordPress: Undo WordPress Updates (Easy Way)2 How to Downgrade WordPress & Roll Back to a Previous Version2.1 1. A WordPress update included significant changes…

How to rollback wordpress version

Contents1 How to Downgrade WordPress and Revert to an Older Version1.1 1. A WordPress update included significant changes that are not compatible with your theme or plugins1.2…