Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Tipps, Tricks & Tutorials » WordPress: So erstellst du eine Theme-Optionenseite blitzschnell

WordPress: So erstellst du eine Theme-Optionenseite blitzschnell

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 2 Kommentare
Lesedauer: 5 Minuten
  • von Dr. Web Redaktion
  • 7. Dezember 2015

Inhaltsverzeichnis

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.

WordPress: So erstellst du eine Theme-Optionenseite blitzschnell

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.

WordPress-Option-Page-Generator

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:

Titel und Position der Optionen-Seite festlegen

Ausgefüllt:

theme-optionen-1

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.

Die einzelnen Felder für die Optionen festlegen

Ausgefüllt sieht das dann zum Beispiel so aus:

Hier legst du deine Theme-Optionen fest

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:

Den PHP-Code generieren

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:

Der generierte Code

Das Theme-Hauptverzeichnis:

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:

Die Erweiterung in der functions.php Datei

Das Ergebnis: Die Theme-Optionenseite

Twenty-Twelve-Theme-Optionen

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.

Optionen ins Theme übertragen

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.

Diesen Text im Footer anzeigen lassen

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
Die Optionen im Theme anzeigen lassen

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:

Das Endergebnis

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)

Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, und Markus Seyfferth.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Logo von Lausitz Design.

Internetagentur lausitz.design

Schleife

pictibe Media Consulting & Solution in Köln.

pictibe – Werbeagentur & Marketingagentur

Bergisch Gladbach

promomasters online marketing seo agentur logo für wien, salzburg, zell am see.

PromoMasters Online Marketing

Wien

SEOfolgreich Local SEO Agentur Muenchen

SEOfolgreich – Local SEO Agentur München

München

SEO7 Logo der Seo-Agentur in Esslingen und Stuttgart.

SEOSEVEN SEO & Webagentur

Esslingen

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

2 Antworten zu „WordPress: So erstellst du eine Theme-Optionenseite blitzschnell“
— was ist Deine Meinung?

  1. Florian sagt:
    7. Dezember 2015 um 11:37 Uhr

    Hi Andreas,

    dieser Part stimmt so nicht:

    So kann man die Theme-Optionenseite auch nutzen, wenn man sein WordPress-Theme gerne im offiziellen Theme-Verzeichnis von WordPress gelistet sehen möchte.

    Seit dem 22. April 2015 ist der Customizer für Directory-Themes vorgeschrieben, eine eigene Seite für Theme-Optionen ist nicht mehr erlaubt. Hier der Link zur Ankündigung von Justin Tadlock: https://make.wordpress.org/themes/2015/04/22/details-on-the-new-theme-settings-customizer-guideline/

    Viele Grüße
    Florian

    Antworten
    1. Andreas Hecht sagt:
      7. Dezember 2015 um 12:22 Uhr

      Danke Dir. Ist mir auch schon aufgefallen, da ich gerade einen Artikel über den Customizer schreibe.

      Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑