Suche unter WordPress erstellen

Nicht viele werden auf die Idee kommen eine Suchseite für ihr WordPress-Theme zu erstellen. Bei den meisten Themen ist so was mit drin, oder man kann ein Widget in die Sidebar oder den Footer einbauen. Hier ist das anders. Das Theme Harrison hat in der kostenlosen Variante keine Suche integriert und Sidebar und Footer nutze ich nicht.

Die Themen bringen normalerweise schon einige Dateien mit, die ein „search“ im Namen tragen. Wobei search.php keine Suchseite ist, sondern die Vorlage zum Anzeigen der Suchergebnisse. Eine weitere Datei heißt searchform.php. Diese Datei enthält das Suchformular für zum Beispiel die Sidebar. Die Vorlage, die die Suche enthält, trägt den Namen searchpage.php und muss in meinem Fall erst erstellt werden. Grundsätzlich läuft das wie folgt ab.

  1. Nutzt eine bereits im Theme vorhandene Vorlage, wie zum Beispiel page.php. Öffnet sie mit einem Texteditor und speichert sie als searchpage.php ab.
  2. Ändert diese Datei ab.
  3. Erzeugt im WordPress Backend eine neue Seite „Suche“ und wählt als Template die neu erzeugte Vorlage
  4. Erweitert das Menü um diese neue Seite.

Das alles und auch die Einzelheiten erklärt ein Artikel unter WordPress.org. Allerdings steht dann ein „Suche“ im Menü. Das schicke Icon, das auf fast jeder Seite zu finden ist, fehlt. Das lässt sich jedoch mit etwas CSS nachrüsten.

Am einfachsten ist es den jetzt noch vorhandenen Text auszublenden. Aber nicht via display: none oder visible: hidden sondern über nachfolgenden Code.

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

Fehlt noch das Icon. Das wird per Hintergrund nachgerüstet. Das passende Icon bekommt man hier.

background-image: url("./assets/icons/search.png");
background-repeat: no-repeat;
background-position: center;