CSS WordPress website aanpassen

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.

Paginabron weergeven Chrome

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?

Ontwikkelaars tools Google Chrome

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?

Inspecteren met Google Chrome developers tools

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.

Selecteer elementen met Google Chrome Developer Tools

Element selecteren

HTML Codes inspecteren met Chrome

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.

Custom CSS optie WordPress templates

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:

#top h2 strong,#top h3 strong, #top h4 strong, #top h5 strong, #top h6 strong {

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.

Simple Custom CSS Plugin

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.

Custom CSS WordPress

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.

26 antwoorden
Nieuwe Reacties »
  1. Ellen Hoffmans
    Ellen Hoffmans zegt:

    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.

    Beantwoorden
    • Kees Lamper
      Kees Lamper zegt:

      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

      Beantwoorden
  2. Eric
    Eric zegt:

    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

    Beantwoorden
  3. Milou
    Milou zegt:

    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

    Beantwoorden
    • Kees Lamper
      Kees Lamper zegt:

      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

      Beantwoorden
  4. Hein
    Hein zegt:

    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

    Beantwoorden
    • Kees Lamper
      Kees Lamper zegt:

      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

      Beantwoorden
  5. Henkus Schumacher
    Henkus Schumacher zegt:

    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

    Beantwoorden
    • Kees Lamper
      Kees Lamper zegt:

      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

      Beantwoorden
  6. Desiree
    Desiree zegt:

    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

    Beantwoorden
    • Kees Lamper
      Kees Lamper zegt:

      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

      Beantwoorden
      • Desiree
        Desiree zegt:

        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

      • Kees Lamper
        Kees Lamper zegt:

        In principe kun je de classes van je theme overnemen qua inhoud en deze plaatsen bij de classes van TradeTracker.

  7. Carola
    Carola zegt:

    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?

    Beantwoorden
    • Kees Lamper
      Kees Lamper zegt:

      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

      Beantwoorden
Nieuwe Reacties »

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

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