Blog

Manchmal ist es von Nöten, dass man dem User Optionen (Theme-Options) für das eigene Theme anbietet. Dies kann aus Design-Gründen, zum Beispiel für verschiedene Backgrounds oder auch eine Kategorieauswahl, zur Darstellung der Artikel in einer im Design integrierten Box.
In diesem Post möchte ich euch einen guten Weg aufzeigen, eure eigene Theme-Options-Seite für euer Theme zu bauen. Diese Seite wird ein Text-Feld beinhalten sowie eine Auswahl an verschiedenen Kategorien für eine Auflistung in einer Box. Der Clou an der Sache ist, dass wir alle Daten dieser Theme-Options-Page in einem einzigen Datenbank-Eintrag speichern.

Als allererstes erstellen wir eine Funktion, in welcher WordPress gesagt wird, dass wir nun eine neue Theme-Options-Page erstellen. Dadurch müssen wir uns nicht groß um die Speicherung der Daten kümmern.

//functions.php

//die funktion
function ctheme_options_init(){
  //Registrieren der Options "ctheme_theme", die Speichervariable in der Tabelle "ctheme_theme_options" und eine Validierungs-Funktion ("ctheme_options_validate", dazu später mehr)
  register_setting('ctheme_theme', 'ctheme_theme_options', 'ctheme_options_validate');
}

add_action('admin_init', 'ctheme_options_init');

 

Damit auch etwas dargestellt werden kann, benötigen wir eine do_page-Funktion. In dieser könnt ihr eine externe Datei inkludieren, um eine bessere Übersicht zu behalten. Ich schreibe es für dieses Tutorial direkt mit hinein.

<?php function ctheme_options_do_page(){
?>
<div class="wrap">
  <h2>cTheme Theme Optionen</h2>

  <form action="options.php" method="post">
    <?php //Schreibt verschiedene hidden Inputs 			
    settings_fields('ctheme_theme'); ?> 
    <?php //Hier werden die gespeicherten Optionen abgefragt. Wir erinnern uns, dass wir alles in einem Eintrag speichern! 			  
    $options = get_option('ctheme_theme_options'); ?>

    <table class="form-table">
      <tbody>
        <tr valign="top">
          <th scope="row">Titel der Box</th>
          <td><input type="text" value="" name="" id="" /></td>
        </tr>
        <tr>
          <th scope="row">Kategorie für die Auflistung in der Box</th>
          <td>Hier stehen dann die Kategorien..</td>
        </tr>
      </tbody>
    </table>

    <p class="submit"><input class="button-primary" type="submit" value="<?php _e('Save Changes') ?>" /></p>

    </form>
  </div>
<?php } ?>

Da wir alle Daten nur in einem Datenbankeintrag speichern, müssen wir die vom User eingegeben Daten selbst validieren.

function ctheme_options_validate($input){
	$input['boxtitle'] = ( $input['boxtitle'] == '' ) ? 'Standard-Box' : $input['boxtitle'];
	$input['categorylist'] = ( is_array( $input['categorylist'] ) ) ? $input['categorylist'] : array();
	return $input;
}

Nun müssen wir die Werte noch änderbar machen. Fangen wir mit der Input-Box an:

<tr valign="top">
  <th scope="row">Titel der Box</th>
  <td><input type="text" value="<?php echo $options['boxtitle']; ?>" name="ctheme_theme_options[boxtitle]" id="ctheme_theme_options_boxtitle" /></td>
</tr>

Wie Ihr seht, verwenden wir hier als name-Attribute den $options-Name als Array. (Hm, ist der Satz denn jetzt verständlich?)

Machen wir uns nun an die Auswahl der Kategorien. Dazu brauchen wir zwei Funktionen: Die eine listet alle Kategorien rekursive auf. Dafür ist es notwendig zu prüfen, ob die aktuelle Kategorie in der Schleife eine Unter-Kategorie hat, die zweite Funktion.

/***************
* list subcategories
* @categories wp-get_categories-Array
* @categoryId choosen category
* @label label to save in options
* @options the options
*******************/
function ctheme_options_listcategory( $categories, $categoryId, $label, &$options ) {
        //alle kategorien durchgehen, um die gewünschten Kategorien zu erhalten... 
        // 0 gibt z.B. alle Top-Kategorien aus, 8 z.B. nur die, welcher eine Sub-Kategorie der Top-Kategorie 8 ist
	foreach( $categories as $category ):
                //Hat diese Kategorie die gewünschte ID?
		if( $category->category_parent == $categoryId ): 
		?>
			<li>
				<input name="ctheme_theme_options[<?php echo $label; ?>][]" type="checkbox" value="<?php echo $category->term_id; ?>" <?php if(@in_array($category->term_id, $options[$label])) { echo 'checked="checked"'; } ?> /> <?php echo $category->name; ?>
				<?php 
                                //Ruft nun die 2. Funktion auf, um zu prüfen, ob diese Kategorie weitere Kategorien enthält
                                if($subcats = ctheme_options_hassubcategory($categories, $category->term_id)): ?>
					<ul style="padding-left:20px; margin-bottom:14px;">
						<?php 
                                                //Sollte dies der Fall sein, rufe ctheme_options_listcategory erneut auf
                                                ctheme_options_listcategory( $categories, $category->term_id, $label, $options ); ?>
					</ul>
				<?php endif; ?>
			</li>
	<?php endif;
	endforeach;
}

/* check, if the given categoryid is in the category-array */
function ctheme_options_hassubcategory( $categories, $categoryId ){
	$hasSubcategory = false;
	
	foreach( $categories as $category ) {
		if( $category->category_parent == $categoryId) {
			$hasSubcategory = true;
			break;
		}
	}
	
	return $hasSubcategory;
}

In unserer do_page-Funktion können wir die Kategorie-Funktion nun einfach mit dem Label, welchen wir in der Validierungs-Funktion angegeben haben, aufrufen.

<tr>
  <th scope="row">Kategorie für die Auflistung in der Box</th>
  <td>
    <?php
        //Alle Kategorien von WordPress mit hide_empty=0 abfragen... Wir benötigen alle Kategorien für die Optionen
        $allCategories = get_categories('hide_empty=0');

        ctheme_options_listcategory( $allCategories, 0, categorylist, $options );
    ?>
  </td>
</tr>

Als letztes müsst ihr die Theme-Options-Seite noch an die Theme-Navigation im Admin-Bereich hängen:

//register options page
add_action('admin_menu', 'ctheme_menu');

function ctheme_menu(){
	add_theme_page('cTheme Optionen', 'Optionen', 'edit_theme_options', 'ctheme-options', 'ctheme_options_do_page');
}