Los widgets de WordPress son increíblemente útiles. Le permiten agregar todo tipo de contenido adicional a su sitio web fuera del cuerpo de la publicación o página en sí, alentando a los usuarios a recibir información, seguir enlaces o tomar medidas.

En esta publicación, le mostraré todo lo que necesita saber sobre los widgets de WordPress. Cómo agregarlos a su sitio, cómo crear áreas de widgets para colocarlos, cómo instalar complementos que te dan más de ellos, cómo codificar tus propios widgets y mucho más.

Primero, comencemos por identificar qué son los widgets de WordPress.

¿Qué son los widgets de WordPress?

En WordPress, los widgets son fragmentos de contenido que viven fuera del flujo de la página o del contenido publicado.

Los widgets contienen información, navegación o medios que están separados de una publicación o página individual. En la mayoría de los casos, cada widget se mostrará en cada página del sitio, pero también puede registrar áreas de widget para páginas específicas como la página de inicio.

Para agregar un widget a su sitio, debe agregarlo a un área de widget. El tema crea áreas de widgets porque se relacionan con el diseño y el diseño de su sitio y no con la funcionalidad.

Más Temas de WordPress tener áreas de widgets en la barra lateral y pie de página, aunque algunas tendrán múltiples áreas de widgets en muchos lugares, como debajo o encima del contenido o en el encabezado.

La siguiente captura de pantalla, de uno de mis propios sitios, muestra widgets en la barra lateral y el pie de página.

Áreas de widgets en mi sitio

WordPress viene con un montón de widgets precargados para que pueda usarlos sin tener que instalar cualquier complemento o escribir cualquier código. Pero también puede agregar muchos más widgets instalando complementos o codificando los suyos.

Estos pueden abarcar una amplia gama de tipos de contenido, como medios, feeds de redes sociales, navegación, búsqueda, mapas y mucho más. Hay muy poco que desee en su sitio para el que no pueda encontrar un widget. De hecho, el mayor desafío a menudo es elegir entre todas las opciones y no exagerar.

Cuándo usar los widgets de WordPress

Debe usar un widget cada vez que desee agregar contenido adicional a una o más páginas de su sitio (y cuando digo página, incluyo publicaciones, archivos, etc.), pero eso no es parte del contenido de esa página. Son particularmente útiles para el contenido que desea mostrar en cada página del sitio, como una lista de sus últimas publicaciones, un carrito de compras, o un botón de llamada a la acción.

Piense en cuántos usuarios necesitarán acceso a cada widget y cuán importante es cuando decida dónde colocarlo. Widgets en la barra lateral será más destacado que los del pie de página, que algunos usuarios ni siquiera pueden ver.

Por lo tanto, un widget de publicaciones más recientes o un widget de llamado a la acción podría estar mejor en la barra lateral donde las personas tienen más posibilidades de interactuar con ellos, mientras que un feed de redes sociales podría ir al pie de página.

Si su tema también tiene áreas de widgets especiales para la página de inicio, es posible que desee usarlas para navegar por los departamentos de su sitio, listas de contenido relevante o medios como un video que da la bienvenida a las personas al sitio.

11 ejemplos de widgets en WordPress

La mejor manera de comprender las posibilidades que ofrecen los widgets de WordPress es mirar algunos ejemplos de ellos. Echemos un vistazo a once tipos de widgets que verá con frecuencia en los sitios de WordPress.

1. Widget de publicaciones recientes

El widget Publicaciones recientes es posiblemente el widget más utilizado en blogs.

Le permite mostrar una lista de sus publicaciones más recientes en la barra lateral o pie de página de cada página de su sitio, lo que aumenta la posibilidad de que las personas naveguen por el sitio y lean una serie de publicaciones.

El widget Publicaciones recientes viene preinstalado con WordPress. Le permite establecer cuántas publicaciones desea mostrar y qué encabezado desea asignar al widget.

Latest Posts widget

Widget de publicaciones recientes

Si desea agregar funcionalidad adicional, puede instalar un complemento para un widget alternativo como Publicaciones populares de WordPress, que muestra el contenido más popular. Alternativamente, el Publicaciones aleatorias avanzadas El widget se actualiza cada vez que el usuario visita una nueva pantalla.

2. Widget de comentarios recientes

¿Desea mostrar a los visitantes lo vibrante que es su sitio y cuánto interactúa su público con su contenido?

El widget Comentarios recientes muestra los últimos comentarios en su sitio, brindando a los visitantes la oportunidad de navegar directamente a esos comentarios y unirse a la discusión.

Recent Comments widget

Widget de comentarios recientes

El widget Comentarios recientes viene con WordPress. Nuevamente, si desea agregar funcionalidad adicional, puede instalar un tercero plugin de comentarios tales como el Comentarios sociales de WP widget que permite a las personas comentar usando su cuenta de Facebook: bueno para la participación en redes sociales.

3. Widgets de llamado a la acción

Un gran uso de un widget es alentar a las personas a tomar medidas, y puede hacerlo con un widget de llamado a la acción.

Su widget podría ser un simple botón, o podría crear algo más a medida utilizando un widget de texto o HTML, o incluso un widget de imagen, todo lo cual viene preinstalado con WordPress.

En uno de mis propios sitios, he creado un widget de llamado a la acción para alentar a las personas a registrarse en mi lista de correo. Esto utiliza el widget HTML incorporado en el que he incluido una imagen, algo de texto y un botón que he codificado en HTML.

Call to Action widgets on my site

Widgets de llamado a la acción en mi sitio

4. Widgets de navegación

También puede usar widgets para alentar a las personas a navegar por su sitio.

Hay algunas opciones para esto: los widgets Categorías o Nube de etiquetas y el widget Menú de navegación.

El widget del menú de navegación le permite crear un menú de navegación personalizado así como el menú de navegación principal en su sitio, y luego agréguelo a un área de widgets.

Incluso podría agregar su menú de navegación principal a un área de widgets, aunque esto solo funcionará si tiene un pequeño menú de navegación.

Navigation Menu widget

Widget de menú de navegación

Agregar un menú de navegación al pie de página de su sitio animará a las personas que llegan al final de una publicación a navegar por su sitio. Es particularmente útil para los usuarios móviles que pueden tener que desplazarse mucho para recibir una copia de seguridad menú de navegación principal después de llegar al final de una publicación.

Alternativamente, puede usar el widget de Categorías incorporado para mostrar una lista de las categorías en su sitio, o el widget de Tag Cloud para facilitar que las personas accedan a los archivos de etiquetas.

5. Widgets de medios

Agregar medios a su barra lateral o pie de página dará vida a su sitio y les dará a los usuarios algo para mirar o interactuar.

Puede usar el widget de imagen incorporado para mostrar cualquier imagen en su barra lateral o pie de página, y también le permite convertir esa imagen en un enlace.

Image widget

Widget de imagen

Alternativamente, el widget de video le permite transmitir video desde YouTube o Vimeo directamente al área de widgets de su sitio. Esto es particularmente útil si su sitio tiene áreas de widgets especiales para la página de inicio, pero también puede ser bueno en el pie de página como una forma de captar la atención de las personas cuando llegan al final de una publicación.

6. Widgets de redes sociales

Si desea interactuar con las personas que visitan su sitio web a través de las redes sociales, agregar su feed de redes sociales a la barra lateral o al pie de página de su sitio mostrará a las personas que usted está activo en las redes sociales y les animará a que le den me gusta o lo sigan.

Una forma de recibir acceso a widgets de redes sociales para las plataformas más grandes (Facebook, Twitter, Instagram) es instalar el Jetpack plugin, que incluye todo esto y mucho más.

Jetpack plugin

Complemento Jetpack

Alternativamente, todas las plataformas de redes sociales tienen sus propios complementos, disponibles de forma gratuita a través del directorio de complementos. O puedes encontrar complementos de terceros eso le permitirá personalizar la forma en que muestra su feed de redes sociales.

7. Widget del carrito de compras

Si estás ejecutando un comercio electrónico almacenar en su sitio utilizando un complemento como WooCommerce, es una buena idea incluir un widget de carrito para que los usuarios puedan navegar fácilmente a su carrito en cualquier lugar de la tienda.

Shopping cart widget

Widget de carrito de compras

Puede poner esto en la barra lateral donde las personas podrán verlo fácilmente, o en el encabezado para mayor visibilidad si su tema incluye un área de widgets allí.

Complementos de comercio electrónico como WooCommerce incluyen widgets de carrito de compras y otros widgets de comercio electrónico como parte del complemento, por lo que una vez que haya agregado el comercio electrónico a su sitio, los encontrará agregados a su Widgets pantalla.

8. Formulario de widget

Si desea que las personas se comuniquen con usted, haga preguntas o inscribirse en una lista de correo, puede agregar un formulario a su barra lateral.

No hay un widget de formulario incluido con WordPress, pero puede agregar complementos para proporcionarlos, como el gratuito Formulario de contacto 7 o el premium pero muy potente Formas de gravedad.

9. Widget de mapa

Si su negocio se basa en una ubicación física y desea que las personas puedan encontrarlo fácilmente, será útil agregar un widget de mapa a su sitio.

Hay una serie de gratis Complementos de widget de mapa de Google puede usar, como el WP Google Maps enchufar.

WP Google Maps plugin

Complemento WP Google Maps

Alternativamente, si no desea instalar un complemento, puede toma el código de inserción de Google Maps y agrégalo a un widget HTML.

10. Widget de inicio de sesión

Si estás ejecutando un sitio de membresía, un widget de inicio de sesión facilitará a las personas inicia sesión en tu sitio sin tener que ir a una página de inicio de sesión separada.

El widget Meta que viene con WordPress incluye un enlace de inicio de sesión, pero también incluye otras cosas que quizás no desee, por lo que le recomiendo usar un complemento separado para esto desde el directorio de complementos.

los Inicie sesión con Ajax widget le proporciona un formulario de inicio de sesión en su widget, lo que significa que las personas pueden iniciar sesión en su sitio desde cualquier página.

Login with Ajax widget plugin

Inicie sesión con el complemento de widget de Ajax

11. Buscar widget

Un widget realmente simple pero increíblemente útil es el Buscar widget, que viene precargado con WordPress.

Search widget

Buscar widget

Agregue esto a su barra lateral o encabezado y facilitará que las personas encuentren cosas en su sitio.

Si desea aumentar el poder de su widget de búsqueda, puede instalar la aplicación gratuita Búsqueda de Google WP widget, que utiliza la búsqueda de Google.

Cómo agregar widgets a su sitio de WordPress

Una vez que haya decidido qué tipo de widgets necesita para su sitio de WordPress, es hora de instalarlos.

No caigas en la tentación de agregar demasiados. Cuantos más haya, menos probable es que los usuarios los noten. En cambio, concéntrese en dos o tres widgets clave para la barra lateral. Puede agregar más al pie de página, donde son menos importantes de todos modos.

Y si tiene áreas de widgets adicionales en tu tema, decidir qué widgets poner en esos. Asegúrese de que encajen con el diseño y diseño de su sitio.

Hay tres formas de agregar widgets:

  • Use los widgets que ya vienen con WordPress.
  • Agregue un widget de terceros desde directorio de complementos.
  • Compre un complemento premium que incluya un widget.

Encontrar widgets para su sitio de WordPress

Hay una gran variedad de widgets disponibles, por lo que puede resultar difícil elegir cuál instalar. Echemos un vistazo a las opciones y luego examinemos cómo podría elegir la mejor para usted.

Widgets que vienen con WordPress

Si uno de los widgets preinstalados hace lo que necesita, entonces úselo. Le ahorrará tiempo y significará menos código en ejecución en su sitio.

Pre-installed WordPress widgets

Widgets de WordPress preinstalados

Los widgets preinstalados son:

  • Archivo: enlace a archivos por mes, diseñado para blogs pero bastante desactualizado ahora.
  • Calendario: un calendario de sus publicaciones, nuevamente adecuado para blogs, especialmente si el suyo es urgente (pero no tan común en estos días).
  • HTML personalizado: lo último en flexibilidad, agregue el contenido que desee escribiendo o pegando en el HTML (como Formularios de Google) Evite si no se siente cómodo con la codificación.
  • Imagen: mostrar una imagen de tu biblioteca de medios.
  • Menú de Navegación: muestra el menú de navegación principal o uno separado que cree.
  • Comentarios Recientes: una lista de comentarios recientes con enlaces a ellos.
  • Nube de etiquetas: una lista de etiquetas en formato de nube, con enlaces a los archivos relevantes.
  • Vídeo: incrustar un video de YouTube o cualquier otro servicio de transmisión.
  • Audio: incrustar un podcast, un jugador, canción u otros clips de audio.
  • Categorias: una lista de categorías en tu blog, con enlaces a las páginas del archivo.
  • Galería: más avanzado que el widget de imagen, muestra un galería de imágenes.
  • Meta: metadatos como enlaces de inicio de sesión y RSS Feeds. Una resaca de los primeros días de WordPress y ahora no es muy útil.
  • Páginas: muestra una lista de las páginas de su sitio con enlaces.
  • Mensajes recientes: muestra una lista de tus publicaciones más recientes para alentar a las personas a leerlas.
  • Buscar: un cuadro de búsqueda simple.
  • Texto: cualquier texto que desee agregar, como información sobre el sitio.

Agregar widgets con un complemento

El directorio de complementos de WordPress tiene miles de complementos de widgets gratuitos que le darán más widgets para elegir.

Además de eso, muchos otros complementos también incluyen widgets, como un complemento de comercio electrónico que le brinda un widget de carrito y más.

Si el directorio de complementos no tiene el complemento que necesita, puede decidir agregar un complemento premium. A veces, estos ofrecerán más funciones o una interfaz más intuitiva. Pero a veces encontrarás las mismas características en un complemento gratuito, así que haz una buena búsqueda en el directorio de complementos antes de pagar por los complementos.

Cómo encontrar el widget adecuado para su sitio

Para encontrar el widget de WordPress adecuado para usted, siga estos consejos:

  1. Identifique exactamente lo que necesita del widget. ¿Qué funcionalidad necesita tener y cómo quiere que se vea? ¿Necesita vincularse a alguna API de terceros?
  2. Verifique los widgets integrados para ver si hay uno que satisfaga sus necesidades. Pruebe las relevantes, si encuentra una adecuada, eso es genial. Si no…
  3. Consulte el directorio de complementos, al que puede acceder a través de Complementos> Agregar nuevo. Intente buscar más de un término para encontrar el complemento adecuado para usted y busque con y sin la palabra 'widget'. A veces, un complemento que no está enfocado en widgets incluirá un widget como parte de un conjunto más amplio de características.
  4. Si no puede encontrar nada adecuado entre los complementos gratuitos, busque un complemento premium. Pida recomendaciones a otros usuarios de WordPress y mire las reseñas antes de elegir una.

Independientemente del widget que elija, deberá probarlo para comprobar que funciona como lo desea. Si está comprando complementos premium, le recomiendo comprar uno con una garantía de devolución de dinero o un período de prueba gratuito en caso de que no sea adecuado para usted.

Cómo agregar widgets a la barra lateral y al pie de página en WordPress

Ahora que ha elegido su widget, es hora de agregarlo a su sitio.

Puede agregar widgets a cualquier área activa de widgets proporcionada por su tema. Si su tema no tiene un área de widgets en el lugar que desea, intente buscar un tema alternativo.

Más adelante en esta publicación, le mostraré cómo codificar su propia área de widgets.

Hay dos formas de agregar widgets a su sitio:

  • Al usar el Personalizador. Ir Apariencia> Personalizador> Widgets en el menú de administración, o Personalizar> Widgets desde la barra de administración en la parte superior de la pantalla.
  • A través de la pantalla de administración de widgets. Ir Apariencia> Widgets en el menú de administración, o desde la barra de administración, haga clic en Personalizar> Widgets.

Widgets in the Customizer

Widgets en el Personalizador

Le mostraré cómo usar ambos métodos en breve, pero primero echemos un vistazo a las áreas de widgets y por qué recibe los que hace con su tema.

Los widgets no son solo para la barra lateral

Depende de tu Tema de WordPress, es posible que tenga áreas de widgets en varios lugares.

La mayoría de los temas tienen áreas de widgets en la barra lateral y pie de página. Pero algunos también los tienen en otros lugares, como debajo o encima del contenido o en el encabezado.

Si va a la pantalla de configuración de widgets en Administrador de WordPress, podrás ver todas las áreas de widgets en tu tema.

Utilizo un tema con múltiples áreas de widgets en muchos lugares. Puede ver en la captura de pantalla a continuación que hay áreas de widgets encima y debajo del contenido, en el encabezado, debajo del pie de página principal.

Widgets setting screen, widget areas

Pantalla de configuración de widgets, áreas de widgets

Si desea agregar widgets a otros lugares en su sitio, tiene sentido encontrar un tema que tenga múltiples áreas de widgets. La mejor manera de hacer esto es usar un tema marco.

Un buen ejemplo de un widget en un lugar en su tema que no es la barra lateral o el pie de página es agregar una barra de búsqueda en el encabezado como lo he hecho en uno de mis sitios web.

Search bar in the header

Barra de búsqueda en el encabezado

Áreas de widgets y temas

Las áreas de widgets se codifican en los archivos de plantilla del tema, así como en el archivo de funciones del tema.

Aquí puede ver el código que he usado en mi archivo de funciones de tema para agregar un área de widget que irá en el encabezado.

register_sidebar (array (
'name' => __ ('En el área del widget de encabezado', 'rmccollin'),
'id' => 'in-header-widget-area',
'description' => __ ('Un área de widget ubicada en el lado derecho del encabezado, junto al título y la descripción del sitio', 'rmccollin'),
'before_widget' => '

‘,
'after_widget' => '

‘,
'before_title' => '

‘,
'after_title' => '

‘,
) );

Y aquí está el código en mi archivo header.php que agrega el área del widget en el lugar correcto del tema.

if (is_active_sidebar ('in-header-widget-area')) {?>

If you want to add extra widget areas in your theme, you need to add the same kind of code. I’ll show you how to do this later in this post.

Don’t forget that if your theme doesn’t have as many widget areas as you would like, you can always do one of two things:

  • Find a theme that does have widget areas where you want them.
  • Code the new widget area into your theme or a child of your theme.

Once you’ve got widget areas in all the places in your theme that you want them, you can start adding widgets to them.

How to Use the Widgets Screen to add Widgets

There are two ways to add widgets to your WordPress site. The first one is to use the Widgets screen in the WordPress admin.

Click on Appearance > Widgets. This brings up the widgets screen.

Widgets screen

Widgets screen

To add a widget you can do one of two things:

  • Drag it over from the list of widgets on the left-hand side into the relevant widget area.
  • Click on the widget you want to add, and you’ll see a list of where you could add it. Select the widget area you want, and click the Add Widget button.

Selecting a widget area and widget

Selecting a widget area and widget

You might then need to edit where the widget is positioned within the widget area.

You can add as many widgets as you want to each widget area, but don’t go overboard. You can drag them around inside the widget area to receive them in the right order. You can also drag them from one widget area to another if you decide you don’t like the way they look.

You can also use your keyboard to add widgets using the Widgets screen, so if you don’t have access to a mouse you can still add widgets.

Adding and Editing Widgets in Accessibility Mode

If you can’t use a mouse, you can use the Widgets screen with a keyboard.

First, put the screen into accessibility mode by clicking on (or tabbing to and selecting) the Enable accessibility mode link at the top right of the screen.

Accessibility mode link

Accessibility mode link

The screen will then change to reflect the fact that you’re in accessibility mode.

Widgets screen accessibility mode

Widgets screen accessibility mode

You can then navigate between elements of the screen using the Tab key on your keyboard, and hit Enter to select an item and act on it. You can either tab to a widget, hit Return on the Add link and then pick where you want to add it, or tab to the widget area and hit Return on the Edit link.

How to Use the WordPress Customizer to Add Widgets

Using the Customizer to add widgets instead of the widgets screen means you can see your widgets as you’re adding them. This makes it easier to see how your widgets will look and to move them around between widget areas if you want to.

In the admin menu, click Appearance > Customize. Alternatively, from the admin bar at the top of the screen in the live site (assuming you’re logged in), just click on Customize. This will open the Customizer.

WordPress admin bar

WordPress admin bar

Now click the Widgets option and you will see a list of all the widget areas in your theme. Click the widget area where you want to add a widget and click the Add a widget button.

This gives you a list of all the widgets available for your site. That’ll include all the built-in widgets that came with WordPress plus any widget you’ve added via plugins.

Add a widget button

Add a widget button

Pick the widget you want to add to that widget area and you’ll see it in the preview screen on the right-hand side.

You can reorder widgets by dragging them up and down on the left-hand side or by clicking the Reorder link below the list of widgets and then clicking the arrows to move them up and down.

Editing widgets in the Customizer

Editing widgets in the Customizer

Once you finished adding widgets via the Customizer don’t forget to click the Publish button at the top left so that your changes are saved. If you leave the Customizer without doing this, none of your changes will be reflected on the live site.

Once you added your widgets, please take a look at them and check how they fit in the design of your page. If you’ve added too many widget areas, things might look a bit messy. You’ll either need to remove some of them or you can move them from one widget area to another.

It’s really easy to do this in the Widgets screen, where you can drag widgets between widget areas.

How to Add a Widget to a Specific Page

Some themes include widget areas that are just for specific pages, like the homepage. But what if you want to add a widget to just one page on your site?

You can do this in the Gutenberg post and page editor.

Add a new block in the usual way and then select the Widgets block type.

Widget block type

Widget block type

You can then choose from many of the widgets you have enabled for your site, and add it to the content of your post or page. It’s really useful if you want to add a form widget, a call to action widget, or a list of your latest posts.

How to Edit Widgets

Once you’ve added widgets to your site, you can make changes to them. Individual widgets will have settings you can access via either the Widgets screen or the Customizer (it doesn’t matter which of these you used to add the widget.)

Some widgets don’t include any settings, but others have settings for the widget title for example or the number of posts displayed. Some are more complicated and require you to set up the widget in a separate settings page. Check the documentation from your plugin’s developer.

Options you have for editing widget plugins include:

  • Editing the settings for the plugin.
  • Moving the widget from one widget area to another.
  • Removing the widget. You have two options for this, which will look at shortly.

To edit the settings for the widget, find that widget in the widgets screen or the customizer, and simply edit any options provided.

Editing widget options

Editing widget options

To move the widget from one area to another, open the widgets screen and drag it from one widget area to another. In accessibility mode, navigate to the arrow to the right of the widget and select from the options.

Deleting Widgets

To delete a widget in the Widgets screen, find that widget and click the delete link to the bottom left of the widget settings box.

Deleting a widget in the widgets screen

Deleting a widget in the widgets screen

To delete a widget in the Customizer, find the widget in its widget area. Click on the arrow to the right of the widget’s name, and then click the Remove link to the bottom left of the widget settings.

Removing a widget in the Customizer

Removing a widget in the Customizer

You can also remove a widget from a widget area but still make it available to use later on through the Widgets screen.

Scroll down to the Inactive Widgets area towards the bottom of the screen. Drag widgets to this area to remove them from the widget area but keep them as drafts with their current settings. You can then always drag them back into a widget area if you want to in the future.

If you switch themes and your new theme has different widget areas, any widgets that don’t fit in the widget areas in the new theme will automatically be moved to the Inactive Widgets list by WordPress.

How to Add a New Widget Area to your Theme

If your theme doesn’t have widget areas where you want them, you can always add your own. You do this by adding two pieces of code.

Let’s add a widget area below the content.

Creating the Widget Area in Your Theme Functions File

The first step is to set up the widget area using the register_widget() function.

If you’re using a third-party WordPress theme (here’s a selection of the best ones), you need to create a child theme to do this. The reason for that is that if you update the theme in the future, all your changes will be lost.

If you’re working with your own theme, you can simply edit the theme.

Start by opening your theme’s functions.php file. At the bottom of the file, add this code.

function kinsta_register_widgets() {

register_sidebar( array(
  ‘name’ => __( ‘After Content Widget Area’, ‘kinsta’ ),
‘id’ => ‘after-content-widget-area’,
‘description’ => __( ‘Widget area after the content’, ‘kinsta’ ),
‘before_widget’ => ‘

‘,
‘after_widget’ => ‘

‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,

) );

}

add_action( ‘widgets_init’, ‘kinsta_register_widgets’ );

Now save your functions.php file. If you go to your Widgets screen or the Customizer, you’ll find the new widget area available for you to add widgets.

But if you do this, they won’t actually show up on the page. This is because you need to add some code to your theme template file.

Adding The Widget to a Theme Template File

The first thing is to find out which theme template file you need to use.

  • If you’re adding an extra sidebar, then you’ll need to add this code to your sidebar.php file.
  • If you’re adding your widget area before or after the content, you’ll need to add it to whichever theme template files are outputting the content.
  • If you’re adding a widget area to your header, you’ll need to add the code to your header.php file.
  • If your new widget area is just for one page in your site or for one type of content, you’ll need to use the WordPress template hierarchy to work out exactly which template file you need to either use/create and then edit it. So, for example, you’d like to add widget areas to your homepage, you’ll need to create a front-page.php file and add your widget area there.

Once you’ve identified which template file you need to edit and exactly where you need to have the code for the widget area, add the following code. In the case of a widget area after the content, we add it to the post.php and page.php file in our theme:

if ( is_active_sidebar( ‘after-content-widget-area’ ) ) { ?>

aparte class = "after-content widget-area full-width" role = "complementario">

Now save your template file(s).

Note that your code will be different from mine depending on what you’ve called your widget area and what elements you want to place it inside. I generally use an aside element because to my mind they are designed for sidebars and widget areas.

Ninja tip: If you move the ending of your container element for the content to the beginning of the sidebar and/or footer file, then you can add this there and you only need to add it once.

Now if you take a look at your site, you’ll find that any widgets you added to your widget areas will show up in the right place. If they’re not in quite the right place, go back and edit your template files, making sure the code is in the spot where you want it. You also might need to edit your CSS to receive looking the way you want it to.

Widget on the live site

Widget on the live site

How to Code Widgets Using the Widgets API

So now you know how to pick widgets for your site, how to add them to your site, and how to register new sidebars or widget areas. The next step is to learn how to create a WordPress widget.

Sometimes, you might find there isn’t a plugin available to create the exact widget that you want on your site. That means you’ll have to code it yourself.

In this example, I’m going to show you how to code a really simple call-to-action widget.

Overview of the Widgets API

The Widgets API in WordPress includes all of the code that you need to register, create, and code widgets. The Widgets API includes:

  • Classes to build new widgets.
  • Functions to register widgets and dimply them on your site.
  • Functions to unregister widgets, for example from a parent theme.

Here we’ll be using a class to build a widget. The first step is to create a plugin to hold the widget.

Create a Plugin for Your WordPress Widget

To create your own widget, you’ll need to code a plugin. Don’t add the code for a new widget to your theme, because widgets are about functionality and not about display. If you change your theme in the future, you want to still be able to access that widget.

Start by creating an empty plugin. Create a plugin folder in your wp-content/plugins directory and add an empty file to that. Give it an appropriate name. Open that file and add this code.

You’ll need to edit the author URI and plugin URI to your own. That will create a plugin for you that you can activate via the Plugins screen.

Widget plugin in plugins screen

Widget plugin in plugins screen

But if you activate it, nothing will happen. You’re going to have to add some code to your plugin.

Create a Class for the Widget

The code for the widget is going inside a class. So add that next.

class kinsta_Cta_Widget extends WP_Widget {

}

Create the Constructor Function

The first thing to go inside the class is the constructor function to create the widget. Add this inside the braces of the class.

//widget constructor function

function __construct() {

$widget_options = array (
‘classname’ => ‘kinsta_cta_widget’,
‘description’ => ‘Add a call to action box with your own text and link.’
);

parent::__construct( ‘kinsta_cta_widget’, ‘Call to Action’, $widget_options );

}

This starts to build the widget.

Create the Form to Output the Widget

Next, we need a form that will be used by the Widgets screen and the Customizer to create the widget. Add this, still inside the braces.

//function to output the widget form

function form( $instance ) {

$title = ! empty( $instance[‘title’] ) ? $instance[‘title’] : ”;
$link = ! empty( $instance[‘link’] ) ? $instance[‘link’] : ‘Your link here’;
$text = ! empty( $instance[‘text’] ) ? $instance[‘text’] : ‘Your text here’;
?>


Su enlace:
‘ . $text . ‘‘;
?>