Crear Custom Post Types en WordPress puede ser relativamente sencillo, podemos utilizar un plugin o crearlos cada vez por cada uno que...
Crear un Widget para WordPress
Los Widgets de WordPress son un elemento imprescindible en cualquier proyecto, por defecto este CMS cuenta con varios WIdgets predefinidos que podemos utilizar desde el panel de administración solamente con arrastrar y soltar en una sidebar o un elemento creado para tal fin. WordPress nos permite crear nuestros propios widget, seguramente en ocasiones vamos a necesitar crear widgets específicos para nuestros proyectos, para ello utilizamos la clase WP_Widget, que cuenta con más de 20 funciones, podemos crear el widget en nuestro archivo functions.php o crear un plugin.
Vamos a crear un Widget sencillo con un título y un formulario de búsqueda, algo muy sencillo de entender y que nos puede ser útil para crear un formulario de búsqueda personalizado que busque post-types específicos en nuestra base de datos.
Se puede hacer de varías formas, yo habitualmente me creo una carpeta widgets para incluir todos los widgets en esa carpeta, en esta carpeta creamos un archivo php con el nombre del Widget, que por defecto tendrá el mismo nombre que la clase, lo llamamos desde functions y lo registramos en el sistema.
require get_template_directory() . '/widgets/DideswebSearchForm.php';
register_widget('Didesweb_Search_Form');
En el archivo DideswebSearchForm.php lo primero que tenemos que hacer es crear la clase que extenderá del objeto WP_Widget
class Dideswebdidesweb_Search_Form extends WP_Widget {
}
Dentro crearemos cuatro funciones, las básicas para crear cualquier widget, utilizaremos los métodos form(), update() y widget() de la clase WP_Widget.
La primera función será el nombre de nuestra función y será la encargada de crear el widget.
function didesweb_search_form() {
$options = array(
'classname' => 'didesweb-search-form',
'description' => 'Guv Search form');
$this->WP_Widget('didesweb_search_form', 'Didesweb Search form', $options
);
}
A continuación utilizaremos form() y update() para crear el formulario con el que daremos un título al widget
function form($instance) {
$opcion = strip_tags( $instance['opcion']); ?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:') ?></label>
<input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php if (isset ( $instance['title'])) {echo esc_attr( $instance['title'] );} ?>" />
</p>
<?php
}
function update($new_instance, $old_instance) {
$instance = array();
$instance = $old_instance;
$instance['title'] = strip_tags(stripslashes($new_instance['title']));
return $instance;
}
Por último con widget() creamos el código que vamos a ver en el front
function widget($args, $instance) { ?>
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<input type="search" value="" name="s" aria-required="true" aria-invalid="false" required>
<input type="hidden" name="post_type" value="MY_CUSTOM_POST_TYPE" />
<label>Buscar</label>
<span class="focus-border"></span>
<input type="submit" class="search-submit" value="Buscar">
</form>
<?php
}
Y ya está, ya tenemos nuestro formulario personalizado con el que podemos buscar en nuestros post-types, solo tienes que sustituir “MY_CUSTOM_POST_TYPE” por lo que quieras buscar, por último os dejo el código completo para copiar y pegar, que siempre viene bien ¿verdad?
functions.php
require get_template_directory() . '/widgets/DideswebSearchForm.php';
register_widget('Didesweb_Search_Form');
DideswebSearchForm.php
class Didesweb_Search_Form extends WP_Widget {
function didesweb_search_form() {
$options = array(
'classname' => 'didesweb-search-form',
'description' => 'Didesweb Search form');
$this->WP_Widget('didesweb_search_form', 'Didesweb Search form', $options
);
}
function form($instance) {
$opcion = strip_tags( $instance['opcion']); ?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:') ?></label>
<input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php if (isset ( $instance['title'])) {echo esc_attr( $instance['title'] );} ?>" />
</p>
<?php
}
function update($new_instance, $old_instance) {
$instance = array();
$instance = $old_instance;
$instance['title'] = strip_tags(stripslashes($new_instance['title']));
return $instance;
}
function widget($args, $instance) { ?>
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<input type="search" value="" name="s" aria-required="true" aria-invalid="false" required>
<input type="hidden" name="post_type" value="MY_CUSTOM_POST_TYPE" />
<label>Buscar</label>
<span class="focus-border"></span>
<input type="submit" class="search-submit" value="Buscar">
</form>
<?php
}
}
Quizás te interese ...
En ocasiones los títulos de nuestros proyectos son demasiado extensos como para mostrarlos completos en las migas de pan de nuestro sitio web,...
WordPress límita por seguridad ciertas extensiones de archivo, en algunos casos necesitamos subir archivo de tipo .svg o .webp que serán...
Yo no sé vosotros pero yo de momento me niego a utilizar el nuevo editor de WordPress Guttenberg, de momento sigo utilizando el editor...
Valoraciones
Sé el primero en valorar