Une page d’options pour votre thème WordPress

Si vous souhaitez offrir plus de choix de personnalisation pour vos thèmes WordPress, voici un article qui devrait vous intéresser !

Nous allons voir ensemble comment mettre en place une page d'options disponible dans l'administration, pour laisser vos utilisateurs modifier votre thème en toute sécurité, sans requérir de connaissances particulières.

Comme à mon habitude, je parlerai ici de la version 3 (ou supérieure) de WordPress.

Le projet

Pour se mettre en situation, nous allons imaginer que nous voulons proposer aux utilisateurs de modifier la couleur de fond et la couleur du texte de leur blog.

Traduction : nous allons créer un formulaire avec deux champs, un pour chaque couleur.

Préparation

Tout le code dont nous allons nous occuper sera à placer dans le fichier functions.php de votre thème.

Pour commencer, nous devons dire à WordPress quelles options nous allons utiliser (dans notre cas, nos deux couleurs).

Pour ça, nous allons utiliser la fonction register_setting( ), qui accepte trois paramètres : un identifiant pour grouper vos options, le nom de l'option à créer, et éventuellement une fonction qui vérifiera la validité des données lors d'une modification. Ce dernier paramètre ne sera pas présenté ici, mais sachez que si vous devez distribuer votre thème, il pourra être très utile ;).

// à l'initialisation de l'administration
// on informe WordPress des options de notre thème

add_action( 'admin_init', 'myThemeRegisterSettings' );

function myThemeRegisterSettings( )
{
	register_setting( 'my_theme', 'background_color' ); // couleur de fond
	register_setting( 'my_theme', 'text_color' );       // couleur du texte
}

Maintenant, nous allons créer une page dans l'administration de WordPress grâce à la fonction add_menu_page( ).

// la fonction myThemeAdminMenu( ) sera exécutée
// quand WordPress mettra en place le menu d'admin

add_action( 'admin_menu', 'myThemeAdminMenu' );

function myThemeAdminMenu( )
{
	add_menu_page(
		'Options de mon thème', // le titre de la page
		'Mon thème',            // le nom de la page dans le menu d'admin
		'administrator',        // le rôle d'utilisateur requis pour voir cette page
		'my-theme-page',        // un identifiant unique de la page
		'myThemeSettingsPage'   // le nom d'une fonction qui affichera la page
	);
}

function myThemeSettingsPage( )
{
	// affichage de la page
}

Petite précision, la fonction add_menu_page( ) accepte 2 paramètres supplémentaires qui permettent de définir une icône, et une position particulière dans le menu. Je ne les utilise pas ici pour ne présenter que l'essentiel, mais rien ne vous empêche d'essayer de votre côté ;).

WordPress sait maintenant quelles options notre thème va utiliser, et qu'il doit ajouter une page au menu d'administration.

Si vous ajouter le code à votre fichier functions.php et que vous vous rendez dans l'administration de votre blog, vous allez voir votre nouvelle page apparaître à la fin du menu :).

La page d'administration

Nous allons compléter la fonction myThemeSettingsPage( ) pour afficher notre page. Pour qu'elle ressemble à quelque chose, et qu'elle soit cohérente avec le reste de l'administration, nous allons utiliser le squelette Html de WordPress.

function myThemeSettingsPage( )
{
?>
	<div class="wrap">
		<h2>Options de mon thème</h2>

		<form method="post" action="options.php">
			<?php
				// cette fonction ajoute plusieurs champs cachés au formulaire
				// pour vous faciliter le travail.
				// elle prend en paramètre le nom du groupe d'options
				// que nous avons défini plus haut.

				settings_fields( 'my_theme' );
			?>

			<table class="form-table">
				<tr valign="top">
					<th scope="row"><!-- label --></th>
					<td><!-- input --></td>
				</tr>
			</table>

			<p class="submit">
				<input type="submit" class="button-primary" value="Mettre à jour" />
			</p>
		</form>
	</div>
<?php
}

Maintenant que nous avons la structure principale, il ne nous reste qu'à rajouter les 2 champs qui vont servir à modifier nos options. Nous allons les ajouter dans l'élément table.

<table class="form-table">
	<tr valign="top">
		<th scope="row"><label for="background_color">Couleur de fond</label></th>
		<td><input type="text" id="background_color" name="background_color" class="small-text" value="<?php echo get_option( 'background_color' ); ?>" /></td>
	</tr>

	<tr valign="top">
		<th scope="row"><label for="text_color">Couleur du texte</label></th>
		<td><input type="text" id="text_color" name="text_color" class="small-text" value="<?php echo get_option( 'text_color' ); ?>" /></td>
	</tr>
</table>

Ici, chaque input a pour id le nom de l'option qu'il modifie. On utilise la fonction get_option( ) pour récupérer la valeur de chaque option, afin qu'elles soient affichées par défaut dans les input.

Voici ce que vous devriez obtenir :

Page d'options pour notre thème WordPress

Vous pouvez essayer d'entrer quelques valeurs pour voir si elles sont bien enregistrées, mais il nous reste une petite étape pour que nos options servent enfin à quelque chose ;).

Application

Nous allons faire en sorte de modifier le Css du thème pour prendre en compte nos options. Pour cela, on va passer par wp_head( ), fonction que vous devriez avoir incluse dans votre fichier header.php.

// la fonction myThemeCss( ) sera exécutée à l'appel de wp_head( )

add_action( 'wp_head', 'myThemeCss' );

function myThemeCss( )
{
	// on crée un bloc style qui appliquera nos couleurs à l'élément body
?>
	<style type="text/css">
		body {
			background-color: <?php echo get_option( 'background_color', '#fff' ); ?>;
			color: <?php echo get_option( 'text_color', '#222' ); ?>;
		}
	</style>
<?php
}

Vous remarquerez que l'on appelle get_option( ) avec deux paramètres. En fait, le second est utilisé comme défaut. Si jamais l'option n'a pas été définie, la valeur par défaut sera retournée et le code toujours utilisable et valide.

Et voilà ! Vous pouvez modifier vos options dans la page d'administration et voir le résultat sur votre thème !

Bien sûr, vous pouvez utiliser toutes les possibilités de Html pour proposer des options plus complexes : listes, radios, checkboxes, (...), et ainsi proposer un thème configurable de A à Z, pour le plus grand plaisir de vos utilisateurs :).

Commentaires

  • Hello,

    Plutôt bien conçu. Merci pour ce tuto.
    Attention cependant, pour permettre la création de thèmes enfants il convient de toujours faire un contrôle de l’existence d’une fonction :

    if ( !function_exists ( 'nom_de_la_fonction' ) ) {
    function nom_de_la_fonction() {
    // code
    }
    }

    Sans ce contrôle le thème enfant ne peux pas « écraser » certains fonctions du thème dont il ne souhaite pas bénéficier pour son thème enfant.

    Bonne continuation 🙂

    • Ah ! Tu viens de répondre à une question que je me posais, par rapport a l’existence des fonctions…
      Merci bien, je vais rajouter ça 😉

    • Il faut le faire pour toutes les fonctions ou seulement myThemeCss ?
      Merci !

  • Bonjour et merci pour ce tuto, petite question, à quoi correspond le fichier « options.php » qui doit traiter le formulaire ? Il n’est pas par défaut dans le thème et vous n’en parlez pas avant. Comment doit-on paramétrer cette variable ?
    Merci d’avance

    • C’est un fichier inclus dans WordPress. Il n’y a rien à faire dedans !

  • merci pour ces explications qui fonctionnent parfaitement.
    sauf …

    quand j’active un plug-in (un formulaire de contact) qui affiche une entrée de menu sur la gauche.
    dans ce cas, le bouton pour administrer mes options ne s’affiche plus
    un problème de tab-index ?
    je sèche …

    merci

  • Bonjour,
    juste en passant, je recommande de remplacer la partie :


    Par :

    C’est à mon avis plus propre, le résultat est au final identique et surtout, le code étant proposé par WordPress, pourquoi s’en priver ?
    Sinon très bon tuto, c’est l’idéal pour ceux qui débute !

  • Merci bien ça marche impeccable, j’ai juste ajouter la position dans la fonction add_menu_page pour afficher le menu exactement où je veux…

  • Très bon tuto ! C’est simple et ça marche parfaitement.
    Merci.

  • Bonjour Felix,
    merci pour votre tuto, j’en ai lu beaucoup et me suis arrêtée sur le votre qui me semblait le plus adapté à mes connaissances!!
    Tout marche très bien , j’ai ajouté pour mes besoins des radios boutons un tas d’input type text etc……
    Mais je voudrais insérer un bouton pour télécharger une photo, notamment le logo ou le favicon et là je bloque.
    j’ai beaucoup chercher sur le net mais n’arrive pas à intégrer ce que je trouve dans votre code.
    Pourriez vous m’aider, me guider un peu.

    Merci par avance.

    • Bonjour, et merci pour votre commentaire.

      Je n’ai jamais fait ce genre de choses, et pour tout vous dire, je ne développe plus pour WordPress depuis quelques temps.

      J’ai quand même trouvé 2 ressources qui pourraient vous aider:
      la première explique comment utiliser le gestionnaire de médias de WordPress dans une page d’options
      la deuxième est une classe PHP qui permet de concevoir des pages d’options très simplement, et elle donne la possibilité de créer des champs complexes comme des uploaders de fichiers, des sélécteurs de dates ou des champs de texte riche.

      Je n’ai pas testé ces solutions mais n’hésitez pas à revenir vers moi si vous avez des problèmes pour leur mise en place.

      Bon courage 🙂

      • merci beaucoup félix,
        en fait, ne sachant quand vous pourriez me répondre, j’ai continué à chercher j’avais trouver le premier des deux liens et ai essayé cet après midi avec succès.
        Tout marche à merveille!!!!
        je vais quand même regarder le deuxième, cela ne fera pas de mal à ma culture!!!

        Par contre j’avais un autre souci que je n’ai malheureusement pas encore réglé!
        je vous le soumets, si vous avez une idée…. et le temps de me répondre.
        je voudrais mettre dans ma page option le lien google pour afficher une carte de localisation selon une adresse précise.
        pour cela j’utilise le lien proposé par google.
        Google propose deux liens:
        Le premier est un http que j’ai mis dans un iframe mais les résultats ne me satisfont pas
        j’ai donc utilisé une balise textarea pour insérer le deuxième lien proposé par google qui est un iframe (code html).
        Cel`fonctionne en première instance mais quand je reload une deuxième fois ma page option (pour enregidtrer une nouvelle modification) mon html à l’intérieur de mon textarea s’efface en partie….. et je n’obtiens donc plus l’affichage de ma carte!

        j’espère que mes explications ne sont pas trop nébuleuses et vous seront compréhensives!!!!!

        merci pour votre soutiens et bonne journée à vous en supposant que vous êtes en France!

        ps: le deuxième lien que vous m’avez conseillé me renvoie vers votre page……je serais très intéressée par la consulter.

  • bonjour , à tous j’ai suivi ce super tuto qui fonctionne bien pour un rôle administrator
    on change bien les options et on les enregistre
    MAIS
    si l’on met le rôle ‘administrator’, ou ‘edit_pages’ à la place du rôle ‘administrator’

    on accède bien au menu et a la page en question mais quand on sauvegarde on obtient un beau message erreur wordpress disant : Alors on triche ?

    Et ça m’arrange pas du tout car je voudrais pas donner les droits administrateur pour un éditeur.

    avez vous une idéé d’ou vient le problème SVP ?

  • Bonjour,

    La page « option.php » n’existe plus dans la version 4.4.2

    Comment adapter votre code à cette version ?

    Merci

Citations

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *