menu

Liam Tanis’ Blog

close

“WordPress and I”

Nu vraagt iedereen die mijn blog volgt (wat er toch niet zo veel zijn…) zich af: “Wat is er met het oude thema gebeurd???” Nou, dat ga ik jullie eens haarfijn uit proberen te leggen in blognummer 6, stage 2: “WordPress and I”

Mijn introductie met PHP

Van wat ik mij kan herinneren, ongeveer halverwege het tweede leerjaar, is PHP voor het allereerste aan bod gekomen. Wij moesten tijdens een scripting les, ons gaan verdiepen in PHP en het maken van een eigen WordPress theme. Tuurlijk, PHP was toentertijd (en is nog altijd) een nieuwe taal. Ik was zeker niet de enige die er veel moeite mee had. Zoals u misschien in mijn vorige blog(s) hebt kunnen lezen, heb ik het geprobeerd, maar liep ik zodanig vast dat ik het links heb laten liggen.

 

Mijn introductie met WordPress

Volgens mij was deze ook voorgekomen tijdens een van de scripting lessen. WordPress is sowieso eerder aan bod gekomen dan PHP. Zonder vooroordelen aan begonnen toentertijd, omdat ik geen flauw idee had wat het programma precies was. Al gauw kwam ik erachter dat er gewoonweg, niet genoeg scheldwoorden bestaan die ik met liefde uit op WordPress.

Ook dat heb ik heel gauw aan de kan geschoven toentertijd en ben ik doorgegaan met het beoefenen van HTML, CSS & Bootstrap 4. Maar toch, bleef er in mijn hoofd rondspoken wat meerdere docenten zeiden: “WordPress wordt de toekomst aangezien het gemakkelijk te gebruiken is. Zeker voor mensen die geen enkele kennis hebben van coderen, particulier gebruik.”

 

‘WordPress and I’

Ik weet van mezelf dat ik soms heel zwart-wit kan denken. Niet zo een goede eigenschap en werkt alleen maar in mijn nadeel. Vlak voordat de eerste stageperiode van start zou gaan, werd er ons verteld dat we blogs bij moesten houden. Oftewel: WordPress! (Whoehoe…). Ik was mijn boekenkast alweer ingedoken om de ‘Dikke Van Dale, Speciale Schelwoorden Editie’ tevoorschijn te toveren, toen in de eerste twee weken van mijn eerste stageperiode, de allereerste blog online gezet moest worden. Als u terugleest, zat ik daar samen met 2 andere stagiaires Sjaak en Willem, MediaDevelopers. Ook afkomstig van het MediaCollege.

Deze twee gasten zijn erg goed in PHP en hadden een eigen PHP-site in elkaar gezet om hun blogs en stageverslagen op te posten. Ik heb toen een soort snelcursus van hun gekregen in PHP, (nog steeds met de Speciale Dikke Van Dale naast me) om ook zo een Blogsite te maken. Ik kon hun template gebruiken. De eerste 2 blogs hebben daar online gestaan, maar omdat er zo ontzettend veel onderdelen miste (Aparte comments konden niet geplaatst worden, afbeeldingen waren niet responsive, de navigatie gaf errors aan wegens missende of verkeerde links, etc.) en het over het algemeen gewoon ontzettend gelimiteerd was, ben ik met 110% tegenzin, de confrontatie met WordPress aangegaan. “De opmaak van een website is maar bijzaak, zolang de content gewoon goed is” wordt er weleens gezegd. Maar aangezien ik het onwijs belangrijk vind, om naast goede content, ook een mooie en userfriendly website in elkaar te zetten, is mijn haat voor WordPress ontstaan. Leuk dat je Thema’s kan downloaden en of kopen, maar: Het is dan niet vormgegeven door jou, WordPress houdt haar standaard instellingen en het gebruik blijft hetzelfde, De thumbnails van de Thema’s die worden aangeboden zien er toch vaak mooier uit dan het daadwerkelijke thema. Over het algemeen vind ik WordPress erg onoverzichtelijk.

Met al deze dingen op een rijtje, kan u denk ik wel begrijpen waarom is er zo de pest in heb om met WordPress te werken. Toch is dat bouwen van een eigen thema onbewust blijven hangen. Je bent dan een stuk vrijer om te doen en laten wat je wilt. Je kan het thema zelfs zo maken dat je alleen maar titels, tekst en afbeeldingen in hoeft te voeren en je thema de rest doet. Je kan hem helemaal naar eigen smaak maken. Maar daar heb ik de skills nog niet voor…

 

Probably a Hopeless Project – PHP!

Echter, een aantal weken terug (blog 3), heb ik alle moed bij elkaar geschraapt en ben ik de cursus ‘Custom Theme Building for WordPress’ van LearnWebCode verder gaan volgen (Die we eigenlijk als in de scripting les hadden moeten maken… Oeps!). Gaandeweg, tijdens het opnieuw proberen bouwen van een eigen WordPress Thema, ben ik wel 20000 keer vastgelopen, aangezien PHP een volledig nieuwe codeertaal voor mij is. Maar gaandeweg ga je ook steeds meer dingen herkennen en leren kennen!

PHP heeft ook ietwat weg van JavaScript, als het aankomt op strings, if else statements, etc. JavaScript is ook een onderdeel waar ik gewoon (nog) niet goed in ben. Echter ben ik wel van plan – nu het bouwen van mijn eigen thema beter aan het uitpakken is dan dat ik ooit had kunnen hopen – deze twee onderdelen nog meer aan de tand te voelen en ervoor te zorgen dat ik hier meer van weet en kan. Nu bezit ik naar mijn idee alleen de basis van deze twee codeertalen.

Fase 2

Toen ik eenmaal versie 1 van mijn Custom Theme ‘af’ had. Sprong ik een gat in de lucht! Aan de hand van mijn grote vrienden Google & Youtube, heb ik de course van ‘Custom Theme Building for WordPress’ succesvol af weten te ronden. Dat was het moment dat ik bloed rook. “Waarom ga ik zelf niet gewoon verder? Maar dan vul ik alles precies naar mijn eigen smaak in!”

Eenmaal begonnen, liep ik vrijwel direct tegen bepaalde onderdelen aan. De site is niet responsive, style.css was ongelooflijk onoverzichtelijk, WordPress heeft haar eigen classes die zo genest zijn, dat het vaak lastig is om precies degene te targetten die je wilt aanpassen. En zo ging het maar door en ging het maar door. Hetzelfde probleem deed zich eigenlijk voor als toen, tijdens de scripting lessen: Ik kwam niet verder dan de basis. Ik stond op het punt om op te geven, maar na flink om mijn kiezen te hebben gebeten, ben ik doorgegaan.

Om de drie, bovengenoemde problemen op te lossen, had ik 3 dingen nodig:

  • Bootstrap 4, voor het responsive maken van de website, naar eigen smaak.
  • SCSS, voor het overzichtelijker maken van de CSS, maar ook om een beter overzicht voor mijzelf te creëren, aangezien je erg veel verschillende PHP-files nodig hebt voor een custom WordPress thema.
  • Weten hoe de classes van WordPress genest zijn: ‘Inspect Element, in de browser’.

 

En daar was vast loper nummer een. Bootstrap wilde niet linken. Dus ik het internet op en vrij snel de oplossing gevonden. In mijn functions.php moest een stukje code geschreven worden die ervoor zorgde dat Bootstrap gelinked zou worden aan mijn thema, waardoor ik Bootstrap haar classes kon gaan gebruiken.

Vast loper nummer twee. Style.css kon niet vervangen worden door een file zonder dezelfde naam. Hierdoor dacht ik dus dat SCSS helemaal niet toegevoegd kon worden aan mijn WordPress thema. Echter, kwam ik achter het volgende: Zodra ik mijn thema gezipped had, wilde ik deze uploaden maar gaf WordPress de volgende error: “Thema kan niet worden geupload omdat style.css ontbreekt.” Maar aangezien ik Bootstrap 4 vanuit een folder kon halen, en SCSS ook altijd in een folder zit, wist ik gewoon dat er een oplossing voor de hand lag. Dus ik een back-up gemaakt van mijn thema, mijn hele style.css leeg getrokken, behalve de comment die de naam van het thema aangeeft. Alles netjes in aparte en overzichtelijke SCSS-files opgedeeld, alles naar mijn main.scss gelinked en tot slot al mijn SCSS omgezet naar CSS in een aparte CSS map.

 

Vervolgens heb ik precies hetzelfde gedaan zoals ik dat bij het linken van Bootstrap 4 heb gedaan. Stukje code geschreven en de CSS-map opgeroepen, terwijl de lege style.css file nog in de hoofd-map zat. “VERREK! HIJ DOET HET!” En hoppaaa! WordPress volledig om de tuin geleidt door de lege style.css map te laten staan en vervolgens een tweede stylesheet – afkomstig van SCSS – te linken in functions.php. Dit was voor mij echt al een hele grote stap. Want als ik het overzicht van codes kwijtraak, dan lukt het me helemaal niet om zo een groot en challenging project te draaien als deze.

Vast loper nummer drie. Nesting van classes door WordPress gegenereerd. Gelukkig hebben we daar de ‘inspect element’ functie voor die in de browser zit inbegrepen. Eigenlijk alleen maar door goed zoeken, heb ik het voor elkaar kunnen krijgen om alles aan te passen en te stylen, wat ik wilde. Niet alles lukte natuurlijk in een keer. Dit kwam dan door een typefoutje, een nest die ik over het hoofd heb gezien of die in mijn style ontbrak, etc. Gelukkig, dankzij SCSS kan ik precies de nest kweken, zoals WordPress het zelf doet. Hierdoor houd je dat overzicht voor mezelf.

Hieronder ziet u een voorbeeld met een dubbele nest, maar waar ik niet de parent van heb moeten roepen.

Hieronder ziet u een voorbeeld met een meervoudige nest, waar ik wel de parent van heb moeten roepen. Dit om voor mijzelf het overzicht te houden!

   

Alles wat ik wilde aanpassen, was aangepast! Maar ik miste wel nog wat dingen. Comments.php was er nog niet! Dat is toch wel de belangrijkste, aangezien ik de feedback die ik krijg, niet kan zien en dus niet kan toepassen…

 

Commentaar?

Comments.php was ook wel een uitdaging op zichzelf. Van Sjaak en Willem heb ik ooit een kleine PHP file gekregen die ik in welke site dan ook kon toevoegen, om een contactform te maken. Comments.php heeft in dat opzicht een beetje dezelfde werking. Ook volledig in PHP geschreven. Echter, het verschil is dat deze comments niet in je mailbox komen te staan, maar op je website zelf. Daarom was ik in eerste instantie erg bang dat er veel fout zou gaan. Later dacht ik bij mezelf: “Wat maakt het eigenlijk uit als het fout gaat? Het is al zoveel keren fout gegaan tijdens dit project, maar tot dusver weet ik het wel allemaal zelfstandig op te kunnen lossen.” Eigenlijk met die gedachte, heb ik opnieuw een back-up gemaakt van mijn WordPress thema en heb ik aan de hand van een tutorial comments.php toe kunnen voegen in mijn thema.

Naar mijn mening zitten dit soort forms best lastig in elkaar. Zeker omdat dit (WordPress weggelaten) ook uit PHP bestaat wanneer je zo een contactform in een eigenhandig gecodeerde website wilt implementeren. Ook qua styling vind ik dit soms nog lastig. Vaak is het zo dat deze contactforms al een aantal waarden meekrijgen uit zichzelf: Zo een verschrikkelijke outline als je erop klikt, labels die totaal niet uitgelijnd zijn met de input, textarea’s die nooit dezelfde breedte hebben als de input en ga zo maar door. Gelukkig hebben wij ooit een keer de opdracht ‘Tickettime’ op school gekregen. Dit moest een one-pager worden waar je een fictief festival moest promoten en tickets op kan kopen. Daar komt uiteraard ook een soort van form bij kijken. Aan de hand van de code die ik daar in geschreven heb en een tutorial die ik heb gevolgd op YouTub om alles correct in mijn thema te krijgen, heb ik de comments-sectie zodanig kunnen stylen dat deze overeenkomt met de huisstijl van mijn thema. Hieronder kunt u zien hoe de hele comments-sectie er vanaf de achterkant uit ziet:

     

Mocht u het gehele thema van de achterkant willen zien, dan kunt u dat door op deze link te klikken: WordPress Custom Theme – Liam’s Blogs  Versie 1 (Werkproces 2.1, 2.3)

Problemen & Oplossingen

Uiteindelijk, staat het resultaat dan toch mooi online! En ik ben apentrots op mezelf, omwille van het feit dat het toch mooi gelukt is. Ook al had ik daar aan het begin echt een onwijs hard hoofd in! Dat brengt mij ook direct bij de problemen & oplossingen. Er waren veel problemen en veel oplossingen deze twee weken, maar de belangrijkste wil ik toch even specifiek bij ‘problemen en oplossingen’ noemen. Omdat dit niet alleen een probleem met een oplossing is, maar ook meteen een levensles.

Probleem

Deze twee weken heb ik ook de tussentijdse beoordeling door Eelko in laten vullen, aangezien ik het meeste met hem te maken heb en werk. Hij vulde deze gewoon in naar zijn eigen visie. Maar toen ik het las, was ik wel wat gefrustreerd met mijzelf: “Liam vindt het erg lastig om duidelijk te hebben wat er gevraagd wordt qua briefing. En wat zijn output dan moet zijn. Hij heeft graag duidelijkheid.”

Tuurlijk! Het is feedback. Daar zal ik de rest van mijn leven mee om moeten kunnen gaan. Maar niet alle feedback is leuk. We hebben hier mondeling nog even over gesproken en om het te verduidelijken kwam het op het volgende neer: Ik trek te snel conclusies (Waardoor ik te snel door het hele ontwikkelproces heen kan gaan).

Oplossing

De oplossing is vrij simpel omschreven, maar vergt heel erg veel inspanning: Ik moet duidelijkheid voor mijzelf creëren en wachten met het trekken van een conclusie, tot het moment dat ik alles voor mezelf op een rijtje heb gezet en geen vragen meer heb. Dan pas kan ik het ontwikkelproces beginnen, zonder bovenstaande feedback te krijgen.

Het bouwen van mijn eigen thema in WordPress, is hier eigenlijk het perfecte voorbeeld voor. Doordat ik te snel een conclusie trok, was ik er vrijwel van overtuigd dat ik het niet kon. Maar nadat ik duidelijkheid en overzicht voor mezelf heb gecreëerd, door middel van het implementeren van Bootstrap 4, SCSS, het volgen van meerdere tutorials en veel tijd heb gestopt in het maken van dit project, heb ik het toch mooi voor elkaar kunnen krijgen door iets te maken waarvan ik overtuigd was dat dit mij niet zou lukken… Dit is niet alleen een oplossing, maar ook een levensles! 😉

Bronnen

Om nog even een kort en krachtig overzicht te krijgen van alle tutorials die ik heb gevolgd, ziet u hieronder een lijst van links van de desbetreffende tutorials.

Recente Blogs

Categorieën

  1. Trots op je. De aanhouder wint!!
    Heerlijk ook om je thuis zo enthousiast te horen vertellen wanneer je weer iets voor elkaar hebt gekregen.
    Hou vol, want ik heb alle vertrouwen in je. Xxx

  2. Hi Liam,
    Knap hoor dat je zo doorzet. Je bent hierin echt gegroeid.
    Ik heb nog wel wat feedback:
    * laat een voorbeeld van nesting van classes zien, hoe vind je dat via de inspect element
    * benoem de tutorials die je volgt met (eventueel) een link naar de tutorial
    * de link naar de achterkant doet het niet

    Verbeter a.d.h.v. de feedback en laat mij weten wanneer (uiterlijk voor de kerstvakantie) en wat er is aangepast. Prima zoals je dat nu via het reactieveld doet.

    1. Hi Leontien!
      Dank u wel! Goed om te horen!

      Ik heb uw genoemde feedback verwerkt d.m.v.:
      – Screenshots (voorbeelden) + Verwijzingen naar ‘Inspect Element’.
      – Tutorial Bronnenlijst vermelding + links naar tutorials, onderaan de blog.
      – De link van de achterkant aangepast naar een Google Drive link. Deze moet nu wel te downloaden en te zien zijn.

Geef een reactie

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