header.php et footer.php

Pourquoi séparer header et footer ?

Tous les templates (index.php, page.php, single.php…) partagent le même en-tête HTML et le même pied de page. Au lieu de les dupliquer, on les place dans header.php et footer.php, puis on les inclut avec des fonctions WordPress.

get_header() — inclut header.php
get_footer() — inclut footer.php
get_sidebar() — inclut sidebar.php

Écrire header.php

header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<?php wp_body_open(); ?>

<header class="site-header">
  <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="site-title">
    <?php bloginfo( 'name' ); ?>
  </a>
  <nav class="main-nav">
    <?php
      wp_nav_menu( [
        'theme_location' => 'primary',
        'container'      => false,
        'menu_class'     => 'nav-list',
        'fallback_cb'    => false,
      ] );
    ?>
  </nav>
</header>

Les fonctions clés

wp_head() — obligatoire

Place ce hook juste avant </head>. WordPress et les plugins l'utilisent pour injecter leurs styles, scripts et balises meta. Ne jamais l'oublier — sans lui, les plugins ne fonctionnent plus.

language_attributes()

Injecte l'attribut lang sur la balise <html> selon la langue configurée dans WordPress (lang="fr-FR").

body_class()

Ajoute des classes CSS dynamiques sur <body> selon le contexte : home, single, page, category-tutoriels, etc. Très utile pour le CSS ciblé.

bloginfo()

Retourne des informations sur le site. Les plus utilisées :

bloginfo('name') — nom du site
bloginfo('description') — slogan
bloginfo('charset') — encodage (UTF-8)
bloginfo('template_url') — URL du dossier du thème

home_url()

Retourne l'URL de la page d'accueil. Toujours utiliser esc_url() autour pour sécuriser la sortie.

Écrire footer.php

footer.php

<footer class="site-footer">
  <p>&copy; <?php echo date( 'Y' ); ?>
    <?php bloginfo( 'name' ); ?>
  </p>
</footer>

<?php wp_footer(); ?>
</body>
</html>

wp_footer() — obligatoire

Place ce hook juste avant </body>. WordPress y injecte les scripts JavaScript (jQuery, scripts des plugins…). Sans lui, l'admin bar disparaît et la plupart des plugins JS ne fonctionnent plus.

Utiliser header et footer dans un template

index.php

<?php get_header(); ?>

<main class="site-main">
  <!-- contenu ici -->
</main>

<?php get_footer(); ?>

✅

Tu peux avoir plusieurs headers différents : get_header('shop') chargera header-shop.php. Même logique pour footer et sidebar.

// à retenir

get_header() / get_footer() / get_sidebar() incluent les fichiers correspondants
wp_head() juste avant </head> — obligatoire
wp_footer() juste avant </body> — obligatoire
body_class() ajoute des classes contextuelles sur <body>
bloginfo('name') retourne le nom du site · home_url('/') retourne l'URL d'accueil
Toujours entourer les URLs de esc_url()