Tutorial WordPress : Créer une page d’options pour votre thème

Une des forces de WordPress est qu’il permet facilement aux développeurs d’interagir avec des fonctions de bases.

Un exemple : la possibilité de rajouter des options à votre thèmes WordPress. Options qui seront configurables dans la zone d’administration du blog.

Pour créer des options pour votre thème WordPress, tout ce passe dans le fichier functions.php.

Dans la base de données, on va utiliser la table « options » et y stocker nos différentes options.

Les options

La première étape consiste à nommer et à configurer les différentes options du thème.
Ici on va simplement enregistrer 3 options :

• un compte Twitter,
• une URL Feedburner pour le flux RSS,
• une zone de saisie pour enregistrer le code javascript pour Google Analytics.

[php]
// Les options du thème

$themename = "montheme";
$shortname = "wp";
$options = array (

array( "name" => __( ‘Twitter Username’ ),
"desc" => __( ‘Your Twitter username, to be used on the social media links’ ),
"id" => $shortname . "_twitter",
"std" => __( "" ),
"type" => "text"),

array( "name" => __( ‘Feedburner URL’ ),
"desc" => __( "Copy and paste your Feedburner URL, ie –> http://feeds2.feedburner.com/xxx" ),
"id" => $shortname . "_feedburner",
"std" => __( "" ),
"type" => "textarea",
"options" => array( "rows" => "5",
"cols" => "94" ) ),

array( "name" => __( ‘Analytics code’ ),
"desc" => __( "Paste your Google Analytics (or other tracking) code in the box below" ),
"id" => $shortname . "_analytics",
"std" => __( ""),
"type" => "textarea",
"options" => array( "rows" => "5",
"cols" => "94" ) )

);
[/php]

Comme vous le voyez, il suffit ici de « jouer » avec quelques paramètres pour précisez le nom de l’option, le type d’élément de formulaire qu’il y aura dans l’administration WordPress, …

L’affichage de l’administration

Très simplement, on créer un formulaire de toute pièce.

[php]
/**
* Administration Options – Affichage
*/
function mytheme_admin()
{
global $themename, $shortname, $options;

if ( $_REQUEST['saved'] ) echo ‘<div id="message" class="updated fade"><p><strong>’ . $themename . ‘ settings saved . </strong></p></div>’;
if ( $_REQUEST['reset'] ) echo ‘<div id="message" class="updated fade"><p><strong>’ . $themename . ‘ settings reset . </strong></p></div>’;
if ( $_REQUEST['reset_widgets'] ) echo ‘<div id="message" class="updated fade"><p><strong>’ . $themename . ‘ widgets reset . </strong></p></div>’;
?>
<div="wrap">
<h2><?php echo $themename; ?> Options</h2>
<form action="" method="post">
<table class="form-table">
<?php
foreach( $options as $value )
{
switch ( $value['type'] )
{
case ‘text’:
?>
<tr valign="top">
<th scope="row"><label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label></th>
<td>
<input name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if( get_option( $value['id'] )!="") { echo get_option( $value['id'] ); } else { echo $value['std']; } ?>" />
<?php echo $value['desc']; ?>
</td>
</tr>
<?php
break;

case ‘textarea’:
$ta_options = $value['options'];
?>
<tr valign="top">
<th scope="row"><label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label></th>
<td><textarea name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" cols="<?php echo $ta_options['cols']; ?>" rows="<?php echo $ta_options['rows']; ?>"><?php
if( get_option( $value['id'] )!="") {
echo stripslashes( get_option( $value['id'] ) );
}else{
echo $value['std'];
}?></textarea><br /><?php echo $value['desc']; ?></td>
</tr>
<?php
break;

case ‘nothing’:
$ta_options = $value['options'];
?>
</table>
<?php echo $value['desc']; ?>
<table class="form-table">
<?php
break;

case ‘radio’:
?>
<tr valign="top">
<th scope="row"><?php echo $value['name']; ?></th>
<td>
<?php
foreach( $value['options'] as $key => $option )
{
$radio_setting = get_option($value['id']);
if( $radio_setting!= » )
{
if ($key == get_option($value['id']) )
{ $checked = "checked=\"checked\""; }
else
{ $checked = ""; }
}
else
{
if( $key==$value['std'] )
{ $checked = "checked=\"checked\""; }
else
{ $checked = ""; }
}
?>
<input type="radio" name="<?php echo $value['id']; ?>" id="<?php echo $value['id'] . $key; ?>" value="<?php echo $key; ?>" <?php echo $checked; ?> /><label for="<?php echo $value['id'] . $key; ?>"><?php echo $option; ?></label><br />
<?php
}
?>
</td>
</tr>
<?php
break;

case ‘checkbox’:
?>
<tr valign="top">
<th scope="row"><?php echo $value['name']; ?></th>
<td>
<?php
if( get_option( $value['id'] ) )
{ $checked = "checked=\"checked\""; }
else
{ $checked = ""; }
?>
<input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />
<label for="<?php echo $value['id']; ?>"><?php echo $value['desc']; ?></label>
</td>
</tr>
<?php
break;

default:
break;
}
}
?>
</table>
<p class="submit">
<input name="save" type="submit" value="Save changes" />
<input type="hidden" name="action" value="save" />
</p>
</form>
<form method="post" action="">
<p class="submit">
<input name="reset" type="submit" value="Reset" />
<input type="hidden" name="action" value="reset" />
</p>
</form>
</div>
<?php
}

add_action( ‘admin_menu’ , ‘mytheme_add_admin’ );
[/php]

Sauvegarde des options

On créer ici la sauvegarde, suppression des options.

[php]
/**
* Administration Options – Sauvegarde
*/
function mytheme_add_admin()
{
global $themename, $shortname, $options;

if( $_GET['page']==basename( __FILE__ ) )
{
if( ‘save’==$_REQUEST['action'] )
{
foreach( $options as $value )
{ update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }

foreach( $options as $value )
{
if( isset( $_REQUEST[ $value['id'] ] ) )
{ update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }
else
{ delete_option( $value['id'] ); }
}

header("Location: themes.php?page=theme-options.php&saved=true");
die;
}
elseif( ‘reset’==$_REQUEST['action'] )
{
foreach ($options as $value)
{ delete_option( $value['id'] ); }

header("Location: themes.php?page=theme-options.php&reset=true");
die;
}
elseif ( ‘reset_widgets’==$_REQUEST['action'] )
{
$null = null;
update_option( ‘sidebars_widgets’, $null );

header("Location: themes.php?page=theme-options.php&reset=true");
die;
}
}

add_theme_page( $themename . " Options", $themename . " Options", ‘edit_themes’, basename( __FILE__ ), ‘mytheme_admin’ );
}
[/php]

Récupération des options

Dans votre thème, voici le bout de code pour récupérer toutes les options.

[php]
//on récupère les options du thème
global $options;
foreach( $options as $value )
{
if( get_option( $value['id'] )===FALSE )
{ $$value['id'] = $value['std']; }
else
{ $$value['id'] = get_option( $value['id'] ); }
}
[/php]

Et pour les utiliser :

[php]
// twitter
<a href="http://twitter.com/<?php echo $wp_twitter; ?>">Twitter</a>

// Feedburner
<a href="http://twitter.com/<?php echo $wp_feedburner; ?>">Flux RSS</a>

// Google Analytics
<?php echo $wp_analytics; ?>
[/php]