WordPress-Entwicklung auf Pro Level 2025 Teil 2

Willkommen zurück, du moderner WordPress-Warrior! 🚀

In Teil 1 haben wir deinen Development-Workflow ins Jahr 2025 katapultiert. Du hast jetzt DDEV am Laufen, Vite mit Hot Module Replacement, und deine CSS-Änderungen erscheinen schneller im Browser als du “F5” sagen kannst.

Aber wir sind noch nicht fertig.

Heute machen wir aus deinem Setup eine absolute Entwicklungs-Kampfmaschine mit:

🎨 Tailwind CSS – Utility-First Styling ohne Custom-CSS-Hölle
🔄 BrowserSync – Multi-Device Testing mit synchronisiertem Scrolling
📱 Real-Device Testing – Handy, Tablet, Desktop gleichzeitig testen
⚡ PHP File Watching – Automatische Browser-Reloads bei Template-Änderungen

Nach diesem Tutorial wirst du nie wieder manuell zwischen Devices wechseln oder F5 drücken müssen.

Versprochen.

Das Problem mit traditionellem CSS (aka die Hölle)

Kennst du das?

Du schreibst CSS:

.header-navigation-container-wrapper-outer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #1a1a1a;
}

.header-navigation-container-wrapper-outer-mobile {
  flex-direction: column;
  padding: 0.5rem 1rem;
}

.header-navigation-container-wrapper-outer-mobile-dark-mode {
  background-color: #0a0a0a;
}

Drei Monate später kommst du zurück zu deinem Code und denkst: “Was zum Teufel habe ich hier gebaut?”

Die CSS-Datei ist 2000 Zeilen lang. Die Hälfte der Klassen wird nirgendwo verwendet. Dein Specificity-War eskaliert, also fügst du !important hinzu. Dann noch eins. Dann noch eins.

Willkommen in der CSS-Hölle. Population: Du.

Enter Tailwind CSS – Utility-First Magic ✨

Tailwind CSS ist anders. Radikal anders.

Statt Custom-CSS-Klassen zu schreiben, nutzt du vorgefertigte Utility-Klassen direkt im HTML:

<nav class="flex justify-between items-center p-4 bg-gray-900">
  <!-- Navigation -->
</nav>

Das war’s. Kein Custom CSS. Kein Class-Naming-Drama. Keine 2000-Zeilen-Stylesheet-Apokalypse.

Deine React- und Vue-Developer-Freunde nutzen Tailwind schon seit Jahren. Zeit, dass wir WordPress-Devs aufholen.

Warum Tailwind der Game-Changer ist

Kein CSS-Naming-Drama mehr Nie wieder überlegen, ob du .btn-primary oder .button-main oder .cta-button-hero nennen sollst.

<!-- Vorher: Custom CSS -->
<button class="btn-primary-large-with-shadow">Click me</button>

<!-- Nachher: Tailwind -->
<button class="px-6 py-3 bg-blue-600 text-white rounded-lg shadow-lg hover:bg-blue-700">
  Click me
</button>

Jeder, der deinen Code liest, weiß sofort, was dieser Button macht. Keine externe CSS-Datei checken. Keine Überraschungen.

Responsive Design ohne Media Queries

<div class="text-sm md:text-base lg:text-lg xl:text-xl">
  Responsive Text – kein Media Query in Sicht!
</div>

Das ist Magie. Pure Magie.

Dark Mode in einer Sekunde

<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
  Automatischer Dark Mode Support
</div>

Try doing that with custom CSS without crying. I’ll wait. ☕

Nie wieder unused CSS Tailwind analysiert deine Dateien und entfernt automatisch alle Klassen, die du nicht benutzt. Dein Production-CSS ist winzig.

Deine Custom CSS: 500kb Tailwind Production Build: 8kb

Mic drop. 🎤

Los geht’s: Tailwind CSS installieren

Zurück zu unserem Projekt aus Teil 1. Falls du Teil 1 übersprungen hast – bad move, Bro. Geh zurück und hol das nach. Ich warte hier.

In dein Theme-Verzeichnis wechseln

cd wp-content/themes/mein-modernes-theme

Tailwind CSS installieren

ddev pnpm add -D tailwindcss postcss autoprefixer
ddev pnpm exec tailwindcss init -p

Was passiert hier?

tailwindcss: Das Tailwind-Framework
postcss: CSS-Processor (Tailwind braucht das)
autoprefixer: Fügt automatisch Vendor-Prefixes hinzu (-webkit-, -moz-, etc.)
tailwindcss init -p: Erstellt Config-Dateien

Du solltest jetzt zwei neue Dateien haben:

tailwind.config.js
postcss.config.js

Tailwind konfigurieren

Öffne tailwind.config.js und ersetze den Inhalt:

export default {
  content: [
    "./src/**/*.{js,jsx,ts,tsx,vue}",
    "./**/*.php",
    "./inc/**/*.php"
  ],
  theme: {
    extend: {
      colors: {
        'wp-blue': '#0073aa',
        'wp-dark': '#1d2327',
      },
      fontFamily: {
        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'sans-serif'],
      }
    }
  },
  plugins: []
}

Was macht das?

content: Tailwind scannt diese Dateien nach Utility-Klassen.
theme.extend: Hier fügst du deine Custom-Farben und Fonts hinzu.
plugins: Hier kommen später optionale Tailwind-Plugins rein.

Pro-Tipp: Tailwind scannt nur die Dateien, die du im content-Array angibst. Vergisst du eine Datei, funktionieren die Klassen darin nicht. Don’t say I didn’t warn you. 😏

Tailwind in dein CSS importieren

Öffne src/css/main.css und ersetze alles mit:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Dein Custom CSS (falls du wirklich noch welches brauchst) */

Das war’s. Drei Zeilen. Tailwind ist ready.

Vite neu starten

ddev restart

Vite sollte jetzt automatisch starten (wegen dem Daemon aus Teil 1). Check die Logs:

ddev logs | grep vite

Du solltest sehen: vite | VITE v5.x.x ready in XXX ms

Tailwind testen – Das erste Styling

Zeit, Tailwind in Action zu sehen!

index.php updaten

Öffne index.php und ersetze den Content mit diesem modernen Layout:

<!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('bg-gray-50 dark:bg-gray-900'); ?>>
    
    <!-- Header -->
    <header class="bg-white dark:bg-gray-800 shadow-md">
        <div class="container mx-auto px-4 py-6">
            <div class="flex justify-between items-center">
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white">
                    <?php bloginfo('name'); ?>
                </h1>
                <nav class="hidden md:flex space-x-6">
                    <a href="#" class="text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 transition">
                        Home
                    </a>
                    <a href="#" class="text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 transition">
                        About
                    </a>
                    <a href="#" class="text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 transition">
                        Contact
                    </a>
                </nav>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="container mx-auto px-4 py-12">
        <?php
        if (have_posts()) :
            while (have_posts()) : the_post();
        ?>
            <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 mb-8">
                <h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
                    <?php the_title(); ?>
                </h2>
                
                <div class="prose prose-lg dark:prose-invert max-w-none">
                    <?php the_content(); ?>
                </div>
                
                <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
                    <p class="text-sm text-gray-600 dark:text-gray-400">
                        Veröffentlicht am <?php echo get_the_date(); ?>
                    </p>
                </div>
            </article>
        <?php
            endwhile;
        else :
        ?>
            <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
                <p class="text-yellow-700">
                    Keine Beiträge gefunden. Zeit, welche zu schreiben! ✍️
                </p>
            </div>
        <?php
        endif;
        ?>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12 mt-20">
        <div class="container mx-auto px-4 text-center">
            <p class="text-gray-400">
                © <?php echo date('Y'); ?> <?php bloginfo('name'); ?> – 
                <span class="text-blue-400">Powered by Vite + Tailwind + DDEV</span> 🚀
            </p>
        </div>
    </footer>

    <?php wp_footer(); ?>
</body>
</html>

Speichern und staunen

Öffne deinen Browser:

ddev launch

BOOM. 💥

Du hast jetzt ein modernes, responsive WordPress-Theme mit:

✅ Dark Mode Support
✅ Responsive Navigation
✅ Moderne Schatten und Spacing
✅ Smooth Hover-Effekte
✅ Null Zeilen Custom CSS

Das ist Tailwind-Magie, Baby. ✨

Jetzt kommt der Kracher: BrowserSync für Multi-Device Testing

Hier wird’s richtig geil.

Stell dir vor:

Du hast dein Laptop vor dir
Dein Handy liegt daneben
Dein Tablet steht auf dem Ständer
Alle drei zeigen deine Website

Du scrollst auf dem Laptop – alle drei Geräte scrollen synchron mit. Du klickst auf einen Link – alle drei Geräte öffnen die Seite. Du füllst ein Formular aus – alle drei Geräte zeigen deine Eingabe.

Das ist BrowserSync. Und es ist fucking awesome. 🔥

`vite-plugin-browser-sync` installieren

ddev pnpm add -D vite-plugin-browser-sync

Vite-Config updaten

Öffne vite.config.js und ersetze den Inhalt:

import { defineConfig } from 'vite'
import path from 'path'
import VitePluginBrowserSync from 'vite-plugin-browser-sync'

export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 5173,
    strictPort: true,
    origin: `${process.env.DDEV_PRIMARY_URL?.replace(/:\d+$/, '') || 'http://localhost'}:5173`,
    cors: {
      origin: /https?:\/\/([A-Za-z0-9\-\.]+)?(\.ddev\.site)(?::\d+)?$/
    }
  },
  build: {
    manifest: true,
    outDir: 'dist',
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, 'src/main.js')
      }
    }
  },
  plugins: [
    VitePluginBrowserSync({
      dev: {
        bs: {
          proxy: process.env.DDEV_PRIMARY_URL || 'http://localhost',
          port: 3000,
          ui: {
            port: 3001
          },
          open: false,
          notify: false,
          files: [
            '**/*.php',
            'src/**/*.{css,js}'
          ],
          ghostMode: {
            clicks: true,
            scroll: true,
            forms: true,
            location: true
          },
          injectChanges: true,
          logLevel: 'info',
          logPrefix: 'BrowserSync',
          logConnections: true
        }
      }
    })
  ]
})

Was macht das alles?

proxy: BrowserSync proxied deinen DDEV-Server.
port: 3000: BrowserSync läuft auf Port 3000.
files: Diese Dateien werden auf Änderungen überwacht.
ghostMode: Das ist die Sync-Magie – Clicks, Scrolling, Forms werden synchronisiert.
injectChanges: CSS-Änderungen werden injected ohne Full-Page-Reload.

DDEV Config anpassen

Bearbeite .ddev/config.yaml und füge den BrowserSync-Port hinzu:

web_extra_exposed_ports:
  - name: vite
    container_port: 5173
    http_port: 5172
    https_port: 5173
  - name: browsersync
    container_port: 3000
    http_port: 2999
    https_port: 3000
  - name: browsersync-ui
    container_port: 3001
    http_port: 3001
    https_port: 3002

DDEV neu starten

ddev restart

Wichtig: Warte, bis alles hochgefahren ist. Check die Logs:

ddev logs -f

Du solltest sehen:

vite | VITE v5.x.x ready
vite | [BrowserSync] Proxying: https://mein-wp-projekt.ddev.site
vite | [BrowserSync] Access URLs:
vite | External: https://mein-wp-projekt.ddev.site:3000

Multi-Device Testing – Let the Magic begin 🎩✨

Deine BrowserSync URL finden

ddev describe

Suche nach der URL mit Port 3000. Sie sieht etwa so aus: https://mein-wp-projekt.ddev.site:3000

Auf deinem Laptop öffnen

ddev launch :3000

Deine Website öffnet sich. Oben rechts siehst du kurz “BrowserSync: connected” – das ist das Zeichen, dass die Magie funktioniert.

Auf deinem Handy öffnen

Stelle sicher, dass dein Handy im gleichen WLAN wie dein Laptop ist.

Öffne auf dem Handy den Browser und gib ein: https://mein-wp-projekt.ddev.site:3000

Falls dein Handy meckert wegen Self-Signed Certificate: Akzeptiere die Warnung. Das ist deine lokale Dev-Umgebung, kein Production-Server. Chill. 😎

Auf deinem Tablet öffnen

Gleiches Spiel: https://mein-wp-projekt.ddev.site:3000

Jetzt kommt der Gänsehaut-Moment

Du hast jetzt drei Geräte offen. Alle zeigen deine Website.

Scrolle auf deinem Laptop nach unten.

Siehst du das? 👀

Alle drei Geräte scrollen synchron mit. Kein Lag. Kein Delay. Perfekt synchron.

Klicke auf einen Link.

Alle drei Geräte navigieren zur gleichen Seite.

Fülle ein Formular aus.

Alle drei Geräte zeigen deine Eingabe.

Das ist BrowserSync. Und es ist verdammt cool. 🤯

PHP File Watching – Automatische Reloads bei Template-Änderungen

Eine Sache fehlt noch: Wenn du eine .php-Datei änderst, lädt der Browser nicht automatisch neu.

Das fixen wir jetzt.

PHP-Dateien im Watch-Array

Die gute Nachricht: Wir haben das bereits in der vite.config.js eingebaut!

files: [
  '**/*.php',
  'src/**/*.{css,js}'
]

BrowserSync überwacht jetzt:

✅ Alle PHP-Dateien
✅ Alle CSS-Dateien in src/
✅ Alle JS-Dateien in src/

Live testen

Öffne index.php und ändere den Footer-Text:

<p class="text-gray-400">
    © <?php echo date('Y'); ?> <?php bloginfo('name'); ?> – 
    <span class="text-blue-400">BrowserSync ist fucking awesome 🔥</span>
</p>```

**Speichern.**

Alle drei Browser-Fenster sollten automatisch reloaden und den neuen Text zeigen.

Wenn du das zum ersten Mal siehst, ist das ein magischer Moment. 🎩✨

Du wirst nie wieder manuell F5 drücken. Versprochen.

### Bonus: BrowserSync UI erkunden

BrowserSync hat eine geile UI, die du checken solltest.

Öffne in deinem Browser:
`https://mein-wp-projekt.ddev.site:3001`

Hier kannst du:

-   ✅ Netzwerk-Throttling simulieren (Test auf langsamen Verbindungen)
-   ✅ Sync-Optionen ein/ausschalten
-   ✅ Connected Devices sehen
-   ✅ History deiner Test-URLs anschauen

> **Pro-Tipp:** Nutze Network Throttle auf "Slow 3G" und teste, wie deine Website auf beschissenen Verbindungen performt. Deine Nutzer werden's dir danken. 🙏

## Tailwind + BrowserSync Workflow in Action

Jetzt kommt der beste Teil: Der komplette Workflow zusammen.

**Szenario: Du baust eine Hero-Section**

1.  Öffne alle drei Devices (Laptop, Handy, Tablet) mit deiner BrowserSync-URL.
2.  Öffne `index.php` in deinem Code-Editor.
3.  Füge eine Hero-Section hinzu:

```php
<!-- Hero Section -->
<section class="relative bg-gradient-to-r from-blue-600 to-purple-600 text-white py-32">
    <div class="container mx-auto px-4 text-center">
        <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold mb-6 animate-pulse">
            WordPress Development 2025 🚀
        </h1>
        <p class="text-xl md:text-2xl mb-8 text-blue-100">
            DDEV + Vite + Tailwind + BrowserSync = 🔥
        </p>
        <div class="flex flex-col md:flex-row gap-4 justify-center">
            <a href="#" class="px-8 py-4 bg-white text-blue-600 rounded-lg font-bold hover:bg-gray-100 transition transform hover:scale-105">
                Get Started
            </a>
            <a href="#" class="px-8 py-4 bg-transparent border-2 border-white rounded-lg font-bold hover:bg-white hover:text-blue-600 transition">
                Learn More
            </a>
        </div>
    </div>
</section>

Speichern.

BAM. 💥

Alle drei Devices reloaden automatisch.
Die Hero-Section erscheint sofort.
Du siehst, wie sie auf allen drei Screen-Sizes aussieht.
Gleichzeitig. In Echtzeit. Ohne irgendetwas zu tun.

Ändere die Farben:

<section class="relative bg-gradient-to-r from-pink-500 to-orange-500 text-white py-32">

Speichern. Alle Devices reloaden. Neue Farben. Instant.

Teste Hover-Effekte: Hover über einen Button auf dem Laptop – sieh zu, wie der Hover-State auf allen Devices synchron erscheint.

Das ist der modernste WordPress-Workflow 2025. Period.

Tailwind Typography Plugin (Bonus für Content)

Wenn du viel mit Content arbeitest (Blog-Posts, etc.), brauchst du das Typography-Plugin:

ddev pnpm add -D @tailwindcss/typography

tailwind.config.js updaten:

export default {
  // ... dein content und theme ...
  plugins: [
    require('@tailwindcss/typography')
  ]
}

Jetzt kannst du die prose-Klassen nutzen:

<div class="prose prose-lg dark:prose-invert max-w-none">
    <?php the_content(); ?>
</div>

Das stylt automatisch:

✅ Headings
✅ Paragraphs
✅ Lists
✅ Links
✅ Blockquotes
✅ Code Blocks

Und alles sieht professional aus. Out of the box. Ohne Custom CSS.

Try it. You’ll love it. 💙

Troubleshooting (falls die Magie streikt)

BrowserSync lädt nicht?

ddev logs | grep -i browsersync

Suche nach Fehlern. Häufigste Probleme:

Port 3000 schon belegt? Ändere in vite.config.js den Port.
Firewall blockt? Erlaube Port 3000 in deiner Firewall.
DDEV nicht neu gestartet? ddev restart

Handy kann nicht connecten?

Gleiches WLAN? Prüfe, ob Laptop und Handy im gleichen Netzwerk sind.
URL korrekt? Nutze die HTTPS-Version mit Port 3000.
Self-Signed Cert? Akzeptiere die Browser-Warnung.

PHP-Changes laden nicht?

Prüfe vite.config.js:

files: [
  '**/*.php',  // ← Das muss da stehen!
  'src/**/*.{css,js}'
]

CSS-Changes erscheinen nicht?

Browser-Cache leeren (Cmd/Ctrl + Shift + R).
Tailwind content-Pfade prüfen in tailwind.config.js.
Vite neu starten: ddev restart.

Production Build erstellen

Wenn du ready für Production bist:

ddev pnpm run build

Das erstellt:

✅ Optimierte CSS-Datei (winzig klein dank Tailwind Purge)
✅ Optimierte JS-Datei (minified & uglified)
✅ manifest.json für Asset-Loading

Deine class-vite.php aus Teil 1 lädt automatisch die Production-Assets statt Dev-Server. Easy peasy. 🍋

Was wir geschafft haben (und warum du jetzt ein Boss bist)

Du hast jetzt:

✅ Tailwind CSS – Utility-First Styling ohne Custom-CSS-Chaos
✅ BrowserSync – Multi-Device Testing mit Sync-Magic
✅ Automated Reloads – PHP, CSS, JS ändern = Auto-Reload
✅ Real-Device Testing – Handy, Tablet, Desktop gleichzeitig
✅ Responsive Testing – Alle Breakpoints auf einen Blick
✅ Dark Mode Support – Built-in, keine Extra-Arbeit
✅ Production-Ready Builds – Optimiert und winzig klein

Du entwickelst WordPress jetzt auf dem Level, das Top-Agenturen nutzen.

React-Devs haben nichts mehr, womit sie angeben können. Vue-Devs sind neidisch. Und du? Du bist der WordPress-Gigachad. 💪

Was kommt in Teil 3?

Im nächsten Teil wird’s richtig spicy:

🖖 Vue.js Integration
- Modern Component Development
- Single File Components (.vue)
- WordPress REST API Magic
- Reactive State Management
- Praktisches Beispiel: Interaktiver Filter mit Live-Search

Spoiler: Nach Teil 3 wirst du nie wieder jQuery anfassen wollen. Good riddance. 😎

Deine nächsten Schritte

Experimentiere mit Tailwind
- Bau ein Custom Layout
- Teste verschiedene Color Schemes
- Probiere Animations-Klassen aus
Nutze BrowserSync täglich
- Teste auf echten Devices
- Checke Performance mit Network Throttling
- Gewöhne dich an synchronisiertes Testing
Check die Tailwind Docs
- tailwindcss.com
- Die Docs sind fucking gut.
- Bookmark das. Seriously.
Share dein Setup
- Zeig es deinen Dev-Freunden.
- Poste auf Twitter/LinkedIn.
- Tag mich, ich will deine Builds sehen! 🔥

Bis zum nächsten Mal!

Du bist jetzt ein moderner WordPress-Developer. Mit einem Setup, das die meisten React- und Vue-Devs neidisch macht.

Questions? Feedback? Stuck irgendwo? Drop a comment. Ich helfe dir.

Wir sehen uns in Teil 3, wo wir Vue.js in den Mix werfen und richtig interaktive Components bauen.

Stay awesome. Keep building. 🚀

Nützliche Links:

Das vollständige Code-Repository: GitHub – Modern WordPress Stack Tutorial

P.S.: Wenn dir dieser Guide geholfen hat, teile ihn mit anderen WordPress-Devs, die noch in 2009 feststecken. Let’s drag them into 2025. Together. 💪🔥