Bases pour créer son thème WordPress

Mise en place du Thème

C’est la première étape pour créer un thème Worpdress.

Dans le dossier wp-content/themes de votre site WordPress, créez un nouveau dossier avec pour nom celui de votre futur thème.

Fichiers nécessaires

  • index.php – Obligatoire, la première page de votre thème.
  • style.css – Obligatoire, la feuille de style ainsi que les informations de déclaration de votre thème wordpress
  • functions.php – Pour ajouter ajouter des fonctionnalités supplémentaires.
  • header.php – l’entête du thème
  • footer.php – le pied de page du thème
  • screenshot.png – L’image d’illustration de votre thème qui sera visible dans l’administration de WordPress. Dimensions : 880×660 px.

Le fichier style.css

/*
Theme Name: Nom de votre Thème 
Theme URI: https://www.votresite.fr
Author: Votre nom
Author URI: https://www.site.fr
Description: Description de votre thème 
Requires at least: Version de WordPress compatible
Version: version de votre thème 
*/

Le fichier index.php

<?php get_header() ?>

<?php

if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>

      <?php the_post_thumbnail('medium', ['class' => 'card-img-top', 'alt' => '', 'style' =>' height:auto;'])?>
      <div class="card-body">
        <h5><?php the_title() ?></h5>
        <h6><?php the_category() ?></h6>
        <p><?php the_content('en voir plus') ?></p>
        <a href="<?php the_permalink() ?>">Voir la suite</a>
      </div>
    </div>
    </div>
  <?php endwhile; ?>


<?php
// si pas d'article
else : ?>
  <h1>Pas d'article</h1>
<?php endif; ?>


<?php get_footer() ?>

Le fichier functions.php

<?php 
function nomDeVotreTheme_supports () {
//Titre du site ajouté automatiquement dans le header
add_theme_support('title-tag');
// Prise en charge des images mises en avant par le thème 
add_theme_support('post-thumbnails');
}
add_action('after_setup_theme', 'nomDeVotreTheme_supports ');

// pas besoin de fermer la balise PHP

Le fichier header.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head() ?>
</head>
<body>
    <div class="container">

Le ficher footer.php

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

Activation du thème

A partir de l’interface d’administration de WordPress : Apparence > Thèmes et cliquez sur Activer