Personnaliser barre de recherche PHP / CSS

Bonsoir,

Après plusieurs recherches, je n'ai pas trouvé de réponse à mon problème.
Je créée actuellement mon propre thème Wordpress. Afin d'ajouter une barre de recherche dans mon menu, j'ai ajouté ce bout de code dans mon fichier functions.php :

function add_search_box($items, $args) {
        ob_start();
        get_search_form();
        $searchform = ob_get_contents();
        ob_end_clean();
 
        $items .= '<li id="searchform">' . $searchform . '</li>'; 
        return $items;
}
add_filter('wp_nav_menu_items','add_search_box', 10, 2);

J'aimerais personnaliser la barre de recherche à l'aide du CSS, j'ai donc ajouté un ID afin d'avoir ce bout de code CSS :

#searchform {
    float: right;
    border-style: solid;   
	border-width: 1px; 
	border-color: #FFFFFF;   
	padding: 5px 5px 5px 5px;
}

Toutefois, j'aimerais pousser la personnalisation, et modifier le bouton rechercher etc. Comment dois-je procéder ? Dois-je ajouter de nouveaux ID ? Si oui, à quel niveau ? Merci beaucoup à ceux qui sauront m'aider!
Modifié par Claire-Marie (10 Apr 2016 - 19:57)

Bonjour,
Pour mettre en forme le bouton qui se trouve dans le formulaire de recherche du peux :
a) soit lui affecter un ID spécifique et utiliser un sélecteur # reprenant cet ID (attention, l'ID en question doit être unique sur la page HTML)
b) soit partir du #searchform englobant et indiquer l'élément "button" descendant
Ex. :

#searchform button
{
}

L'espace entre l'ID et le nom de balise signifie "tout élement HTML de type button figurant à l'intérieur de l'ID searchform".
Le même principe s'applique si tu as une zone de saisie de texte ou autre contrôle de saisie dans ce formulaire.
Modifié par sepecat (10 Apr 2016 - 20:29)

Merci sepecat.
La solution

#searchform button {
}

ne fonctionne pas.. Si je veux affecter un ID à ce bouton, à quel endroit du code php dois-je le faire ? Je ne reconnais pas cet élément dans le bout de code là :

function add_search_box($items, $args) {
        ob_start();
        get_search_form();
        $searchform = ob_get_contents();
        ob_end_clean();
 
        $items .= '<li id="searchform">' . $searchform . '</li>'; 
        return $items;
}
add_filter('wp_nav_menu_items','add_search_box', 10, 2);

Encore merci.

Grosso modo, le code HTML qui devra être sérialisé depuis PHP pour créer un formulaire de recherche est semblable à celui-ci :

<form id="X" action="..." method="post">
  <label for="Y">Critère</label>
  <input id="Y" type="text" value="..."/>
  <button type="submit">Rechercher</button>
</form>

Côté CSS :

/* Mise en forme du formulaire X */
#X
{
...
}
/* Mise en forme du bouton Y */
#Y
{
...
}

La fonction add_search_box PHP doit donc fournir le flux HTML décrit ci-dessus (1ère partie) pour être inséré dans la balise LI qui n'a pas besoin, a priori, d'ID :

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

Sur la façon de créer un formulaire, voir :
balise FORM
balise INPUT (champ texte)
balise BUTTON
Tout ceci rédigé de mémoire...

De mémoire - car je ne suis pas chez moi - et pour compléter ce qu'a déjà dit Sepecat. Sur WP il existe une manière simple pour modifier le html du formulaire de recherche par défaut : il faut créer un fichier "searchform.php" à la racine du thème et le configurer selon les spécicifications que vous trouverez sur le codex wp.