Wie du neue Widget-Bereiche mit einem Child Theme in WordPress anlegen kannst

In diesem Tutorial zeige ich dir, wie du mit einem Child Theme und etwas Code ganz einfach neue Widget-Bereiche für dein Theme registrieren und anzeigen lassen kannst.

Zusätzliche Bereiche für Widgets unter einzelnen Beiträge sind häufig praktisch, um beispielsweise Werbebanner oder eine Newsletter-Formular zu zeigen. Vor zwei Wochen habe ich für diesen Anwendungsfall bereits das Plugin Widget Areas hier im Blog vorgestellt.

Das Hinzufügen von weiteren Widget-Bereichen ist aber auch ohne den Einsatz von Plugins möglich, indem mit einem Child Theme neue Sidebars registriert und im Theme angezeigt werden. Dieses Tutorial zeigt, wie du für das neue Standard-Theme TwentySeventeen mit einem Child Theme Widgets unter den Beiträgen angezeigen lassen kannst.

Widget-Bereich im WordPress Backend registrieren

Als Erstes muss ein Child Theme für TwentySeventeen erstellt werden – wer dafür Hilfe benötigt, dem empfehle ich meine Schritt-für-Schritt Anleitung für Child Themes.

Zum Anlegen eines neuen Widget-Bereichs im WordPress Backend benötigen wir folgenden, kleinen Code Schnipsel, welcher in der functions.php des Child Themes hinzugefügt wird:

function twentyseventeen_child_widgets_init() {

	register_sidebar( array(
		'name'          => esc_html__( 'After Posts', 'twentyseventeen-child' ),
		'id'            => 'sidebar-after-posts',
		'description'   => esc_html__( 'Appears below single posts.', 'twentyseventeen-child' ),
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'twentyseventeen_child_widgets_init' );

Die neue Sidebar wird mit der Funktion register_sidebar() erstellt. Mit den Parametern kann der Name, ID, Beschreibung sowie der verwendete Wrapper HTML Code des Widgets definiert werden. Wichtig ist, dass die Funktion zur Registrierung der Widgets mit dem widgets_init Hook in WordPress eingeklinkt wird.

Nach dem Hinzufügen des Codes sollte unter Design → Widgets und im Customizer der neue Widget-Bereich After Posts zur Verfügung stehen.

Du kannst zum Testen gleich ein paar Widgets hinzufügen.

Widget-Bereich im Theme anzeigen

Während unser neuer Widget-Bereich im WordPress Backend bereits voll funktionsfähig ist, werden die Widgets noch nirgends im Frontend angezeigt. Das ändern wir nun.

Mit einem Child Theme können die Template Dateien des Parent Themes überschrieben werden, um Änderungen vorzunehmen. Wir kopieren daher die single.php von TwentySeventeen in unser Child Theme, um es dort zu modifizieren und den neuen Widget-Bereich hinzuzufügen.

Zur Anzeige der Widgets fügen wir folgenden Code Schnipsel hinzu, direkt oberhalb des Kommentar-Bereichs. Natürlich können die Widgets je nach Wunsch auch an einer anderen Stelle eingefügt werden.

if ( is_active_sidebar( 'sidebar-after-posts' ) ) : ?>

    <div class="sidebar-after-posts widget-area">
        <?php dynamic_sidebar( 'sidebar-after-posts' ); ?>
    </div><!-- .widget-area -->

<?php endif;

// If comments are open or we have at least one comment, load up the comment template.

Mit is_active_sidebar() wird überprüft, ob sich Widgets in der Sidebar befinden. Falls ja, wird die Sidebar mit dynamic_sidebar() angezeigt. Für beide Funktionen wird die ID des Widget-Bereichs als Parameter übergeben, welche wir vorher bei der Registrierung der Sidebar definiert haben.

Optional: Zusätzliches Styling mit CSS

Im Normalfall übernehmen die Widgets das Design des Themes, sodass meistens kein zusätzliches Styling nötig ist.

In unserem Beispiel für TwentySeventeen fügen wir nur noch etwas Abstand nach oben für die neue Sidebar hinzu, damit diese nicht direkt unter dem Artikel klebt. Der CSS Code kann in die style.css des Child Themes eingetragen werden:

.sidebar-after-posts {
    margin-top: 5em;
}

Und das wars auch schon.

Mit zwei kleinen Code Schnipseln im Child Theme haben wir eine neue Sidebar unter den Beiträgen hinzugefügt. Wer möchte, kann nun die gleiche Sidebar auch noch an anderen Stellen im Theme ausgeben lassen, zum Beispiel unter statischen Seiten (Tipp: page.php).

Du hast Anregungen oder Fragen zu diesem Tutorial?

Schreib mir gerne einen Kommentar!