WordPress: So erstellst du eine Theme-Optionenseite blitzschnell

Viele WordPress-Freunde wagen sich irgendwann an die Erstellung eines eigenen Themes heran. Dabei wird häufig auf eine eigene Theme-Optionenseite im Backend verzichtet. Natürlich sollte aber schon das erste eigene Theme auch eine Theme-Optionenseite haben, um unkompliziert einige Einstellungen tätigen zu können. Bisher war das Erstellen einer solchen Seite recht aufwändig, man benötigte viel Code. Graue Haare gab es noch umsonst dazu, weil vieles nicht sofort funktionierte. Doch das hat jetzt ein Ende, denn es existiert mittlerweile ein recht guter Generator für das Erstellen einer Theme-Optionenseite.

Theme-Optionen: Eigene Seite erstellen oder den Customizer nutzen

Grundsätzlich existieren gleich zwei Möglichkeiten, um Theme-Optionen zu realisieren. Entweder man nutzt eine eigene Seite für die Optionen, oder man bedient sich des Customizers, der über »Design => Anpassen« zu erreichen ist. Beide Möglichkeiten sind gut, allerdings wird der Customizer recht unübersichtlich bei vielen Optionen. Daher wollen wir uns in diesem Beitrag mit einer eigenen Theme-Optionenseite beschäftigen. Die Möglichkeiten des Customizers loten wir in einem eigenen Beitrag aus.

Der »WordPress Option Page Generator«

Dieser Generator ist wirklich gut und spart viel Zeit in der Entwicklung von Themes. Zudem bietet er relativ viele Möglichkeiten und funktioniert wie versprochen, was man von seinem Konkurrenzprodukt nicht behaupten kann. Auch bietet die Konkurrenz nicht mal annähernd so viele Möglichkeiten – zudem muss viel Code im Endprodukt bearbeitet werden. Meine Empfehlung: Finger weg vom WP Settings Generator!

Der WordPress Option Page Generator

Wir beschäftigen uns in diesem Artikel mit dem „WordPress Option Page Generator„, der sehr viele Möglichkeiten bietet und hervorragend funktioniert, wie ich durch das Testen mit verschiedenen Themes herausfand.

Theme-Optionenseite mit dem Generator erstellen – so einfach geht es

1 – Titel vergeben und Position der Seite bestimmen

Zuerst musst du den Titel der Seite für die Theme-Optionen vergeben. Darunter kann noch etwas Text für eine Erklärung oder ähnliches im Feld „Text“ hinterlegt werden. Auf der rechten Seite hast du die Wahl, wo die Optionen-Seite erscheinen soll. Für eine Theme-Optionen-Seite empfiehlt sich entweder „No Parent (Top-Level)“ oder wie im Screenshot gezeigt „Theme (Appearance)“. Dann erscheint die Seite unter „Design“. Das ist die empfohlene Einstellung. Ergänzend sollte noch gesagt sein, dass sich mit dem Generator auch Plugin-Options-Seiten erstellen lassen.

Unausgefüllt:

Ausgefüllt:

2 – Die benötigten Felder festlegen und die Funktion bestimmen

Für die Einstellungen hat man die Wahl zwischen „Text, Textarea, Select, Checkbox und Radio“. Je nachdem welche Art von Optionen man für sein Theme definieren will, sollten die einzelnen Möglichkeiten genutzt werden. Ein Textfeld kann für zusätzlichen Text zum Beispiel im Footer genutzt werden, eine Textarea für den Google-Analytics-Code, eine Checkbox für die Anzeige von speziellen Dingen und so weiter. Nachdem eine Option festgelegt wurde, klickst du einfach auf den Plus-Button. Danach kannst du eine weitere Option definieren.

Ausgefüllt sieht das dann zum Beispiel so aus:

3 – Den benötigten Code generieren

Nachdem du alles gewissenhaft erledigt hast, kannst du nun den Code generieren, der für die Erstellung und die Darstellung deiner Theme-Optionen-Seite verantwortlich ist. Das machst du an dieser Stelle:

Die Theme-Optionenseite mit dem generierten Code anlegen

Nach dem Klick auf den Button »Generate PHP« wird der benötigte PHP-Code für deine Theme-Optionenseite erstellt. Lege nun mit z.B. dem Windows Editor oder Apples TextEdit oder einem anderen reinen Texteditor eine Datei namens theme-optionen.php an, kopiere den Code aus dem Generator in die PHP-Datei hinein und speichere sie ab. Die neue PHP-Datei verschiebst du nun in das Hauptverzeichnis deines WordPress-Themes.

Der generierte Code:

Das Theme-Hauptverzeichnis:

Die functions.php anpassen, damit die Theme-Optionenseite angezeigt wird

Damit die Theme-Optionenseite auch angezeigt wird, ist noch eine kleine Anpassung in der functions.php des Themes nötig. Öffne die Datei in einem reinen Text-Editor oder noch besser in einem HTML-Editor. Wir haben bereits etliche, gute und funktionelle HTML-Editoren vorgestellt:

• Die 9 besten kostenlosen HTML-Editoren für Webentwickler (Windows-Edition)
• Die 5 besten kostenlosen HTML-Editoren für Webentwickler (Mac-Edition)

Nachdem du die functions.php in einem HTML-Editor geöffnet hast, kopiere am Ende der Datei folgendes hinein:

Das Ergebnis: Die Theme-Optionenseite

Auf eine einfache Art und Weise haben wir nun mit relativ geringem Zeitaufwand eine ansprechende und funktionierende Theme-Optionenseite erstellt. Nun fehlt nur noch der nötige Code, damit du die Optionen auch in die Theme-Dateien integrieren und anzeigen lassen kannst. Auch hierbei hilft dir der Generator, denn am Ende der Theme-Optionenseite steht, wie man die Optionen in das Theme übertragen muss.

Genau erklärt: So einfach können die Optionen ins Theme übertragen werden

Um die Optionen anzeigen zu können, müssen zwei Dinge erfüllt sein. Im Kopfbereich der Theme-Datei müssen die Optionen aufgerufen werden. Ein weiterer Code-Teil sorgt für die Darstellung im Theme. Das funktioniert nur, wenn beide Teile in der betreffenden Theme-Datei stehen. Im folgenden Beispiel möchten wir etwas zusätzlichen Text im Footer des Themes ausgeben.

Um zusätzlichen Text im Footer anzeigen lassen zu können, muss die Datei footer.php des Themes bearbeitet werden. Die folgenden beiden Code-Zeilen müssen dafür in der footer.php ergänzt werden:

Ein Klick auf die Grafik öffnet eine höhere Auflösung

Der obere Code sorgt dafür, dass die Theme-Datei weiß, dass zusätzliche Optionen existieren. Ohne diese Zeile Code funktioniert es nicht. Die zweite Zeile Code unten holt sich die Einstellung, die du auf der Theme-Optionen-Seite getätigt hast und zeigt sie im Theme an. Diese zweite Zeile platzierst du dort, wo der Text angezeigt werden soll.

So sieht es dann auf deiner Website aus:

Fazit

Der »WordPress Option Page Generator« ist eine geniale und schnelle Möglichkeit, eine Theme-Optionenseite auch ohne fortgeschrittene PHP-Kenntnisse zu gestalten. Zudem ist der generierte Code WordPress-konform und nutzt die Settings-API zur Generierung des PHP-Codes. So kann man die Theme-Optionenseite auch nutzen, wenn man sein WordPress-Theme gerne im offiziellen Theme-Verzeichnis von WordPress gelistet sehen möchte. Fortgeschrittene Nutzer sollten vielleicht noch die generierten IDs anpassen, denn die sind schon arg lang und damit nicht so wirklich praxistauglich.

Links zum Beitrag

• WordPress Codex: Theme Developement
• WordPress Option Page Generator
• WordPress Codex: Settings API
• WordPress Coding Standards
• Dr. Web: Die 9 besten kostenlosen HTML-Editoren für Webentwickler (Windows-Edition)
• Dr. Web: Die 5 besten kostenlosen HTML-Editoren für Webentwickler (Mac-Edition)

(dpe)