t3n News Entwicklung

So erstellst du dein eigenes WordPress-Theme

Das eigene WordPress-Theme erstellen – #1: Vorbesprechung und Vorbereitung

In dieser Artikelreihe geht es darum, ein WordPress-Theme zu erstellen – von Grund auf. Im ersten Teil treffen wir die notwendigen Vorbereitungen und besprechen kurz das Theme.

Das eigene WordPress-Theme erstellen – #1: Vorbesprechung und Vorbereitung

Einige von euch werden sich vielleicht noch daran erinnern, dass ich vor etwa einem Jahr schon ein paar Stücke dieser Reihe begonnen habe. Aus verschiedenen Gründen ist das nicht zuende geführt worden: Zum einen bin ich mit der Programmierung nebenbei nicht hinterher gekommen und zum anderen habe ich nach dem dritten Teil den Code des Themes noch mal komplett überarbeitet. Das soll dieses Mal nicht passieren und deshalb habe ich erst in Ruhe das Theme fertiggestellt. Jetzt kann es also noch mal losgehen.

Bevor wir mit den Vorbereitungen beginnen, könnt ihr euch hier eine Demo des fertigen Themes anschauen: Da werden wir am Ende der Reihe landen.

Besonderheiten des Themes

Ansicht der alternativen Startseite des WordPress-Themes. (Screenshot: Eigene Installation)
Ansicht der alternativen Startseite des WordPress-Themes. (Screenshot: Eigene Installation)

Das Theme richtet sich an Fotografen und bietet zwei Seiten-Templates: Das eine ist für eine alternative Startseite, auf der die neuesten Galerien aus den verschiedenen Seitengalerien angezeigt werden. Das andere zeigt alle Galerien der Seite und bietet sich für eine Art Portfolio-Seite an.

Des Weiteren gibt es noch zwei eigene Widgets, um die neuesten Galerien anzuzeigen und bestimmte Galerien hervorzuheben. Auf der Einzelseite einer Galerie werden unterhalb des Beitrags Galerien angezeigt, die in derselben Kategorie veröffentlicht wurden. Anpassen lässt sich das alles über den Customizer.

Vorbereitungen für die Erstellung des eigenen WordPress-Themes

Bevor wir beginnen, müssen wir ein paar Vorbereitungen treffen. Zuerst müssen wir uns natürlich WordPress installieren. Wie das funktioniert, könnt ihr in diesem Beitrag nachlesen.

Nachdem wir jetzt eine WordPress-Installation vorliegen haben, können wir uns schnell ein paar Beiträge, Seiten und andere Inhalte anlegen, indem wir die Testdaten von WP Test importieren. Geht dafür im WordPress-Backend auf „Werkzeuge“ > „Import“ und wählt dort den Punkt „WordPress“ in der Tabelle aus. Anschließend werdet ihr aufgefordert, das entsprechende Plugin zu installieren und könnt danach die XML-Datei importieren, die sich in dem ZIP-Archiv befindet.

Um das Theme während der Entstehung immer mal wieder auf Fehler zu überprüfen, installieren wir uns jetzt noch das Plugin „Theme Check“. Alle anderen Plugins solltet ihr deaktivieren, wenn es sich nicht um weitere Entwickler-Plugins handelt. In eurer wp-config.php-Datei setzen wir jetzt noch die Konstante WP_DEBUG auf true (die entsprechende Zeile sieht dann so aus:

define('WP_DEBUG', true);

Im nächsten Teil kümmern wir uns dann um die style.css-Datei.

Die weiteren Teile unserer WordPress-Reihe:

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
17 Antworten
  1. von Wolfram am 06.07.2014 (13:29 Uhr)

    Hallo,

    die Idee von euch kommt mir genau passend. Was mich besonders interessieren würde ist, wie mach ich es das das Menü beim scrollen oben am Bildschirm Rand bleibt. Des weiteren wäre interessant wie ein von links aufklappbares Menü erstellt werden kann, das sich durchs scrollen einklappt bzw separat gescrollt werden kann.

    Bin sehr gespannt :-)

    Grüße Wolfram.

    Antworten Teilen
  2. von Thomas am 06.07.2014 (14:10 Uhr)

    Das ist mal eine gute Idee. Ich werde diese Serie sehr interessiert verfolgen. Im Moment bin ich mit meinem Theme sehr zufrieden, aber wer weiß, vielleicht komme ich ja auf den Geschmack des selber machens.

    LG Thomas

    Antworten Teilen
  3. von Clemens am 06.07.2014 (14:14 Uhr)

    Es wäre schön, wenn es zu Beginn ein gutes Tutorial geben könnte, wie man zusammen mit XAMPP o.ä. WordPress auf dem eigenen PC instalieren und nutzen kann.

    Antworten Teilen
  4. von Jogt am 06.07.2014 (14:24 Uhr)

    Sehr schöne Idee! Werde die Serie mal verfolgen. Bisher habe ich mich immer etwas vor dem Schritt eines Eigenbaus gesträubt.

    Antworten Teilen
  5. von Paul am 06.07.2014 (14:34 Uhr)

    Auch wenn es sicherlich zur fortgeschrittenen Templateentwicklung gehört, wäre es interessant, wie Admin-Konfigurationseinstellungen und Plugins für das Template integriert werden können.

    Antworten Teilen
  6. von Nio.t am 06.07.2014 (20:41 Uhr)

    Ich fände es gut, wenn weniger auf CSS & JS eingegangen wird (wie z.B. die Frage mit dem Menü... btw.: position:fixed), sondern auf die Wordpress-spezifischen Möglichkeiten eingegangen wird.

    -> z.B. Möglichkeiten zum nachträglichen ändern von der Hintergrund- und Schriftfarbe. Also alles, was unter http://domainname.de/WordPress/wp-admin/customize.php steht.

    Der Rest ist ja - sobald man the_loop() und nen wengle PHP verstanden hat relativ einfach.

    LG

    Antworten Teilen
    • von Florian Brinkmann am 07.07.2014 (09:34 Uhr)

      Hallo Nio.t,
      auf den Theme-Customizer werde ich auf jeden Fall eingehen!
      Viele Grüße aus dem t3n-HQ,
      Flo

      Antworten Teilen
    • von Picco am 08.07.2014 (12:46 Uhr)

      Das sehe ich ganz genauso! Lieber mal die aktuellen PHP Schnipsel von WP in Deutsch erklären und mit den essentiellsten davon ein Minimalblog entwickeln. Als Erweiterung wäre interessant wie man Seitenmodule (z.B. Mitarbeiterverzeichnis, Gallerie oder Portfolio-Seiten) mit dem neuen WP erstellt. Habe mich seit 5 Jahren nicht mehr mit WP beschäftigt.

      Antworten Teilen
  7. von Tanja Berger am 08.07.2014 (07:13 Uhr)

    Mich unteressiert, wie eine sinnvolle .htaccess-Datei aussieht. Es gibt gute Bücher zum Thema WP-Theme. Wie eine .htaccess-datei aufgebaut wird, ist dort nicht beschrieben. Leider.

    Antworten Teilen
  8. von Stefan am 08.07.2014 (08:59 Uhr)

    Ist vielleicht auch eher was für das Fazit, aber mich würde mal interessieren wie es nach der Entwicklung von einem Theme weitergeht. Damit mein ich was muss ich beachten wenn neue WordPress Versionen raus kommen, muss ich dann jedes mal nachschauen ob mein Code noch funktioniert und wenn ja wo muss ich da schauen oder reicht es ein plugin zu installieren das mir das sagt?

    Schöne Artikelreihe

    Antworten Teilen
  9. von Aline am 08.07.2014 (19:15 Uhr)

    Super Idee, ich bin gespannt. Mich würde interessieren - falls es nicht sowieso geplant ist - und ich fände es ganz hilfreich einen kurzen Einblick in den Aufbau von WP überhaupt zu bekommen, d.h. wie hängen die Dateien miteinander zusammen o.ä. Das ist ziemlich basic, aber vielleicht ist dafür ja irgendwo noch Platz?

    Antworten Teilen
  10. von 72f2d461d0bfb014 am 16.07.2014 (20:55 Uhr)

    Hallo,

    tolle Idee! Ich habe zwei Fragen:
    Ich bin zwar inzwischen recht erfahren, was den Seitenaufbau mit Wordpress betrifft. In Sachen Programmierung habe ich aber leider noch sehr wenig Erfahrung. Ist die Serie auch für Anfänger (mit Grundkenntnissen) geeignet?
    Wann kommt denn der zweite Teil, bzw. in welchen Abständen ist denn die weitere Veröffentlichung geplant?

    Ich freue mich schon auf die nächsten Teile und hoffe, dass ich viel lernen kann :)

    Antworten Teilen
    • von Florian Brinkmann am 17.07.2014 (08:35 Uhr)

      Hi,
      ich hoffe doch, dass ich die Reihe so hinbekomme, dass sie auch für Anfänger geeignet ist. Ich gehe auf alle genutzten WordPress-Funktionen ein und versuche sie kurz zu erklären.

      An dem nächsten Teil sitze ich bereits und werde versuchen, ihn bis Ende dieser Woche fertig zu bekommen.

      Antworten Teilen
  11. von Nabil am 22.07.2014 (10:23 Uhr)

    Gefällt mir sehr! Wird auch eine mobile Version für Smartphones und Tablets beachtet? Ich denke, das ist unverzichtbar.

    Antworten Teilen
  12. von davisbrown562 am 04.01.2016 (08:13 Uhr)

    Ich erstelle meine WordPress-Theme mit Theme-Generator "TemplateToaster"

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Templates
30 kostenlose WordPress-Themes für Responsive Design
30 kostenlose WordPress-Themes für Responsive Design

Das Angebot an kostenlosen Templates für die eigene Website wächst stetig. Auch die Auswahl an Wordpress-Themes, die Responsive Webdesign unterstützen, ist inzwischen beachtlich. » weiterlesen

Diese 30 kostenlosen WordPress-Themes für Responsive Design musst du kennen
Diese 30 kostenlosen WordPress-Themes für Responsive Design musst du kennen

Responsive Webdesign wird quasi zum Standard im Web. Wenn du WordPress nutzt, solltest du dir daher die folgenden 30 Themes nicht entgehen lassen. Alle haben ein Responsive Design und sind kostenlos. » weiterlesen

Baukasten für responsive WordPress-Themes: Das kann Cloudpress
Baukasten für responsive WordPress-Themes: Das kann Cloudpress

CloudPress ist ein Theme-Baukasten für WordPress. Wir zeigen euch, was das Tool alles kann. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?