Schritt für Schritt zum eigenen WordPress Theme

Du hast bereits eine eigene Homepage, oder Du hast ein Design gefunden, das Dir sehr gefällt. Du möchtest von Null weg Dein eigenes WordPress Theme machen. Hier folgt eine Schritt für Schritt Anleitung.

This article in english: How To Design Your Own WordPress Theme.

Wie immer:Viele Wege führen nach Rom, dies hier ist nur einer. Dieser Artikel ist wegen all der Code Beispiele lang. Du kannst jeden Schritt gleich mitmachen. Ein Texteditor wäre gut – WordPad reicht völlig.

Sollte ich am Schluss keinen Kommentar von Dir lesen, oder niemals Dein fertiges Werk bestaunen können, dann fällt Dir der Himmel auf den Kopf. Da bin ich absolut sicher!

  • Du brauchst WordPress . ;)
  • Am besten das leereblank WordPress Theme von mir.
  • Ein bisschen Zeit und Kaffee (solltest Du meinen, Du wirst krank dabei geht auch Tee ;)
  • Wenn Du ein bisschen von HTML und CSS verstehst wäre es von Vorteil, doch Du kannst auch einfach alles machen und dabei ein wenig was lernen.
  • Einen Editor, wie erwähnt WordPad reicht auch. Dreamweaver nicht, weil der die Template Tags von WP verändert!
  • Magst Du das gleich online machen, dann muss das Theme die chmod Rechte:beschreibbar haben.

Jetzt brauchen wir eine Struktur eines Layouts Layout Gala==>Layout Gala Design n.30.

Zwei fluide Spalten, ein Header und ein Footer.

Alle Dateien immer sichern!

Layout Gala Design n.30.==>Quellcode ==> CSS


<style type="text/css">
html,body{margin:0;padding:0;}
body{font: 76% arial,sans-serif;}
p{margin:0 10px 10px;}
a{display:block;color: #006;padding:10px;}
div#header{position:relative;}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B;}
div#header a{position:absolute;right:0;top:23px;}
div#content p{line-height:1.4;}
div#navigation{background:#B9CAFF;}
div#extra{background:#FF8539;}
div#footer{background: #333;color: #FFF;}
div#footer p{margin:0;padding:5px 10px;}
div#footer a{display:inline;padding:0;color: #C6D5FD;}

div#wrapper{float:left;width:70%;}
div#navigation{float:right;width:29.9%;}
div#extra{clear:both;width:100%;}
</style>

Kopiere alles ab html bis zur letzten geschwungenen Klammer von div#extra in die [Admincenter==>Theme==>Theme Editor==>] style.css =>danach klicke auf speichern..

Layout Gala Design n.30.==>Quellcode ==> HTML

Jetzt brauchen wir das HTML zu genau diesen CSS Angaben. Ich nutze immer jede Menge an HTML Kommentaren, damit ich den überblick nicht verliere, und damit auch später eventuell andere sich auskennen.

Der Text in den Codebeispielen ist Englisch wie im Original, weil er an und für sich egal ist. Aber damit Du weiß was ich wann wo herauskopierte.


<body>
       <div id="container">
          <div id="header"><h1>Header</h1>download this layout
            </div><!--ende von  id header-->

      <div id="wrapper">
          <div id="content">
               <p><strong>1) Content here.</strong> column long long column very long ...l very.
                   </p>
              <p>very make make fill silly long long ..
                  </p>
                 and so on....
             </div><!-- ende von id content-->
        </div><!--ende von  id wrapper-->

       <div id="navigation">
            <p><strong>2) Navigation here.</strong> l
            </p>
       </div><!--ende von id navigation-->

    <div id="extra">
          <p><strong>3) More stuff here.</strong> very text make long column 
               </p>
         </div><!--ende von id extra-->

     <div id="footer">
            <p>The footer. You can go to the ...
              </p>
       </div><!--ende von id footer-->
</div><!--ende von id container-->

</body>

Erkennbar ist jetzt, dass „div id container“ der Layer, die Box drumherum ist. Denn „id container“ fängt gleich nach dem body Tag an und endet vor dem ganz unten.

Dieses HTML richtig in die verschiedenen .php Templates von WordPress bringen.

Wenn Du auch nur ganz wenig von HTML weißt, dann weißt Du, dass der body Tag gleich dem /head Tag beginnt und zu 99,9999% findest Du dies in der header.php. Der body Tag endet vor /html und dies ist sicher in der footer.php. ;) Div id header und div id footer absolut das gleiche.

[Admincenter==>Theme==>Theme Editor==>] header.php


<body>
<div id="container">
  <div id="header">
                     <!--blog titel-->
               <h1>
		<a href="< ?php echo get_settings('home'); ? >/">< ?php bloginfo('name'); ? ></a>
		
                  <!--blog beschreibung-->
                  < ?php bloginfo('description'); ? >
               </h1>
       </div><!--ende von  id header-->
<!--header.php end-->

[Admincenter==>Theme==>Theme Editor==>] footer.php


<!--footer.php-->
<div id="footer">
	<p>
		<?php bloginfo('name'); ?> l&auml;ft stressfrei mit 
		<a href="http://wordpress.org/">WordPress</a>
		<br /><a href="feed:<?php bloginfo('rss2_url'); ?>">RSS Feed</a>
		and <a href="feed:<?php bloginfo('comments_rss2_url'); ?>">RSS Feed für Kommentare</a>.
		<!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->
	        <!--wichtig-->
		<?php wp_footer(); ?>
          </p>
      </div><!--ende von id footer-->
</div><!--ende von id container--></body>
</html>


Das leere WP Theme hat jede Menge an HTML Kommentaren. Du findest dort wo eine single.php anfängt oder aufhört, wo die page.php beginnt und sie endet und es ist wichtig, dass das HTML zwischen diesen Kommentaren steht.

Wenn Du Dir jetzt das Blog ansiehst, sieht es nicht gerade hübsch aus. Aber für den überblick reichts.

Jetzt div id wrapper und div id content.

[Admincenter==>Theme==> Theme Editor==>] index.php


<?php get_header(); ?>

	<!--index.php-->
<div id="wrapper">
          <div id="content">
        <!--the loop-->
	<?php if (have_posts()) : ?>
and so on ........


                    Leider
		<?php include (TEMPLATEPATH . "/searchform.php"); ?>
        <!--nicht loeschen -->
	<?php endif; ?>

               </div><!-- ende von  id content-->
        </div><!--ende von id wrapper-->
<!--index.php end-->
<!--include sidebar-->
<?php get_sidebar(); ?>
<!--include footer-->
<?php get_footer(); ?>

Schau Dir jetzt Deine Seite an… aus dem Chaos entsteht Neues … ;)

Nun „div id navigation“. Die rechte Spalte .

[Admincenter==>Theme==> Theme Editor==>] sidebar.php


<!--sidebar.php-->
<div id="navigation">
		<!--suche-->
....
.....
<?php } ?>
</div><!--ende von id navigation-->		

<!--sidebar.php end-->

Schau es Dir nicht an! Der Header und der Footer sind sicher links, content ist Grau und Dir wird schwindelig ;).
Nun das HTML oben und die CSS Angaben erzählen uns von div id extra. Und dieses sollte das Floaten auflösen. Da es aber jetzt noch kein div id extra wo gibt, fließt alles irgendwie durcheinander.

Ein neues WP Template erstellen und WP befehlen dieses zu nutzen

Aus diesem Grund suchte ich genau dieses Layout Gala Design n.30 als Beispiel aud . ;)

1. Öffne Deinen Editor speichere eine leere Seite als extra.php. Und lade diese in den Theme Ordner.
wp-content/themes/yourtheme/.
2. [Admincenter==>Theme==> Theme Editor==>] extra.php


<!--extra.php-->
 <div id="extra">
          <p><strong>3) More stuff here.</strong> very text make long column 
               </p>
         </div><!--end of id extra-->
<!--end of extra.php-->

Ganz oben zeigt das HTML diese extra.php sollte zwischen sidebar.php und footer.php sein.

[Admincenter==>Theme==> Theme Editor==>] index.php



</div><!-- ende von  id content-->
        </div><!--ende von  id wrapper-->
<!--index.php end-->
<!--include sidebar-->
<?php get_sidebar(); ?>

<!--include extra.php-->
<?php include (TEMPLATEPATH . '/extra.php'); ?>

<!--include footer-->
<?php get_footer(); ?>

Diese Angabe:


<!--include extra.php-->
<?php include (TEMPLATEPATH . '/extra.php'); ?>

befiehlt WP das neue Template zu nutzen, es wird includiert, eingebunden. /extra.php oder /wasauchimmerdumagst.php oder oder oder……..

Jetzt sieht die Seite sicher wesentlich besser aus, Browsercache leeren mit strg+F5, ;)

Die Template Hierarchie von WP

Mit der index.php und einer style.css alleine funktioniert WP auch. Hast Du aber eine page.php für die statischen Seiten kannst Du dort leichter eigene Angaben für diese Seiten machen. Die category.php zeigt die Kategorien, die archive.php die Monats und Jahresarchive etc. Category-3.php nutzt WP automatisch nur für die Kategorie mit der ID 3.

D.h. wenn Du jetzt auf eine statische Seite klickst wird Chaos herrschen, ebenso bei all den anderen Klicks.

[Admincenter==>Theme==> Theme Editor==>]archive.php


<?php get_header(); ?>
<div id="wrapper">
          <div id="content">
	<!--the loop-->

		<?php if (have_posts()) : ?>

......
....
<!--nicht loeschen -->
	<?php endif; ?>
		
	       </div><!-- ende von  id content-->
        </div><!--ende von  id wrapper-->
<!--archive.php end-->

<?php get_sidebar(); ?>
<!--include extra.php-->
<?php include (TEMPLATEPATH . '/extra.php'); ?>
<!--include footer-->
<?php get_footer(); ?>

[Admincenter==>Theme==> Theme Editor==>]single.php


<!--single.php-->
	<div id="wrapper">
            <div id="content">
<!--loop-->			
  <?php if (have_posts()) :
......
......
Leider,.....

<!--nicht loeschen-->
<?php endif; ?>
	
	</div><!-- ende von  id content-->
        </div><!--ende von  id wrapper-->
<!--single.php end-->


<?php get_sidebar(); ?>
<!--include extra.php-->
<?php include (TEMPLATEPATH . '/extra.php'); ?>
<!--include footer-->
<?php get_footer(); ?>

Versuche es jetzt selber bei den anderen Templates.

Single.php und ab wann beginnt ein Artikel und wann endet er?

Das da erzeugt einen Artikel.


 <!--the loop-->
	<?php if (have_posts()) : ?>
		<!--the loop-->
		<?php while (have_posts()) : the_post(); ?>
		
			<!--beitrags titel als link-->
				<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link für <?php the_title(); ?>"><?php the_title(); ?></a></h2>
		     <!--post zeit -->	
                     <?php the_time('F jS, Y') ?>

                      <!--post autor-->
                      <?php the_author() ?>
				
				<!--post text mit dem lies weiter link-->
					<?php the_content('weiterlesen &raquo;'); ?>
				<!--zeigt die kategorien, edit link, kommentare-->
		
				Geschrieben in  <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('Kein Kommentar &#187;', '1 Kommentar &#187;', '% Kommentare &#187;'); ?>
			
                    
	        <!--ende eines posts-->
		<?php endwhile; ?>

Speichere die Dateien und spiel Dich einfach ein bisschen damit. Versuch und Irrtum sind gute Lehrmeister und es kann nichts schiefgehen, weil Du ja Sicherungen hast! ;)

… Bei Fragen, fragen, war es hilfreich erzähl es weiter und denke an den Himme .. :-)
43

43 Beiträge zu “Schritt für Schritt zum eigenen WordPress Theme

  1. Kommentar Autor
    manfred
    Kommentar

    hallo, ich verstehe leider irgendwas grundsätzliches nicht. ich möchte gerne in meiner site http://www.manfredgottert.de unter dem Link „Blog“ ein Blog einrichten, der aber das gleiche erscheinungsbild wie meine website haben soll. ich kann doch nicht eine ganz andere css-datei hineinkopieren. vielleicht sollte ich lieber briefträger werden.
    danke, manfred

  2. Kommentar Autor
    Monika
    Kommentar

    Hi Manfred
    Du installierst Dir WordPress in einem eigenen Ordner auf Deinem Webspace. Nenne den Ordner :blog,
    dann kannst Du so wie oben beschrieben den Blog genauso designen wie Deine vorhandene Homepage, denn ein WordPress Theme hat eine eigene style.css.
    In Deiner Homepage setzt Du dann einfach einen Link:deinedomain.tls/blog/ und schon bist Du im Weblog.

    lg

  3. Kommentar Autor
    Tim
    Kommentar

    @ Manfred …

    Du solltest dich mit CSS näher anfreunden, dass ist nicht wirklich schwieriger als mit Tabellen zu arbeiten. Ausserdem solltest du auf deiner Webseite evtl den Link im Footer rausnehmen, der sieht nicht so professionell aus ;)

  4. Kommentar Autor
    Blub
    Kommentar

    wo genau paste ich den html code zwischen „Der Text in den Codebeispielen …“UND „Erkennbar ist jetzt, dass „div id container“ …“
    ich bekomme immer die fehler meldung: Fatal error: Call to undefined function: language_attributes() in /usr/export/www/…./…./…././wo..ss/wp-content/themes/default_deleer/header.php on line 2

  5. Kommentar Autor
    Monika
    Kommentar

    Hi Blub
    @das Hineinkopieren -kommt drauf an welches Template Du hast..archive .php oder single.php oder so..
    @ Fehler:öffne die header.php und lösche dort:

    <?php language_attributes(); ?> 
    

    anstelle von dem musst Du:

     lang="de-DE" 
    

    hineintippen.

    Dies bedeutet nur, dass Du eine ältere WP Version hast. Ich empfehle Dir ein Update.
    lg

  6. Kommentar Autor
    Blub
    Kommentar

    ich hab sowohl eine archive.php als auch eine single.php. in welche soll ichs dann hineinkopieren.
    Danke soweit

  7. Kommentar Autor
    Monika
    Kommentar

    Hi ganz am Ende des Artikels steht da :.das da macht ein Post.

    dies hast Du in der single.php in der archive.php

    also überall wo Du es brauchst, damit ein Beitrag ganz oder im AUszug angezeigt wird.
    lg

  8. Kommentar Autor
    Laura
    Kommentar

    Ich habe alles so rauskopiert, bekomme aber beim aufrufen der Seite die Meldung „Parse error: syntax error, unexpected ‚}‘ in […]wp-content/themes/default_deleer/sidebar.php on line 6
    Zeile 6 ist ja:
    Was ist daran falsch?

    nightmare.monstrr.net

  9. Kommentar Autor
    Monika
    Kommentar

    Laura ich wollte Dir eine Email senden zum Helfen.
    Die Emailadresse ist falsch, die gibt es nicht.

    Gruß

  10. Kommentar Autor
    Ed Hardy
    Kommentar

    Die Anleitung hat mir prima geholfen. Oft reicht es aber auch bestehende Layouts anzupassen – das geht in der Regel auch ein bischen schneller.

  11. Kommentar Autor
    Carsten
    Kommentar

    auch ganz interessant, gerade für css faule: templatr .de
    gruß carsten

  12. Kommentar Autor
    David
    Kommentar

    Ich versteh das mit der Commentform nicht wie formatiere ich das ? ICh hab in der CSS was angelegt bzw rauskopiert und in die php datein eingebettet aber es geht nicht

  13. Kommentar Autor
    Ina
    Kommentar

    @David
    Was genau geht denn da nicht? Oder hast Du das Problem bereits gelöst? Denn in Deinem Blog sieht ja soweit alles in Ordnung aus.

  14. Kommentar Autor
    Tania
    Kommentar

    hey..
    also irgendwie komme ich mit dem tutorial überhaupt nicht klar.. ich hab nur chaos verursacht und errors. ich krieg irgendwie nicht den dreh raus, wo ich was an code platzieren muss und hab wohl zuviel rausgelöscht vom benötigtem php zeugs, damit alles korrekt angezeigt wird..
    ich finde, du hast das etwas verwirrend erklärt.. mir wird nicht klar, ob man jedesmal wenn du sagst in welches template der code reinmuss, ob der template-inhalt komplett mit dem kurzen code ersetzt werden soll, oder ob der kurze code iiirgendwo im template dazwischen gepastet werden muss..
    eigentlich habe ich schon etwas ahnung von html und css, und hab schon viele seiten erstellt.. aber dieses wordpress mit php macht mir echt zu schaffen.. ich komm überhaupt nicht klar, was an befehlen wichtig ist und stehen bleiben muss und was weg kann.
    wär nett wenn du mir helfen könntest :)

  15. Kommentar Autor
    Monika
    Kommentar

    Hi Tanja

    fang einfach von Vorne wieder an;)

    nichts löschen, sondern dazufügen.

    und das ganze php zeug da drin hat zu 99,9% selbsterklärende Bezeichnungen und wenn Du Dir mein Blank Theme dazu nimmst steht sogar dabei was was ist und was man nie löschen darf …steht wo Loop -ist das das Herz und das löscht man nie ;)

    lg

  16. Kommentar Autor
    Tania
    Kommentar

    ok vielen dank.. werd das wenn ich mehr ruhe als gestern hab, dann nochmal probiern ^^ hab das glaub ich zu abrupt wollen machen, dabei brauchts schon etwas zeit und kniffelarbeit.. und vor allen dingen sollt ich mir alles genauer ansehn und nich so überfliegen.. melde mich dann nochmal wenns geklappt hat ;)

  17. Kommentar Autor
    Monika
    Kommentar

    Hi Tanja ich warte…;) bin immer neugierig wie die fertigen Werke dann aussehen

    lg

  18. Kommentar Autor
    Ed Hardy
    Kommentar

    Danke für die super Anleitung! Bin auch gerade am basteln! Man will ja alles beim ersten mal richtig machen! Mehr davon? :)

  19. Kommentar Autor
    Tania
    Kommentar

    ja, also ich hab jetzt schon struktur drin.. aber nen fehler scheint da doch zu sein.. o.O help.. x_x ich stell mich echt zu doof an, glaub.. *grml*

  20. Kommentar Autor
    Monika
    Kommentar

    lösche das mit der Testphp ich vermut da ist sicher nur ein Tippfehler,

    bloß ich bin jetzt dann weg–Wochenende und mal ausgehen ..

    tu ich eh so selten
    lg

  21. Kommentar Autor
    Tania
    Kommentar

    ich hab nirgends was mit testphp stehen… o.O oh man, ich glaub ich gebs auf und bleib bei cutenews.. q.q

  22. Kommentar Autor
    Tania
    Kommentar

    so, jetzt hab ichs hinbekommen mit eigenem layout *gg* hab allerdings ne andere theme-vorlage dafür benutzt.. also ne fertige, die ich umgewandelt hab auf meine bedürfnisse. und damit hab ich dann einigermassen alles verstanden, kombiniert mit deinem blank wordpress theme :) also trotzdem vielen dank!

  23. Kommentar Autor
    Ed Hardy
    Kommentar

    uh das sieht wirklich schick aus Tanja! Sei mir nicht böse, wnen ich deine Ideen mal kopieren :)

  24. Kommentar Autor
    Ed Hardy
    Kommentar

    Ah, danke. Den get_num_queries()-Tag hab ich schon länger gesucht. Hatte ich mal aus meinem Footer gelöscht, jetzt hat’s mich aber doch mal wieder interessiert, weil ich ein paar neue Plugins nutze.

  25. Kommentar Autor
    Ed Hardy
    Kommentar

    Danke für die ausführliche Anleitung, hat mir sehr weiter geholfen!

  26. Kommentar Autor
    wiego
    Kommentar

    Bin dabei deine Anleitung nachzubauen.
    Bei der sidebar.php scheint sich ein Fehler eingeschlichen zu haben:

    Entferne ich die „}“ geht es besser. Hab leider keine Ahnung von php.

  27. Kommentar Autor
    Monika
    Kommentar

    Hie wiegeo ich habe es jetzt soeben heruntergeladen und die sidebar.php getestet, die zeigt bei mir keinen Fehler an,

    vielleicht zuviel gelöscht?
    probier es nochmals mit der Originaldatei.

    lg

  28. Kommentar Autor
    Super Flyer
    Kommentar

    Knaller Anleitung, schön aufbereitet.

  29. Kommentar Autor
    Ed Hardy
    Kommentar

    Super Anleitung. Leicht zu verstehen und … es funktioniert ;)

  30. Kommentar Autor
    Joe Modena
    Kommentar

    Danke für die super Tipps! Jetzt bin ich endlich ein kleinen Schritt weiter :)

  31. Kommentar Autor
    Christian Audigier
    Kommentar

    danke texto. gute arbeit!

  32. Kommentar Autor
    Marcus
    Kommentar

    Vielen Dank für die Anleitung. Hat mir sehr geholfen

  33. Kommentar Autor
    Michael Mönnich
    Kommentar

    Erst mal will ich mich für dieses super Tutorial bedanken… Eine Frage noch: Mittlerweile geht Dreamweaver doch auch dafür, oder? Hab CS4 und hab´s für die Theme-Erstellung benutzt… Macht das was?

  34. Kommentar Autor
    Monika
    Kommentar

    Hi Michael ich denke man kann dafür vieles nehmen, bloß ich habe noch nie in meinem Leben für html Dreamweaver genutzt ;)

    lg

  35. Kommentar Autor
    Monika
    Kommentar

    ich kenne das nicht, aber was ich las, denke ich ist ein reiner Texteditor besser – man weiß sonst nie was aus dem php alles wird ;)

    lg

  36. Kommentar Autor
    Michael
    Kommentar

    Also das finde ich wirklich hilfreich. Habe zwar nur grundkenntnisse mit html aber ich werde es nun einmal versuchen mein Template anzupassen. Ist NVU für so etwas geeignet oder sollte man einen reinen Texteditor benutzen ?

  37. Ping Pressearbeit, Öffentlichkeitsarbeit, Journalistenbüro

  38. Kommentar Autor
    David
    Kommentar

    =) Danke für das Blank Theme und die Tipps hier hat geholfen Theme auf unserm Blog ist jetzt Komplett von mir (ausser dein PHP =) )

  39. Kommentar Autor
    Harry
    Kommentar

    Vielen Dank für die gute Anleitung.
    Ich fange gerade an HTML und CSS zu lernen.
    Da sind solche tutorials ideal zum üben.

  40. Kommentar Autor
    Krach
    Kommentar

    Super Sache, versuche auch gerade ein WordPress mit eigenen Theme auf die Beine zu stellen, danke fürs Tutorial

  41. Kommentar Autor
    Andreas (Weblog-ABC)
    Kommentar

    Toller Artikel. Es ist sehr wichtig, eigene Ideen in ein Theme aufzunehmen. Bei einem selbst erstellten Theme ist das eh der Fall, aber auch wenn man ein vorhandenes Theme nutzt, dürfen eigene Ideen nicht fehlen. Das macht das Theme einzigartig, was wichtig für den Wiedererkennungswert und somit auch den langfristigen Erfolg einer Website ist. Die Serie
    ..Website erfolgreich aufbauen…
    ergänzt diesen Post ganz gut. Wer ein Theme erstellt, will vermutlich auch eine komplette Website aufbauen, wozu noch viele weitere Schritte wie Artikel richtig schreiben, Website und Artikel Promotion, SEO/SEM und vielleicht auch Themen wie Geld verdienen im Internet gehören.