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.
- Opbouw van een pagina in WordPress met CSS aanpassen
- Zoek classes met Google Developer Tools
- CSS aanpassen in WordPress
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.
- 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.
- <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.
- <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:
- Custom CSS van je thema gebruiken
- Child-Theme stylesheet
- Plugin Simple Custom CSS
- 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.
————-
Ben je op zoek naar betaalbare WordPress plugins? Bestel deze op Codecanyon via onderstaande banner. Dit is een affiliate banner, het kost jou niets en wij krijgen een kleine vergoeding als je via onze link een plugin koopt. Alvast bedankt!
————-
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 voor WordPress‘. 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.
Hoi Kees, bij punt 4 de volgende opmerking van jou: “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?”
Moet je dit niet juist wél doen?
Bedankt voor je reactie Carola.
Als je alleen CSS aan wilt passen en je thema heeft een Custom CSS optie dan is mijn advies deze te gebruiken. Je kent mijn motto ‘hoe minder plugins hoe beter’.
Groet,
Kees
Goed stuk Kees :)
Let wel op dat qua performance het het beste is dat deze custom CSS inline wordt getoond ipv via een losse PHP aanroep.
Zie hiervoor: http://www.managedwphosting.nl/2015/03/dynamische-ajax-css-en-javascript-een-performance-killer/
Bedankt voor de aanvulling Ramon. En zeker waar.
Heel duidelijk stukje tekst! Daar heb ik wat aan :)
Maar ik heb toch een vraagje… Is het mogelijk om de layout van je thema te gebruiken in een plug-in? Ik heb een webstore met affiliate producten en gebruik daarvoor de TradeTracker store plug-in. Deze werkt super makkelijk maar de layout is echter niet zo fraai. Maar het heeft wel de optie je eigen css te gebruiken. Vandaar dat ik deze wilde combineren met mijn thema Tyros. Nou dacht ik dat dit zou moeten kunnen. Maar hoe?
Zou je me misschien een beetje op weg willen helpen?
Bedankt!
Groet Desiree
Ha Desiree,
Dit is uiteraard mogelijk. Je zult dan de classes op moeten zoeken die TradeTracker gebruikt en hier dezelfde opties aan moeten hangen die je nu gebruikt in je thema. Als je vragen hebt stuur gerust een mailtje dan kijk ik met je mee.
Groet,
Kees Lamper
Hai Kees, Bedankt voor je snelle reactie!
Ik moet dus kort door de bocht genomen de classes van de plug-in gelijk maken aan die van mijn thema als ik het goed begrijp. Daar gaat vast wel lukken. Ik ga er even mee worstelen. Mocht ik er niet uit komen of vragen hebben dan mail ik je graag.
Groet,
Desiree
In principe kun je de classes van je theme overnemen qua inhoud en deze plaatsen bij de classes van TradeTracker.
Zag deze link in een Facebookreactie van jou voorbij komen…eindelijk eens duidelijke taal!
Dan is het doel precies behaald Janny! Dankje.
Zou ik uit element inspecteren ook een aantal codes kunnen gebruiken voor een website?
Ja dat kan zeker. Die code zul je dan per website op moeten zoeken.
Hallo Kees, uitstekend stuk waar ik mijn voordeel mee ga doen! Een vraagje: dit stuk gaat over het veranderen en invoegen van code. Maar wat als je wat WEG zou willen halen? Ik wil b.v. graag een zoekvak weghalen, omdat die mijn menubalk verpest.
Groet, Henkus
Goedemiddag Henkus,
De search balk weghalen kun je doen door onderstaande code toe te voegen op een plaats waar je custom css kwijt kunt:
#branding .only-search #s {
display: none;
}
Eventueel nog aangevuld met !important.
Groet,
Kees
Hallo Kees,
Ik heb twee vragen:
– hoe krijg ik links van de berichten de datum en die witruimte weg ?
– hoe kan ik content plaatsen in de ruimte rechts van het logo, sitenaam en subtitel?
Moet dat allemaal in de css?
Dank en groet, Hein
Hein,
Als je in je thema niet de mogelijkheid om datum en witruimte aan te passen zul je inderdaad met CSS aan de slag moeten.
Content plaatsen naast je logo/sitenaam zul je met CSS niet redden. Daarvoor zul je de PHP bestanden van je template aan moeten passen.
Groet,
Kees Lamper
Beste Kees,
Wij hebben een Shopkeeper Thema. In het menu zijn de hoofdletters geforceerd. Dit is uppercase zoals ik heb begrepen.
Hoe kan ik dit aanpassen in CSS?
Met vriendelijke groet,
Milou
Hi Milou,
Je moet dan in je custom css opnemen text-transform:none !important
En dan uiteraard met de class die bij je tekst hoort.
Groet,
Kees Lamper
hoi Kees,
ik heb de plugin simple custom CSS geinstalleerd, maar helaas hebben de aanpassing die hier neerzet geen effect.
Als ik deze aanpassing in extra CSS bij aanpassing van het theme neerzet zie ik direct het effect dus de code is wel goed.
Ook heb ik het stukje tekst zoals je beschreven hebt weggehaald.
Enig idee waarom custom CSS niet werkt.
Alvast bedankt,
gr. Eric
Hi Eric,
Ik zou proberen om er !important achter te zetten om de bestaande class te overschrijven.
Groet,
Kees
Hi Kees,
Duidelijke uitleg zo, echter heb ik nog een vraag :) Ik gebruik het Twenty Seventeen thema. Nu wordt mijn bedrijfsnaam standaard in hoofdletters geplaatst. Heb jij enig idee hoe ik dit aan kan passen? Nu staat er CHANGINGTIME! echter wil ik het aanpassen naar ChangingTime!
Ik hoop dat jij je me hierbij kan helpen.
Groetjes, Ellen.
Hi Ellen,
Je zult dan even moeten zoeken, er moet op je logo een text-transform:uppercase of iets dergelijks zitten. Die moet je overschrijven of aanpassen.
Groet,
Kees
Hallo Kees,
Bedankt voor dit helder beschreven artikel. Ik moet WP nog installeren, dus misschien wordt e.e.a. dan ook duidelijk. Maar nu snap ik niet het verschil tussen stap 1 en 4 van het gedeelte ‘Wat moet je in ieder geval niet doen?’:
– Standaard editor van WordPress gebruiken
– 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?
Ik heb het thema Allegiant voor ogen en voor dit thema wordt reklame gemaakt dat lettertypes, kleuren enz. allemaal aan te passen zijn. Hoe weet ik of dit de standaard editor is of dat ik wijzigingen aanbreng via thema opties?
Sorry, misschien een domme vraag.
Groet,
Sara
Hi Sara,
Ik ga er vanuit dat dit in de thema opties zit. Maar dit kun je het beste bij de thema makers navragen.
Groet,
Kees Lamper
Hoe kun je voor iedere pagina een andere achtergrond of foto instellen met css, lukt me niet alleen telkens voor alle pagina s zelfde achtergrond.
Hi Anko,
Dat kun je doen door voor de definitie van de achtergrond een page-id te vermelden in de Custom CSS.
Groet,
Kees Lamper
Ik heb problemen met de achtergrond van invoervelden op een android machine met chrome als browser. De achtergrond is grijs in plaats van transparant-wit. Op allerlei andere combinaties van browsers en stuurprogramma’s heb ik dit probleem niet. Weet je of en hoe ik dit met css kan oplossen? Ik heb een child theme.
Soms heb je voor bepaalde browser combinaties een extra stukje css nodig. Google eens op jouw apparaat + input fields background, grote kans dat je dan de oplossing gaat tegenkomen.
Groet,
Kees Lamper