{"id":5354,"date":"2017-08-02T22:06:38","date_gmt":"2017-08-02T20:06:38","guid":{"rendered":"https:\/\/blog.hostinger.io\/es-tutoriales\/?p=5354"},"modified":"2025-02-12T09:07:38","modified_gmt":"2025-02-12T08:07:38","slug":"crear-widgets-wordpress-personalizados","status":"publish","type":"post","link":"\/es\/tutoriales\/crear-widgets-wordpress-personalizados","title":{"rendered":"\u00bfC\u00f3mo crear un widget personalizado en WordPress?"},"content":{"rendered":"<p>&iquest;Sab&iacute;as que puedes crear tu propio widget personalizado para <a href=\"\/es\/tutoriales\/que-es-wordpress\">WordPress<\/a>? Aunque hay montones de widgets adicionales que vienen junto con temas y plugins, WordPress ofrece a sus usuarios la opci&oacute;n de codificar widgets personalizados manualmente.<\/p><p>No es un proceso complicado ya que s&oacute;lo necesitas conocimientos b&aacute;sicos de WordPress y PHP. As&iacute; que, sin m&aacute;s pre&aacute;mbulos, &iexcl;Comencemos!<\/p><h2 class=\"wp-block-heading\" id=\"h-que-son-los-widgets-de-wordpress\">&iquest;Qu&eacute; son los widgets de WordPress?<\/h2><p>Los widgets de WordPress te facilitan la adici&oacute;n de funciones adicionales a tu sitio web, mediante una sencilla interfaz de arrastrar y soltar. Por defecto, WordPress incluye varios widgets. Estos proporcionan funciones b&aacute;sicas y son compatibles con todos los temas de WordPress.<\/p><p>Sin embargo, a veces, esos widgets est&aacute;ndar no pueden realizar las tareas que necesitas. Tu mejor opci&oacute;n es buscar plugins que te ofrezcan la funci&oacute;n que deseas. Por desgracia, puede que incluso los plugins de terceros no cumplan tus requisitos.<\/p><p>Por suerte, puedes crear un widget personalizado para WordPress. Solo tienes que tener en cuenta que debe crearse desde cero para que puedas adaptarlo personalmente a tus necesidades.<\/p><h2 class=\"wp-block-heading\" id=\"h-por-donde-empezar-a-crear-un-widget-personalizado\">&iquest;Por d&oacute;nde empezar a crear un widget personalizado?<\/h2><p>En primer lugar, tienes que elegir si quieres crear el widget utilizando un plugin o editando el archivo <strong>functions.php<\/strong>. Un plugin permitir&aacute; que el widget personalizado funcione en cualquier sitio a&ntilde;adiendo c&oacute;digo a <strong>functions.php<\/strong>. De esta forma, hace que el widget funcione junto con un tema espec&iacute;fico.<\/p><p>En segundo lugar, tienes la opci&oacute;n de a&ntilde;adir el widget en un sitio activo o en un entorno local. Sin embargo, te recomendamos encarecidamente que primero implementes el widget en un entorno local para probarlo. Puedes hacerlo f&aacute;cilmente siguiendo nuestra gu&iacute;a sobre c&oacute;mo ejecutar WordPress en Docker.<\/p><p>Una vez que la herramienta funcione correctamente, es hora de trasladarla a tu sitio web.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-funcionan-los-widgets-personalizados-de-wordpress\">&iquest;C&oacute;mo funcionan los widgets personalizados de WordPress?<\/h2><p>En WordPress, tienes que crear un widget personalizado utilizando la clase est&aacute;ndar WP Widget de la <a href=\"https:\/\/codex.wordpress.org\/Widgets_API\" target=\"_blank\" rel=\"noreferrer noopener\">API de Widgets<\/a>. Hay alrededor de 20 funciones con las que puedes experimentar. De estas, <strong>cuatro <\/strong>son el requisito m&iacute;nimo para que cualquier widget funcione:<\/p><ul class=\"wp-block-list\">\n<li><strong>__construct():<\/strong> funci&oacute;n constructora donde puedes definir los par&aacute;metros de tu widget.<\/li>\n\n\n\n<li><strong>widget(): <\/strong>contiene la salida del widget.<\/li>\n\n\n\n<li><strong>form(): <\/strong>determina la configuraci&oacute;n del widget en el panel de control de WordPress.<\/li>\n\n\n\n<li><strong>update():<\/strong> actualiza la configuraci&oacute;n del widget.<\/li>\n<\/ul><p>Por supuesto, tienes muchas otras opciones que proporcionan funciones adicionales. Para m&aacute;s informaci&oacute;n sobre la clase <strong>WP_Widget<\/strong>, echa un vistazo a la <a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_widget\/\" target=\"_blank\" rel=\"noopener\">p&aacute;gina para de<\/a><a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_widget\/\" target=\"_blank\" rel=\"noreferrer noopener\">s<\/a><a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_widget\/\" target=\"_blank\" rel=\"noopener\">arrolladores<\/a> de WordPress.<\/p><h2 class=\"wp-block-heading\" id=\"h-crear-un-widget-personalizado-de-wordpress\">Crear un widget personalizado de WordPress<\/h2><p>En este tutorial, crearemos un sencillo widget personalizado <strong>&laquo;&iexcl;Saludos de Hostinger.es!&raquo;<\/strong>,<strong> <\/strong>para que puedas aprender los conceptos b&aacute;sicos de la creaci&oacute;n de widgets en WordPress. Una vez hecho esto, puedes pasar a crear widgets m&aacute;s complejos por tu cuenta.<\/p><p>Una cosa m&aacute;s a tener en cuenta es que estamos escribiendo este c&oacute;digo en el archivo <strong>functions.php <\/strong>para el <a href=\"https:\/\/www.hostinger.com\/es\/tutoriales\/cambiar-tema-wordpress\">tema<\/a> cargado actualmente. Dicho esto, puedes utilizar el mismo c&oacute;digo para cualquier plugin personalizado.<\/p><p>\n\n\n\n<div><p class=\"important\"><strong>&iexcl;Importante! <\/strong>Te recomendamos enf&aacute;ticamente crear una <a href=\"\/es\/tutoriales\/una-copia-seguridad-sitio-wordpress\">copia de seguridad del sitio web<\/a> antes de continuar. Adem&aacute;s, deber&iacute;as utilizar un <a href=\"\/es\/tutoriales\/utilizar-child-theme\">tema hijo de WordPress<\/a> para evitar que cualquier problema afecte a tu tema principal.<\/p><\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-1-extender-la-clase-wp-widget\">1. Extender la clase WP_Widget<\/h3><p>Lo primero que tienes que hacer es abrir cualquier editor de texto en tu ordenador y crear una nueva clase que extienda la clase base <strong>WP_Widget<\/strong>, como esta:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">class hstngr_widget extends WP_Widget {\n\/\/Insert functions here\n}<\/pre><h3 class=\"wp-block-heading\" id=\"h-2-anadir-construct\">2. A&ntilde;adir __construct()<\/h3><p>A continuaci&oacute;n, empezamos a implementar las cuatro funciones est&aacute;ndar una a una. La primera es el m&eacute;todo constructor, que determinar&aacute; el ID, el nombre y la descripci&oacute;n del widget personalizado.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function __construct() {\nparent::__construct(\n\/\/ widget ID\n'hstngr_widget',\n\/\/ widget name\n__('Ejemplo Widget Hostinger', 'hstngr_widget_domain'),\n\/\/ widget description\narray ( 'description' =&gt; __( 'Hostinger Widget Tutorial', 'hstngr_widget_domain' ), )\n);\n}<\/pre><h3 class=\"wp-block-heading\" id=\"h-3-anadir-widget\">3. A&ntilde;adir widget()<\/h3><p>Ahora, centr&eacute;monos en la funci&oacute;n <strong>widget()<\/strong>. Esta define el aspecto de tu widget personalizado de WordPress en el front-end.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public function widget( $args, $instance ) {\n$title = apply_filters( 'widget_title', $instance['title'] );\necho $args['before widget'];\n\/\/if title is present\nIf ( ! empty ( $title ) )\nEcho $args['before_title'] . $title . $args['after_title'];\n\/\/output\necho __( '&iexcl;Saludos de Hostinger.es!', 'hstngr_widget_domain' );\necho $args['after_widget'];\n}<\/pre><p>Con esto, hemos configurado la salida de nuestro widget para que muestre la frase <strong>&laquo;&iexcl;Saludos de Hostinger.es!&raquo; <\/strong>y el t&iacute;tulo del widget especificado por el usuario.<\/p><h3 class=\"wp-block-heading\" id=\"h-4-anadir-form\">4. A&ntilde;adir form()<\/h3><p>Ahora, tenemos que programar el back-end del widget usando el m&eacute;todo <strong>form()<\/strong>. Puedes ver el resultado cuando quieras a&ntilde;adir el widget desde el Dashboard de WordPress.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public function form( $instance ) {\nif ( isset( $instance[ 'title' ] ) )\n$title = $instance[ 'title' ];\nelse\n$title = __( 'Default Title', 'hstngr_widget_domain' );\n?&gt;\n&lt;p&gt;\n&lt;label for=\"&lt;?php echo $this-&gt;get_field_id( 'title' ); ?&gt;\"&gt;&lt;?php _e( 'Title:' ); ?&gt;&lt;\/label&gt;\n&lt;input class=\"widefat\" id=\"&lt;?php echo $this-&gt;get_field_id( 'title' ); ?&gt;\" name=\"&lt;?php echo $this-&gt;get_field_name( 'title' ); ?&gt;\" type=\"text\" value=\"&lt;?php echo esc_attr( $title ); ?&gt;\" \/&gt;\n&lt;\/p&gt;\n&lt;?php\n}<\/pre><p>Aqu&iacute; puedes ver c&oacute;mo se ha configurado un widget personalizado. Si un usuario aplica un t&iacute;tulo, entonces ese t&iacute;tulo se insertar&aacute; en el formulario HTML que hemos creado. En este ejemplo, estableceremos el nombre del t&iacute;tulo como <strong>T&iacute;tulo predeterminado<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"401\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-5.png\/public\" alt=\"Establecer nombre del t&iacute;tulo de un widget personalizado WordPress\" class=\"wp-image-26503\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-5.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-5.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-5.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-5.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-5.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-5-anadir-update\">5. A&ntilde;adir update()<\/h3><p>Una vez hecho esto, tenemos que implementar <strong>update()<\/strong>, que refrescar&aacute; el widget cada vez que cambies la configuraci&oacute;n.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public function update( $new_instance, $old_instance ) {\n$instance = array();\n$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';\nreturn $instance;\n}<\/pre><p>Estamos tomando el t&iacute;tulo actual de la instancia reci&eacute;n creada, eliminando cualquier etiqueta HTML\/PHP. A continuaci&oacute;n, pasamos el t&iacute;tulo a la instancia y lo devolvemos.<\/p><h3 class=\"wp-block-heading\" id=\"h-6-registro-del-widget-personalizado-de-wordpress\">6. Registro del widget personalizado de WordPress<\/h3><p>Finalmente, tenemos que registrar el nuevo widget personalizado usando la funci&oacute;n <strong>add_action()<\/strong>. Ten en cuenta que debes colocar el siguiente c&oacute;digo en la parte superior, antes de extender la clase <strong>WP_Widget<\/strong>.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function hstngr_register_widget() {\nregister_widget( 'hstngr_widget' );\n}\nadd_action( 'widgets_init', 'hstngr_register_widget' );<\/pre><h2 class=\"wp-block-heading\" id=\"h-anadir-el-codigo-al-archivo-functions-php\">A&ntilde;adir el c&oacute;digo al archivo functions.php<\/h2><p>As&iacute;, hemos definido una nueva funci&oacute;n llamada <strong>hstngr_register_widget()<\/strong>. Esta registra nuestro widget utilizando el ID del widget, que se especifica en la funci&oacute;n <strong>__construct()<\/strong>.<\/p><p>A continuaci&oacute;n, hemos vinculado esta funci&oacute;n utilizando <strong>widgets_init<\/strong>, que carga el widget en WordPress a trav&eacute;s del m&eacute;todo <strong>add_action() <\/strong>incorporado. El c&oacute;digo final del widget personalizado de WordPress deber&iacute;a tener este aspecto:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function hstngr_register_widget() {\nregister_widget( 'hstngr_widget' );\n}\nadd_action( 'widgets_init', 'hstngr_register_widget' );\nclass hstngr_widget extends WP_Widget {\nfunction __construct() {\nparent::__construct(\n\/\/ widget ID\n'hstngr_widget',\n\/\/ widget name\n__('Ejemplo Widget Hostinger', ' hstngr_widget_domain'),\n\/\/ widget description\narray( 'description' =&gt; __( 'Tutorial Widget Hostinger', 'hstngr_widget_domain' ), )\n);\n}\npublic function widget( $args, $instance ) {\n$title = apply_filters( 'widget_title', $instance['title'] );\necho $args['before_widget'];\n\/\/if title is present\nif ( ! empty( $title ) )\necho $args['before_title'] . $title . $args['after_title'];\n\/\/output\necho __( '&iexcl;Saludos de Hostinger.es!', 'hstngr_widget_domain' );\necho $args['after_widget'];\n}\npublic function form( $instance ) {\nif ( isset( $instance[ 'title' ] ) )\n$title = $instance[ 'title' ];\nelse\n$title = __( 'Default Title', 'hstngr_widget_domain' );\n?&gt;\n&lt;p&gt;\n&lt;label for=\"&lt;?php echo $this-&gt;get_field_id( 'title' ); ?&gt;\"&gt;&lt;?php _e( 'Title:' ); ?&gt;&lt;\/label&gt;\n&lt;input class=\"widefat\" id=\"&lt;?php echo $this-&gt;get_field_id( 'title' ); ?&gt;\" name=\"&lt;?php echo $this-&gt;get_field_name( 'title' ); ?&gt;\" type=\"text\" value=\"&lt;?php echo esc_attr( $title ); ?&gt;\" \/&gt;\n&lt;\/p&gt;\n&lt;?php\n}\npublic function update( $new_instance, $old_instance ) {\n$instance = array();\n$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';\nreturn $instance;\n}\n}<\/pre><p>Por &uacute;ltimo, es hora de insertar el c&oacute;digo en tu archivo <strong>functions.php<\/strong>.<\/p><ol class=\"wp-block-list\">\n<li>Inicia sesi&oacute;n en el &aacute;rea de administraci&oacute;n de WordPress. A continuaci&oacute;n, ve a <strong>Apariencia <\/strong>-&gt; <strong>Editor de temas <\/strong>-&gt; <strong>Funciones del tema<\/strong>.<\/li>\n\n\n\n<li>Pega el c&oacute;digo de tu editor de texto en la parte inferior del archivo <strong>functions.php<\/strong>. Haz clic en <strong>Actualizar archivo <\/strong>para guardar los cambios.<\/li>\n<\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/01\/Secci%C3%B3n-Functions.php-en-apariencia-de-WordPress.png\/public\" alt=\"Secci&oacute;n Functions.php en apariencia de WordPress\" class=\"wp-image-37465\"><\/figure><h2 class=\"wp-block-heading\" id=\"h-uso-del-widget-personalizado-de-wordpress\">Uso del widget personalizado de WordPress<\/h2><p>Ya puedes utilizar tu widget reci&eacute;n instalado.<\/p><ol class=\"wp-block-list\">\n<li>Ve al men&uacute; <strong>Apariencia <\/strong>y selecciona <strong>Widgets<\/strong>. Deber&iacute;as ver un widget llamado <strong>Ejemplo Widget Hostinger <\/strong>en la lista de <strong>Widgets disponibles<\/strong>.<\/li>\n\n\n\n<li>A continuaci&oacute;n, arrastra el widget y su&eacute;ltalo en la secci&oacute;n de la parte derecha.&nbsp;<\/li>\n<\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/01\/Secci%C3%B3n-de-Widgets-de-WordPress.png\/public\" alt=\"Secci&oacute;n de Widgets de WordPress\" class=\"wp-image-37467\"><\/figure><ol class=\"wp-block-list\" start=\"3\">\n<li>Guarda los cambios y visita tu sitio web. En la parte inferior de la p&aacute;gina principal encontrar&aacute;s <strong>&laquo;&iexcl;Saludos de Hostinger.es!&raquo;<\/strong>.<\/li>\n<\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"290\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/01\/Ejemplo-de-widget-personalizado-en-WordPress.png\/public\" alt=\"Ejemplo de widget personalizado en WordPress\" class=\"wp-image-37468\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/01\/Ejemplo-de-widget-personalizado-en-WordPress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/01\/Ejemplo-de-widget-personalizado-en-WordPress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/01\/Ejemplo-de-widget-personalizado-en-WordPress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/01\/Ejemplo-de-widget-personalizado-en-WordPress.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Enhorabuena, has creado con &eacute;xito tu primer widget personalizado para WordPress.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/es\/hosting-wordpress\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/06\/ES-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-40615\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/06\/ES-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/06\/ES-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/06\/ES-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/06\/ES-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p>El widget personalizado de WordPress te permite a&ntilde;adir una funci&oacute;n espec&iacute;fica a tu sitio web en funci&oacute;n de tus necesidades. Es una gran soluci&oacute;n cuando no puedes encontrar nada en particular que cumpla tus necesidades espec&iacute;ficas o cuando te est&aacute;s <a href=\"\/es\/tutoriales\/convertirte-desarrollador-wordpress\">convirtiendo en un desarrollador de WordPress<\/a> y deseas desarrollar tu sitio web.<\/p><p>Para resumir, veamos una vez m&aacute;s los pasos para crear tu propio widget personalizado para WordPress:<\/p><ol class=\"wp-block-list\">\n<li>Crea una nueva clase que extienda <strong>WP_Widget<\/strong>.<\/li>\n\n\n\n<li>Comienza con <strong>__construct() <\/strong>para determinar los par&aacute;metros del widget.<\/li>\n\n\n\n<li>Utiliza <strong>widget() <\/strong>para definir la apariencia del widget en el front-end.<\/li>\n\n\n\n<li>A&ntilde;ade <strong>form() <\/strong>para configurar el aspecto del widget.<\/li>\n\n\n\n<li>No olvides a&ntilde;adir <strong>update() <\/strong>para actualizar el widget cada vez que lo modifiques.<\/li>\n\n\n\n<li>Registra el nuevo widget personalizado de WordPress mediante la funci&oacute;n <strong>add_action()<\/strong>.<\/li>\n\n\n\n<li>Copia y pega todo el c&oacute;digo en la parte inferior del archivo <strong>functions.php <\/strong>y haz clic en <strong>Actualizar archivo<\/strong>.<\/li>\n\n\n\n<li>Ve al men&uacute; <strong>Widgets <\/strong>y mueve el widget al lugar deseado.<\/li>\n<\/ol><p>&iexcl;Buena suerte!<\/p><p>\n\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Aprende qu&eacute; m&aacute;s puedes hacer con WordPress<\/h4>\n                    <p><a href=\"\/es\/tutoriales\/jerarquia-de-plantillas-de-wordpress\">Jerarqu&iacute;a de plantillas de WordPress<\/a><\/p><p><a href=\"\/es\/tutoriales\/custom-post-types-wordpress\/\">C&oacute;mo crear tipos de entrada personalizados en WordPress<\/a><\/p><p><a href=\"\/es\/tutoriales\/como-configurar-wordpress-cron-job\">C&oacute;mo configurar y gestionar Cron Jobs en WordPress<\/a><\/p>\n                <\/div>\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&iquest;Sab&iacute;as que puedes crear tu propio widget personalizado para WordPress? Aunque hay montones de widgets adicionales que vienen junto con temas y plugins, WordPress ofrece a sus usuarios la opci&oacute;n de codificar widgets personalizados manualmente. No es un proceso complicado ya que s&oacute;lo necesitas conocimientos b&aacute;sicos de WordPress y PHP. As&iacute; que, sin m&aacute;s pre&aacute;mbulos, [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/es\/tutoriales\/crear-widgets-wordpress-personalizados\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":138,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"C\u00f3mo crear un widget personalizado en WordPress","rank_math_description":"Hay ocasiones en las que necesitamos crear widgets personalizados para WordPress. En nuestro tutorial te daremos paso a paso como hacerlo.","rank_math_focus_keyword":"crear widget wordpress","footnotes":""},"categories":[4747,14348],"tags":[5974,6360],"class_list":["post-5354","post","type-post","status-publish","format-standard","hentry","category-wordpress","category-experto","tag-personalizacion-wordpress","tag-widget-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-create-custom-widget-in-wordpress","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-criar-widget-wordpress","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/creer-un-widget-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/crear-widgets-wordpress-personalizados","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-create-custom-widget-in-wordpress","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-create-custom-widget-in-wordpress","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-create-custom-widget-in-wordpress","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/crear-widgets-wordpress-personalizados","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/crear-widgets-wordpress-personalizados","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/crear-widgets-wordpress-personalizados","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-criar-widget-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-create-custom-widget-in-wordpress","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-create-custom-widget-in-wordpress","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-create-custom-widget-in-wordpress","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-create-custom-widget-in-wordpress","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/5354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/users\/138"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/comments?post=5354"}],"version-history":[{"count":14,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/5354\/revisions"}],"predecessor-version":[{"id":37469,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/5354\/revisions\/37469"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/media?parent=5354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/categories?post=5354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/tags?post=5354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}