Skip to main content

So erstellst du neue Widget-Bereiche in deinem WordPress-Theme

Veröffentlicht am 8. Oktober 2021

Beitrag teilen:

Was sind WordPress Widget-Bereiche und wofür kann ich sie einsetzen?

Nun, einfach erklärt: das sind Bereiche, in welchen die Widgets von WordPress angezeigt werden können.
Widgets können Textbereiche, HTML-Code, Bilder oder vieles mehr sein. Es gibt Plugins, die fügen weitere Widgets hinzu, WooCommerce zum Beispiel, wenn man einen Shop betreiben möchte.
Sie dienen also dem einfachen Updaten und Einfügen von Elementen innerhalb der Webseite aber außerhalb vom Editor der Seiten und Beiträge.

Mehr Infos zum Thema Widgets erhältst du auf der offiziellen Erklärungs-Seite von WordPress.

Wann kann ich WordPress-Widgets in eigene Widget-Areas einfügen?

Generell kannst du das immer, sobald du Zugriff auf den Code des verwendeten Themes hast.
Ich empfehle jedoch vorher ein WordPress Child-Theme anzulegen, damit bei einem Theme-Update die Bereiche nicht wieder gelöscht werden.

Was sollte ich vorbereiten?

Suche dir am besten schon mal die .php-Datei heraus, welche letztendlich das Widget integrieren soll.
Normalerweise sind das die Dateien die in /wp-content/themes/<dein-theme>/ liegen – jedoch nicht die functions.php.
Diese Datei kannst du dennoch auch öffnen, in ihr muss die Widget-Area registriert werden.
Wenn du dir nicht sicher bist welche Datei das ist, kommentiere hier gerne.

Wenn du kein Programm zur Bearbeitung von Code installiert hast empfehle ich dir Notepad++.
Für unseren Anwendungszweck ist es nahezu perfekt – klein, schnell und flexibel.
Alternativ kannst du die Dateien aber auch einfach mit dem Windows-Editor öffnen.

Wie erstelle ich einen eigenen Widget-Bereich?

Die Erstellung ist eigentlich gar nicht so schwer.

Öffne in einem Texteditor deiner Wahl die functions.php deines Themes. Diese findest du im WordPress-Installationsverzeichnis unter /wp-content/themes/<dein-theme>/

Füge nun folgenden Code-Schnipsel ganz unten ein (aber bitte, falls vorhanden, noch vor ?>).

add_action( 'widgets_init', 'fhw_register_custom_widget_area' );
function fhw_register_custom_widget_area() {
    register_sidebar(
        array(
            'id' => 'neue-widget-area',
            'name' => esc_html__( 'Meine Widget-Area' ),
            'description' => esc_html__( 'Ein eigener Bereich' ),
            'before_widget' => '',
            'after_widget' => '',
            'before_title' => '',
            'after_title' => ''
        )
    );
}

Ersetze nun die kursiv markierten Texte mit Texten deiner Wahl.
neue-widget-area bezeichnet hierbei die eindeutige ID der Area. Diese darf nur einmal vergeben werden.
Meine Widget-Area ist der Name der Area, so wie sie auch  im Adminbereich unter „Widgets“ angezeigt wird.
Ein eigener Bereich ist lediglich die Beschreibung, wie sie im Customizer angezeigt wird.

Der Website-Besucher wird von den drei oben stehenden Texten nichts sehen können. Sie dienen nur der Ansicht und Übersichtlichkeit für dich im Admin-Bereich.

Nun bearbeite eine Webseiten-Datei deiner Wahl, dort wo das Widget angezeigt werden soll und füge folgenden Code dort ein:

<?php dynamic_sidebar( 'neue-widget-area' ); ?>

Beachte, dass hier neue-widget-area mit der oben vergebenen id übereinstimmen muss, sonst fehlt die Verknüpfung und dein Bereich funktioniert nicht.

Speichere nun die Dateien und lade Sie auf deinen Server. Wenn du WordPress lokal installiert hast, entfällt dieser Schritt.

Nun rufe im Adminbereich „Design“ -> „Widgets“ auf. Dort sollte dein neu erstellter eigener Widget-Bereich nun vorzufinden sein.

Du kannst nun also hier Navigationsmenüs, Bilder, Texte, HTML oder viele andere Widgets einbinden – und sie werden genau an der Stelle angezeigt wo du den Code hinterlegt hast.

Gar nicht so schwer, oder?

Fazit

Das Erstellen einer eigenen Widget-Area benötigt kaum Arbeitszeit und bietet sich vor allem dann an, wenn sich Inhalte häufig ändern.
So machen sie in Seitenleisten Sinn, in Fuß- und Kopfbereichen oder auf festen Positionen im Inhalt.
Um also weitere Widgets in deiner Webseite einzubinden ist nicht wirklich viel Arbeit erforderlich und es ist auch nicht unbedingt ein Programmierer dafür notwendig.
Trotzdem ist natürlich ein bisschen Vorsicht geboten – Fehler im Code können Errors auf der Website hervorrufen und dann ist sie nicht mehr aufrufbar.

Hat dir dieser Beitrag geholfen? Dann freue ich mich sehr über dein Feedback in den Kommentaren!

Ein Beitrag von

Fabian Heinz

Fabian Heinz

Schreibe einen Kommentar

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


Weitere Beiträge dieser Kategorie

So erstellst du neue Widget-Bereiche in deinem WordPress-Theme

So schützt du deine Mails einfach mit SPF, DMARC und DKIM

E-Mails sind vermeintlich sicher. Zwar weiß jeder, dass es Spam-Mails gibt – aber dass der Absender gefälscht werden kann weiß kaum jemand. Hier widmen wir uns den Möglichkeiten, das so genannte „E-Mail-Spoofing“ zu verhindern und somit grundsätzlich die Mail-Sicherheit zu erhöhen.
So erstellst du neue Widget-Bereiche in deinem WordPress-Theme

So erstellst du eine neue Menü-Position in deinem WordPress-Theme

Jedes WordPress-Theme hat bereits vordefinierte Menü-Positionen. Oft aber genügen die Positionen nicht; du möchtest an einer bestimmten Position ein eigenes Menü einbinden. Hier zeige ich dir, wie du ganz leicht eine neue Menü-Position in deinem WordPress-Theme erstellen kannst.
Font awesome lokal einbinden

Wie du mit nur 2 Zeilen Code FontAwesome lokal einbindest

Manchmal muss FontAwesome lokal eingebunden werden, dar die Einbindung der Icons über das Content-Delivery-Network (CDN) von FontAwesome nicht DSGVO-Konform ist – somit bleibt nichts anderes übrig als die Icons selbst auf dem Webspace lokal zu hosten. Im Folgenden erfährst  du, wie das ganz einfach mit kaum Aufwand super leicht umsetzen kannst.