Installation

Methode 1: WordPress (*)-Dashboard

Methode 2: WP-CLI

Fur Entwickler, die uber die Kommandozeile arbeiten:

# Theme-Archiv herunterladen und installieren
wp theme install generatepress-enhanced.zip --activate

# Installation verifizieren
wp theme status generatepress-enhanced

# Prufen, ob das Theme korrekt geladen wurde
wp theme get generatepress-enhanced --field=status

Methode 3: Manueller Upload

# Per SSH oder SFTP den Theme-Ordner ubertragen
scp -r generatepress-enhanced/ user@server:/var/www/html/wp-content/themes/

# Alternativ: Entpacken direkt auf dem Server
unzip generatepress-enhanced.zip -d /var/www/html/wp-content/themes/

# Dateiberechtigungen setzen
chown -R www-data:www-data /var/www/html/wp-content/themes/generatepress-enhanced/
chmod -R 755 /var/www/html/wp-content/themes/generatepress-enhanced/

---

Einrichtung

Nach der Aktivierung konfigurieren Sie das Theme in wenigen Schritten. Die wichtigsten Einstellungen sind uber den WordPress (*) Customizer und den Site Editor zuganglich.

Statische Startseite festlegen

Das Theme ist fur eine statische Startseite konzipiert. Aktivieren Sie diese unter Einstellungen > Lesen.

// functions.php — Startseite programmatisch setzen
add_action('after_switch_theme', function () {
    $home = get_page_by_path('home');
    if ($home) {
        update_option('show_on_front', 'page');
        update_option('page_on_front', $home->ID);
    }
});

Navigation konfigurieren

Die Hauptnavigation verwendet den WordPress-Seiten-Block (wp:page-list), der automatisch alle veroffentlichten Seiten anzeigt. Offnen Sie den Site Editor unter Design > Editor, um die Reihenfolge und Sichtbarkeit der Menupunkte anzupassen.

Typografie und Farben

Alle Designtokens sind in der theme.json definiert. Das Farbsystem basiert auf einer warmen Pergament-Palette mit einem einzigen Akzent in Petrolblau. Anpassungen nehmen Sie direkt in der theme.json oder uber die globalen Stile im Site Editor vor.

// Farbpalette im Site Editor uberschreiben
// Design > Editor > Stile > Farben

Hintergrund:    #F8F7F3  (Parchment)
Text:           #1C1B18  (Near-Black Ink)
Akzent:         #1B6CA8  (Petrol Blue)
Gedampft:       #6B6A63  (Muted Text)
Oberflache:     #F5F4EF  (Surface)
Gitterlinien:   #E2E0DB  (Gridline)

---

Hooks & Filter

GeneratePress Enhanced stellt eine Reihe von Action Hooks und Filtern bereit, die eine prazise Anpassung ohne Theme-Modifikation ermoglichen. Alle Hooks folgen der WordPress-Konvention und konnen in einem Child-Theme oder Plugin verwendet werden.

gpx_before_header

Wird unmittelbar vor dem Header-Template-Part ausgefuhrt. Ideal fur Benachrichtigungsleisten, Cookie-Banner oder Ankunding-Streifen.

add_action('gpx_before_header', function () {
    echo '<div class="announcement-bar">';
    echo '  Wartungsarbeiten am 15. Januar — Details im Blog';
    echo '</div>';
});

gpx_after_header

Wird direkt nach dem Header ausgefuhrt. Nutzlich fur Breadcrumbs oder sekundare Navigationsebenen.

add_action('gpx_after_header', function () {
    if (function_exists('yoast_breadcrumb')) {
        yoast_breadcrumb(
            '<nav class="breadcrumb-bar" aria-label="Breadcrumb">',
            '</nav>'
        );
    }
});

gpx_theme_palette

Filter zum Erweitern oder Uberschreiben der Farbpalette zur Laufzeit. Gibt ein assoziatives Array mit Slug-Farbe-Paaren zuruck.

add_filter('gpx_theme_palette', function (array $palette): array {
    // Zusatzliche Markenfarbe hinzufugen
    $palette['brand-coral'] = '#FF6B5A';

    // Bestehende Farbe uberschreiben
    $palette['petrol'] = '#0D5C94';

    return $palette;
});

gpx_enqueue_assets

Action Hook, der nach dem Einreihen aller Theme-Assets feuert. Verwenden Sie diesen Hook, um zusatzliche Stylesheets oder Scripts einzubinden.

add_action('gpx_enqueue_assets', function () {
    wp_enqueue_style(
        'gpx-custom-forms',
        get_stylesheet_directory_uri() . '/assets/forms.css',
        ['gpx-style'],
        '1.0.0'
    );

    wp_enqueue_script(
        'gpx-lightbox',
        get_stylesheet_directory_uri() . '/assets/lightbox.js',
        [],
        '1.0.0',
        true
    );
});

gpx_content_width

Filter fur die maximale Inhaltsbreite. Standardwert: 800px. Nutzlich, wenn Sie bestimmte Seiten breiter oder schmaler rendern mochten.

add_filter('gpx_content_width', function (int $width): int {
    // Breiteres Layout fur Portfolio-Seiten
    if (is_page_template('page-portfolio')) {
        return 1100;
    }
    return $width;
});

gpx_footer_credits

Filter zum Anpassen der Footer-Kreditzeile. Gibt den HTML-String der Kreditzeile zuruck.

add_filter('gpx_footer_credits', function (string $credits): string {
    return sprintf(
        '<p>&copy; %d %s. Alle Rechte vorbehalten.</p>',
        date('Y'),
        get_bloginfo('name')
    );
});

---

theme.json Konfiguration

Die gesamte Designgrundlage des Themes wird uber die theme.json gesteuert. Hier finden Sie die wichtigsten Konfigurationsbereiche mit Erlauterungen.

Layout-Einstellungen

Die Inhaltsbreite (contentSize) begrenzt den Fliesstext auf 800px fur optimale Lesbarkeit. Die erweiterte Breite (wideSize) erlaubt Feature-Grids und Bildergalerien bei 1280px.

{
  "settings": {
    "layout": {
      "contentSize": "800px",
      "wideSize": "1280px"
    },
    "useRootPaddingAwareAlignments": true
  }
}

Typografie-Skala

Die Schriftgrossenskala verwendet fluide clamp()-Ausdrucke fur die grosseren Stufen, sodass Uberschriften auf breiten Bildschirmen atmen, ohne mobile Gerate zu uberladen.

{
  "settings": {
    "typography": {
      "fluid": true,
      "fontFamilies": [
        {
          "fontFamily": ""Inter", ui-sans-serif, system-ui, sans-serif",
          "name": "Inter",
          "slug": "primary"
        },
        {
          "fontFamily": ""Fira Code", ui-monospace, Consolas, monospace",
          "name": "Fira Code",
          "slug": "mono"
        }
      ],
      "fontSizes": [
        { "slug": "x-small",  "size": "0.75rem",  "fluid": false },
        { "slug": "small",    "size": "0.875rem", "fluid": false },
        { "slug": "medium",   "size": "1rem",     "fluid": false },
        { "slug": "large",    "size": "1.125rem", "fluid": { "min": "1rem", "max": "1.125rem" } },
        { "slug": "x-large",  "size": "1.5rem",   "fluid": { "min": "1.25rem", "max": "1.5rem" } },
        { "slug": "xx-large", "size": "2.25rem",  "fluid": { "min": "1.75rem", "max": "2.25rem" } },
        { "slug": "huge",     "size": "3rem",     "fluid": { "min": "2rem", "max": "3rem" } },
        { "slug": "display",  "size": "3.75rem",  "fluid": { "min": "2.5rem", "max": "3.75rem" } }
      ]
    }
  }
}

Farbpalette

Die Palette ist bewusst zuruckhaltend gehalten: Ein warmer Pergament-Hintergrund, Near-Black-Tinte fur Text und ein einzelner Petrolblau-Akzent fur interaktive Elemente.

{
  "settings": {
    "color": {
      "defaultPalette": false,
      "palette": [
        { "slug": "background",    "color": "#F8F7F3", "name": "Background" },
        { "slug": "surface",       "color": "#F5F4EF", "name": "Surface" },
        { "slug": "gridline",      "color": "#E2E0DB", "name": "Gridline" },
        { "slug": "rule",          "color": "#CBC9C2", "name": "Rule" },
        { "slug": "text-muted",    "color": "#6B6A63", "name": "Text Muted" },
        { "slug": "text",          "color": "#1C1B18", "name": "Text" },
        { "slug": "petrol",        "color": "#1B6CA8", "name": "Petrol" },
        { "slug": "petrol-dark",   "color": "#14507E", "name": "Petrol Dark" },
        { "slug": "petrol-light",  "color": "#EBF3FA", "name": "Petrol Light" },
        { "slug": "white",         "color": "#FFFFFF", "name": "White" }
      ]
    }
  }
}

Block-spezifische Stile

Einzelne Blocke konnen in der theme.json unter styles.blocks gezielt uberschrieben werden. Hier ein Beispiel fur den Button-Block:

{
  "styles": {
    "blocks": {
      "core/button": {
        "color": {
          "background": "var:preset|color|petrol",
          "text": "var:preset|color|white"
        },
        ":hover": {
          "color": {
            "background": "var:preset|color|petrol-dark"
          }
        },
        "typography": {
          "fontSize": "var:preset|font-size|small",
          "fontWeight": "600",
          "letterSpacing": "0.05em",
          "textTransform": "uppercase"
        },
        "border": { "radius": "0px" },
        "spacing": {
          "padding": {
            "top": "var:preset|spacing|30",
            "bottom": "var:preset|spacing|30",
            "left": "var:preset|spacing|50",
            "right": "var:preset|spacing|50"
          }
        }
      }
    }
  }
}

---

Changelog

Alle Anderungen werden versioniert dokumentiert. Semantische Versionierung (SemVer) stellt sicher, dass Breaking Changes, neue Features und Bugfixes klar erkennbar sind.