Vorige week dinsdag (6 december 2016) is WordPress 4.7 uitgekomen met een hoop nieuwe functionaliteiten.
Zo is er een nieuw standaard thema, previews voor pdf-bestand, en nog een aantal andere dingen.
De functionaliteit die er voor mij uitsprong was de extra CSS editor in de WordPress customizer.
Het is een functie die er misschien voor zorgt dat je denkt dat een WordPress child theme niet meer handig of überhaupt nodig is.
Ik heb afgelopen week meteen het een en ander getest en zal in dit artikel vertellen wat de uitkomst is. Verder kun je ook lezen waarvoor een child theme bedoeld is.
Waarom heb je een child theme nodig?
Child themes worden voornamelijk gebruikt voor het aanpassen van het design (CSS) en om functionaliteiten aan te passen of toe te voegen. Tegelijkertijd bescherm je met een child theme de code, zodat het bij een thema update niet verloren gaat.
Wanneer je geen child theme gebruikt en code toevoegt aan de bestanden van het hoofd thema, dan zal je alle wijzigingen kwijtraken bij de eerstvolgende thema update.
Met dit in gedachte zal het je waarschijnlijk niet verbazen dat eigenlijk iedereen die maar een beetje bekend is met het bestaan van een child theme, deze ook altijd zal aanmaken wanneer er aan een website gewerkt wordt.
Het is voor mij ook altijd één van de eerste dingen die ik doe als ik een thema heb uitgekozen. Webtalis maakt dus ook zeker gebruik van een child theme.
Wat kun je aanpassen met een child theme?
Een child theme is een speciaal thema die de functionaliteiten en design van een ander WordPress thema kopieert en overneemt. Wanneer je iets wilt wijzigen van het originele thema, bijvoorbeeld de positie waar de titel wordt weergegeven, dan kun je het bestand waar je de wijzigingen in wilt aanbrengen kopiëren naar het child theme.
Vervolgens kun je de wijzigingen in het bestand in het child theme aanbrengen en zal je het op de website zien. Het child theme wordt dus als leidend gezien en dit komt natuurlijk omdat dit het actieve thema is.
Je kunt eigenlijk alle bestanden aanpassen uit het originele thema, maar soms werkt het niet helemaal goed bij bestanden die in extra mappen staan.
Het style.css bestand hoef je overigens nooit te kopiëren. Je kunt de wijzigingen direct doorvoeren in het style.css bestand van het child theme, dit bestand overruled het style.css bestand van het hoofd thema.
Wat is het verschil voor en na WordPress 4.7?
Met een child theme worden in eerste instantie voornamelijk CSS aanpassingen uitgevoerd. Voor WordPress 4.7 had je geen standaard mogelijkheid om CSS wijzigingen door te voeren zonder dat je het originele bestand moest bewerken.
Met WordPress 4.7 is deze mogelijkheid er wel gekomen. Je kunt sinds WordPress 4.7 CSS wijzigingen aanbrengen in de CSS editor in de Customizer.
Wanneer je alleen een child theme hebt om CSS wijzigingen aan te brengen, lijkt het nu in theorie aantrekkelijk om geen child theme meer aan te maken. Je moet alleen niet vergeten dat je meerdere dingen in gedachten moet houden.
Is het net zo prettig of zelfs fijner om met de Extra CSS editor te werken? Op welke manier wordt de CSS code in het thema geladen? Weet je 100% zeker dat je in de toekomst ook geen bestanden wilt aanpassen, waardoor je eigenlijk beter wel een Child theme kunt gebruiken?
Hoe werkt de extra CSS editor in de customizer?
Je kunt bij de nieuwe Extra CSS editor komen door naar “Weergave -> Customizer” te gaan. Vervolgens zal je hier aan de linkerkant het tabje “Extra CSS” zien staan.
Wanneer je op “Extra CSS” klikt zal er een nieuw tekstgebied openen waar je CSS codes kunt invoeren.
Eerlijk is eerlijk, deze CSS editor werkt heerlijk. Alle aanpassingen die je doet worden direct weergegeven in de live CSS editor, zonder dat het direct zichtbaar is op de website. Je kunt op deze manier dus prima fouten maken en bekijken wat wel werkt, waardoor je veiliger en sneller kunt werken.
Qua gebruikerservaring werkt de CSS editor van WordPress dus eigenlijk beter dan het aanpassen van het style.css bestand in het child theme.
Hoe wordt de extra CSS code geladen?
De CSS code die je invoert in de Extra CSS editor van WordPress wordt inline geladen. Dit houdt in dat er geen apart bestand voor gemaakt wordt en direct in de code komt te staan.
Op zich is dit niet echt een probleem als je een paar kleine CSS aanpassingen wilt doorvoeren. Je wilt het echter wel vermijden als je honderd of zelfs meer dan duizend regels CSS code wilt toevoegen om het thema aan te passen naar je wensen. Inline CSS moet namelijk keer op keer geladen worden door de browser, waardoor de boel vertraagd. Daarnaast vergroot je ook de totale grootte van de pagina.
Wel of geen child theme met WordPress 4.7?
Misschien is het je al opgevallen aan de tekst of het wel of niet handig is om geen child theme meer te gebruiken. Het kan echter per situatie verschillen, dus ik zal nog even in het kort uitleggen wanneer je wel of geen child theme hoeft te gebruiken.
Je hoeft geen child theme te gebruiken als je:
- Nu en in de toekomst niet van plan bent ook maar iets te wijzigen.
- Slechts een paar regels CSS code wilt toevoegen.
Je kunt het best wel een child theme gebruiken als je:
- Extra functionaliteiten in het thema wilt bouwen.
- Wijzigingen wilt doorvoeren in PHP-bestanden.
- Veel regels CSS code wilt toevoegen.
- Denkt in de toekomst dingen te willen wijzigen.
Het is dus niet noodzakelijk om altijd een child theme te gebruiken, maar persoonlijk zou ik het eerlijk gezegd in alle situaties wel doen, want je kunt nooit in de toekomst kijken.
Mocht je uiteindelijk een child theme nodig hebben en je website draait al, dan is het nadeel van een child theme aanmaken dat je alle instellingen opnieuw moet doorvoeren. WordPress ziet het namelijk als een ander thema.
Ik hoop dat het een beetje duidelijk is geworden en je nu weet of je beter wel of geen child theme kunt aanmaken in de nieuwste versie van WordPress. Mocht je nog vragen hebben, dan kun je deze altijd hieronder in de reacties plaatsen.
5 reacties
Ik heb hetzelfde probleem gehad met de style.css van mijn child theme. Na lang zoeken bleek dat ik het versienummer moest upgraden.
De customizer gebruik ik om de css codes te toetsen voordat ik ze in mijn child theme plaats.
Ik zou niet zonder child theme kunnen omdat ik het ook gebruik om de functions.php en de footer aan te passen.
Hi Maikel,
Bedankt voor je artikel. Ik had de css mogelijkheden in de customizer nog niet zo beseft. Door jouw artikel heb ik nu een probleem kunnen oplossen.
Ik gebruik al een paar jaar een child theme voor twenty twelve. Ik heb de css van 17 onderdelen aangepast. Om een voor mij onverklaarbare reden kon ik plotseling nog wel wijzigingen in de style.css aanbrengen maar die werden niet meer zichtbaar op de website. Als ik alle css codes weghaalde in de oude style.css bleven de oude instellingen wel zichtbaar op de website.
Ik heb het opgelost door de css codes in de customizer te kopiëren. Nu werken de nieuwe css codes wel. Mij frustreert het nog wel waarom de style.css niet meer werkt. Mocht je een idee hebben waarom deze niet meer werkte dan hoor ik dat graag van je.
Dit heb ik eerlijk gezegd nog nooit eerder gehoord. Het style.css van het actieve thema wordt altijd gebruikt en de wijzigingen horen dan ook doorgevoerd te worden. Het is mogelijk dat je door de cache niet direct de wijzigingen ziet.
Dank weer Maikel voor deze uitleg.
Kun je me een voorbeeld geven (misschien met een video, als je bv een logo wilt toevoegen in twentytwelve).
Moet ik dan alleen het stukje tekst voor de image plakken in de nieuwe mogelijkheid van CSS 4.7
of
moet ik de gehele code van header.php kopiëren?
Nee, de CSS editor is alleen voor CSS. Wanneer je het over code van header.php hebt, dan moet je een child theme maken, het header.php bestand hierheen kopiëren en vervolgens de aanpassingen doorvoeren.