Custom WordPress Theme erstellen – Schritt für Schritt Tutorial
In diesem Tutorial erfährst du, wie du ein minimalistisches eigenes WordPress Theme erstellst. Du bekommst das Grundgerüst mit den wichtigsten Dateien, Codeschnipseln & guten Tipps zum Start.
1. Ordnerstruktur anlegen
Lege im WordPress-Theme-Verzeichnis wp-content/themes/ einen neuen Ordner an, z.B. mein-theme. Dieser enthält mindestens folgende Dateien:
style.cssindex.phpheader.phpfooter.phpfunctions.php
2. style.css – Metadaten & Grundstyle
Diese Datei muss unbedingt den Theme-Header enthalten, damit WordPress das Theme erkennt:
/*
Theme Name: Mein Theme
Theme URI: https://deine-seite.de/mein-theme
Author: Dein Name
Author URI: https://deine-seite.de
Description: Ein einfaches, flexibles WordPress Theme für den Einstieg.
Version: 1.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mein-theme
Tags: custom-theme, responsive, clean
*/
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
3. index.php – Haupttemplate mit Loop
Die Hauptdatei zeigt Beiträge (Posts) dynamisch:
<?php get_header(); ?>
<main>
<?php
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div><?php the_content(); ?></div>
</article>
<?php endwhile;
else : ?>
<p>Keine Beiträge gefunden.</p>
<?php endif; ?>
</main>
<?php get_footer(); ?>
4. header.php
Kopfbereich mit Aufruf zum Einbinden von Styles & Scripts
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title><?php wp_title('|', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
<nav>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'menu',
));
?>
</nav>
</header>
5. footer.php
Fußzeile mit WordPress Hooks
<footer>
<p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. Alle Rechte vorbehalten.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
6. functions.php
Theme-Support und Menü registrieren
<?php
// Grund-Funktionen aktivieren
function mein_theme_setup() {
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
register_nav_menus(array(
'primary' => __('Hauptmenü', 'mein-theme'),
));
}
add_action('after_setup_theme', 'mein_theme_setup');
// Styles einbinden
function mein_theme_scripts() {
wp_enqueue_style('mein-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'mein_theme_scripts');
Schritt-für-Schritt Erklärung
- style.css: Definiert Theme-Metadaten und grundlegende Styles.
- index.php: WordPress Loop zum Anzeigen von Beiträgen.
- header.php: Enthält <head>-Inhalte und den Seitenkopf mit Navigation.
- footer.php: Fügt Fußzeile und WordPress-Funktionen am Ende ein.
- functions.php: Registriert Menüs, aktiviert Funktionen und bindet Styles ein.
Fazit
Mit diesem Grundgerüst hast du ein funktionales WordPress Theme, das du beliebig erweitern kannst – z.B. mit weiteren Templates wie single.php, page.php, Widget-Areas uvm.
Gerade für individuelle Designs und Projekte ist ein eigenes Theme oft die beste Wahl!
Um dein Theme zu testen:
- Erstelle den Ordner
mein-themeinwp-content/themes/deiner WordPress-Installation. - Lege die gezeigten Dateien dort ab.
- Aktiviere das Theme im WordPress Backend unter Design > Themes.
- Deine Seite zeigt nun Beiträge mit deinem eigenen Theme an.