Zukünftig möchte ich euch in mehrern Einführungs- Tutorials grundlegende WordPress Funktionen und deren Umsetzung in eigenen Themes näher bringen. Zum einen um Einsteigern bei der WordPress Theme Entwicklung zu unterstützen und zum anderen als eigenen kleine “how-to” Sammlung.
Fangen wir mit dem Einrichten eines individuellen Widget Bereiches an.

Grundsätzlich: Widgets in WordPress sind toll.

Bearbeiter können im WordPress Backend einfach per Drag-and-Drop Inhalte hinterlegen, Menüs platzieren oder andere tolle Sachen machen. Ohne das am Quelltext etwas verändert werden müßte. In Sekunden können diese Inhalte geändert oder wieder gelöscht werden. Viele Plugins kommen mit einer Vielzahl zusätzlicher Widgets daher die genauso einfach platziert und administriert werden können.
Grundvoraussetzung für das platzieren von Widgets in sogenannten Widget Areas ist aber das diese Bereiche im Theme definiert sind.

Dies erfolgt in zwei Schritten:
1. Ein Widget Area in der functions.php Datei des Themes registrieren
2. Die Ausgabe der Widget Inhalte im Theme selber bestimmen

1. Widget Area in der functions.php Datei registrieren

Damit nun im WordPress Backend auf einfache Art und Weise Widgets angelegt und veröffentlicht werden können, muss WordPress zunächst mitgeteilt werden das es ein oder mehrere Widget Bereiche gibt.
Dies läuft über die functions.php.
Wird ein Theme neu erstellt muss einfach eine leere Datei mit dem entsprechenden Namen im Hauptverzeichnis des Themes angelegt werden. Wird ein vorgefertigtes Theme genutzt findet sich mit allergrößter Wahrscheinlichkeit bereits eine Datei mit diesem Namen im Hauptverzeichnis.
Hier wird dann folgendes hinterlegt:

function deinthemename_widgets_init() {
register_sidebar(array(
'name'          => 'Erstes Widget',
'id'            => 'erstes_widget',
'description'   => 'Mein erstes selbst angelegtes Widget Area',
'before_widget' => '<div class=”juhu_ein_widget”>',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'deinthemename_widgets_init' );
Achtung: Befindet sich noch gar nichts in der functions.php Datei muss noch vor der Funktion der öffnende PHP Tag <?php notiert werden, und am Ende der schließende: ?>

Befinden sich bereits Funktionen in der Datei ist dies bereits der Fall. Dann muss der Code oben eben nur zwischen die beiden Tags kopiert werden.
Wichtig bei der Funktion ist eigentlich nur die Angabe einer eindeutigen ID. Über diese funktioniert die Zuordnung zwischen angelegtem Widget im Backend und Ausgabe der Inhalte im Frontend.

Der Rest ist im Prinzip optional. Der “name” und die “description” wird beispielsweise nur im Backend angezeigt und soll die Zuordnung ermöglichen. Die Angabe dieser Werte ist also durchaus sinnvoll aber nicht zwingend.
Die anderen Angaben helfen einem das Erscheinungsbild des Widgets individuell per CSS festzulegen.

Ist die Arbeit an der functions.php abgeschlossen können bereits Widgets im WordPress Backend der neuen Position zugeordnet werden.
Im Frontend wird allerdings noch nichts angezeigt, da wir WordPress noch nicht mitgeteilt haben wo das Widget erscheinen soll.

erstes widget in wordpress selber im neuen widget area anlegen

„Mein erstest selbst angelegtes Widget“ – So siehts dann im WordPress Backend aus.

2. Die Ausgabe des Widget Inhalts im Theme

Jetzt wirds einfach. Es muss nur der folgende PHP Code:

<?php if ( is_active_sidebar( 'erstes_widget' ) ) : ?>
<?php dynamic_sidebar( 'erstes_widget' ); ?>
<?php endif; ?>

an der Stelle im Theme hinterlegt werden, auf der der Widget Inhalt erscheinen soll.
Der Code Schnipsel überprüft ob ein Widget veröffentlicht ist, wenn ja wird sich der Inhalt geholt und ausgegeben.

Das läßt sich noch mit etwas HTML anreichern:

<?php if ( is_active_sidebar( 'erstes_widget' ) ) : ?>
<div class=”blabla”>
<?php dynamic_sidebar( 'erstes_widget' ); ?>
</div>
<?php endif; ?>

Tatatata: Jetzt erscheint an der definierten Stelle das angelegte und zugeordnete Widget.

Weiterführende Informationen zum Thema:

Bisherige Kommentare (Selber ein Kommentar hinterlassen)

  • Chris sagt:

    Hi,

    ich würde es gerne mal testen. Zuvor würde ich aber gerne wissen ob es mit PHP7 und dem neusten WordPress kompatibel ist.

    Danke

  • Daniel sagt:

    Wenn ich den Code in meine Website einbinde sind da schon gleich widgets drinne wie zb Suche oder Archive. Kann man das im Script ausstellen dass das nicht mehr so ist?

  • Holger sagt:

    Das kann man leider nicht generell sagen, da es vom Theme abhängt und wie dieses aufgebaut ist. Und Themes gibts Millionen…
    Generell: Wenn dein Theme bereits eine links Spalte hat finde heraus wo dieser Bereich in den php Dateien definiert wurde und setze das Widget Area dann da rein.

  • Robert sagt:

    Hey mein lieber

    Den Widget-code ist sehr einfach:

    Habe ihn auch schon in einen Beitrag eingefügt und voila…

    ABER.. ich möchte das Widget auf der linken Seite, wo man oft das Menu oder ein Kontaktformular oder was auch immer anzeigen möchte platzieren.

    Also dort wo die Primary Eidget area left platziert ist.
    Wie bekomme ich die da hin?

    Lieber Gruss und danke für Deine Hilfe in der Community

  • Holger sagt:

    Am besten Ganz ans Ende.
    Auf jedenfall NACH dem < ?php

  • Benni sagt:

    Hallo, ich konnte das ganze wiederherstellen…
    Möchte die neue Funktion gern in mein neu erstelltes Child Theme einbauen, die functions.php lautet bisher wie folgt:

    <?php
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    }

    Wo füge ich den neuen Teil jetzt ein?

  • Holger sagt:

    Ansonsten kannst du mir die functions.php auch mal schicken oder hier posten. Dann sieht man es meist schnell

  • Holger sagt:

    Also du musst nur den Teil den du hinzugefügt hast wieder rückgängig machen. Also das löschen was du hinzugefügt hast…

  • Benni sagt:

    Hallo Holger,
    danke schon einmal für die schnelle Antwort.
    Weißt Du eine Möglichkeit, wie ich die Änderungen der FUNCTIONS rückgängig machen kann, bzw. korrekt abändern kann?
    Ich komme leider nicht über die genannte Fehlermeldung hinaus und nicht in den Admin Bereich hinein um irgendetwas zu tun… :(
    sonnige Grüße,
    Benni

  • Benni sagt:

    Hallo Holger, danke schon mal für die schnelle Antwort.
    Hast Du einen Tipp, wie ich wieder in den Editor gelange und die FUNKTIONS rückgängig machen kann, bzw. noch einmal richtig editieren kann?
    Ich komme nicht mehr in den Admin Bereich, genau genommen nicht mehr über die genannte Fehlermeldung hinaus.
    sonnige Grüße.

  • Holger sagt:

    Das hört sich so an als wäre irgendwo ein Zeiche zu viel oder zu wenig drin. Wichtig ist auch das du die Funktion NACH dem öffnenden

  • Benni sagt:

    Hallo,
    ich habe gestern versucht die Erweiterung in die „function-php“ einzufügen,
    habe da aber wohl etwas vermasselt…
    Ich kann meine Seite (www.surfers-gathering.de) nun gar nicht mehr aufrufen,
    weder auf normalem weg, noch über meinen Admin Login link.
    Habt Ihr da einen Tipp für mich, wie ich das zurück setzen kann oder so?

    Es erscheint folgende Fehlermeldung:

    Die Website kann diese Seite nicht anzeigen
    HTTP 500

    Wahrscheinlichste Ursachen:
    •Die Website wird momentan gewartet.
    •Die Website enthält einen Programmierfehler.
    Mögliche Vorgehensweise:
    Aktualisieren Sie die Seite.
    Gehen Sie zur vorherigen Seite.
    Weitere Informationen Weitere Informationen

    Dieser Fehler (HTTP 500 Interner Serverfehler) bedeutet, dass die Website, die Sie besuchen möchten, ein Serverproblem hat, durch das die Anzeige der Webseite verhindert wird.
    Weitere Informationen über HTTP-Fehler erhalten Sie in der Hilfe.

  • Andrea sagt:

    Hallo, :)

    danke für die tolle Anleitung! Ich habe nahc ANleitung eine Widget-Area in der funktions.php registriert und lasse diese nur auf der 404-Seite ausgeben. Im Backend kann ich ganz normal meine Widgets in die Area ziehen und nach mienen Wünschen modifizieren. Umgehend wird die Sidebar dann auch auf der Seite korrekt ausgegegen. Verlasse ich jedoch den Widget-Bereich und rufe ihn später wieder auf, dann ist zwar die Area da, aber alle Widgets die sich darin befanden sind weg. Auf die fertige Seite hat das scheinbar keinen Einfluss. Aber sobald man etwas an den bestehenden Widgets ändern möchte muss man die gesamte Sidebar neu zusammenklicken und konfigurieren.
    Woher könnte dieses Problem rühren?

    vielen Dank und liebe Grüße
    Andrea

  • Holger sagt:

    Hallo!
    Normalerweise müßte das ganze einfach sein: Einfach die Sidebar vor dem Hauptbereich laden. Wie genau das bei dem individuellen Theme geht müßtest du aber bei dem Theme Anbieter erfragen. Weder kenne ich das Theme direkt noch kann ich dir dafür Support anbieten.

  • Hi Holger,

    Bei meinem jetzigen Theme (Sentient Theme bei Woocommerce Gekauft) werden die Widgets ganz normal in der Sidebar angezeigt. In der mobilen Ansicht aber erst nach dem Content ganz unten. Gibt es eine Möglichkeit die Widgets in der mobilen Ansicht ganz oben vor dem Content erseinen zu lassen. Optimal wäre es wenn diese nun oben angezeigt weren in der Desktop-Ansicht jedoch wie gehabt in der Sidebar bleiben. Die Platzierung des Widgets (Text Widget) sollte sich quasi nur im mobile Theme ändern. Vielleicht hast du ja einen kleinen Tipp. :-)

  • Holger sagt:

    Sorry, mein Fehler.
    Habe einmal die Funktion:
    deinthemename_widgets_init()

    benannt,
    dann aber die Aufgerufen:
    add_action( ‚widgets_init‘, ‚deinthemenname_widgets_init‘ );

    also einmal „deinthemename“ vs. „deinthemenname“.
    Die Funktion muss aber natürlich in beiden Fällen gleich lauten.
    Ist im Prinzip nur ein „n“ zuviel.

    Danke für das Feedback. Werde ich gleich auch im Text selber ändern.

  • Ralf sagt:

    Hallöchen,

    also wenn ich den Code oben in die functions.php setze, geht gar nichts mehr :/

    function deinthemename_widgets_init() {
    register_sidebar(array(
    ’name‘ => ‚Erstes Widget‘,
    ‚id‘ => ‚erstes_widget‘,
    ‚description‘ => ‚Mein erstes selbst angelegtes Widget Area‘,
    ‚before_widget‘ => “,
    ‚after_widget‘ => “,
    ‚before_title‘ => “,
    ‚after_title‘ => “,
    ) );
    }
    add_action( ‚widgets_init‘, ‚deinthemenname_widgets_init‘ );

    Habe den Code direkt unter

    <?php
    /**
    * Main WordPress API
    *
    * @package WordPress
    */

    .. gesetzt.

    Admin war dann weg und auch die komplette Seite. Lediglich eine Fehlermeldung trat auf.

    Fatal error: Call to undefined function add_action() in /var/www/htdocs/ks364/html/maxxtexx/wp-includes/functions.php on line 20

    Gruß

  • Holger sagt:

    Wie genau lautet denn die Fehlermeldung? Finde leider keine w3c Validator Fehlermeldung die mit dem oben beschriebenden Code in Verbindung steht….

  • Steffen sagt:

    Hallo
    ich habe das im Grunde auch so gemacht und es Funktioniert ja auch, aber als ich nundie Seite Valid machen wollte zeigt er mir das als Fehler an. Hat hier vieleicht jemand eine Lösung Gefunden wigets Valid einbauen zu können. Denn Fehler kann man ja durch meine Website und w3c sehen ;-)

    Vielen Dank
    LG Steffen

  • Holger sagt:

    Wenn der Admin Bereich nicht mehr geht dürfte es an den Änderungen an der functions.php liegen. Mach die mal rückgängig und versuche es dann erneut.
    Ansonsten schick mir mal deine functions.php Datei an office@understrap.com

  • modewunsch sagt:

    Ich hab das probiert und aufeinmal ist meine komplette website weg!!! ^o^

    Bin richtig am verzweifeln gerade. Ich weiß jetzt nicht ob es daran lag, aber ich kann noch nichtmal mehr auf den admin bereich zu greifen! Alles was mit modewunsch.de anfängt ist einfach komplett weiß

    Kannst du mir da vllt. helfen??

  • Holger sagt:

    Wenn es zu dem Gallerie-Plugin ein Widget gibt und dies an einer bestimmten Stelle des Themes ausgegeben werden soll, dann schon. Neue Widget Positon einbauen und in der functions.php registrieren und das Widget dann im WordPress Backend auf die neue Position packen.

    Wenn es darum geht wie man generell die Ausgabe eines bestimmten Plugins in einem eigenen Theme steuern kann, kann ich dir hier leider nicht weiterhelfen. Das hängt dann von dem speziellen Plugin ab. Und da wäre der Plugin- Entwickler wohl der richtige Ansprechpartner

  • kajetan sagt:

    hi!

    gehe ich auch so vor, wenn ich ein installierten aktives plugin (Bildergalerie) in ein selber geschrieben theme einbauen will? DANKE, bin völlig ahnungs- und hilflos …


Kommentar schreiben (* Pflichtfelder)