Home » Webdesign lernen » Custom WordPress Theme erstellen

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.css
index.php
header.php
footer.php
functions.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>&copy; <?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-theme in wp-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.