Structure du Sidebar statique
Un sidebar est composé de blocs: calendrier, pages, tags, etc.., affichés en colonne les uns à la suite des autres. Chaque bloc comporte un titre suivi d’une liste d’éléments. Pour obtenir un simple sidebar insérer dans sidebard.php entre les ligne <div id= »sidebar »> et </div><!–END sidebar–> les lignes suivantes:

<ul>
    <li><h2><?php _e('Pages', 'montheme') ?></h2>
        <ul>
            <?php wp_list_pages('title_li='.__('').'' ); ?>
        </ul>
    </li>

    <li><h2><?php _e('Calendrier', 'montheme') ?></h2>
        <ul>
            <?php get_calendar(); ?>
        </ul>
    </li>

    <li><h2><?php _e('Cat&eacute;gories', 'montheme') ?></h2>
        <ul>
            <?php wp_list_categories('orderby=name&title_li='); ?>
        </ul>
    </li>

    <li><h2><?php _e('Posts r&eacute;cents', 'montheme') ?></h2>
        <ul>
            <?php wp_get_archives('type=postbypost&limit=15'); ?>
        </ul>
    </li><!--END POSTSRECENT-->

    <li><h2><?php _e('Archives', 'montheme') ?></h2>
        <ul>
            <?php wp_get_archives('type=monthly&show_post_count=1'); ?>
        </ul>
    </li><!--END ARCHIVES-->

    <?php if ( function_exists('wp_tag_cloud') ) : ?>
        <li><h2><?php _e('Tags', 'montheme') ?></h2>
            <ul>
            <?php wp_tag_cloud('smallest=8&amp;amp;amp;largest=22'); ?>
            </ul>
        </li><!--END TAGS-->
    <?php endif; ?>

</ul><!--END UL SIDEBAR-->

Pour habiller les titres et les éléments de la liste insérer à la fin de style.css les lignes suivantes:

/* SIDEBAR */

#sidebar h2 {
margin:1em 0 0 0; /* espace en haut de chaque chaque tête de chapitre */
padding:0 0 0.3em 0; /* esace entre la tête de chapitre et la 1ère ligne de la liste */
font-weight:normal;
font-size:1.4em;
font-family: Arial;
}

#sidebar ul {
margin: 0 0 0 2em; /* marge de liste générale */
padding:0 0 0 0;
list-style: none; /*enlève les bullets de la liste */
font-size: 1.0em; /* très important pour garder la même taille: taille des caractères X 1 */
}

#sidebar li ul, #sidebar ul li { /* s'applique à toutes les sous-listes */
margin: 0 0 0 0; /* marge d'indentation */
padding:0 0 0 0;
list-style:none;
font-size:1em; /* très important pour garder la même taille: taille des caractères X 1 */
}

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Le sidebar s’affiche sur fond blanc. Regarder aussi l’imbrication des balises <ul> et <li>. Pour ce faire, clic droit sur la page affichée, sélectionner afficher le code source de la page.

Sidebar variable
Il est possible de faire varier le contenu du sidebar en fonction du contexte dans lequel on se trouve. Le sidebar devient aussi dynamique mais sans action de l’utilisateur, uniquement par la programmation. Par exemple, pour afficher uniquement sur la page d’accueil ou une autre page, la liste des liens du blogroll et méta insérer dans sidebar.php juste avant </ul><!–END UL SIDEBAR–> les lignes suivantes:

<?php if ( is_home() || is_page() ) { /* si page ou accueil */?>

    <li><h2><?php _e('Blogroll', 'montheme') ?></h2>
        <ul>
            <?php get_links(-1, '<li>', '</li>', ' - '); ?>
        </ul>
    </li><!--END BLOGROLL-->

    <li><h2><?php _e('M&eacute;ta', 'montheme') ?></h2>
        <ul>
            <?php wp_register(); ?>
            <li><?php wp_loginout(); ?></li>
            <li><a href="http://validator.w3.org/check/referer" title="<?php _e('This page validates as XHTML 1.0 Transitional') ?>">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
            <li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
            <li><a href="http://wordpress.org/" title="<?php _e('Powered by WordPress, state-of-the-art semantic personal publishing platform.'); ?>"><abbr title="WordPress">WP</abbr></a></li>
            <?php wp_meta(); ?>
        </ul>
    </li><!--END META-->

<?php } ?>

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Vérifier que le sidebar affiche les blocs que nous venons d’ajouter. Cliquer maintenant sur un Post, les blocs ont disparu du sidebar.

Personnalisation du sidebar
Il est possible d’ajouter des bouts de code et des fonctions. Par exemple, une fonction qui affiche les n commentaires les plus récents. Cette fonction existe probablement quelque part mais je l’ai programmé pour le « fun ». Dans sidebar.php sous le bloc des catégories, par exemple,  insérer les lignes suivantes :

<li><h2><?php _e('Commentaires r&eacute;cents', 'montheme') ?></h2>
    <ul>
        <?php
        $comment_array = get_comments('number=15');
        foreach($comment_array as $comment):
            $post_id = get_post($comment->comment_post_ID); ?>
            <li><?php echo($comment->comment_author); ?>
                <a href="<?php echo get_permalink($post_id); ?>#comment-<?php echo($comment->comment_ID) ?>">-<?php echo($post_id->post_title) ?></a>
            </li>
        <?php endforeach; ?>
    </ul>
</li><!--END COMMENTSRECENT-->

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Vérifier l’affichage du commentaire et de son émetteur. A ce stade de la programmation il n’est pas encore possible d’écrire un commentaire mais il devrait y avoir au moins le commentaire Hello world! de WordPress.

Sidebar dynamique
Pour rendre dynamique le contenu de sidebar il faut:
- ajouter la fonction register_sidebar() dans le fichier functions.php ,
- ajouter une instruction conditionnelle dans sidebar.php .

Le fichier functions.php est chargé automatiquement par WordPress lorsqu’il est présent à la racine du thème.  La fonction register_sidebar(), permet d’indiquer les balises dans lesquelles seront emboîtées les Widgets activés. Vous pourrez ensuite les habiller avec le style de votre choix dans style.css. Avec votre éditeur, créer un nouveau fichier functions.php (attention à l’écrire avec la bonne orthographe, sinon il ne sera pas pris en compte et votre sidebar restera statique!). Insérer les lignes suivantes:

if (function_exists('register_sidebar') )
// est utilisé quand on ajoute un widget
    register_sidebar(array(
        'before_widget' => '<li id="%1$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
        )
    ); // ici tous les paramètres ont la valeur par défaut

Enregistrer ce fichier sous /montheme.

Tous les blocs du sidebar statique seront emboités dans l’ instruction conditionnelle suivante :
- si les Widgets sont activés ET si la fonction PHP dynamic_sidebar() , les Widgets sélectionnés dans l’interface d’administration du site seront affichés,
-sinon, les blocs du sidebar statique seront affichés.
Pour faire cela, sidebar.php sera modifié ainsi:

<div id="sidebar">
    <ul>
        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
            Le code du sidebar statique
        <?php endif; ?>
    </ul><!--END UL SIDEBAR-->
</div><!--END sidebar-->

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Dans la barre d’administration, choisir Apparance Widgets, ajouter un Widget dans le sidebar. Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran. Le Widget a remplacé le sidebar statique.

Télécharger les fichiers de cette partie et les copier sous /themes/montheme .

Traduction
Noter qu’il est facile de franciser le sidebar. Les titres sont affichés par la  fonction_e()  qui permet le texte de votre choix.

Liens
Partie 1 – Choix des outils
Partie 2 – Environnement de développement et de qualification
Partie 3 – Installation de WordPress sur serveur local
Partie 4 – Créer son thème WordPress
Partie 5 – Créer son thème WordPress – Template Index
Partie 6 – Créer son thème WordPress – Template Sidebar
Partie 7 – Créer son thème WordPress – Template Footer
Partie 8 – Créer son thème WordPress – Template Archive
Partie 9 – Créer son thème WordPress – Template Search
Partie 10 – Créer son thème WordPress – Template Single
Partie 11 – Créer son thème WordPress – Template Comments
Partie 12 – Créer son thème WordPress – Style Print
Partie 13 – Créer son thème WordPress – Autres Templates
Partie 14 – Créer son thème WordPress – Traduction

Au minimum, un thème comprend 2 fichiers: style.css, index.php. Tout autre fichier peut être ajouté mais pour répartir la programmation et faciliter la maintenance du thème il est d’usage d’inclure les fichiers: comments.php, footer.php, header.php, sidebar.php .

Pourquoi créer son propre thème WordPress ?
Il existe des centaines de thèmes, et de très bonne qualité. La documentation de WordPress est si luxuriante qu’on ne sait par quel bout l’aborder. On craint d’y passer du temps, mais finalement… pas tant que cela.

J’ai créé mon thème pour les raisons suivantes:
- j’aime comprendre et maîtriser ce que j’utilise,
- je veux savoir comment les concepteurs ont construit ce bel outil,
- je veux un blog en français qui correspond exactement à mon souhait.

C’est un travail complet de recherche, d’analyse et de synthèse très enrichissant qui vous permet de manipuler HTML, PHP, CSS.

Cahier des charges
- Un blog minimaliste mais complet.
- Un simple journal de bord, comme un cahier.
- La page comprend un en-tête, une barre de navigation, 2 colonnes, la colonne de gauche pour les articles, celle de droite pour la recherche, les archives, tags, catégories, etc…

Méthode de travail
Elle est fondée essentiellement sur l’expérimentation. Pour comprendre la logique de WordPress et construire mon thème, j’ai sélectionné et analysé quelques thèmes simples. Je vous livre simplement le résultat de cette expérience. Si vous voulez bien me suivre au cours de cette série d’articles, nous allons procéder de la même façon avec mon propre thème en le reconstruisant progressivement ensemble, de façon logique. A chaque étape, nous allons visualiser le résultat.

TRace ON !
Votre serveur Apache est actif. Votre serveur MySql aussi. Entrons maintenant dans WordPress.

Aller sous xampp/htdocs/wordpress/wp-content/themes et créer le répertoire montheme.
Avec un éditeur de texte comme Notepad++ créer les templates vides pour l’instant: index.php, header.php .
Créer de la même façon la feuille de style vide style.css .
Enregistrer ces fichiers sous le répertoire montheme .

Avec le navigateur, se connecter à http://localhost/wordpress/.
Sur la page Gérer les thèmes du tableau de bord vous trouvez dans les thèmes disponibles votre nouveau thème vide intitulé montheme by anyone. Il vous indique aussi que le thème se trouve sur /themes/montheme .

Nous allons compléter la description du thème.
Avec l’éditeur de texte ouvrir style.css et insérer les lignes de commentaire suivantes:

/*
Theme Name: MonTheme
Theme URI: http://moi.free.fr
Description: Un thème simple. Deux colonnes. Sidebar a droite qui supporte les widgets. Tags et gravatars. Valid XHTML and CSS.
Version: 1.0
Author: moi
Author URI: http://moi.free.fr
*/

Enregistrer.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
La description du thème apparaît maintenant.
Pour voir l’image associée au thème, il suffirait de placer sous le répertoire /themes/montheme une image au format 300×225 appelée screenshot.png .

Nous allons créer maintenant notre première page Web. Notre blog est une page blanche posée sur un fond gris. Nous allons d’abord peindre le fond. Une page comprend au minimum les balises <html><head><body>. Il faut aussi lui donner un titre avec la balise <titre>, indiquer où trouver la feuille de style avec une balise <link>, indiquer le lien vers le flux RSS, indiquer le lien vers XML-RPC pour traiter les pingbacks . Attention à bien coder les balises <!DOCTYPE> et <html>. Elles sont trop souvent recopiées d’une page à l’autre sans se préoccuper de leur contenu. Bien coder ces balises, assure un fonctionnement correct des navigateurs. Depuis HTML 5, la balise <!DOCTYPE> a été simplifiée. Depuis le 26 janvier 2000, XHTML est la nouvelle norme du W3C en matière de langage balisé pour concevoir des documents Web. Le document doit respecter les normes de validation d’une des trois DTD XHTML : strict, transitional ou frameset. La DTD stricte n’autorise plus l’utilisation de certains anciens éléments de présentation mais elle a l’avantage de contraindre le développeur à séparer structure et présentation, avec les facilités de maintenance que cela apporte.

Avec l’éditeur de texte insérer les balises dans le fichier header.php :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" <?php language_attributes(); ?>>
    <head>
        <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
        <!--Lien vers la feuille de style pour affichage sur écran-->
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
        <!--Lien vers le fichier XML de flux RSS-->
        <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
        <!--Lien pour les pingbacks vers le fichier XML-RPC-->
        <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    </head>
    <body>

Insérer les lignes dans le fichier index.php :

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

Pour peindre le fond en gris nous donnons des attributs graphiques à la balise body. Nous fixons aussi la police de caractères et sa taille. Nous insérons ces lignes à la suite des commentaires dans style.css :

/* ============ STRUCTURE GENERALE DE LA PAGE =================== */
/* <BODY> balise qui enveloppe l’ensemble du thème. Les attributs de la balise <body> seront utilisés
tant que vous ne changerez rien à un niveau plus fin du thème. Peint tout le fond d'écran en gris */
body {
margin:1em 0 1em 0; /* espace entre les éléments HTML (haut, droite, bas, gauche) */
background: #3c3c3c; /* couleur du fond de l'écran gris foncé (hexadecimal) */
font-family: Verdana, Lucida Grande, Arial, Sans-Serif;
font-size: 62.5%; /* Fixe la taille des caractères de la page HTML */
color: #545454; /* couleur du texte gris foncé (hexadecimal) */
padding: 0 0 0 0; /*bords gris: distance entre le bord d'un élément HTML et son contenu (haut, droite, bas, gauche) */
min-height:100%; /*hauteur minimale sur une balise de type bloc. */
}

Enregistrer tous les fichiers.
Sur la page Gérer les thèmes du tableau de bord activer le thème montheme.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran. Avec le navigateur, se connecter à http://localhost/wordpress/. Une page grise s’affiche.

Le titre est rendu variable par la fonction  is_single() qui y ajoute un texte supplémentaire ainsi que le titre de la page wp_title(). Vous pouvez en voir l’effet simplement sur l’onglet FireFox de la page affichée ou en glissant la souris dessus. Pour l’instant vous ne voyez que le nom du blog. La fonction bloginfo() récupère l’URL de la feuille de style. Quand le fichier index.php est exécuté la fonction get_header() réunit ces 2 parties pour former la page Web. Pour vous en convaincre, clic droit sur la page grise affichée, sélectionner afficher le code source de la page.

Nous allons maintenant placer notre page blanche sur ce fond et la structurer: un en-tête, deux colonnes, un bas de page. Nous allons aussi y placer en titre le nom du blog. La balise <div> va structurer notre page comme cela: <div> de la page, qui contient <div> du header, <div> de l’article à gauche, <div> du sidebar à droite. Une classe va habiller le titre. D’autre part, vous avez remarqué que la barre d’administration du blog en haut de page est absente. Nous allons aussi l’ajouter tout de suite pour notre confort avec la fonction wp_head() dans le header.php et wp_footer() dans le footer.php.

Avec l’éditeur de texte ouvrir header.php et juste au-dessus de la balise </head> insérer les lignes suivantes:

<!-- wp_head + wp_footer du footer.php place une ligne d'administration en haut de la page pour l'administrateur-->
<?php wp_head(); ?>

Toujours dans header.php et sous la balise <body> insérer les lignes suivantes:

<div id="page">
<div id="header">
    <h1 class="bloginfoname">
        <a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a>
    </h1> <!-- retour à home si clic sur nom -->
</div><!--END header-->
<div style="clear:both"></div><!-- met le reste de la page sous le header -->

Avec l’éditeur de texte ouvrir index.php et entre la ligne get_header() et  la balise </body> insérer les lignes suivantes:

    <div id="content">
    </div><!--END content-->
    <?php get_sidebar(); ?>
    <div style="clear:both"></div><!-- met le reste de la page dessous -->
</div><!--END page-->
<?php get_footer(); ?>

Avec l’éditeur de texte ouvrir un nouveau fichier sidebar.php et insérer les lignes suivantes:

<div id="sidebar">
</div><!--END sidebar-->

Avec l’éditeur de texte ouvrir un nouveau fichier footer.php et insérer les lignes suivantes:

<!-- begin footer -->
<div id="footer">
<?php wp_footer(); ?>
</div>

Nous allons définir  pour chaque division, sa disposition à droite ou à gauche, la couleur de fond, les marges – la taille générale des titres <h1> à <h6> – l’apparence générale de la balise <a> – le style de la classe bloginfoname et de sa balise <a>. Nous insérons ces lignes à la fin du fichier style.css :

/* dessine une page blanche centrée sur le fond gris entourée de marges grises */
#page {
margin:0 auto; /* marge droite s'adapte à la largeur disponible pour centrer le blog au milieu de la page web.*/
width: 92%;
background-color:#FFF; /* fond blanc */
/*background-color: yellow;*/ /* fond jaune pour test */
padding: 0 1.8em 0 1.8em; /* marges haut, droite, bas, gauche de toute la page*/
display:block;
}

#header {
margin: 0 0 0 0;
padding: 0 0 0 0;
background:#FFF; /* fond blanc */
/*background:green;*/ /* pour test */
}

#content {
width:75%;
float:left;
margin: 0 0 0 0;
padding: 0 0 0 0;
background:#FFF; /* fond blanc */
/* background-color: maroon;*/ /* pour test */
}

#sidebar {
float:right;
width:25%;
margin: 0 0 0 0;
padding: 0 0 0 0;
/*background-color:LightSteelBlue;*/ /* pour test */
background:#FFF; /* fond blanc */
}

#footer {
margin:0 0 0 0;
padding:0 0 0 0;
text-align:center;
font-size:1em;
color:white;
clear:both; /* force le footer sous content et sidebar */
}

/* ============ STYLE GENERAL =================== */

/* FONT-SIZE */
h1 {font-size:2.6em;}
h2 {font-size:2em;}
h3 {font-size:1.6em;}
h4 {font-size:1.2em;}
h5 {font-size:1em;}
h6 {font-size:0.8em;}

/* LIENS */
a, a:link, a:visited{
color:#258; /* bleu */
text-decoration:none;
}

a:hover, a:active {
color: #C51500; /* rouge */
/* text-decoration:underline;*/
}

/* ============ STYLE PARTICULIER =================== */

/* BLOGINFO NAME */

.bloginfoname {
float:left;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight:bold;
font-size:3em;
margin: 0.5em 0 0;
padding: 0 0 0 0;
}

.bloginfoname a, .bloginfoname a:link, .bloginfoname a:visited {
color: #7da939; /* vert */
text-decoration:none; /* ne pas souligner*/
}

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Le nom du blog apparaît maintenant en titre sur fond blanc (pour l’instant seul le nom est sur fond blanc, le reste est gris). La fonction get_sidebar() du fichier index.php a  uni le fichier sidebar.php au reste de la page Web. Pour vous en convaincre, clic droit sur la page affichée, sélectionner afficher le code source de la page.

Nous allons achever le header en y plaçant la description du blog, le dispositif de recherche, une barre de navigation pour afficher les pages. La classe bloginfodesc va habiller la description, la classe search le dispositif de recherche, la barre de navigation sera incluse dans une balise <div> .

Avec l’éditeur de texte ouvrir header.php et entre la balise </h1>  et la balise </div><!–END header–> insérer les lignes suivantes:

<div style="clear:both"></div><!-- met la description sous le nom -->
    <h2 class="bloginfodesc"><?php bloginfo('description'); ?></h2>
    <div class="search"><?php include (TEMPLATEPATH . '/searchform.php'); ?></div>
    <div id="barredenavig" ><ul>
        <li><a href="<?php echo get_option('home'); ?>/" >Accueil</a></li>
        <?php wp_list_pages('title_li='); ?><!-- retourne la liste des pages dans suite de <li> -->
        </ul>
    </div><!--END barredenavig-->

Avec l’éditeur de texte ouvrir un nouveau fichier searchform.php et insérer les lignes suivantes:

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
    <div>
        <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="<?php _e('Chercher', 'montheme'); ?>" />
    </div>
</form>

Nous allons définir le style de la classe bloginfodesc – de la classe search – des balises <div> <ul> <li> <a> de la barre de navigation. Nous insérons ces lignes à la fin du fichier style.css :

.bloginfodesc {
float:left;
font-size: 1.2em;
font-weight: bold;
font-style:italic;
color:#545454; /* couleur gris */
margin: 0 0 1.5em 0;
padding: 0 0 0 0;
}

.search { /* le bloc de recherche est placé en bas à droite du header */
float:right;
padding:0 2em 0 0; /* marge haut dans le header */

}

/* BARRE DE NAVIGATION gris foncé qui contient la liste des pages du thème */

#barredenavig {
background:#777; /* gris foncé */
font-size:1.1em;
clear:both; /* force la barre de navigation sous la <div> précédente */
float:left;
/*display:inline-block;*/
width: 100%; /* la barre occupe toute la largeur du header moins la marge et le padding du header */
}

#barredenavig ul {
margin: 0 0 0 0; /* marge de liste générale */
padding:0 0 0 0;
list-style: none; /*enlève les bullets de la liste */
font-size: 1.0em; /* très important pour garder la même taille: taille des caractères X 1 */
}

#barredenavig li { /* place chaque élément du menu à gauche, l'un après l'autre séparé par un léger trait de bordure */
float: left;
list-style:none;
border-right:1px solid #a9a9a9; /* bordure gris souris plus clair que le fond de la barre*/
}

/* Les éléments de la barre de navigation sont un lien placés dans la balise <a> dont les propriétés
sont changées pour la barre de navigation */
#barredenavig a, #barredenavig a:link #barredenavig a:visited {
display: block; /* l'espace forme un bloc qui tient compte des marges et du padding */
font-weight:bold;
color: #f5f5f4; /* blanc */
padding:6px 12px; /* élargit la barre, allume tout l'espace de l'élément de la barre */
}

#barredenavig a:hover, #barredenavig a:active {
background:#000; /* couleur noir */
}

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Le header apparaît maintenant complet en titre sur fond blanc (pour l’instant seul le header est sur fond blanc, le reste est gris). La fonction wp_list_pages() du header retourne la liste des pages. Chaque titre de page est inclus dans une balise <a> elle même incluse dans une balise <li>. C’est pour rester cohérent avec HTML que la page d’accueil est aussi placée dans une balise <li> et que l’ensemble de la liste est placé dans une balise <ul>. La fonction  include () du fichier header.php a  uni le fichier searchform.php au reste de la page Web. Pour vous en convaincre, clic droit sur la page affichée, sélectionner afficher le code source de la page.

Traduction
Noter au passage que 2 textes ont été francisés: dans searchform.php le bouton chercher, dans la barre de navigation la page Accueil. Cette remarque est utile si vous avez trouvé un thème qui vous plaît que vous souhaiteriez traduire. Nous verrons par la suite qu’il y en a d’autres qu’il est aussi simple de traduire.

Télécharger les fichiers de cette première partie et les copier sous /themes/montheme .

Liens
Partie 1 – Choix des outils
Partie 2 – Environnement de développement et de qualification
Partie 3 – Installation de WordPress sur serveur local
Partie 4 – Créer son thème WordPress
Partie 5 – Créer son thème WordPress – Template Index
Partie 6 – Créer son thème WordPress – Template Sidebar
Partie 7 – Créer son thème WordPress – Template Footer
Partie 8 – Créer son thème WordPress – Template Archive
Partie 9 – Créer son thème WordPress – Template Search
Partie 10 – Créer son thème WordPress – Template Single
Partie 11 – Créer son thème WordPress – Template Comments
Partie 12 – Créer son thème WordPress – Style Print
Partie 13 – Créer son thème WordPress – Autres Templates
Partie 14 – Créer son thème WordPress – Traduction