Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Tipps, Tricks & Tutorials » WordPress: So erstellst du eine Theme-Optionenseite blitzschnell

WordPress: So erstellst du eine Theme-Optionenseite blitzschnell

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • 2 Kommentare
Lesedauer: 5 Minuten
  • von Dr. Web Redaktion
  • 7. Dezember 2015
Bookmarke mich
Share on pocket

Wee Media | Webdesign Agentur

Orange Services

Werbeagentur Hannover | 360 Grad Konzept

DAZECON - Webdesign und Marketing Leipzig

Webdesign DOERRER

Philipp Pistis - WordPress Agentur

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)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Dr. Web Redaktion

Dr. Web Redaktion

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

Agenturpartner

PromoMasters Online Marketing

Wien

One Step Webdesign

Hannover

CAF Webdesign Agentur

Berlin

HELD Werbeagentur

Traunstein

Werbeagentur Hannover | 360 Grad Konzept

Hannover

Alle Agenturpartner

Jobs

Media Manager in München

München

Grafik-Designerin

Freiburg im Breisgau

Assistent/in der Geschäfts­führung

Innsbruck

API Developer für die TelemaxX Cloud

Karlsruhe

Junior Online Marketing Manager

München

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

WordPress Block Editor: das ist der neueste Stand

Mit dem Block Editor in WordPress kannst du eigene Blöcke und „Block Patterns“ erstellen. In diesem Beitrag möchte ich dir zeigen, wie du mit dem Block-Editor einen Beitrag mit einer Überschrift, einem Bild und einem Absatz erstellst, unabhängig vom verwendeten Theme.

 →   

WordPress Website erstellen 2022: Eine Anleitung, Schritt für Schritt

WordPress ist das mit großem Abstand führende CMS, aus guten Gründen. Eine WordPress Website zu erstellen ist einfach, wie Du in der folgenden Anleitung sehen wirst:

 →   

Die 17 besten WooCommerce Snippets für die functions.php

Dir gefallen bestimmte Dinge in WooCommerce nicht und willst sie anpassen? Diese 17 WooCommerce Snippets werden Dir dabei helfen:

 →   

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.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

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

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.