kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI â€¦

Theme Options Page für WordPress erstellen

Komplexe und hochwertige WordPress-Themes verfügen in der Regel über eine so genannte "Theme Options Page" - eine zusätzliche Seite im Dashboard anhand der ein Benutzer das Theme über die normalen Möglichkeiten hinaus anpassen kann. Das TwentyEleven-Theme von WordPress wird beispielsweise mit einer solchen Options-Page ausgeliefert. Hier könnt ihr u.a. auswählen ob das Theme schwarz oder weiß sein soll, in welcher Farbe Verlinkungen auf der Website dargestellt werden und ob ihr eine Sidebar anzeigen möchtet.
In diesem Beitrag möchte ich euch zeigen wie ihr selbst eine Theme-Options-Page erstellt. Anhand eines leicht verständlichen Beispiels werdet ihr das Prinzip sicher schnell auf eure eigenen Projekte übertragen können.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

WordPress Theme-Options-Pages

Ich möchte einmal kurz zusammenfassen was wir jetzt vorhaben. Wir erstellen eine Theme Options Page für ein beliebiges WordPress-Theme auf der wir zwei Eingabefelder platzieren. Das erste Eingabefeld dient dazu das Copyright-Datum im Footer des Themes anzupassen, in das zweite Feld kann der Benutzer seinen Google Analytics Tracking Code eintragen. Beide Anpassungen sind normalerweise nur möglich indem der Code der Website bearbeitet und anschließend hochgeladen wird.

Theme Options-Page in WordPress-TwentyEleven
Theme-Options-Page im 2011-Theme von WordPress

Wir arbeiten mit der functions.php des Themes, mit dem WordPress-Dashboard und mit der footer.php. Zunächst erstellen wir über die functions.php die Options-Seite mit allen Inhalten. Über das Dashboard können dann die Daten eingetragen werden. Die Eingabewerte werden in der Options-Tabelle der Datenbank abgelegt. Im letzten Schritt lesen wir die eingetragenen Werte in der footer.php des Themes wieder aus.

Das klingt kompliziert? Ist es aber nicht. 2x Copy & Paste und alles läuft.

functions.php - Theme Options Page anlegen

Der folgende Code gehört in die functions.php eures Themes. Ich habe euch die einzelnen Bereiche der Datei im Code kommentiert.



/* ------------------ */
/* theme options page */
/* ------------------ */

add_action( 'admin_init', 'theme_options_init' );
add_action( 'admin_menu', 'theme_options_add_page' );

// Einstellungen registrieren (http://codex.wordpress.org/Function_Reference/register_setting)
function theme_options_init(){
	register_setting( 'kb_options', 'kb_theme_options', 'kb_validate_options' );
}

// Seite in der Dashboard-Navigation erstellen
function theme_options_add_page() {
	add_theme_page('Optionen', 'Optionen', 'edit_theme_options', 'theme-optionen', 'kb_theme_options_page' ); // Seitentitel, Titel in der Navi, Berechtigung zum Editieren (http://codex.wordpress.org/Roles_and_Capabilities) , Slug, Funktion 
}

// Optionen-Seite erstellen
function kb_theme_options_page() {
global $select_options, $radio_options;
if ( ! isset( $_REQUEST['settings-updated'] ) )
	$_REQUEST['settings-updated'] = false; ?>

<div class="wrap"> 
<?php screen_icon(); ?><h2>Theme-Optionen für <?php bloginfo('name'); ?></h2> 

<?php if ( false !== $_REQUEST['settings-updated'] ) : ?> 
<div class="updated fade">
	<p><strong>Einstellungen gespeichert!</strong></p>
</div>
<?php endif; ?>

  <form method="post" action="options.php">
	<?php settings_fields( 'kb_options' ); ?>
    <?php $options = get_option( 'kb_theme_options' ); ?>

    <table class="form-table">
      <tr valign="top">
        <th scope="row">Copyright</th>
        <td><input id="kb_theme_options[copyright]" class="regular-text" type="text" name="kb_theme_options[copyright]" value="<?php esc_attr_e( $options['copyright'] ); ?>" /></td>
      </tr>  
      <tr valign="top">
        <th scope="row">Google Analytics</th>
        <td><textarea id="kb_theme_options[analytics]" class="large-text" cols="50" rows="10" name="kb_theme_options[analytics]"><?php echo esc_textarea( $options['analytics'] ); ?></textarea></td>
      </tr>
    </table>
    
    <!-- submit -->
    <p class="submit"><input type="submit" class="button-primary" value="Einstellungen speichern" /></p>
  </form>
</div>
<?php }

// Strip HTML-Code:
// Hier kann definiert werden, ob HTML-Code in einem Eingabefeld 
// automatisch entfernt werden soll. Soll beispielsweise im 
// Copyright-Feld KEIN HTML-Code erlaubt werden, kommentiert die Zeile 
// unten wieder ein. http://codex.wordpress.org/Function_Reference/wp_filter_nohtml_kses
function kb_validate_options( $input ) {
	// $input['copyright'] = wp_filter_nohtml_kses( $input['copyright'] );
	return $input;
}

Es besteht natürlich auch die Möglichkeit die Theme-Options-Page in einer eigenen Datei anzulegen und diese dann in die functions.php zu laden. Das macht vor allem dann Sinn, wenn die Options-Seite sehr umfangreich ist. Mit diesem Snippet ladet ihr eine externe Datei in die functions.php. Die Datei muss im gleichen Verzeichnis wie die functions.php abgelegt werden.


require_once ( get_stylesheet_directory() . '/theme-options-page.php' );

Theme-Options-Page im Dashboard

Im WordPress-Backend findet ihr die Theme-Options-Page nun im Bereich "Design".


Tragt in beide Felder nun einen Testinhalt ein und speichert die Änderung. Im letzten Schritt übertragen wir die Eingabe in das entsprechende Template.

footer.php - Eingaben im Template anzeigen

Alles was noch fehlt ist das Snippet um die gespeicherten Daten im Theme auszugeben. Für dieses Beispiel benutzt ihr dazu die footer.php.

Zunächst ruft ihr mit get_options (codex.wordpress.org/Function_Reference/get_option) die entsprechenden Werte aus der Datenbank ab. Anschließend stellt ihr die Inhalte über echo dar.

Das folgende Snippet gibt beide Inhalte direkt untereinander aus.


<?php
 $options = get_option('kb_theme_options');
 echo $options['copyright'];
 echo $options['analytics'];
?>

Das wars auch schon.

Weitere Links zum Thema

Wenn ihr euch eingehender mit der Erstellung von Theme-Options-Pages befassen wollt, schaut euch auch folgende empfehlenswerte Artikel und Tutorials an.

Außerordentlich lohnenswert ist auch diese Basis-Theme-Options-Page. Hier sind alle Arten von Eingabefeldern (Input, Select, Radio, Checkbox etc.) enthalten.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei WordPress-Projekten

Unsere WordPress Agentur ist auf die Entwicklung maßgeschneiderter WordPress-Themes und -Websites spezialisiert. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung eines Projekts benötigst, helfen wir gerne weiter.
WordPress-Leistungsangebot →

Das könnte dich auch interessieren

9 Kommentare

  1. Roman

    Verfasst am 6. Dezember 2011 um 8:24 Uhr.

    Hi :)

    Genau mit dem Thema beschäftige ich mich zur Zeit und hab festgestellt das hier noch ein Verweis zu einem tollen Options Panel-Blog fehlt:

    http://wptheming.com/2010/11/thematic-options-panel-v2/

    Ich bin gerade dabei damit für ein Theme-Baukasten die Optionen zu integrieren.

    Ich bin kein Profi und daher immer dankbar für solche Artikel und Vorlagen…den Rest erledige ich nach dem „trail and error“-Prinzip *gg*

  2. Simon

    Verfasst am 19. Januar 2012 um 12:54 Uhr.

    Hey, vielen Dank für deinen Artikel. Hat mir geholfen den Einstieg in Theme-Options zu finden! Ich werde dir das Ergebnis dann hier wieder zeigen ;) Übrigens find ich das Design deines Blogs sehr schön!
    Cheers, Simon

  3. Alexander

    Verfasst am 29. Februar 2012 um 12:03 Uhr.

    Vielen Dank für diese leicht verständliche, aber tolle Umsetzung. Bin nämlich gerade dabei ein neues Theme für diese Seite zu bauen und dabei wollte ich nun einige Einstellungen direkt im Dashboard ändern können, ohne ständig im PHP/Html-Code Änderungen vorzunehmen. Habe daher den Code gerade eingefügt und einige Anpassungen vorgenommen – funktioniert einwandfrei. Sobald der Blog dann fertig ist, werde ich auf jeden Fall auf Deine Anleitung hinweisen.

  4. asdevo

    Verfasst am 14. April 2012 um 20:31 Uhr.

    Hey Jonas, ich bin begeistert von deinem Beitrag!

    Nach einen Jahr traue ich mich mal wieder an das Thema ran und finde auf Anhieb dieses Tutorial. Diesmal funktioniert die Optionen-Seite von Anfang an, kein Fehlersuchen, kein Frust!
    Da ist es wirklich gerechtfertigt, dass der Artikel unter Google Top 10 zu finden ist.

    Habe gleich meinen ganzen Blog asdevo.de überarbeitet, sodass ich jetzt für Änderungen nicht mehr im Quelltext wühlen muss!

    Ein ganz großes Danke!

  5. Flo

    Verfasst am 7. Juni 2012 um 16:25 Uhr.

    Hallo Jonas!
    Vielen Dank für den aufschlussreichen Artikel, hat mir sehr geholfen, das Ganze zu verstehen. Allerdings, bei meinem Versuche zu einem fertigen Theme Optionen zu ergänzen, werden die neuen Werte (Texte) nicht gespeichert. Bei einer Checkbox funktioniert es.
    Eine idee, warum das nicht nicht, und wie doch?
    Viele Grüße,
    Flo

  6. Sascha

    Verfasst am 13. April 2013 um 21:25 Uhr.

    Hi!

    Der Artikel hat mir sehr weitergeholfen!
    Ich bin aber wie Flo über das Problem mit der Checkbox gestoßen und
    wollte fragen ob es dafür eine Lösung gibt?

    Schönen Gruß
    Sascha

  7. Simon

    Verfasst am 28. Mai 2013 um 9:24 Uhr.

    Hallo,

    erstmal danke für die Mühe, das hier aufzuschreiben :)

    @Flo/Sascha: Das würde mich auch interessieren, auch wenn ich momentan nicht vor dem gleichen Problem stehe. Habt ihr das gelöst? Mein erster Ansatz wäre vllt mal in der DB die Feldtypen zu überprüfen.

    LG
    Simon

  8. nk

    Verfasst am 1. September 2014 um 18:47 Uhr.

    Für checkboxes solltet Ihr immer ein leeres, gleichnamiges hidden-Field vor den CB-Gruppen erstellen. Grund: Check- und Radioboxes werden von Natur aus nicht vom Browser mitgesendet, wenn nichts ausgewählt wurde.

  9. Tobias

    Verfasst am 5. Oktober 2015 um 18:20 Uhr.

    Hallo Jonas,
    danke für das Tutorial, klappt bei mir einwandfrei.
    Gerade als Beginner sind solche Tipps für mich sehr hilfreich.

    Weiterhin frohes Schaffen! :)

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.