Credit : Illustration backtotheweb.fr
Creer un theme WordPress from scratch
Creer un theme WordPress from scratch
Ça fait partie des bases, mais c'est souvent mal configuré.
Creer son propre theme WordPress permet un controle total sur le code et les performances. Voici comment demarrer de zero avec un theme fonctionnel.
Structure minimale
Creez un dossier dans wp-content/themes/montheme/ avec cette structure :
montheme/
├── style.css
├── functions.php
├── index.php
├── header.php
├── footer.php
├── sidebar.php
├── single.php
├── page.php
├── archive.php
├── 404.php
├── screenshot.png
└── assets/
├── css/
├── js/
└── img/
style.css : la carte d'identite
/*
Theme Name: MonTheme
Theme URI: https://monsite.fr
Author: Votre Nom
Author URI: https://monsite.fr
Description: Un theme WordPress leger et performant.
Version: 1.0.0
License: GNU General Public License v2
Text Domain: montheme
*/
/* Reset de base */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
functions.php : le coeur du theme
<?php
// Supports du theme
function montheme_setup() {
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
add_theme_support('html5', ['search-form', 'comment-form', 'gallery', 'caption']);
add_theme_support('custom-logo', [
'height' => 60,
'width' => 200,
'flex-height' => true,
'flex-width' => true,
]);
add_theme_support('editor-styles');
add_theme_support('responsive-embeds');
register_nav_menus([
'primary' => __('Menu principal', 'montheme'),
'footer' => __('Menu pied de page', 'montheme'),
]);
}
add_action('after_setup_theme', 'montheme_setup');
// Scripts et styles
function montheme_enqueue_assets() {
wp_enqueue_style('montheme-style', get_stylesheet_uri(), [], '1.0.0');
wp_enqueue_style('montheme-custom', get_template_directory_uri() . '/assets/css/custom.css', [], '1.0.0');
wp_enqueue_script('montheme-script', get_template_directory_uri() . '/assets/js/main.js', [], '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'montheme_enqueue_assets');
// Sidebar
function montheme_widgets_init() {
register_sidebar([
'name' => 'Sidebar',
'id' => 'sidebar-1',
'before_widget' => '<div class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
]);
}
add_action('widgets_init', 'montheme_widgets_init');
header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<header class="site-header">
<div class="container">
<div class="site-branding">
<?php if (has_custom_logo()) the_custom_logo(); ?>
<a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a>
</div>
<nav class="main-nav">
<?php wp_nav_menu(['theme_location' => 'primary', 'container' => false]); ?>
</nav>
</div>
</header>
<main class="site-content container">
index.php : la boucle WordPress
Note perso : sur nos serveurs IONOS, cette config tourne nickel depuis des mois.
<?php get_header(); ?>
<div class="posts-grid">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if (has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('medium_large'); ?>
</a>
<?php endif; ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<time datetime="<?php echo get_the_date('c'); ?>"><?php echo get_the_date(); ?></time>
<div class="excerpt"><?php the_excerpt(); ?></div>
</article>
<?php endwhile; ?>
<div class="pagination">
<?php the_posts_pagination(['mid_size' => 2]); ?>
</div>
<?php else : ?>
<p><?php esc_html_e('Aucun article trouve.', 'montheme'); ?></p>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Hooks utiles
Les hooks sont la puissance de WordPress. Quelques exemples :
// Ajouter du contenu avant chaque article
add_filter('the_content', function($content) {
if (is_single()) {
$content = '<div class="reading-time">Temps de lecture : ' . ceil(str_word_count(strip_tags($content)) / 200) . ' min</div>' . $content;
}
return $content;
});
// Personnaliser la longueur de l'extrait
add_filter('excerpt_length', fn() => 25);
Support Gutenberg
Ajoutez le support des blocs dans functions.php :
function montheme_gutenberg_support() {
add_theme_support('align-wide');
add_theme_support('editor-color-palette', [
['name' => 'Primaire', 'slug' => 'primary', 'color' => '#2563eb'],
['name' => 'Sombre', 'slug' => 'dark', 'color' => '#1e293b'],
]);
}
add_action('after_setup_theme', 'montheme_gutenberg_support');
Votre theme est pret. Activez-le dans Apparence > Themes et iterez.
Si vous avez des questions, n'hésitez pas à nous écrire. On répond à tout le monde.
