We zien steeds vaker om ons heen dat internetbureau’s kiezen voor WordPress als het standaard CMS om websites mee te bouwen. Ook komen we regelmatig startende freelancers tegen die hun focus volledig op WordPress leggen. In dit artikel hebben we een overzicht gemaakt van de beste tools, technieken en plugins voor de ontwikkeling van WordPress websites die we ons door de loop der jaren eigen hebben gemaakt – en die we graag op een serveerblaadje hadden gekregen toen wij tien jaar geleden voor het eerst met WordPress aan de slag gingen.
Inhoud
[toc heading_levels=”2″]
WordPress ontwikkeltools
Door de loop der jaren hebben we heel wat ontwikkeltools getest, gebruikt en weer weggegooid. Welke gebruiken we vandaag de dag nog steeds voor de ontwikkeling van WordPress websites?
- Google Chrome
Google Chrome heeft standaard een krachtige set ontwikkeltools meegeleverd. CSS-aanpassingen kun je vanuit de element-inspector doen, waardoor je gelijk ziet wat het effect is, voordat je de aanpassingen in je css-bestande doet. Bovendien kun je vanuit de console bestaande JavaScript variabelen uitlezen of nieuwe scripts uitvoeren. Je kunt opgeslagen cookies opvragen, in de headers nagaan of je pagina gecached wordt, en meer. Mozilla Firefox is overigens ook een goed alternatief en biedt veel soortgelijke functies. - Sublime / Coda
Iedereen heeft z’n eigen favoriete teksteditor, maar twee springen er bij ons wel bovenuit: Sublime en Coda. Een belangrijk voordeel van Sublime (Windows / Mac) is dat het zeer uitbreidbaar is, terwijl Coda (Mac) al lekker compleet is. Met beide editors is het bijvoorbeeld mogelijk om bestanden direct op de server te wijzigen. Dat maakt het doen van een kleine snelle aanpassing erg eenvoudig. - FileZilla
Misschien voor de hand liggend, misschien helemaal niet. FileZilla gebruiken we dagelijks om snel en veilig FTP-verbinding te maken met de servers van onze klanten. Eenvoudig in gebruik en ideaal voor een snelle kleine aanpassing. - Browserstack
Met Browserstack kunnen we een website op elk denkbaar apparaat virtueel uitproberen. Denk aan alle desktop browsers op meerdere Windows en OSX versies, maar ook alle bekende Android apparaten, iOS devices en tablets. Dit is ideaal voor responsive tests, want simulaties voor mobiele apparaten in desktop browsers schieten al snel tekort in de details. Browserstack biedt bovendien een Chrome extensie, waarmee je elke webpagina die je bezoekt direct op een ander platform kunt simuleren. - Ghost Inspector
Met deze waanzinnige Chrome extensie kun je een aantal stappen op je website achter elkaar opnemen (bijv.: “bezoek homepage, klik op ‘contact’, scroll naar beneden, vul formulier in”). De acties in deze opnames worden vervolgens regelmatig door Ghost Inspector uitgevoerd. Als er afwijkende gebeurtenissen zijn (bijv. een pagina ontbreekt, of de layout is anders), dan krijg je hier een melding van. - Photoshop
Hoewel je veel met WordPress zelf kan doen, Adobe Photoshop blijft toch onmisbaar in ons werk. Dit is hét favoriete softwarepakket van iedereen die zich bij ons met ontwerp bezighoudt.
Standaard plugins
Hoewel elke website anders is, zijn er een paar plugins die we bij elk project wel weer opnieuw gebruiken. Daarom installeren we ze standaard bij een nieuw project. Mochten we ze uiteindelijk niet gebruiken, dan kunnen ze altijd nog weg:
- Avia Framework
Deze visuele blokkenbouwer is niet los verkrijgbaar als plugin, maar zit wel ingebouwd in het Enfold theme. Zeer gebruiksvriendelijk, en biedt de mogelijkheid om snel content op te bouwen. - Gravity Forms
De meest uitgebreide formulieren plugin die we kennen, met conditionele logica, import/export functie, verschillende notificaties, etc.. Veel thema’s houden bovendien al rekening met de styling voor deze plugin. - Kraken.io
Zorg dat je deze plugin hebt draaien voordat je de eerste afbeeldingen uploadt. Zo hou je alles geoptimaliseerd. - Akismet
Verminder de spam op je WordPress website. Eigenlijk gewoon een must-have. - Yoast SEO
Helpt je om globaal je SEO-instellingen af te stemmen, en om per pagina eenvoudig aanpassingen te doen aan bijv. de titel en meta-description.
Ontwikkelplugins
Ook voor WordPress zijn er heel wat plugins gemaakt die het ontwikkelen van je website vergemakkelijken. De meest gebruikte plugins vind je hieronder.
- Password protected
Bescherm je website met een wachtwoord om te voorkomen dat zoekmachines en ongewenste bezoekers al een kijkje komen nemen terwijl de website nog niet klaar is. - Debug Bar
Moet je echt wat dieper de code in? De debug bar voegt een knop toe aan je admin-balk waarmee je verschillende server-variabelen, warnings, errors, queries en requests kunt uitlezen. Met de Actions and Filters Addon is het bovendien ook mogelijk om te zien welke hooks er allemaal zijn getriggerd op een pagina. - Query monitor
Deze plugin biedt veel van de functionaliteit die de Debug Bar ook biedt, maar geeft bovendien de mogelijkheid om uitgevoerde queries zeer gericht te doorzoeken, bijvoorbeeld per plugin of query soort, maar ook op traagheid van de uitvoering. - Custom Post Types UI
Met deze plugin kun je eenvoudig extra custom post types maken. Standaard biedt WordPress al berichten en pagina’s, maar wellicht heb je eens een extra post-soort nodig, bijv. ‘boeken’ voor een soort bibliotheek. Wanneer je het post type hebt ingesteld, moet deze plugin wel geactiveerd blijven. Om het aantal plugins (en dus de performance-druk) laag te houden geven wij daarom de voorkeur aan het toevoegen van post types via GenerateWP (zie ook hieronder bij ‘Cheatsheets‘). - Advanced Custom Fields
Standaard heb je een redelijk beperkt aantal velden tot je beschikking in een bericht, pagina, of custom post. Advanced Custom Fields (ACF) voegt hier allerlei extra mogelijke velden aan toe; datumprikkers, kleurkiezers, taxonomie-koppelingen, extra afbeeldingen-velden, en noem maar op. Bovendien werkt ACF heel visueel en intuïtief; zo kun je zelfs heel gecompliceerde custom post-constructies klaarmaken zonder een regel code te gebruiken. De content-invoer kan daarmee dus heel snel van start gaan. Om alle custom fields vervolgens te benutten en te tonen op een pagina, kun je shortcodes gebruiken, of de templates aanpassen. - FacetWP
Met deze plugin kun je verschillende filters maken die het doorzoeken van berichten, pagina’s en custom posts uitbreiden. Zo kan je bezoeker niet alleen op trefwoorden invoeren in een zoekveld, maar ook taxonomieën (categorieën of tags) in een dropdown- of selectiebox aanklikken, om het zoekresultaat meer te specificeren. Zeer interessant voor grotere databanken met bijv. duizend artikelen. FacetWP is – net als ACF – zowel met shortcodes als met templates aan de praat te krijgen. - SearchWP
Wil je liever de standaard zoekfunctie in WordPress verbeteren? Dan is SearchWP onze favoriete plugin. Deze plugin indexeert heel WordPress zodat de resultaten sneller getoond kunnen worden. Deze index kun je zelf naar je voorkeuren instellen. Kies bijvoorbeeld welke post types wel en niet doorzocht moeten worden, welke velden in een post belangrijk of juist irrelevant zijn, of er ook gezocht moet worden op woorden die deels overeenkomen, en nog veel meer. - P3 Profiler
Wordt je website maar trager en trager? Meet met de P3 profiler welke plugins de meeste impact hebben op je laadtijd. Soms helpt het om een paar plugins weg te doen, waardoor je website alweer sneller is. Een andere oplossing is om te kiezen voor razendsnelle Premium WordPress hosting. - Broken link checker
Check bij livegang nog even of alle links op je website nog wel werken. Mis je niks, zijn alle externe pagina’s nog bereikbaar? Je krijgt netjes een mailtje als een link niet meer werkt. Eventueel kun je de check zelfs regelmatig opnieuw laten uitvoeren. - Redirection
Vervang je met de livegang een oude website? De vorige website heeft ook waarde opgebouwd in de zoekmachines. Om deze waarde zo veel mogelijk te behouden kun je alle URL’s van de oude website omleiden naar de bijbehorende pagina’s op de nieuwe website. Dit kost best wat werk, maar het is de moeite waard. Je kunt de Redirection plugin gebruiken, maar in sommige gevallen ook een .htaccess bestand. Soms kun je met één redirection-regel meerdere pagina’s omleiden door middel van reguliere expressies (zie ook hieronder bij ‘Cheatsheets‘.)
Cheatsheets
Er zijn heel veel naslagwerken te vinden op internet met betrekking tot ontwikkeling van websites, CSS werkwijzen, WordPress tweaks, typografie, etc. Hieronder vind je een handig overzicht met cheatsheets die wij in onze favorieten hebben staan. Altijd handig om bij de hand te hebben.
- Golden Ratio Typography Calculator
Leest je tekst niet lekker weg, maar je weet niet wat het is? Reken na of je wel de juiste regelafstand en tekstgrootte gebruikt met deze tool. Op basis van o.a. de breedte van je content-gebied wordt berekend welke regelafstand, tekstgrootte, etc. het prettigste wegleest. - Can I Use
Net een mooie nieuwe CSS-feature ontdekt? Wil je HTML5 gaan gebruiken? Check op caniuse.com in welke browsers je die code wel/niet kunt gebruiken. Soms geeft caniuse.com zelfs nog fallback-tips voor oudere browsers. Zoek bijvoorbeeld maar eens naar ‘border-radius’ en kijk dan onder het tabje ‘resources’. - txt2re.com / RegExr
Website klaar en nog snel een paar redirect rules toevoegen aan je htaccess bestand? Of ben je aan het programmeren en moet je kunnen filteren op patronen? Als je niet bekend met met regular expressions kun je er hoofdpijn van krijgen. txt2re.com helpt je door een voorbeeldstring in te voeren om te matchen (bijv. een e-mailadres, URL, telefoonnummer of gewoon een zin). De tool geeft vervolgens suggesties hoe je reguliere expressie er uit zou moeten zien. RegExr draait het juist om; voer hier je reguliere expressie in en een stuk voorbeeldtekst, en de tool toont welke delen van je voorbeeldtekst gematched worden. - embedresponsively.com
Een heerlijk eenvoudige website die je op basis van bijv. een YouTube URL de HTML code geeft om dit responsive te embedden. Werkt ook voor Vimeo, DailyMotion, Google Maps, Instagram, Vine, Getty Images en een normale iFrames. - validator.w3.org
Hoe goed is de syntax van je website eigenlijk volgens de standaarden opgebouwd? De validator van W3 helpt je deze vraag beantwoorden. Schrik niet van de vele waarschuwingen, een 100% perfecte website is voorlopig nog een illusie, zeker wanneer je met thema’s en plugins werkt. Toch maken minder fouten in de code je website beter vindbaar voor bijvoorbeeld zoekmachines. Een eerste tip: Vink in WordPres ‘Automatisch ongeldig geneste XHTML corrigeren’ aan onder Algemeen > Schrijven. - GenerateWP
Nog een extra custom post type nodig voor je website? Of wil je aanvullende taxonomieën toevoegen aan je pagina’s? GenerateWP loopt je door een wizard en geeft je daarna de code die je in de functions.php van je thema kunt plaatsen, super eenvoudig! - WordPress Code Reference
Dé centrale plek om op zoek te gaan naar hooks, functies en classes binnen WordPress. Eigenlijk is dit de php.net voor WordPress. - WordPress API’s
Een handig overzicht met alle API’s die beschikbaar zijn voor de WordPress core. Het maakt je code enorm duurzaam als je gebruik maakt van dergelijke API’s. Door bijvoorbeeld het schrijven en lezen van bestanden af te handelen via de Filesystem API van WordPress, zal je code veel beter compatible zijn op verschillende server-platformen. - hookr.io
Deze website probeert alle hooks voor WordPress in kaart te brengen. Daarnaast vind je ook van steeds meer plugins en thema’s alle actions en filters. Inmiddels is deze website groot naslagwerk geworden waar je – zeker voor de bekendere plugins – terecht kunt. - Whatwpthemeisthat.com / WP Sniffer
Deze twee tools helpen je om een beetje rond te neuzen op andermans WordPress website. Je kunt zien welk theme er is geactiveerd, en welke plugins er zoal op de website draaien. Het geschetste beeld klopt niet altijd volledig, maar het kan je soms helpen om ook het achterliggende theme te vinden dat jou zo aanspreekt. - Google Fonts / Adobe Typekit
Een paar jaar geleden was het nog niet te doen voor alle webbrowsers, maar tegenwoordig is het in theorie mogelijk om bijna elk font te gebruiken op je WordPress website (dat wil overigens niet zeggen dat elk font gewenst is, snel laadt, of prettig leest op je website). Google Fonts biedt een groeiend aanbod gratis beschikbare lettertypes die je kunt gebruiken. Mocht je naar een heel specifiek lettertype zoeken, dan is Adobe Typekit wellicht beter geschikt. Hiervoor betaal je wel een bedrag per jaar, afhankelijk van het gekozen lettertype. Tenslotte kun je ook je eigen fonts omzetten naar webfonts met bijv. de Webfont generator van Font Squirrel.
Teamwerk
Om voor ietwat grotere projecten de vaart erin te houden, ontkom je er bijna niet aan om in teamverband te werken. Onderstaande tools helpen ons enorm om de ontwikkeling van onze WordPress websites in teamverband te kunnen doen.
- Google Apps
De complete suite van Google-diensten wordt ook aan organisaties geleverd onder de noemer ‘Google Apps’. E-mail, agenda’s, hangouts, analytics en contacten draaien allemaal op de gebruiksvriendelijke software van Google, maar onder je eigen domeinnaam. Verschillende extensies voor Gmail (zoals Labelizer) maken het bovendien mogelijk om e-mails door middel van labels binnen je team uit te wisselen. Wij gebruiken deze tool momenteel als takensysteem. - LastPass (Enterprise)
Onmisbaar als het gaat om het veilig bewaren van inloggegevens van jezelf en van klanten. Dankzij LastPass Enterprise kunnen we die logingegevens ook nog eenvoudig in teamverband op een veilige manier met elkaar delen of juist aanpassen. Zeer betaalbaar én gebruikt door grote bedrijven zoals MailChimp en HootSuite. - GitLab
Om eigen geschreven code overzichtelijk en eenvoudig te houden, gebruikten we GitLab als versiebeheersysteem. GitLab is eigenlijk een soort open source GitHub-variant die je zelf kunt hosten. Via GitLab kunnen meerdere teamleden aan dezelfde projecten meeschrijven zonder elkaar in de weg te zitten. - Toggl
Een goede urenverantwoording wordt niet alleen door je klanten op prijs gesteld; het helpt jezelf ook om steeds beter in te schatten waar de tijd in een project nou vooral in gaat zitten. Wij gebruiken daarom Toggl om onze uren op projecten weg te kunnen schrijven. Zo kunnen we precies per project zien of we op schema lopen met de uren, en of er bijgestuurd moet worden. Bovendien krijgen ook klanten inzicht in de tijd die besteed is en waaraan die besteed is. Tijdschrijven is overigens niet heel leuk om te doen, maar wel belangrijk. - Basecamp Classic
Voor projectmanagement gebruiken wij Basecamp Classic, een (voor internetbegrippen) relatief oud systeem. Toch voldoet Basecamp Classic voor ons nog steeds omdat het heel eenvoudig gehouden is en daardoor ook gemakkelijk te gebruiken is door klanten. Per project kunnen collega’s en klanten toegang krijgen. Er zijn takenlijsten opgesteld, waarbij elke taak aan een collega of klant toegewezen kan worden. Per taak kan ook overlegd worden door de betrokkenen. Verder kunnen ook bestanden, berichten en belangrijke mijlpalen uitgewisseld worden.
Blijf op de hoogte
Het WordPress-landschap is voortdurend in ontwikkeling. Om goed op de hoogte te blijven van nieuwe features, maar ook aanstaande wijzigingen, raden we aan om onderstaande websites in je bookmarks te zetten, of om je op de mailinglijst te abonneren.
Tot slot
Nu we allerlei tools, technieken, plugins en tips voor WordPress hebben behandeld, onderstrepen we graag ook de belangrijkste tip die we aan WordPress professionals willen meegeven: keep it simple! Zeker wanneer je neigt om technisch vernuftige oplossingen te willen neerzetten, moet je je continu afvragen: ‘ligt dit niet al ergens op de plank?’. Het antwoord is vaak ja, en je klanten zullen blij zijn als ze niet hoeven te betalen voor wielen die al uitgevonden zijn. Bovendien kun je zo meer van je budget besteden aan het goed neerzetten van de inhoud van de WordPress website, en dat is vaak nog veel waardevoller voor de klant.
Gebruik jij tools die wij nog niet genoemd hebben? Laat het ons hieronder weten in een reactie!
Tegenwoordig is atom een hele mooie vervanger van sublime text. Bijna een drop-in replacement omdat het bijzonder veel lijkt om sublime, maar default een flink aantal verbeteringen heeft. Bovendien: gratis. Van de makers van github: https://atom.io/
Een makkelijk alternatief voor de Webfont Generator van Font Squirrel is deze https://www.web-font-generator.com, omdat Font Squirrel soms moeilijk doet over rechten..