Comment créer un widget personnalisé WordPress ?

class LWS_widget extends WP_Widget {
//Insert functions here
}

Ces lignes de codes servent à étendre la classe basique WP_Widget et ouvrir la voie de la création d’une nouvelle classe.

L’étape suivante consiste à ajouter progressivement les fonctions servant à personnaliser votre widget.

Étape 2 : ajouter la fonction __construct()

La méthode __construct() est celle qui va servir à définir les différents paramètres structurels de votre widget. Cette dernière permet de déterminer le nom, l’ID ainsi que la description du widget que vous souhaitez créer. Le code à ajouter à votre fichier ressemble à celui-ci :

function __construct() {
parent::__construct(
// widget ID
'LWS_widget',
// widget name
__('LWS premier Widget', 'LWS_widget_domain'),
// widget description
array ( 'description' => __( 'Notre premier widget LWS', 'LWS_widget_domain' ), )
);
}

Dans votre cas, vous devez définir votre propre nom, l’ID de votre widget ainsi que sa description dans les lignes respectivement dédiées à chaque paramètre.

Étape 3 : ajouter la fonction widget()

La fonction widget () contrôle la structure des éléments de votre widget sur l’interface publique. Dans notre exemple, nous ajoutons une simple expression qui sera affichée sous le widget. Ainsi, le code pour implémenter cette fonction est :

public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
echo $args['before widget'];
//if title is present
If ( ! empty ( $title ) )
Echo $args['before_title'] . $title . $args['after_title'];
//output
echo __( 'Voici notre premier widget LWS', 'LWS_widget_domain' );
echo $args['after_widget'];

Notre widget personnalisé va afficher l’expression “Voici notre premier widget LWS” sur l’interface publique. Vous pouvez ajouter tout ce qui vous semble pertinent pour votre widget grâce à la fonction widget ().

Étape 4 : ajouter la méthode form()

public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) )
$title = $instance[ 'title' ];
else
$title = __( 'Entrer le titre de votre widget', 'LWS_widget_domain' );
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
</p>
<?php
}

Le formulaire créé inclut l’élément titre qui permettra de modifier directement et à n’importe quel moment le titre de votre widget personnalisé depuis votre espace d’administration.

Étape 5 : ajouter la fonction update()

Vous devez ensuite permettre la mise à jour instantanée de paramètres de votre widget lorsqu’ils sont modifiés en configurant la fonction update(). Ajoutez le code ci-dessous :

public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}

Étape 6 : enregistrer le widget

Une fois que vous avez terminé ces étapes, votre widget est créé, mais il n’est pas enregistré par WordPress. L’enregistrement est effectué en utilisant une fonction spécifique : add_action (). Gardez à l’esprit que cette dernière ne doit pas être incluse dans la structure de votre widget.

Pour enregistrer votre widget, ajoutez le code ci-dessous juste en haut de la première ligne de code qui commence la structure de votre widget personnalisé :

function LWS_register_widget() {
register_widget( 'LWS_widget' );
}
add_action( 'widgets_init', 'LWS_register_widget' );

Ajouter le widget personnalisé au fichier functions.php

Vous devez par la suite ajouter le code de votre widget au fichier functions.php de votre site afin qu’il soit accessible en ligne.

Pour accéder à ce fichier, vous pouvez utiliser un client FTP, notamment FileZilla ou encore le gestionnaire de fichiers (File Manager LWS Panel ou gestionnaire cPanel) intégré dans votre compte d’hébergement.

Suivez le chemin « public_html › wp-content › thème › thème actif » pour trouver le fichier functions.php de votre thème.

En suivant respectivement les précédentes étapes, le code final de votre widget devrait ressembler à celui-ci :

function LWS_register_widget() {
register_widget( 'LWS_widget' );
}
add_action( 'widgets_init', 'LWS_register_widget' );
class LWS_widget extends WP_Widget {
function __construct() {
parent::__construct(
// widget ID
'LWS_widget',
// widget name
__('LWS premier Widget', ' LWS_widget_domain'),
// widget description
array( 'description' => __( 'Premier Widget LWS', 'LWS_widget_domain' ), )
);
}
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
echo $args['before_widget'];
//if title is present
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
//output
echo __( 'Voici notre premier widget LWS', 'LWS_widget_domain' );
echo $args['after_widget'];
}
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) )
$title = $instance[ 'title' ];
else
$title = __( 'Entrer le titre de votre widget', 'LWS_widget_domain' );
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
</p>
<?php
}

Enregistrez vos modifications une fois que vous avez ajouté votre code à la fin du fichier functions.php.

Afficher votre widget personnalisé sur votre site WordPress

Votre widget est maintenant intégré à votre site. Cependant, comme pour tous les autres widgets, il ne peut être accessible sur le front-end de votre site que si vous l’intégrez dans la barre latérale ou dans le pied de page de votre site.

Ainsi, accédez à l’espace d’administration et rendez-vous dans la section « Apparence › widgets ». Ensuite, choisissez l’emplacement où vous souhaitez afficher votre widget et cliquez sur le bouton « + ».Une fois que vous avez cliqué sur le bouton indiqué, un tableau contextuel avec les widgets s’affiche sur votre écran. Recherchez le widget personnalisé que vous avez créé.Cliquez sur votre widget afin de l’ajouter à l’emplacement précédemment choisi. Ensuite, personnalisez le titre de votre widget dans la zone prévue.Vous devez terminer votre configuration en cliquant sur le bouton « Mettre à jour ».Et voilà, votre widget est désormais accessible en ligne.👏Ceci est un exemple d’un simple widget que vous avez créé. Vous pouvez ensuite utiliser d’autres fonctions fournies par WordPress afin de personnaliser davantage votre widget.

Conclusion

🥳 Félicitations ! Vous savez maintenant comment créer un widget personnalisé WordPress. Suivez minutieusement ces étapes et la création de widgets personnalisés dans WordPress ne sera plus un problème pour vous.

Vous avez des questions sur les différentes étapes de création d’un widget personnalisé WordPress ? Écrivez vos préoccupations dans la section Commentaires.