Si vous aimez créer des plugins pour WordPress mais que vous ne connaissez pas le moyen de mettre en place un système de sélection de couleurs, ce tutoriel est fait pour vous ! Je vais vous apprendre comment installer color-picker pour votre thème ou votre plugin.

Color-Picker est, comme son nom l’indique, une option wordpress qui va vous permettre d’insérer un bouton de sélection de couleurs afin de pouvoir modifier la couleur des liens, des titres ou tout autre chose que vous aurez programmés en amont. 3, 2, 1, codez !

Installer Color-Picker dans function.php

Avant-Propos

Pour ce tutoriel, vous aurez besoin de modifier un minimum de 3 fichiers :

  • le fichier de fonction de votre template (function.php)
  • le fichier JS où vous mettez vos différents codes (script.js par ex.)
  • le fichier PHP qui vous sert de page d’options pour modifier les composants de votre template (panel.php par ex.)

Installer les scripts JQuery

Avant toute chose, pensez à avoir TOUS les scripts d’installer sur votre page de modification d’options. Dans notre cas, voici ce que vous devez avoir. Si vous ne l’avez pas, rien ne fonctionnera. Vous devez placer ces 3 lignes en haut de la page de préférence.

Installer la fonction Color-Picker

Le première étape consistera à créer la fonction d’appel pour installer Color-Picker. Pour faire cela, il faut copier-coller le code ci-dessous dans le fichier function.php de votre template.

Installer le script Color-Picker

La seconde étape sera d’installer le morceau de script qui va vous permettre de transformer vos input de type text en sélecteur de couleurs. Pour cela, il faut copier-coller les lignes ci-dessous dans le fichier script.js comme vu en début de tutoriel.

Installer le bouton Color-Picker

Dernière étape, la création du bouton et insertion du code. Ci-dessous, vous trouverez un modèle de bouton prêt à l’emploi. Vous n’aurez qu’à la modifier au niveau du name et de la value.

N’oubliez pas de mettre le même nom pour les options que ce soit dans le name ou la value, sinon vous aurez une erreur.

Explication du bouton

Dans le bouton, nous avons un options[color-font], qu’est-ce donc ? Il s’agit simplement de la formule pour enregistrer les données dans la base de données. Au niveau de la value, <?= get_option('color-font', '')?>, ce code va récupérer et afficher la valeur qui se trouvera dans la base de données. Ce qu’il y a entre les 2nd guillemets, sera la valeur par défaut, dans le présent, il n’y aura rien.

Résultat Final

Et voila ce que vous devez avoir au final si vous avez correctement suivi toutes les étapes ! :)

wp color picker

Conclusion

J’espère que ce tutoriel vous aura été utile. Personnellement, j’ai galérer pour trouver une solution qui fonctionnait car beaucoup de tutoriels étant en anglais mais datant également, ne m’ont pas été bien utile… Cette solution est testée et fonctionnelle sur l’un de mes templates.

Si vous avez des question, remarques et/ou suggestions, n’hésitez pas à laisser un commentaire à la suite de cet article ou à me contacter.