Pas zelf je WordPress website aan met CSS

Dit artikel is al tijden het meest populaire artikel op mijn blog. Het origineel is gepubliceerd op 7 februari 2016. Ondertussen is er aan CSS niet veel veranderd maar wel aan de manier waarop je het kunt implementeren op je website. Daarom is dit artikel bijgewerkt naar een nieuwere versie.

—————-

WordPress websites maken gebruik van templates. Of dit nu een alleen een framework is of een compleet template met alles erop en eraan, er wordt altijd gebruik gemaakt van Cascading Style Sheets (vanaf nu CSS).

Wat is CSS? Volgens Wikipedia is dit ‘een techniek voor de vormgeving van webpagina’s’. Kort gezegd zijn het stijlbladen voor de vormgeving van je website.

Niet altijd zal de stijl van je website overeenkomen met de wensen die je hebt qua vormgeving en kleuren. Denk hierbij ook aan getoonde lettertypes, randen, positie van alle items en nog veel meer. Het zijn dus niet alleen de kleuren, maar eigenlijk alles op het gebied van styling van je website wat je aan kunt passen met CSS.

Laat de ingebouwde editor van WordPress vooral ver links liggen

De basis voor de styling van je website kun je altijd vinden in de style.css van je template. Maar maak je hier wijzigingen in dan ben je die kwijt na een update van je thema. Te vaak kom ik mensen tegen die gebruik maken van de editor van WordPress, omdat het zo makkelijk is om in de backend van je WordPress website wijzigingen te maken. Vergeet niet dat door het vergeten van een ; of iets anders je complete website geruïneerd kan worden.

Wil je graag eerst meer over CSS te weten komen? Dan kun je hier een boek over CSS bestellen (affiliate) of via deze website van W3school de basis leren kennen.

In deze blog leg ik eerst uit hoe een website opgebouwd is met behulp van HTML-codes. Vervolgens laat ik zien hoe je de juiste codes opzoekt die je moet wijzigen voor het aanpassen van je website. Als laatste laat ik nog verschillende manieren zien hoe je deze aanpassingen op een zodanige manier maakt dat deze ook bij updates van je thema deze bewaard blijven. Er zijn heel veel verschillende manieren om dit te doen, kies zelf degene die het beste bij jouw WordPress website past.

1. Opbouw van een pagina in WordPress met CSS aanpassen
2. Zoek classes met Google Developer Tools
3. CSS aanpassen in WordPress
   1. Custom CSS van je thema gebruiken
   2. Child-theme gebruiken
   3. Simple Custom CSS Plugin gebruiken
   4. Customizer CSS WordPress gebruiken

1. Opbouw van een pagina in WordPress met CSS aanpassen

Vroeger werden websites gebouwd in platte HyperText Markup Language (wat is HTML). Hiermee bouwde je een statische website en zonder verstand van de gebruikte HTML codes kon je weinig aanpassen. Tegenwoordig heb je een dynamische website met het Content Management Systeem WordPress. Dit maakt gebruik van een database waar alle tekst in opgeslagen wordt en opgehaald als het nodig is. De basis van dit systeem is de programmeertaal PHP (wat is PHP) in combinatie met HTML. Dat is een erg basis uitleg maar voor nu voldoende.

Als voorbeeld heb ik gebruik gemaakt van de pagina webdesign op mijn eigen website. Alle codes die je voorbij ziet komen zijn dus van mijn eigen website.

In de schermafdruk zie je verschillende cirkels. Op volgorde zie je de volgende opties die je eventueel aan kunt passen via CSS.

1. class=”entry-footer” : dit is een class die je kunt hergebruiken. Je kunt deze class aan verschillende items op je pagina koppelen en dus eenvoudig bijvoorbeeld een lettergrootte of tekstkleur aanpassen voor je hele website.
2. <p> : een standaard HTML code waar bijvoorbeeld een lettertype aan gekoppeld is. Wordt gebruikt voor het maken van alinea’s. Zal ook op elke website terug te vinden zijn. Is wel erg algemeen. Mocht je hier wijzigingen in maken dan zullen dus alle alinea’s die deze code gebruiken mee wijzigen.
3. <h2> : Een koptekst item uit HTML code. Als je in de CSS code de H2 code wijzigt zal dit over de hele website wijzigen. Eventueel kun je bijvoorbeeld in je stylesheet <h2 class=”h2-optie1″> aanmaken en daarmee pas je dan alleen de gekozen items aan.

2. Zoek classes met Google Developer Tools

Stel: Je hebt een kop op een pagina die je van kleur wilt wijzigen. Hoe pak je dit aan? Hoe kom je erachter welke class je aan moet passen? Ik gebruik zelf de Google Chrome browser. Hier zit een functie ingebouwd waarmee je in de bron van je WordPress website kunt zoeken. Je hebt hier dus geen extra tools voor nodig.

Maak je gebruik van Firefox als internetbrowser? Dan heb je een toevoeging nodig die ‘Firebug’ heet. Deze werkt globaal hetzelfde als de Google Developer Tools.

Waar vind je dan die Google Chrome Developer Tools? Ik maak zelf gebruik van een Mac voor het schrijven van deze blog, zover ik heb kunnen nagaan is dit op een Windows machine hetzelfde.

• Ga naar ‘Weergave’
• Kies ‘Ontwikkelaar’
• Klik op ‘Ontwikkelaarstools’
• Onderaan je scherm zal een scherm in je browser verschijnen waar je allemaal codes en teksten ziet. En nu?

Dit is de eerste stap op weg naar het vinden van je classes. In dit voorbeeld zal ik laten zien hoe je de kleur van de tekst van de header ‘Website laten maken’ aanpast. Hoe ga je precies zoeken welke class je hiervoor aan moet passen?

Element inspecteren activeren

Linksonder in het zojuist geopende scherm onderaan je beeld vind je het icoon dat je hiernaast op de schermafdruk ziet. Klik hier maar eens op en ga vervolgens over de elementen van je pagina heen.

Klik op het element waarvan je de waardes wilt aanpassen. In mijn geval heb ik geklikt op de kop ‘website laten maken’. Aan de rechterkant van de developer console onderin je scherm verschijnen de gebruikte classes. In dit geval gaat het om een H2 kop.

Element selecteren

CSS Classes

• De lettergrootte wordt aangegeven met font-size:25px;
• Text-transform: uppercase; dat wil zeggen dat de letters geforceerd hoofdletters worden.
• Als ik de kleur van deze kop wil aanpassen dan zal ik de optie color:#ff0000 toe moeten voegen. In dit geval zou de kop dan rood weergegeven worden. 

Wil je testen of je de juiste class gevonden hebt? Voeg dan met behulp van tab na de uppercase; een nieuwe regel toe en typ daar de code die de kleur moet wijzigen: color:#ff0000; Je zult dan direct de kleur van de kop zien wijzigen naar rood. Dit is puur om te testen aangezien het verder nergens opgeslagen wordt.

Waar voeg ik de aangepaste classes in om ze permanent te maken? Dat lees je hierna in deze blog.

3. CSS aanpassen in WordPress

Zoals in het begin van de blog aangegeven zijn er verschillende mogelijkheden om custom css in je WordPress website te gebruiken. Deze opties zijn:

1. Custom CSS van je thema gebruiken
2. Child-Theme stylesheet
3. Plugin Simple Custom CSS
4. De customizer van WordPress gebruiken

3.1 Custom CSS van je thema gebruiken

Deze optie is niet in alle WordPress thema’s beschikbaar. De meeste premium thema’s bieden die optie wel. Als voorbeeld zie je hier de thema-opties van het Enfold theme.

Om de kleur van de eerder genoemde H2 kop te wijzigen doe je het volgende:

Kopieer de hele code uit de developer console. Je kunt daaruit knippen en plakken:

color: inherit;text-transform: uppercase;

font-size: 25px;

Plak de code in de Quick CSS/Custom CSS van je theme.

Voeg de code: color:#ff0000 !important; toe. Waarom de !important voor de afsluitende ; ? Dit is om eventuele andere code te overschrijven die in een andere stylesheet hetzelfde element aanstuurt.

Na het opslaan van de wijzigingen en het verversen van de webpagina zal de H2 koptekst in rood weergegeven worden.

3.2 Child-theme stylesheet gebruiken

Wat is een child-theme? Dat is wel handig om te weten voordat je er gebruik van gaat maken. Een child-theme maakt gebruik van een WordPress thema als basis maar het grote voordeel is dat als er updates zijn voor het parent-theme je deze kunt updaten zonder de gemaakte wijzigingen aan je stylesheets kwijt te raken.

Een child-theme heeft nog meer voordelen. Je kunt namelijk niet alleen de stylesheets aanpassen. In principe kun je alle thema bestanden van het parent-theme overzetten naar de child-theme. Hierbij kun je denken aan de functions.php, Woocommerce template bestanden, header.php en footer.php. Je maakt hierin wijzigingen die bewaard blijven bij een update van je thema. Anders is al je werk voor niets geweest. Er zijn thema’s die bijna maandelijks een update krijgen dus een child-theme kan je dan enorm veel tijd en frustratie besparen. Hierdoor bespaar je dus ook veel tijd op je WordPress website onderhoud.

Maar heb je altijd een child-theme nodig? Mijn mening is van niet. Mocht je een goede custom css functie in je thema hebben dan en verder geen pagina templates willen wijzigen in je WordPress website of WooCommerce webshop dan is het niet noodzakelijk. De andere kant is, als je net start met je website is mijn advies om wel een child-theme aan te maken. Wie weet wil je in de toekomst toch functies toe gaan voegen via de functions.php of besluit je de WordPress website uit te breiden met een webshop via Woocommerce dan heb je er alleen maar gemak van.

3.3 Simple Custom CSS plugin gebruiken

Vanaf WordPress versie 4.8 heb je deze plugin niet meer nodig aangezien WordPress in de customizer zelf een Custom CSS optie toegevoegd.

Deze plugin is eerder voorbij gekomen in de lijst ‘top 5 plugins januari 2016‘. Dit is echt de meest door mij gebruikte plugin. Je kunt heel snel wijzigingen maken en uittesten. Door de eerder genoemde !important te gebruiken overschrijf je alle andere opties. Je zult verbaasd staan op hoeveel plaatsen soms een H2 kop gedefinieerd is. Dus als je geen !important gebruikt heb je grote kans dat je wijziging niet doorkomt.

Als je de plugin geïnstalleerd hebt vind je deze in het menu onder Weergave en vervolgens Custom CSS. Je krijgt het onderstaande scherm te zien. Vergeet niet de tekst die er nu staat tussen /* en */ weg te halen anders zal je code niet werken.

Na het invoegen van de gewenste code klik je op Update Custom CSS en ben je klaar. Of toch niet helemaal?

Houd rekening met mogelijke cache plugins zoals W3 Total Cache of WP Super Cache. Maak de cache leeg en ververs daarna je website.

3.4 Custom CSS in de WordPress customizer

Zoals in het vorige punt aangehaald heeft WordPress zelf in de customizer een custom css optie toegevoegd. Je hoeft dus geen losse plugin meer te installeren. De keuze tussen deze optie of de custom css in je child-theme is eigenlijk gelijk. Beide opties blijven bewaard bij een update van je thema.

Waar vind je deze optie? Onder Weergave > Customizer > Additional CSS. Zie screenshot. Je kunt hier direct je custom css invoeren.

4. Conclusie over CSS

Je kunt bijna alles aanpassen met CSS. Deze blog is slechts een stuk basis mogelijkheden. Wil je weten welke CSS Classes er allemaal zijn? Kijk dan eens hier.

Wat moet je in ieder geval niet doen?

• Standaard editor van WordPress gebruiken
• Direct in de stylesheet van je thema werken, tenzij je een child-theme gebruikt
• Geen backups maken voordat je wijzigingen gaat maken in je stylesheets
• Kijk eerst in je thema opties of je daar niet een kleur voor bijvoorbeeld een H2 kop in kunt stellen. Waarom custom css als het in je thema zit?

Verder is het soms behoorlijk zoeken voordat je de juiste class gevonden hebt. Mocht je meer over CSS willen leren dan kun je overwegen een boek te bestellen. (affiliate link)

Heb je iets aan deze blog gehad? Deel deze dan met je kennissen zodat zij mee kunnen delen. Heb je vragen of een specifiek probleem? Laat een reactie onder deze blog achter of  neem dan contact op.