Eigenes WordPress-Theme von Grund auf erstellen – Schritt-für-Schritt-Anleitung

Wie du ein individuelles WordPress-Theme komplett selbst erstellst

Wir bauen ein WordPress-Theme von Grund auf – beginnend mit einem einfachen Design. Der gesamte Prozess, von der Installation von WordPress über die Einrichtung der Theme-Vorlagen bis hin zum fertigen, lauffähigen Theme, wird hier erklärt. Dazu gehören auch Aspekte von WooCommerce und E-Commerce, die wir parallel zur Entwicklung von HTML, CSS und JavaScript behandeln.

00:00:00 – Einführung
00:02:00 – WordPress und unser individuelles Theme installieren
00:10:30 – Ordnerstruktur und Menüs für die WordPress-Website einrichten
00:15:50 – Der Header
01:05:04 – Call-to-Action auf der Startseite
01:29:55 – Banner auf der Startseite
01:49:40 – Sonderangebot auf der Startseite
02:14:40 – WooCommerce-Produkte auf der Startseite
02:53:30 – Kreissektion auf der Startseite
03:07:36 – Kundenbewertungen auf der Startseite
03:12:39 – Kontaktformular im Footer der Startseite
03:31:55 – Interne WordPress-Seite
03:53:33 – Blog-Beiträge (Nachrichten)
04:17:30 – Kontaktseite
04:30:20 – Blog-Kategorien
04:58:45 – Einrichtung von WooCommerce
05:13:05 – Einfaches WooCommerce-Produkt
05:58:12 – WooCommerce-Produkt mit Varianten
06:16:00 – Individuelles JavaScript für die Produktvarianten-Suche
07:20:13 – Dynamische WooCommerce-Produktliste auf der Startseite
07:31:35 – Dynamische E-Commerce-Suche im Header
08:52:30 – Fazit

Figma-Design-Dateien und Assets:

Das war erst Teil 1 dieses WordPress-E-Commerce-Website-Designs. Im zweiten Teil gehen wir auf weitere Anpassungen ein – inklusive Warenkorb- und Checkout-Seiten!

In diesem WordPress-Tutorial lernst du auch einige JavaScript- und PHP-Elemente kennen, die dir zeigen, wie man eine Website mit Grundlagen der Programmierung und des Codings erstellt. Wenn du...