Vorderingen met WordPress theme

Hoe is het met het maken van je WordPress theme, Daenelia? Leuk dat je het vraagt! Een tijdje terug beloofde ik al dat ik ‘live’ en WordPress theme zou maken, zodat jullie konden zien hoe een theme opgebouwd kan worden. Daarvoor had ik eerst een heel erg simpel theme gekozen (zie hier dit blauw), maar mijn eigen Tuxedo Cat theme zou echt van de grond af worden opgebouwd. En dat deed ik dan ook. Hoe dan, en wat komt er bij kijken? En kan iedereen dat?

Ja, iedereen kan dat

Met de juiste tools kun je alles. Dat geldt voor het bouwen van een poppenhuis, het opknappen van de keuken, het koken van een lekkere quiche en ook voor het bouwen van een WordPress theme. Welke tools je wilt gebruiken hangt af van je eigen voorkeur, maar ik wil wel delen welke keuzes ik heb gemaakt.

Elke website begint met HTML, dan CSS en dan JavaScript, eventueel met wat PHP en een database. HTML, CSS en JS kun je nog gewoon op je lokale computer gebruiken. Je hebt hier ook niet veel meer voor nodig dan een simpele text editor, zoals kladblok op Windows. Omdat ik begon met een simpele layout op te bouwen in HTML en CSS gebruikte ik dus een editor, maar wel eentje met iets meer mogelijkheden dan kladblok/notepad. Je hebt Sublime Text 3, dat gratis te downloaden is. Dat werkt prima, maar uiteindelijk heb ik toch maar weer Visual Studio Code gedownload, omdat dat weer nét iets meer doet. Een andere goeie optie is Atom. Dat is weer net iets anders, dus kijk waar je voorkeur ligt.

In een text editor kun je met HTML en CSS je layout opbouwen en opslaan als *.html en *.css bestanden. Je kunt de editor ook gebruiken om bestaande theme’s te openen en bewerken in de broncode. Een simpele HTML pagina is zo gemaakt. Kijk maar eens op W3Schools.com, waar heel eenvoudig wordt getoond hoe een web pagina in elkaar zit. Je kunt zelfs dingen uitproberen in de editors op de site: niks downloaden, maar gewoon even spelen.

WordPress lokaal draaien op je eigen computer

Nadat ik een basis layout gemaakt had, moest ik natuurlijk een manier vinden om die om te zetten naar een theme en in real time bekijken welke wijzigingen ik moest doen in de code. Dat had ik inderdaad live op mijn site kunnen doen, maar dan hadden bezoekers daar echt wel last van gehad. En een mySQL database en PHP draaien op je eigen pc, die geen server is, dat kan niet. Je kunt wel een HTML pagina met CSS lokaal op je pc bekijken in je browsers, maar je kunt niet zomaar een WordPress installatie op je eigen computer doen! Daarvoor moet je een lokale server opzetten. Ik deed dat met MAMP voor windows. Nu komen we in echt nerdy terrein. Met MAMP kun je databases opzetten én php-pagina’s bekijken via localhost op je eigen computer. Je hoeft dus niks te uploaden naar je hostingpartij. Nadat ik MAMP geinstalleerd had, kon ik dus lokaal WordPress installeren, zoals je dat ook doet op je hosting’s server.

Nu ben ik met de stap bezig waarbij ik de HTML pagina’s omzet naar PHP pagina’s, die in WordPress het theme vormen. Met PHP voeg je allerlei tags in, die WordPress dan weer interpreteerd zodat de juiste onderdelen in je browser worden getoond. Bijvoorbeeld je blogposts onder elkaar op de voorpagina. En de sidebar, met welke informatie jij daar wilt tonen. Of waar de widgets komen, en de datum en auteur van de blogpost. Dat is soms wel even lastig, omdat ik nu zie of een header bijvoorbeeld toch iets te groot is, of dat een achtergrondkleur toch te veel afleidt. Het is dus nog even sleutelen, ook omdat er nog zo veel aparte onderdelen moeten worden toegevoegd.

Niet iedereen wil een theme maken

En dat is okay! Maar als je met WordPress werkt, en theme’s van een ander installeert, is het wel handig dat je iets weet van hoe zo’n theme in elkaar steekt. Zeker als je je zorgen maakt over zaken als laadtijd van je site. Daarbij is kennis van WordPress, inclusief iets weten over themes, PHP en databases, een goeie skill die je op je CV kan zetten. Tegenwoordig werken veel bedrijven met WordPress en ook als je geen web development wil gaan doen, is ook voor content schrijvers deze kennis een mooie bijkomstigheid.

Wanneer is het af?

Ik denk dat je altijd wel aan een theme kan blijven sleutelen. Maar ik denk de eerste versie vanavond of dit weekend live te zetten. Er zal misschien nog wel iets missen of niet werken, maar daar kan ik dan altijd een oplossing voor vinden. Als je merkt dat iets niet werkt, hoor ik het ook graag! En als je iets heel raar vindt, of gewoon lelijk, mag je dat ook zeggen, natuurlijk. Zelfs zonder onderbouwing, want ik stel eerlijkheid gewoon op prijs. Ik leer altijd van wat anderen zeggen, dus hou je niet in. Zo, nu eerst maar eens dit publiceren, dan lunchen en dan verder met coden!

 

 

4 comments on “Vorderingen met WordPress theme

    • Daenelia says:

      Ik word alleen wel steeds ambitieuzer en wil het groter aanpakken voor ik het online zet. Ook een dingetje van mijn perfectionisme. Dus ik heb met mezelf afgesproken: vanavond gaat het online!

      Reply
  • Goed hoor, lijkt me heerlijk als je dat kan! Ik weet hoe html en css werkt en dat vind ik al heel wat. Ik heb met mijn man de afspraak dat als er code veranderd moet worden, dat hij dat doet. Ik heb echt zó vaak een hele website om zeep geholpen (en back-uppen is niet echt mijn sterkste punt.). Succes verder!

    Reply
    • Daenelia says:

      Veel fouten maken: daar leer je van, Lilian! Dus je bent op de goede weg 😉 Da’s eigenlijk wel een nadeel van een handige partner: dat je dan snel dingen uit handen geeft. Is wel zo makkelijk, ik doe het zelf ook vaak.
      Over fouten maken gesproken: ik maakte gisteren natuurlijk een aanpassing waardoor ineens de kopteksten niet meer zichtbaar waren, en voor ik dat hersteld had, was het te laat om mijn nieuwe theme op de site te zetten XD Poging 3 vandaag: ik mik op na de lunch.

      Reply

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>