Mehrere Colorpicker in den Theme Einstellungen verwenden

Nach einigen Jahren in der Plugin Entwicklung, bastle ich gerade an meinem ersten eigenen Theme. Dabei bin ich auf das Problem gestoßen, mehrere Colorpicker auf der Seite mit den Theme Einstellungen einzubauen.

Ausgehend von dem wirklich ausgezeichneten Posting von Sarah Neuber, Using The Settings API (Part 1) habe ich mir erst einmal die grundsätzliche Vorgehensweise beim Bau eine Einstellungsseite für mein Theme angelesen. Dann stand ich vor dem Problem mehrere Colorpicker einzubauen für die Farben der Navigationsleiste etc. und bin auf den Artikel How to add a color picker to your wordpress plugin or theme gestoßen. Von da aus ist es ziemlich einfach mehrere Colorpicker einzubauen. Jedoch sollte man die Vorgehensweise beider Artikel bzw. die Settings API von WordPress verstanden haben, wenn man weiter liest.

Bei der Definition der Option habe ich die Klasse „color“ für den Typ „text“ erfunden.

// fields for colors	
$options[] = array(
	"section" => "color",
	"id"      => "td_color_bg_nav",
	"title"   => __( 'Background color of navigation bar', 'td' ),
	"desc"    => __( 'Enter the color used for the background of the navigation bar.', 'td' ),
	"type"    => "text",
	"std"     => "#007733",
	"class"   => "color"
	);

Und in der Funktion td_form_field_fn, die Funktion, die aus den Parametern der Optionen HTML macht folgendes ergänzt:

// additional field class. output only if the class is defined in the create_setting arguments
$field_class = ($class != '') ? ' ' . $class : '';
	
// switch html display based on the setting type.	
switch ( $type ) {
    case 'text':
 	$options[$id] = stripslashes($options[$id]);
	$options[$id] = esc_attr( $options[$id]);
	echo "";

        // Ergänzung für colorpicker
	if ($field_class == " color")
		echo '
';

	echo ($desc != '') ? "
$desc" : "";

        // Ergänzung für colorpicker
	if ($field_class == " color") {
		echo '";
	}
		break;
...

Damit wird für jeden Colorpicker das Stückchen Javascript, versehen mit einer eigenen ID hinzugefügt, so dass es keine Kollision mit den Namen und ID’s gibt. Gleichermaßen wird die ID des div-Tags auf die gleiche Weise eindeutig gemacht.

Auf gar keinen Fall sollte man vergessen

// for colorpicker
wp_enqueue_style( 'farbtastic' );
wp_enqueue_script( 'farbtastic' );

der Skriptfunktion aus dem ersten Tutorial zu ergänzen.

So richtig elegant ist es nicht, aber es hat einen Vorteil: Es funktioniert.
Wer eine elegantere Lösung kennt, möge sie uns allen mitteilen.