In aller Regel würdest du nun eine Liste darüber erhalten was WordPress genau ist, was du alles brauchst und eine riesen Geschichte dahinter.
Das wollen wir vermeiden und daher legen wir einfach direkt los. Denn wer hat schon Lust auf ewige Vorträge.

Ich werde auch das ganze anhand eines Beispiel HTML Templates erklären, welches ihr natürlich hier auch über den Shop runterladen könnt für 10€.


Ihr könnt aber natürlich auch euer eigenes Theme designen und an HTML anpassen. Wir arbeiten hier ohne Theme Builder o.ä. !!! Ganz am Ende werde ihr ein WordPress Theme besitzen, welches ihr sogar über den Customizer bearbeiten könnt. Und ein eigenes Addon werdet ihr ebenfalls besitzen.

1. Vorbereitung und Datei Erstellung

Wie in 1000 anderen Tutorials auch, benötigen wir auch hier das selbe.
Erstmal WordPress. Also geht auf WordPress.org, downloaded die neuste Version und installiert diese bei euch. Solltet ihr einen soliden Hoster haben wie z.b. E4Hosting.com, dann könnt ihr auch direkt über das Cpanel Dashboard das ganze installieren. Ich selber nutze bereits 2 Jahre diesen Hoster und kann behaupten, dass dies wirklich super läuft und man eine noch nie dagewesene Leistung bekommt wie z.b. 1024MB MemLimit oder 1024mb Upload Files.

Aber gut nun mit der geheimen Werbung :D. Ihr habt WordPress bei euch installiert?
Perfekt, nun benötigt ihr nur noch einen Editor, ich selber nutze Notepad +.
Damit arbeite ich privat und auch in meinem Beruf als Webdesigner am liebsten.

Das wars eigentlich auch schon mit der Vorbereitung. Du siehst, es müssen nicht immer 10 Kapitel sein, bevor ein Tutorial überhaupt los geht.

2. Wir erstellen ein Theme

Nun wird es aber interessant, findest du nicht? Wir benötigen eine Dateien für unserer Theme, bevor wir es im WordPress aufrufen können.
Wir erstellen und nun auf unserem Desktop erstmal ein paar Ordner. Dies wäre zum einen

  • Einen Themefolder (Wir nennen ihn einfach htmlpower)

In diesem Ordner erstellen wir und nun folgende Dateien

  • header.php
  • index.php
  • footer.php
  • functions.php
  • style.css

Nun öffnen wir die style.css und schreiben folgendes in die Datei

/*
 Theme Name: htmlpower
 Author: Euer Name
 Author URI: http://html-power.de
 Description: htmlpower website tutorial
 Version: 1.0
 */

Ihr könnt euch das ganze natürlich an eure Bedürfnisse anpassen. Die Datei speichern wir dann ab.

3. Unser erstes Theme im WordPress

Du hast nun den Grundstein für ein neues Theme im WordPress gelegt. Fühlt sich gut an oder?
Das ganze laden wir nun auf unseren FTP in \wp-content\themes\htmlpower
Alternativ kannst du den ganzen htmlpower ordner nun in eine Zip Datei packen und unter Designs -> Themes dies auch einfach hochladen.

Wenn ihr nun in euer WordPress geht unter Design -> Themes, sieht ihr bereits euer neues Theme. Wie genial und einfach war das denn?
Nun habt ihr natürlich noch keine Funktionen in eurem Theme, aber schon in kürze werdet ihr genau das geschafft haben.

Als erstes fällt uns allerdings auf, dass es gar kein Vorschaubild gibt?
Zuständig dafür ist die Datei screenshot.png, welches sich ebenfalls im Hauptordner befinden muss.
Du hast aber gerade keine Lust eine zu erstellen? Nimm einfach die hier (Rechtsklich -> speichern unter -> und nenne es screenshot.png)

Lade diese Datei nun ebenfalls in deinen Theme Ordner htmlpower. Nun wirst du unter Designs -> Themes sehen, dass dieses Bild dort erscheint.

4. Auf ins neue Kapitel

Das war auch schon das erste Kapitel unseres Tutorials, ohne viel schnick schnack. Denn keiner hat Lust auf ewiges Lesen.
Sobald das nächste Kapitel online ist, kannst du dies genau hier drunter sehen.

Du hast Fragen? Schreib einfach ein Kommentar.