kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Suchfeld automatisch zum WordPress-Menü hinzufügen

Seit der WordPress Version 3.0 haben wir die Möglichkeit über das Backend individuelle Navigationsmenüs zu erstellen. Dieses Feature erleichtert nicht nur das Anlegen von Navigationen sondern vor allem auch die spätere Pflege seitens des Kunden oder des Webdesigners.
Nachdem die Unterstützung für diese Menüs im Theme aktiviert ist kann die Navigation entweder per Template-Tag oder per Widget im Theme anzeigen werden. Um diesem Menü nun automatisch auch noch ein Suchfeld hinzuzufügen reicht es die functions.php ein wenig anzupassen.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

Suchfunktion automatisch hinzufügen

Um Menüs im Theme verwenden zu können müssen diese zunächst aktiviert werden. Wie das geht erfahrt Ihr im WordPress-Codex:

wordpress-nav-menu

Jetzt kann mit folgendem Code der Navigationleiste das Suchfeld hinzugefügt werden. Öffnet die function.php und fügt folgenden Code ein. Anschließend erscheint das Suchfeld automatisch als Listenpunkt nach dem Menü.


/* automatisch ein Suchfeld zum wp-nav-menu hinzufügen. */

add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {

        ob_start();
        get_search_form();
        $searchform = ob_get_contents();
        ob_end_clean();

        $items .= '<li>' . $searchform . '</li>';

    return $items;
}
wordpress-nav-menu

via: WP Recipes

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei WordPress-Projekten

Unsere WordPress Agentur ist auf die Entwicklung maßgeschneiderter WordPress-Themes und -Websites spezialisiert. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung eines Projekts benötigst, helfen wir gerne weiter.
WordPress-Leistungsangebot →

Das könnte dich auch interessieren

7 Kommentare

  1. Happyhour

    Verfasst am 2. Februar 2011 um 12:47 Uhr.

    Danke, das klappt super.

    Aber wenn ich mehrere Menüs habe (z.B. im Header, in der Sidebar und im Footer), dann wird in jedem Menü ein Suchfeld angezeigt.

    Weißt du, wie man das verhindern kann?
    Ich will ja nur im Headermenü ein Suchfeld drin haben…

    Danke & schönen Gruß

    • Chris

      Verfasst am 26. April 2018 um 10:21 Uhr.

      add_filter(‚wp_nav_menu_items‘,’add_search_box_to_menu‘, 10, 2);
      function add_search_box_to_menu( $items, $args ) {
      if( $args->theme_location == ‚primary‘ )
      return $items.““.get_search_form(false).““;
      return $items;
      }

  2. Jürgen

    Verfasst am 22. Juli 2012 um 21:58 Uhr.

    Vielen Dank für den guten Tipp!!

  3. Kai

    Verfasst am 7. Juni 2014 um 18:27 Uhr.

    Danke für den super Tipp! Funktioniert SUPER.
    Könntest Du mir noch einen Tipp geben, wie ich das Suchfeld nach rechts ausrichte.

    Danke

    • Jonas Hellwig

      Verfasst am 7. Juni 2014 um 19:53 Uhr.

      Gib dem Listenelement <li> einfach eine Klasse und floate die Klasse über CSS nach rechts. Das sollte funktionieren.

  4. Lea Friedsam

    Verfasst am 15. Juni 2016 um 13:48 Uhr.

    Hallo Zusammen,
    für ein Projekt in der Uni muss einen WP Blog erstellen. Ich habe die Suchfunktion jetzt via php ins main menu eingefügt. Leider verstehe ich auch anhand der vorherigen Kommentare nicht, wie ich sie richtig in der Navigation positionieren kann. Würde mich sehr über eine Antwort freuen. Mit freundlichen Grüßen!!!

  5. Carolina Streng

    Verfasst am 28. Januar 2017 um 22:09 Uhr.

    Vielen lieben Dank,
    der Code hat super funktioniert bei mir.
    Jetzt habe ich allerdings das Problem, dass es zwar in der normalen Ansicht funktioniert, in der responsiven Ansicht auf dem Handy erscheint allerdings kein Suchen.
    Gibt es da noch irgendeinen Tipp für mich, wie ich es auch in der mobilen Ansicht sichtbar mache? Gerade dafür wäre es mir nämlich wichtig.
    Vielen Dank schonmal im Voraus
    Gruß Carolina

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.