Kapitel 4: Kern-Template-Dateien (Von 0 zum ersten Theme)

4.1 Schritt 1: Theme-Ordner und Kern-Dateien erstellen

Ordner-Struktur

wp-content/themes/mein-theme/
├── style.css          # (Pflicht) Theme-Informationen + Styles
├── index.php          # (Pflicht) Haupt-Template
├── header.php         # Header
├── footer.php         # Footer
├── functions.php      # Funktionen
└── screenshot.png     # (Optional) Vorschaubild

Namenskonventionen

Kleinbuchstaben: mein-theme (nicht Mein-Theme)
Bindestriche: mein-theme (nicht mein_theme oder meintheme)
Eindeutig: Nicht wordpress-theme (zu generisch!)

✅ Gute Namen:

modern-blog
simple-portfolio
company-corporate

❌ Schlechte Namen:

theme (zu generisch)
wp_theme (Unterstriche vermeiden)
MyTheme (Großschreibung vermeiden)

4.2 `style.css` schreiben: Theme-Informationen und Basis-Styles

Schritt 1: `style.css` erstellen

css

/*
Theme Name: Mein Erstes Theme
Theme URI: https://example.com/mein-theme/
Description: Ein einfaches, responsives WordPress-Theme für Einsteiger
Author: Ihr Name
Author URI: https://example.com
Version: 1.0.0
Requires at least: WordPress 5.9
Tested up to: WordPress 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mein-theme
Tags: blog, custom-logo, custom-menu, featured-images, responsive-layout
*/

Schritt 2: CSS-Reset und Basis-Styles hinzufügen

css

/* === CSS RESET === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
}

/* === TYPOGRAFIE === */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.5em;
    line-height: 1.2;
}

p {
    margin-bottom: 1.5em;
}

a {
    color: #1a73e8;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* === LAYOUT === */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* === HEADER === */
.site-header {
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 20px 0;
    margin-bottom: 30px;
}

.site-title {
    font-size: 2rem;
    margin-bottom: 0.2em;
}

.site-title a {
    color: #1a73e8;
    text-decoration: none;
}

.site-description {
    color: #666;
    font-size: 1rem;
}

/* === MAIN CONTENT === */
.site-main {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* === POSTS === */
.post {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #eee;
}

.post-title {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.post-meta {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.post-content {
    line-height: 1.8;
}

/* === FOOTER === */
.site-footer {
    background-color: #333;
    color: white;
    padding: 30px 0;
    margin-top: 50px;
    text-align: center;
}

4.3 `header.php` schreiben: Website-Kopf (Navigation, Logo, CSS/JS einbinden)

Vollständige `header.php`

php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title('|', true, 'right'); ?></title>
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
    <?php wp_head(); ?>   <!-- ⚠️ PFLICHT für Styles & Plugins -->
</head>

<body <?php body_class(); ?>>

    <header id="masthead" class="site-header">
        <div class="container">
            <div class="site-branding">
                <?php if (has_custom_logo()) : ?>
                    <?php the_custom_logo(); ?>
                <?php else : ?>
                    <h1 class="site-title">
                        <a href="<?php echo esc_url(home_url('/')); ?>">
                            <?php bloginfo('name'); ?>
                        </a>
                    </h1>
                    <p class="site-description"><?php bloginfo('description'); ?></p>
                <?php endif; ?>
            </div>

            <nav id="site-navigation" class="main-navigation">
                <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
                    <?php esc_html_e('Menü', 'mein-theme'); ?>
                </button>
                <?php
                wp_nav_menu(array(
                    'theme_location' => 'primary',
                    'menu_id'        => 'primary-menu',
                    'menu_class'     => 'nav-menu',
                ));
                ?>
            </nav>
        </div>
    </header>

    <div id="content" class="site-content">
        <div class="container">

Erklärung der wichtigsten Teile

`language_attributes()`

Gibt Sprach-Attribute aus (z.B. lang="de-DE").

`bloginfo('charset')`

Gibt die Zeichenkodierung aus (z.B. UTF-8).

`wp_head()`

⚠️ PFLICHT! Lädt alle Stylesheets und Skripte, die mit wp_enqueue_style() und wp_enqueue_script() eingebunden wurden.

`body_class()`

Gibt CSS-Klassen für den <body>-Tag aus (hilfreich für CSS-Zielung).

`has_custom_logo()` und `the_custom_logo()`

Prüft, ob ein Custom-Logo gesetzt ist, und zeigt es an.

`wp_nav_menu()`

Zeigt ein registriertes Navigationsmenü an (muss in functions.php registriert werden).

4.4 `footer.php` schreiben: Website-Fußzeile (Copyright, Footer-Navigation)

Vollständige `footer.php`

php

            </div><!-- .container -->
        </div><!-- #content -->

        <footer id="colophon" class="site-footer">
            <div class="container">
                <div class="footer-info">
                    © <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. 
                    Alle Rechte vorbehalten.
                </div>

                <?php if (has_nav_menu('footer')) : ?>
                    <nav class="footer-navigation">
                        <?php
                        wp_nav_menu(array(
                            'theme_location' => 'footer',
                            'menu_id'        => 'footer-menu',
                            'menu_class'     => 'footer-menu',
                            'depth'          => 1,
                        ));
                        ?>
                    </nav>
                <?php endif; ?>
            </div>
        </footer>
    </div>

    <?php wp_footer(); ?>   <!-- ⚠️ PFLICHT für Plugins -->
</body>
</html>

Erklärung

`wp_footer()`

⚠️ PFLICHT! Lädt Skripte vor dem </body>-Tag.

`date('Y')`

Gibt das aktuelle Jahr aus (für Copyright).

Ein separates Menü für den Footer (muss in functions.php registriert werden).

4.5 `index.php` schreiben: Hauptinhaltsbereich (dynamische Beitragsliste)

Vollständige `index.php`

php

<?php get_header(); ?>

    <main id="primary" class="site-main">
        <?php if (have_posts()) : ?>
            <div class="posts-container">
                <?php while (have_posts()) : the_post(); ?>
                    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                        <header class="entry-header">
                            <?php if (is_singular()) : ?>
                                <h1 class="entry-title"><?php the_title(); ?></h1>
                            <?php else : ?>
                                <h2 class="entry-title">
                                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                                </h2>
                            <?php endif; ?>

                            <div class="entry-meta">
                                <span class="posted-on">
                                    <?php echo get_the_date(); ?>
                                </span>
                                <span class="byline">
                                    von <?php the_author(); ?>
                                </span>
                            </div>
                        </header>

                        <div class="entry-content">
                            <?php if (is_singular()) : ?>
                                <?php the_content(); ?>
                            <?php else : ?>
                                <?php the_excerpt(); ?>
                            <?php endif; ?>
                        </div>

                        <footer class="entry-footer">
                            <?php the_category(', '); ?>
                            <?php the_tags(' | Tags: ', ', ', ''); ?>
                        </footer>
                    </article>
                <?php endwhile; ?>
            </div>

            <?php
            // Pagination
            the_posts_pagination(array(
                'mid_size'  => 2,
                'prev_text' => '← Zurück',
                'next_text' => 'Weiter →',
            ));
            ?>

        <?php else : ?>
            <p>Keine Beiträge gefunden.</p>
        <?php endif; ?>
    </main>

<?php get_footer(); ?>

Erklärung der Template-Tags

`the_ID()`

Gibt die Beitrags-ID aus.

`post_class()`

Gibt CSS-Klassen für den Beitrag aus (hilfreich für Styling).

`is_singular()`

Prüft, ob es sich um eine Einzelansicht (Beitrag oder Seite) handelt.

`the_permalink()`

Gibt die URL des Beitrags aus.

`the_excerpt()`

Gibt den Beitragsauszug aus (wenn gesetzt, sonst den ersten Absatz).

`the_posts_pagination()`

Zeigt Paginierungs-Links an.

4.6 Theme testen: Im lokalen WordPress aktivieren, Fehler beheben

Schritt 1: Theme aktivieren

Gehen Sie zu Design → Themes
Sie sollten "Mein Erstes Theme" sehen
Klicken Sie auf "Aktivieren"

Schritt 2: Fehlerbehebung

Fehler: "Theme fehlt" / "Theme nicht gefunden"

Ursache: style.css fehlt oder Theme-Name ist falsch.

Lösung:

Überprüfen Sie, ob style.css im Theme-Ordner existiert
Überprüfen Sie, ob Theme Name: in style.css vorhanden ist

Fehler: "Weiße Seite" (White Screen of Death)

Ursache: PHP-Fehler in einer Datei.

Lösung:

Aktivieren Sie WP_DEBUG in wp-config.php:

php

define('WP_DEBUG', true);
define('WP_DEBUG_DISPLAY', true);
define('WP_DEBUG_LOG', true);

Überprüfen Sie die Fehlermeldung
Korrigieren Sie den Code

Fehler: Styles werden nicht geladen

Ursache: wp_head() fehlt in header.php.

Lösung: Fügen Sie <?php wp_head(); ?> vor </head> hinzu.

Ursache: Menü ist in functions.php nicht registriert.

Lösung: Registrieren Sie das Menü (siehe Kapitel 8).

📝 Übung 4: Erstes Theme erstellen

Ziel: Erstellen Sie ein funktionierendes WordPress-Theme.

Schritte:

Erstellen Sie den Ordner mein-theme in wp-content/themes/
Erstellen Sie style.css mit Theme-Informationen und CSS
Erstellen Sie header.php mit Navigation
Erstellen Sie footer.php mit Copyright
Erstellen Sie index.php mit Loop
Erstellen Sie functions.php (siehe unten)
Aktivieren Sie das Theme
Überprüfen Sie die Website

Lösung (functions.php):

php

<?php
function mein_theme_setup() {
    // Menüs registrieren
    register_nav_menus(array(
        'primary' => __('Hauptmenü', 'mein-theme'),
        'footer'  => __('Footer-Menü', 'mein-theme'),
    ));
}
add_action('after_setup_theme', 'mein_theme_setup');
?>

✅ Zusammenfassung

In diesem Kapitel haben Sie gelernt:

✅ Einen Theme-Ordner mit Kern-Dateien zu erstellen
✅ style.css mit Theme-Informationen und CSS zu schreiben
✅ header.php mit Navigation und wp_head() zu erstellen
✅ footer.php mit wp_footer() zu erstellen
✅ index.php mit einer dynamischen Loop zu erstellen
✅ Das Theme zu aktivieren und zu testen

Nächstes Kapitel: Wir lernen Template-Tags im Detail kennen.

➡️ Zu Kapitel 5: Template-Tags →

Kapitel 4: Kern-Template-Dateien (Von 0 zum ersten Theme) ​

4.1 Schritt 1: Theme-Ordner und Kern-Dateien erstellen ​

Ordner-Struktur ​

Namenskonventionen ​

4.2 style.css schreiben: Theme-Informationen und Basis-Styles ​

Schritt 1: style.css erstellen ​

Schritt 2: CSS-Reset und Basis-Styles hinzufügen ​

4.3 header.php schreiben: Website-Kopf (Navigation, Logo, CSS/JS einbinden) ​

Vollständige header.php ​

Erklärung der wichtigsten Teile ​

language_attributes() ​

bloginfo('charset') ​

wp_head() ​

body_class() ​

has_custom_logo() und the_custom_logo() ​

wp_nav_menu() ​

4.4 footer.php schreiben: Website-Fußzeile (Copyright, Footer-Navigation) ​

Vollständige footer.php ​

Erklärung ​

wp_footer() ​

date('Y') ​

Footer-Menü ​

4.5 index.php schreiben: Hauptinhaltsbereich (dynamische Beitragsliste) ​

Vollständige index.php ​

Erklärung der Template-Tags ​

the_ID() ​

post_class() ​

is_singular() ​

the_permalink() ​

the_excerpt() ​

the_posts_pagination() ​

4.6 Theme testen: Im lokalen WordPress aktivieren, Fehler beheben ​

Schritt 1: Theme aktivieren ​

Schritt 2: Fehlerbehebung ​

Fehler: "Theme fehlt" / "Theme nicht gefunden" ​

Fehler: "Weiße Seite" (White Screen of Death) ​

Fehler: Styles werden nicht geladen ​

Fehler: Navigation wird nicht angezeigt ​

📝 Übung 4: Erstes Theme erstellen ​

✅ Zusammenfassung ​