Tellme header image
Tellme random header image

Tutorial - Een eigen Wordpress Theme - Les 1

January 21st, 2009 by Bart · 2 Comments

Het maken van een wordpress theme is makkelijker dan het lijkt, zelfs als je er allemaal niets van snapt.
Deze tutorial is dan ook geschreven voor beginners, die na het lezen van deze tutorial, zelf verder kunnen oefenen.

Het orgineel van de tutorial (in het engels) is te vinden op http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-wordpress-themes-huh/ 
Het verschil is echter, dat de komende tutorial vrij in het nederlands vertaald is, met mijn eigen ervaringen eraan toegevoegd. De indeling blijft dus wel gelijk, omdat mij dit zeer bevallen is.

Wat heb je nodig?
1. Een installatie van wordpress op een server (mag ook lokaal zijn).
2. Een editor, bijvoorbeeld notepad. (ikzelf gebruik dreamweaver, een andere aanrader is pnotepad http://www.pnotepad.org/ )
3. een ftp programma, bijvoorbeeld smartftp of filezilla. (om je bestanden op de server te zetten)

Tijd om te starten!

In het eerste deel wil ik het gaan hebben over de basis, dit zodat we weten waar we het over hebben, en hoe het allemaal een beetje in elkaar zit.

#regel 1
sluit alles in de juiste volgorde. Je moet het sluiten in de volgorde van openen, zie voorbeeld hieronder.

<!– De juiste manier: –>
<ul>
       <li>
       </li>
</ul>
<!– De verkeerde manier –>
<ul>
        <li>
       </ul>
</li>

voor de duidelijkheid: de <> geven aan dat een tag geopend wordt, en de </> geeft aan de een tag gesloten wordt.
in het voorbeeld wordt een <ul> = unordered list, en een <li> list item gebruikt.

#regel 2
Iedere template heeft om zijn minst 2 bestanden, een index.php en een style.css.
In de index.php zeg je waar alles moet komen, en in de style.css vertel je hoe het er uit moet komen te zien.
uiteindelijk zullen we meer bestanden aan maken, een lijstje met bestanden waar wij mee eindigen:

  • style.css
  • index.php
  • home.php
  • single.php
  • page.php
  • archive.php
  • category.php
  • search.php
  • 404.php
  • comments.php
  • comments-popup.php
  • author.php
  • date.php

Hier moet je nog niet te veel op letten, we komen er vanzelf.

om even alle onduidelijkheid over woordgebruik te vermijden, heb ik hieronder een lijstje met woorden waar wel verwarring over ontstaat. Ik heb deze lijst bewust engels gehouden, omdat ik ook niet van plan ben de termen te vertalen.

  • Template - A set of codes that you can use in multiple places without having to write the same codes again and again.
  • Template file - A file that contain one or multiple sets of codes (templates). Every page is made up of multiple template files. For example: index.php file, style.css file, sidebar.php, etc.
  • Theme or WordPress theme - All the files you’re using: texts, images, codes, etc. Note: WordPress theme and WordPress template(s) are two different things, despite some people consider them the same.
  • Post - Currently, you are reading a post. Furthermore, it’s simply an entry of your blog. In example, one page of a diary.
  • Page - A special type of post that is not orangized by categories. It is separate from the rest of your posts. Note: In WordPress, page and Page are two different things. Whether you capitalize the “P” makes a huge difference.

de hiearchy vind ik momenteel niet zo belangrijk, hier kom ik ook nog wel op terug zodra het aan de orde is.
Ben je toch al nieuwsgierig? Kijk dan op http://www.wpdesigner.com/2007/02/21/wp-theme-lesson-1-intro/

Morgen komt het gedeelte over template files en de template.
Mocht je in de tussentijd nog vragen hebben, dan hoor ik het graag!

Tags: tutorials · webdesign

2 responses so far ↓

Leave a Comment