WordPress How-To: Eigene Widgetbereiche im Theme anlegen

Das tolle an WordPress ist, dass es so flexibel ist und man die eigene WordPress-Seite auch relativ leicht (z.B. über ein Child-Theme) erweitern und so individuell anpassen kann. In heutigen kleinen Tutorial möchte ich dir zeigen, wie man in einem WordPress-Theme eigene Widget-Bereiche hinzufügen kann. Denn Widgets können natürlich nicht nur in der Sidebar integriert werden. Oft ist es auch hilfreich Widget-Bereiche für den Header, Footer oder sogar auf Seiten anzulegen.

Eigene Widget-Bereiche können auch sehr praktisch sein, wenn du eine WordPress-Seite für einen Kunden erstellst. So kann dein Kunde später leicht Webseiten-Inhalte über Widgets erweitern und anpassen, ohne selbst in den Theme-Code einsteigen zu müssen. Und so funktioniert’s:

1. Den neuen Widget-Bereich über die functions.php anlegen

Wenn du ein bereits bestehendes Theme erweitern möchtest, solltest du auf jeden Fall ein eigenes Child-Theme für deine individuellen Widget-Bereiche anlegen. Baust du dein eigenes Theme oder ein Theme für einen Kunden musst du natürlich direkt in der functions.php Datei des Themes arbeiten.

In deinem Child-Theme kannst du auch eine eigene functions.php Datei anlegen. Es wird dann zuerst der Code der functions.php des Eltern-Themes aufgerufen und danach der Code der functions.php des Child-Themes. Um einen neuen Widget-Bereich zu definieren wird der folgende Code innerhalb der functions.php benötigt:

function yourthemename_widgets_init() {
	register_sidebar( array(
		'name'          => __( 'Custom Widget Area Header', 'yourthemename' ),
		'id'            => 'sidebar-custom-header',
		'description'   => __( 'Custom widget area for the header of my theme', 'yourthemename' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );
}
add_action( 'widgets_init', 'yourthemename_widgets_init' );

So kannst du z.B. ein Widget-Bereich für deinen Header erstellen. Möchtest du zwei oder mehr Widget-Bereiche anlegen, musst du einfach nur den Bereich register_sidebar wiederholen und natürlich darauf achten, dass du deinen Widget-Bereichen jeweils einen eigenen Namen und eine eigene ID gibst.

function yourthemename_widgets_init() {
	register_sidebar( array(
		'name'          => __( 'Custom Widget Area Header', 'yourthemename' ),
		'id'            => 'sidebar-custom-header',
		'description'   => __( 'Custom widget area for the header of my theme', 'yourthemename' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );
	
	register_sidebar( array(
		'name'          => __( 'Custom Widget Area Footer', 'yourthemename' ),
		'id'            => 'sidebar-custom-footer',
		'description'   => __( 'Custom widget area for the footer of my theme', 'yourthemename' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );
}
add_action( 'widgets_init', 'yourthemename_widgets_init' );

Wenn du diese Änderungen gespeichert hast, kannst du deine neuen Widget-Bereiche im Adminbereich unter „Design / Widgets“ bereits in der rechten Spalte sehen und auch schon Widgets in die Bereiche integrieren.

Eigene Widget-Bereiche unter Design / Widgets.
Eigene Widget-Bereiche unter Design / Widgets.

2. Die neuen Widget-Bereiche im Theme einbinden

Allerdings musst du jetzt noch bestimmen, wo die neuen Widget-Bereiche in deinem Theme auftauchen sollen, bisher hast du ja nur die Widget-Bereiche angelegt. Dazu musst du jetzt z.B. in der header.php oder in deiner footer.php die Widget-Bereiche dynamisch aufrufen.

Dynamisch bedeutet, dass die Widget-Bereiche nur angezeigt werden, wenn auch wirklich Widgets in den Bereichen eingefügt sind und das die Inhalte immer wieder über den Widget Admin-Bereich angepasst werden können, ohne das eine Anpassung des eigentlichen Theme-Codes nötig ist.

Den neuen Widget-Bereich für den Header kannst du mit Hilfe der dynamic_sidebar Funktion (siehe Info im WordPress-Codex) in der header.php deines Themes oder Child-Themes integrieren.

<?php if ( is_active_sidebar( 'sidebar-custom-header' ) ) : ?>
	<div id="sidebar-header">
		<?php dynamic_sidebar( 'sidebar-custom-header' ); ?>
	</div>
<?php endif; ?>

Jetzt wird der neue Widget-Bereich im Header angezeigt, wenn Widgets in den Bereich integriert wurden. Der Widget-Bereich ist in einem div-Container mit der ID #sidebar-header angelegt, diesen Div-Container kannst du natürlich so benennen, wie du es benötigst, um deine eigene CSS-Styles anzulegen.

3. Widget-Bereiche auf Seiten integrieren

Widget-Bereiche können nicht nur für Sidebars, den Footer- oder Header-Bereich praktisch sein. Vor allem, wenn du WordPress als CMS nutzen möchtest, können Widget-Bereiche auf Seiten eine hilfreiche Option sein, um schnell eine Seite mit individuellen Inhalten anzulegen. Ein praktisches Plugin ist z.B. das Widget on Pages-Plugin.

Mit Hilfe von „Widgets for Pages“ kannst du ganz schnell eigene Widget-Bereiche anlegen (so viele du möchtest) und in die eigenen Widget-Bereiche über „Design / Widgets“ deine Widgets einfügen.

Die Plugin-Einstellungen von Widget on Pages.
Die Plugin-Einstellungen von Widget on Pages.

Die neuen Widget-Bereiche mit eigenem Shortcode
Die neuen Widget-Bereiche mit eigenem Shortcode

Jetzt kannst du mit Hilfe eines Widget-Bereich-Shortcodes den neuen Widget-Bereich auf einer Seite einbinden und schon wird er auf der entsprechenden Seite angezeigt.

widget-on-pages-shortcode

Wie du siehst gibt es wirklich jede Menge Möglichkeiten, um Widgets zu nutzen und WordPress so noch flexibler zu machen. Widgets sind außerdem auch für WordPress-Newbies leicht zu handhaben und eignen sich daher sehr gut, wenn du WordPress für deine Kundenprojekte einsetzt.

Deine weiteren Tipps

Welche tollen Tricks kennst du noch, die sich mit Widgets anstellen lassen und für welche Bereiche eines WordPress-Themes findest du Widgets besonders gut geeignet? Über dein Feedback und deine weiteren Tipps freue ich mich sehr!

23 Kommentare

  1. Liebe Ellen,

    Du gibst Dir wirklich immer viel Mühe mit Deinen Beiträgen und erklärst sehr anschaulich. Weiter so!

    Viele Grüße aus Berlin
    Caren

  2. Hallo Ellen,
    danke für die super Tipps.
    Damit ist es mir vermutlich endlich möglich, eine große Seite von Drupal nach WP umzuziehen.
    Muss das noch genau probieren.

    Grüße aus Black Forrest
    Thomas

  3. Hallo Ellen,

    Ich habe eine Frage zu den Widgets bzw. Zu der Sidebar.

    Ist es irgendwie möglich, ohne selbst via PHP etwas zu programmieren, ein Unter-Menü auf der Sidebar nur auf bestimmten Seiten anzeigen zu lassen? Gibt es auf eurer Seite vielleicht sogar einen Artikel dazu?

    Würde mich sehr über eine Antwort freuen.

    Liebe Grüße
    Stavros

  4. Hallo,

    Super hat geklappt, danke.

    Dank diesem Artikel konnte ich eine individuelle Filterfunktion für die Produkte auf meiner Seite bauen.

    Viele Grüße
    Artur

  5. Hallo,

    wie kann ich denn dem Widgets on Pages Plugin mitgeben, wie ich die Widgets dargestellt haben möchte? z.B.um das Widget das tag etc. und welches tag vor dem title.

    Super tutorial! Auch deine anderen Beiträge helfen mir sehr weiter!

    Gruß
    Sven

  6. Hallo Ellen,

    Ihre Tutorials sind einfach großartig, alles funktioniert prima.
    Leider gelingt es mir (trotz sehr langer PHP-Programmiererfahrung) nicht, jQuery-Widgets (wie etwa die JQuery Mega Menu Widgets) zu integrieren…

    • Hab‘ s nochmal gecheckt: Scheint mir doch eher ein CSS-Konflikt mit anderen Widgets zu sein, als ein jQuery-Problem…

  7. Hi,

    als erstes möchte ich sagen das, dass How-To super ist. Ich habe aber noch ein kleines Problem. der Titel div ist innerhalb es widget div. Mein Titel soll mit etwas Abstand über dem widget stehen. ist dieser aber im widget div wird das nichts. gibt es eine Möglichkeit das zu ändern.

  8. …Ich wollte einen Besucherzähler im Footer und habe es ausprobiert aber irgendwie funktioniert es nicht.

  9. Hallo Ellen,

    immer wieder lande ich beim Googlen nach WordPress-Themen hier bei Dir. Danke für die vielen Tipps und Anleitungen, auch für diese hier. Klar, präzise und kurz, damit kann ich arbeiten.

    Nochmals vielen Dank

    Manni

  10. Hallo Ellen,

    im deutschsprachigen WordPress-Bereich seid ihr wirklich top! Vielen Dank für den tollen Support und die super vielen, interessanten Beiträge!!
    Macht weiter so!!!
    Grüße,
    Konstantin

  11. Hallo,
    jetzt muss ich mich hier auch einfach noch mal bedanken, da ich diesen Artikel soooo oft „verwende“ dass ich ihn mir jetzt auch in den Favoriten abgespeichert habe :-)
    Danke,
    Andy

  12. Hallo Ellen!

    Danke für den Artikel. Leider habe ich – anders als die anderen hier – Probleme bei der Umsetzung. Ich will eine zusätzliche Widget-Area im Moka-Theme einbinden, aber wenn ich den beschriebenen Code in der functions.php des Child-Themes einbinde, erhalte ich immer die Fehlermeldung, dass eine Funktion aufgerufen würde, die schon einmal aufgerufen war („Cannot redeclare moka_widgets_init() (previously declared in…)“)

    Vielleicht weiß jemand hier auf Anhieb, was ich falsch mache?

    Danke und herzliche Grüße,
    Patrik

    • Vermutlich hast du die functions.php komplett aus dem Originaltheme kopiert und ins Childtheme eingefügt. Richtig wäre, in die functions.php des Childthemes NUR den zusätzlichen Code zu schreiben ;-)

      Grüße,
      Robert

  13. Liebe Ellen,

    genau das was ich die ganze Zeit gesucht habe. Ich werde jetzt mal versuchen den Widgetbereich im Header zu integrieren, und dann ein Quiz bzw. ein Test oben einzubauen, ich bin gespannt wie es läuft.

    Danke für die guten Artikel!

  14. Sebastian 30. Juni 2015

    Hallo zusammen, ich benutze Widgets on Pages. Mein Problem, nachdem ich ein widget unter dem plugin eingerichtet habe kann ich es unter design/widget zwar einsehen und verschieben aber ich kann den Code nicht kopieren?! Und wenn ich ihn manuel auf einer angelegten Seite eintippe wird er nicht dargestellt. Kennt jemand das Problem?

    Wahrscheinlich stelle ich mich bloß zu bl… an

    Danke jeden Rat.
    Sebastian

  15. Hallo Ellen,

    dein Beitrag hat mir sehr geholfen, mein erstes Widget für einen Kunden zu erstellen. Funktionierte genauso wie beschrieben. Prima :-)

    Lieben Dank dafür und viele Grüße aus Stuttgart!

  16. Hallo, super, für einen Unwissenden so verständliche Anleitungen lesen zu dürfen :-)
    Frage: [widgets_on_pages id=“Name“] zeigt keine Wirkung. Habe als Startseite eine statische Seite. geht das da nicht?
    Erika

  17. Hallo, ja, sehr interessant. Aber wie kann ich diese Bereiche schützen? Soll heißen: Ich hätte gerne mehrere, verschiedene, passwortgeschützte Kundenbereiche. Geht das überhaupt oder muss ich dann wohl eher ein umfangreiches Plug-Inn, wie z.B. WP Custom Area einsetzen? Vielen Dank im Voraus.
    Lieben Gruß
    Patrick

  18. Habe die Programmzeilen, aber ohne die Nummern, exakt in eine funcions.php im Child-Theme eingetragen. Und auch die Zeilen in die header.php eingtragen. Für yourthemename habe ich den Namen des Haupt-Theme angegeben.
    Wenn ich jetzt das Child-Theme aktiviere, werden jetzt die Original – Programmzeilen (Quelltext) im Header der Internetseite angezeigt. Sonst hat sich nichts geändert. Das ist ja nicht so gedacht.

    function quodlibet_widgets_init() {
    register_sidebar( array(
    ´name´ =>__( ´Custom Widget Area Header´ , ´ quodlibet ´ ),
    ´id´ => ´sidebar-custom-header´,
    ´description´ =>__( ´Custom widget area for the header of my theme´, ´ quodlibet ´ ),
    ´before_widget´ => ´´,
    ´after_widget´ => ´´,
    ´before_title´ => ´´,
    ´after_title´ => ´´,
    ) );
    register_sidebar( array(
    ´name´ =>__( ´Custom Widget Area Footer´ , ´ quodlibet ´ ),
    ´id´ => ´sidebar-custom-footer´,
    ´description´ =>__( ´Custom widget area for the footer of my theme´, ´ quodlibet ´ ),
    ´before_widget´ => ´´,
    ´after_widget´ => ´´,
    ´before_title´ => ´´,
    ´after_title´ => ´´,
    ) );
    }
    add_action( ´widgets_init´, ´ quodlibet_widgets_init´ );

    im header.php

    was läuft falsch?
    Hinweis: Das Original-Theme hat keine functions.php

Hinterlasse eine Antwort

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