I was very surprised to see that WordPress itself doesn’t include a way to easily create your own Settings panels, in the same way that for example it includes a class/library for creating admin list tables (like the ones for Posts or Links, for example) that you can extend to build your own list tables without having to write any markup.

An example of an Admin List table, built on top of WordPress' native features.

There are however a couple of external libraries that you can use to abstract the creation of Options panels: the two most mature ones (at first glance) are Options Framework from Devin Price, and the UpThemes Framework from Themes developer UpThemes. Both look good, are well-coded, and have a decent following and activity on Github.

I chose to go for Options Framework because it is a little more “barebones”, its development is very iterative and ongoing, and most of all developer Devin seems to be really helpful and responsive to both Github pull requests and comments on his website.

There are actually two versions of Options Framework: a Plugin version, and a “Theme” version that you can actually use as a library. I am mostly interested in the Theme version because I want my theme to be self-contained and to be able to provide extra flexibility.

Which brings us to the core of this post: how to actually extend Options Framework to make it more customizable and be able to add more functionality?

First, Options Framework is already reasonably extendable in the sense that it uses filters (notably, for data sanitization) and WordPress-type pluggable functions (i.e., functions definitions are enclosed in if ( ! function_exists( 'optionsframework_mlu_init' ) ) { } branchings).

However, for a few of my needs, I had to hack into Options Framework and add extensibility “hooks”. This post serves as a reference as to how I implemented these hooks.

First, I want to have my Theme Options WordPress submenu inside my Theme’s menu in the Admin panel sidebar, not under Appearance. This is actually documented by Devin (see Figure below), but still requires hacking the code directly, as there are several places where the appearance menu hook ('appearance_page_options-framework') is hardcoded. The way I propose to add extensibility on this point is through the use of a constant named OPTIONS_FRAMEWORK_ADMIN_PAGE (Options Framework already uses constants like OPTIONS_FRAMEWORK_URL and OPTIONS_FRAMEWORK_DIRECTORY).

Then, there are things that I wanted to configure in the Frontend behavior of Options Framework, that were hardcoded in the JS file. I think it makes sense to be able to configure or extend the JS behavior from outside Options Framework. For example, I don’t like the fading effect on Options tabs, so I added a fadeDuration setting (that you can set to 0 from outside the library), but kept its default value of 400 inside Options Framework.

To do this elegantly, I actually used the jQuery extend function, which is what jQuery plugins use to define defaults and options. In turn, I am able to configure the JS values from outside Options Framework, with code like the following:

add_action('optionsframework_custom_scripts', 'optionsframework_custom_scripts');

function optionsframework_custom_scripts() {
    
    // The following is my attempt at adding some (more) parametrability to Options Framework's JS.
    
    $of_options = array('fadeDuration' => 0,
                        'navTabSelector' => '.nav-popshop-settings a');
    
    echo sprintf('<script type="text/javascript">/* <![CDATA[ */ var Of_options = %s; /* ]]> */</script>', json_encode($of_options));
    
}

In my theme, I also want to keep a toplevel set of tabs (“Dashboard”, “Orders”, “Settings”) on the Settings page, so I need to be able to specify to the Javascript file that the set of tabs generated by Options Framework is hooked on a different CSS selector. I also style the set of tabs a little differently (from outside the library as well):

My Theme also have a “Getting Started” page that is integrated with the Options Framework page. This “subpage” interacts with the options page (for example, it has a different styling), and I needed to know when tabs were clicked. I did this by triggering custom jQuery events (named of-tab-active) from Options Framework. That way, I can hook on this event like this:

// Hook into Options Framework's custom tab selection event, in order to style specific options groups differently.
$(".nav-popshop-settings a.nav-tab").bind('of-tab-active', function(){
    $('#optionsframework').removeClass().addClass('postbox').addClass($(this).attr('id'));
});

My differently styled Options "Getting Started" page

Another thing I did (but which didn’t require any change to Options Framework) was to duplicate the “Save Options” button in Javascript, and place it on top of each subpage. When the button is only at the bottom of the page, I’ve found that it’s easy to miss it and forget to save changes (in particular as more and more apps save settings “transparently”). This is pretty hackish, but this is how I did it:

// Copy "Save Options" submit buttons at the top of pages (Settings page)
var submit_button = '<input class="button-primary top-button" type="submit" value="' + $("#optionsframework-submit input[name='update']").attr('value') + '" name="update">';
// Sadly there is no jQuery outerHTML function so we have to reconstruct the markup ourselves...
// We also add a custom class ("top-button").
$("#optionsframework h3").append(submit_button);
// We append into h3 tags, although this is not semantically ideal.

Another thing that I thought about (though I ended up not needing it at this point) was the ability to extend the types of interface elements used in Options Frameworks (text, textarea, select, etc.) and defined in optionframework_fields(), so that plugins would be able to define their own interface elements (sliders, etc.) without having to hack into Options Framework.

This is basically what I did to extend Options Framework. All in all, this is a great library! And it has helped me develop my Theme considerably. My Pull request can be found on Github.

The Social Network

The Social Network

Adaptez le script PHP ci-dessous avec vos identifiants Twitter. Vous pouvez bien sûr ajouter un peu de HTML, mais n’oubliez pas que l’HTML compris par la Freebox est assez rudimentaire (basé sur 3.2, référence ici).

<!DOCTYPE HTML PUBLIC "-//Freebox//DTD HTML 3.2//EN">
<html>
<head>
<meta name="refresh" content="60;url=">
<meta name="panel_display" content="twitter">
</head>
<body>

<img src="twitter.png"/>
<?php echo date("D M j G:i"); ?>
&amp;nbsp;<br />

<?php
// create curl resource
$ch = curl_init();
// set url
curl_setopt($ch, CURLOPT_URL, "http://twitter.com/statuses/friends_timeline.xml?count=8");
//return the transfer as a string
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
//authentification Twitter
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
curl_setopt($ch, CURLOPT_USERPWD, "identifiant:mot_de_passe");
// $output contains the output string
$output = curl_exec($ch);
// close curl resource to free up system resources
curl_close($ch);

echo "<table>";

$xml = @simplexml_load_string($output);
foreach ($xml->status as $status) {
echo '<tr><td width="50" height="82">';
echo '<img src="'.$status->user->profile_image_url.'"/>';

echo "</td><td>";
echo $status->user->name;
echo "&amp;nbsp;&amp;nbsp;";
echo date("G:i", strtotime($status->created_at));
echo "&amp;nbsp;<br />&amp;nbsp;<br />";
echo '<font size="1">';
echo utf8_decode($status->text);
echo '</font>';
echo "</td></tr>";
}

echo "</table>";

?>
</body>
</html>

Il faut ensuite héberger ce script. Le catch ici est que Free demande un serveur IPv6 pour les télésites (cf. le document de référence). Donc soit vous disposez d’un hébergement mutualisé IPv6 (hautement improbable en 2009…), soit vous hébergez le script sur votre machine perso en IPv6 (mais alors tout cela n’a plus trop d’intérêt, car votre PC est allumé..), soit enfin, comme moi, vous profitez d’une offre gratuite spécifique d’hébergement Télésite comme celle proposée par au12.info. Vous pouvez alors récupérer sur ce serveur IPv6 le contenu produit par le premier script sur le serveur “non-IPv6″ (NB: rien ne vous empêche de fusionner les deux scripts sur le serveur IPv6 si vous le souhaitez…) à l’aide d’un script de ce type :

<?php
// create curl resource
$ch = curl_init();
// set url
curl_setopt($ch, CURLOPT_URL, "http://mon-site.fr/telesite.php");
//return the transfer as a string
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
// $output contains the output string
$output = curl_exec($ch);
// close curl resource to free up system resources
curl_close($ch);

echo $output;

Il ne vous reste alors qu’à activer ce télésite sur votre panneau de configuration Free. Si tout se passe bien, vous pouvez alors accéder, via le menu Télésites de votre Freebox HD, à un widget Twitter sur votre télé

les mitaines de Nathalie Kosciusko-Morizet

Or, d’après Wikipédia :

Mitaine dérive de l’ancien français mite (« chatte »), allusion à la fourrure douce de cet animal. Il s’agit de gants dont les doigts ne sont pas fermés, comme s’ils avaient été coupés.

(…)

Si la mitaine a d’abord une fonction utilitaire laissant le bout des doigts nus libre de travailler, elles deviennent dès le XVIII^e siècle des accessoires de mode, portées en intérieur par les dames dans un but uniquement esthétique. Cette mode subsistera jusqu’au XIX^e siècle.

Aïe… ça commence mal. Olivier Schmitt, du Monde, est assez positif ; en revanche, les commentateurs de Europe1.fr se déchirent. Et vous, qu’en pensez-vous ?

En deux mots, je ne partage pas tout à fait ce point de vue. Pour prendre l’exemple de l’avènement du chemin de fer et de son rôle dans la révolution industrielle, on pourrait dire que le changement n’était pas si grand, puisqu’avant on avait les carrosses et que peu de temps après on a eu les voitures. Mais c’est nier deux choses : le fait que le changement est qualitatif (ce n’est pas uniquement une amélioration de l’existant) et surtout le fait que ce changement a lieu sur une plage de temps très courte. C’est ce qu’on vit depuis 10 ans (du premier téléphone portable à la généralisation de Twitter aujourd’hui : 10 ans à l’échelle de l’histoire, c’est court) et c’est pour cela qu’on peut légitimement appeler ça une révolution de l’information. Pour comparaison, qu’est-ce qui avait changé dans la diffusion de l’information depuis la généralisation du téléphone (1920 aux US, 1945 en France) et jusqu’à 1995 ? Arguablement, pas grand chose…