Webpoli

WordPress zoals jij wil

Een thema aanpassen met een WordPress Child Theme

Een thema aanpassen met een WordPress Child Theme

posted on

Wil je een WordPress thema aanpassen, dan is een WordPress child theme, een kindthema, de juiste weg. Een kindthema erft de eigenschappen van een ander thema; het ouderthema.

Met behulp van een kindthema kun je niet alleen veranderingen aanbrengen in het uiterlijk van het thema, maar ook functionaliteit toevoegen. In dit bericht wil ik je graag op weg helpen met het creëren van een kindthema.

Maar waarom zou je eigenlijk een kindthema gebruiken, terwijl je eventuele veranderingen ook kunt aanbrengen in het oorspronkelijke thema?

Nou, net als WordPress krijgen ook thema’s wel eens een update. Op het moment dat een thema wordt geupdate, ben je de veranderingen die je hebt aangebrachte kwijt. Dat wil je denk ik voorkomen en dat kan eenvoudig met een kindthema.

Een platte teksteditor

We gaan zo meteen de style.css bewerken. Daarvoor heb je een platte teksteditor nodig. Gebruik in elk geval geen tekstverwerker zoals Microsoft Word of LibreOffice Writer.

Omdat ik zelf met zowel Windows als Linux werk, gebruik ik sinds enige tijd – met grote tevredenheid – SublimeText. SublimeText is verkrijgbaar voor Windows, Linux en Mac. Helaas is deze editor niet gratis, hij kost maar liefst USD 70. Niet goedkoop, ik weet het. Je kunt hem wel gratis downloaden en om te testen.

Voor incidenteel gebruik zijn er gelukkig gratis alternatieven. Een goede en gratis editor voor Windows is Notepad++. In het geval van Linux kun je gedit of Kate gebruiken, net naar gelang welke Linux desktop je voorkeur heeft.

Windows kladblok is ook een platte tekst editor. Kladblok heeft echter de neiging om tijdens het opslaan .txt toe te voegen aan de bestandsnaam. Je kunt dit voorkomen door het toepassen van aanhalingstekens bij het opslaan, dus “style.css” – inclusief de aanhalingstekens dus.

Als het echter even kan gebruik dan liever niet Kladblok, maar Notepad++. Een bijkomend voordeel van Notepad++ is de zogenaamde syntax highlighting. Hierbij krijgen HTML-elementen, CSS-eigenschappen en waarden en dergelijke een bepaalde kleur. Dit vergroot de leesbaarheid en helpt over het algemeen ook bij het signaleren van fouten.

Een kindthema maken

twentythirteen-child theme folderHet creëren van een kindthema, in zijn meest elementaire vorm, is kinderspel. Als voorbeeld nemen we het huidige standaardthema van WordPress; TwenteyThirteen. Dit thema bevindt zich in de directory twentythirteen in de folder /wp-content/themes van je WordPress installatie. Dat wordt ons ouderthema.

Allereerst maak je een nieuwe directory aan in dezelfde /wp-content/themes folder. Die nieuwe map noem je twentythirteen-child. In deze map wordt ons kindthema gehuisvest. De toevoeging -child is niet verplicht, maar wel goed gebruik. Je kunt de map van het kindthema in principe elke gewenste naam geven, zolang deze maar uniek is en geen spaties bevat. Gebruik dus letters, cijfers en de tekens _ (underscore) en – (koppel-/minteken).

Vervolgens kopieer je vanuit de folder van het ouderthema de style.css en de screenshot.png. Let op dat je deze niet sleept, maar kopieert; selecteer beide bestanden en gebruik de sneltoets Ctrl+C.Eventueel kun je na de selectie ook rechts klikken in de map van het ouderthema. In het menu dat vervolgens verschijnt kies je kopieer of copy.

Nu ga je naar de folder van het kindthema, in ons voorbeeld twentythirteen-child. Daar aangekomen gebruik je de sneltoets Ctrl+V. Rechts klikken en plakken of paste kiezen kan natuurlijk ook.

Het enige bestand dat aanwezig moet zijn in de folder van het kindthema is de style.css. Een screenshot.png geeft het kind echter ook een smoel op de pagina Weergave >> Thema’s van WordPress. Je mag de screenshot.png van het kindthema ook vervangen door een eigen creatie. Voor het beste resultaat kies je een afmeting van 300 x 225 of 600 x 450 pixels.

De style.css van ons kindthema is nu een exacte kopie van het ouderthema en daarmee nog geen volwaardig kindthema. Daarvoor openen we de style.css met de platte teksteditor van jouw keuze. Afgezien van de eerste “/*” en “Theme Name: Twenty Thirteen”, haal je alles weg. Vervolgens zet je ” Child” achter de naam van het thema.

Je style.css ziet er nu dus als volgt uit:

/*

Theme Name:     Twenty Thirteen Child

Nu moeten we nog een relatie leggen met het ouderthema. Daarvoor voegen we “Template: twentythirteen” toe. De template verwijst naar de foldernaam van het ouderthema. Tenslotte voegen we nog een “*/” toe. Ons style.css ziet er nu zo uit:

/*

Theme Name:     Twenty Thirteen Child
Template:       twentythirteen

*/

In principe is alles wat er tussen de tekenreeksen /* en */ staat commentaar, bedoeld voor ons mensen. Het is een goed gebruik om ook je eigen werk in een style.css op deze wijze te documenteren. Niet alleen voor anderen, maar ook voor jezelf.

Nippen aan de CSS beker

Ons kindthema heeft nu een probleem. Hoewel het verwijst naar het ouderthema, maken we nog geen gebruik van de stijlen van het ouderthema. Opdat we niet alle CSS zelf moeten verzinnen kunnen we de CSS regels van de style.css van onze template importeren. Dat doen we met de regel:

@import url("../twentythirteen/style.css");

Deze regel voegen we toe onder de */. Zet je deze regel namelijk bij het commentaar, dan zal de browser deze negeren. @import spreekt waarschijnlijk voor zich, dit is het importcommando. Met url geven we aan hoe de informatie tussen de ronde haken moet worden geïnterpreteerd.

Met de .. geven we aan dat we in de folderstructuur op de webserver een stapje omhoog gaan. Vervolgens willen we de style.css gebruiken in de folder twentythirteen – de template folder, de map van het ouderthema.

Onze style.css omvat nu:

/*

Theme Name:     Twenty Thirteen Child
Template:       twentythirteen

*/

@import url("../twentythirteen/style.css");

We hebben nu een kind dat zich exact hetzelfde gedraagt als de ouder. We kunnen nu alle gewenste veranderingen in het ontwerp van het kindthema aanbrengen zonder dat dit effect heeft op dat ouderthema. Dat betekent ook dat bij een eventuele update van het ouderthema onze wijzigingen en toevoegen veilig zijn en behouden blijven.

In het ouderthema hebben de koppen van berichten (.entry-title a) een zwarte kleur met als hexcode #141412. Als we met de cursor over de titel van een bericht gaan, “hoveren” zoals ze dat noemen, dan krijgt die (.entry-title a:hover) een oranjekleur. Dat is wel mooi, maar deze worden ook onderstreept getoond. Dat willen we niet. Wat we dan moeten doen is een regel toevoegen, namelijk “text-decoration: none”.

Zet de volgende CSS regel onder het @import-commando:

.entry-title a {
    text-decoration: none !important;
}

De toevoeging !important is wel eens nodig om CSS regels in het ouderthema te overheersen.

Stel nu dat we diezelfde titels in een ander font willen tonen. In Droid Sans bijvoorbeeld. Daarvoor moeten we twee stappen ondernemen. Eerst importeren we het Google Webfont Droid Sans met het commando

@import url(http://fonts.googleapis.com/css?family=Droid+Sans);

Je vindt deze instructie als je op de pagina van Droid Sans rechts bovenaan op de link Open Droid Sans in Google Fonts » klikt. Kijk vervolgens onder het tabblad @import. De import

De tweede en laatste stap is aangeven dat we de berichttitel in Droid Sans willen zien. Daarvoor voegen we de volgende regel toe:

font-family: 'Droid Sans', sans-serif;

Het stijlblad van ons kindthema ziet er nu als volgt uit:

/*

Theme Name:     Twenty Thirteen Child
Template:       twentythirteen

*/

@import url("../twentythirteen/style.css");
@import url(http://fonts.googleapis.com/css?family=Droid+Sans);

.entry-title a {
    font-family: 'Droid Sans', sans-serif;
    text-decoration: none !important;
}

De .entry-tile a wordt de selector genoemd. Het verwijst naar het stijlelement dat we willen adresseren.

Font-family en text-decoration zijn properties, eigenschappen van die selector.

‘Droid Sans’, sans-serif; en none !important zijn de values, de waarden van de achtereenvolgende properties.

Een combinatie van property en value wordt een declaration, een verklaring genoemd.

De selector vormt samen met zijn declaraties een CSS rule, een CSS regel. Je mag als je dat wil alles achter elkaar zetten.

De CSS regels in een style.css worden van boven naar beneden uitgevoerd. Let daar op als je stijlblad langer begint te worden.

Een iets uitgebreidere introductie in de wereld van CSS vind je in mijn (Engelstalige) bericht WordPress Frameworks, Stylesheets (CSS) and Required Coding Skills.

De eerste stap van een reis?

We laten de CSS voor wat het is en keren terug naar het kindthema.

Aangezien het ouderthema en het kindthema elk hun eigen directory hebben en elk een eigen style.css, worden deze door WordPress herkent als twee verschillende thema’s. Als de geïnstalleerde thema’s bekijkt via Weergave >> Thema’s, dan moet je dan ook zowel het ouder als het kindthema kunnen zien.

Zie ja alleen de ouder, dan is er iets mis met de verwijzing naar de ‘Template’ in de kop van de style.css. Meestal wijkt de naam van het ouderthema dan iets af van de template-naam in de kop van de style.css van het kindthema.

Ontbreken beide, dan is waarschijnlijk het ouderthema nog niet of niet meer geïnstalleerd.

Zie je zowel het ouder- als het kindthema, maar lijkt de opmaak van het kindthema in het geheel niet op die van de ouder – terwijl je nog niets hebt toegevoegd aan de style.css van het kindthema – dan is er iets verkeerd (gespeld) in de @import-regel.

Zodra je het kindthema activeert, wordt automatisch de style.css van het kindthema gebruikt. Zo eenvoudig is dat.

Dus nog even samenvattend:

  1. je activeert het kindthema – niet het ouderthema!
  2. het kindthema maakt gebruik van de php (template) bestanden van de ouder – dankzij “Template: x” in de kop van de style.css
  3. het kindthema importeert de opmaak (de style.css) van de ouder via de @import regel
  4. eventuele afwijkende styling voeg je toe aan het de style.css van het kindthema

Dat betekent dus als je verder niets toevoegt aan de style.css van het kindthema, dan lijkt het kind sprekend op zijn ouder.

In dit bericht hebben we slechts een tipje van de sluier opgelicht. WordPress kindthema’s is een krachtig concept waar veel meer mee mogelijk is dan het aanpassen van kleurtjes en fonts.

Je kunt ook de logica wijzigingen door toevoegingen aan de functions.php of paginasjablonen naar wens aanpassen. Dat zijn echter ook aspecten van kindthema’s die enige kennis van de programmeertaal PHP vereisen. Of jij je die kennis wilt eigen maken is een persoonlijke keuze, het is niet echt nodig.

Enige kennis van CSS kan ik echter warm aanbevelen. Je hoeft geen auto te kunnen repareren om er in te kunnen rijden. Het kan echter wel eens handig zijn als je een lamp of een band kunt vervangen. Wil je zelfs dat niet, dan is de ANWB gelukkig nooit verder weg dan een telefoontje.

Blijf op de hoogte

Schrijf je in en ontvang een e-mail zodra er nieuws is. Het is gratis.

Webpoli respecteert je privacy.

Lees Interacties

Reacties

  1. En yup weer gelukt met deze duidelijke instructie….hartelijk dank wederom!

    Besef me wel degelijk dat het goed is enige kennis van CSS op te doen maar als beginner is dat nu teveel. Juist het easy-to-follow is het wat me in WordPress aansprak. Zodra ik e.e.a. onder de knie heb ga ik zeker verder met CSS.

    Tot een volgende!

    Beantwoorden

  3. Hoi Wil,

    Allereerst bedankt voor deze duidelijke instructie.

    Ik had echter nog wel een vraag over het aanroepen van het nieuw gemaakte child style.css bestand.

    Zo kan ik nergens terug vinden hoe je er voor zorgt dat de wordpress de nieuwe child css file gebruikt in plaats van de huidige “parent” styles.css file.

    Moet je bijvoorbeeld ergens een verwijzing aanpassen? Zoals het nu is blijft wordpress gewoon gebruik maken van de “parent” omdat daar naar verwezen wordt binnen de mappen structuur.

    Naar de nieuw gemaakte child theme wordt nergens verwezen en deze word dus ook niet aangeroepen en dus niet gebruikt.

    Ik hoop dat je mijn vraag kan beantwoorden

    Beantwoorden

    • Hallo Jeroen,

      Goeie vraag, ik laat dit punt een beetje onderbelicht in bovenstaand bericht. Ik heb in de laatste paragraaf enkele regels toegevoegd.

      Het ouderthema en het kindthema kennen elk hun eigen folder. Het ouderthema omvat het complete, originele thema. In de folder van het kindthema bevindt zich minimaal de style.css van dat kindthema.

      Zowel het ouderthema als kindthema moeten in WordPress zichtbaar zijn via Weergave >> Thema’s. Zodra je het kindthema activeert wordt automatisch de style.css van het kindthema gebruikt. Zorg er wel voor dat eventuele toevoegingen onder de regel ‘@import url(“../twentythirteen/style.css”);’ worden geplaatst, anders worden eventuele toevoegingen weer gecorrigeerd door CSS-regels in het originele style.css bestand.

      Laat het me weten als je nog vragen hebt.

      Groet, Wil

      P.S. Bij wijze van naslagwerk kopieer ik altijd de style.css van het ouderthema naar kindthema en noem het daar style-parent.css.

      Beantwoorden

  4. Hoi Wil,

    Ik heb een site gemaakt met het responsive-theme. Daarbij heb ik een aantal wijzigingen aangebracht, zoals bijvoorbeeld de achtergrondkleur. Nu is er een update van responsive en wordt aangeraden een child-theme te maken. Nu is mijn vraag: waar vind ik een overzicht van de wijzigingen die ik inmiddels heb aangebracht zodat ik deze meteen kan opnemen in de style.css van het child-theme zodat ik niet opnieuw het uiterlijk van mijn website hoef aan te passen?

    Groeten,
    Driek.

    Beantwoorden

    • Hallo Driek,

      Als je de aangebrachte wijzigingen niet hebt gedocumenteerd – in de style.css zelf, of in een tekstbestand – of onder aan het style.css hebt toegevoegd, dan zul je moeten putten uit je geheugen. Je kunt eventueel het originele stijlbestand van responsive vergelijken met jouw eigen versie, maar daar is vaak geen beginnen aan.

      Uiteraard is mij dit in het verleden ook wel eens overkomen 😉 . Het snelste werkt het waarschijnlijk als je de nieuwe versie van responsive activeert en vervolgens je site kritisch bekijkt. Waar je een wijziging had aangebracht zal je dat wel opvallen. Gebruik dan jouw versie van de style.css als naslagwerk en breng die wijziging vervolgens over naar het stijlbestand van het kindthema.

      Hopelijk heb je hier iets aan.

      Succes, Wil

      Beantwoorden

  6. hallo Wil

    ik werk (nog) lokaal met een child thema van human en de style aanpassing gaan goed.
    maar de taal aanpassing lukt niet. ik heb begrepen dat je daarvoor ook de functions.php moet aanpassen.
    ik heb een extra map (languages) aan gemaakt in de directory van het child thema en daarin de nederlandse taal bestanden gezet nl_NL.po en nl_NL.mo .
    in het aangepast functions.php bestand staat nu onderstaande tekst

    <?php
    /* ————————————————————————- *
    * Custom functions
    /* ————————————————————————- */

    // Add your custom functions here, or overwrite existing ones. Read more how to use:
    // http://codex.wordpress.org/Child_Themes

    function hueman_child_setup() {
    load_hueman_Child_textdomain( 'hueman_Child', get_stylesheet_directory() . '/languages' );
    }

    als ik naar de codex van word press ga krijg ik soort gelijke instructies maar het ;lukt mij maar niet
    de naam van mijn child map is hueman-child-master
    maar als ik in wordpress naar mijn geactiveerde thema kijk dan staat daar Hueman Child
    ikheb verschilldende schrijfwijzes geprobeerd met en zonder underscores maar ik krijg geen nederlands tekst in mijn thema

    weet jij een oplossing?

    bijvoorbaat hartelijke dank

    Aad

    Beantwoorden

    • Hallo Aad,

      Als ik je goed begrijp werkt het child theme zoals het moet werken, alleen de vertaling functioneert nog niet. Zelf heb ik trouwens nog niet meegemaakt dat een vertaling een aanpassing van de functions.php vereist.

      De meeste (premium) thema’s komen inderdaad met een .po of een .pot bestand. Hierin staan alle ‘strings’, de tekenreeksen en begrippen die bezoekers en admins zien. Dit bestand bevindt zich over het algemeen in de folder ‘lang’ of ‘langauge’ van het ouder thema. In diezelfde folder dient ook het bestand met de vertaalde begrippen te staan.

      Groet,

      Wil

      Beantwoorden

  7. Dag Wil,

    Goed leesbaar en duidelijk artikel over child themes. Nu heb ik dit al wel eens gedaan maar loop tegen het volgende aan: als ik een child theme heb gemaakt en gebruik dan zie ik in de bron keurig de naam van het child theme staan.

    Echter kom ik verderop steeds nog de naam van het originele theme tegen. Bijvoorbeeld van de ‘motioncss-widgets-css, van de responsive-css etc. Ook van de diverse javascripts, zoals supersized.

    Hoe kan ik dit voorkomen?

    Mvg,
    Fien

    Beantwoorden

    • Hallo Fien,

      Fijn dat je het duidelijk vindt. Het child theme gebruikt nog altijd het template systeem van het parent theme; dit roep je immers aan in de kop van het stylesheet met “template:”. Aangezien dat template systeem van de ouder dus wordt gebruikt, zul je in de broncode vast nog wel eens de naam van de ouder tegen komen. Ik zou dat ook zo laten. Veranderen is link en zal bij een volgende update van de parent toch weer worden overschreven. De info in de kop – tussen /* en */ – kun je zonder problemen naar wens wijzigen, zolang de verplichte elementen er maar in staan.

      Groet,
      Wil

      Beantwoorden

  9. Beste Wil,

    Het is me met jouw uitleg gelukt een child theme op te zetten. Dank, want ik kijk al een week instructies op Youtube zonder succes. Ik moest de twee bestandjes (style.css en screenshot.png) overigens wel zippen, zodat de upload naar WordPress doorgang kon vinden.

    Wat ik echter wil doen met de child, is het aanpassen van experimenteren met de code zonder dat de website wordt veranderd. Als de aanpassingen naar behoren functioneren wil ik de live website kunnen overschrijven. Is een child website daar wel de goede methode voor?

    Groet en succes!
    Duco

    Beantwoorden

    • Beste Duco,

      Fijn dat het je is gelukt. Dat is trouwens wel een goede opmerking van jou met betrekking tot het zippen van de bestanden. Je kunt een kindthema inderdaad op drie manieren uploaden. Zelf geef ik de voorkeur aan FTP, maar het controlepaneel van de host en installatie via het Admin paneel zijn inderdaad ook opties. Zal hier iets mee doen.

      Experimenteren zou ik nooit doen op een live site. Ongeacht of het nu code (CSS of PHP) is, een thema of een plugin. Experimenteren juich ik toe, doe het zelf ook nog volop, maar dan wel op een lokale installatie. Begin met een lokale webserver en installeer vervolgens WordPress op die lokale server.

      Je kunt dan volop experimenteren met CSS. Ben je tevreden, dan upload je de lokale style.css naar de host – of je kopieert de inhoud via de Bewerker (Weergave >> Bewerker). Zo kun je ook eenvoudig een versie-historie opbouwen en indien nodig terugvallen op een eerdere versie.

      Succes,
      Wil

      Beantwoorden

  10. Beste Wil,

    Bedankt voor de duidelijke instructies. Het maken van het childtheme (twentythirteen) is me gelukt.

    Wat ik me afvraag, heb jij ook een antwoord op de volgende vraag:
    Hoe kan ik de footertekst wijzigen?. Heb al diverse plugins en websites gecheckt, maar ik kom er niet uit.

    Beantwoorden

    • Hallo Els,

      Fijn dat het is gelukt. De voettekst wordt bepaald door de footer.php. Voor het wijzigen hiervan heb je een beetje inzicht in PHP en WordPress template tags nodig. Een plugin voor zoiets is ook wel lastig, omdat iedere thema auteur zijn eigen stijl heeft.

      Ik zal kijken of ik een sjabloon kan maken dat je naar eigen inzicht eenvoudig kunt aanpassen. Vervolgens hoef je het dan alleen in de footer.php te kopiëren.

      Beantwoorden

  11. Beste Wil,

    Eerder al een mail gestuurd via het contactformulier 🙂
    Nu heb ik deze pagina helemaal gelezen en als ik het goed gefilterd heb betekend het dat
    ik het thema in een zip moet hebben voordat ik een child thema kan maken, klopt dat?

    Fijne dag!

    Groetjes, Daniella

    Beantwoorden

    • Hallo Daniella,

      Het eenvoudigste is het child theme lokaal, op je eigen PC, creëren. Daarna kun je het uploaden naar de website. Uploaden kan via FTP of via WordPress (Weergave >> Thema’s >> Nieuwe toevoegen). Laat het me weten als je verdere assistentie nodig hebt.

      Groet,

      Wil

      P.S. Mijn antwoord heeft even op zich laten wachten, omdat ik enkele weken ‘offline’ ben geweest. Het blijft mijn intentie om binnen 24 uur te antwoorden – in elk geval op werkdagen.

      Beantwoorden

  12. Beste Wil,

    Hartelijk dank voor de duidelijke uitleg en ook fijn dat deze informatie hierdoor ook in het nederlands beschikbaar is. Hier mijn vraag:
    Ik heb een Child Theme aangemaakt m.b.v. de plug-in Child Themify. Je hoeft dan niet al de stappen van kopiëren van de style.css in je child theme te doen via FTP bijvoorbeeld.
    Ik heb mijn child theme geactiveerd (van thema twenty-eleven) en hier een aantal wijzigingen in opgeslagen, o.a. de footertekst en de tekst bij het zoekscherm. Wat ik merk is dat als ik een wijziging aanbreng in het Child Theme dat er dan niets wordt gewijzigd op mijn website. Pas als ik de wijziging in het originele thema opneem zie ik de aanpassing. Ook heb ik zonet het thema ge-update en was ik de wijzigingen kwijt. Ik vraag me af wat ik verkeerd doe,
    Hieronder de hele tekst van de style.css van het child theme. Wellicht kun jij zien of er rare dingen in staan waardoor het niet goed gaat?

    /*

    Theme Name: Testsite Child
    Version: 1.0
    Description: A child theme of Twenty Eleven
    Template: twentyeleven

    */

    @import url(“../twentyeleven/style.css”);

    Het bovenste gedeelte tot en met import etc. is automatisch gedaan via de genoemde plug-in. De rest heb ik er zelf aan toegevoegd.

    Alvast bedankt.

    Met vriendelijke groet,
    Carla

    Beantwoorden

    • Beste Carla,

      De genoemde plugin is mij onbekend. Zelf ben ik gecharmeerd door de mogelijkheden van de thema’s van Themify, maar deze plugin komt uit een andere stal. Je hebt tegenwoordig bijna overal een plugin voor, maar ik wil ik je toch adviseren; creëer het child theme handmatig. Je kunt het lokaal aanmaken en uploaden via FTP of WordPress >> Weergave >> Thema’s >> Nieuwe toevoegen.

      De regel met de copyrights onder @import hoort niet thuis in de stylesheet, maar in de footer.php. Ik ken de plugin niet, maar dat zou de reden kunnen zijn waarom de wijzigingen in het kindthema niet zichtbaar worden op de site.

      Succes,

      Wil

      Beantwoorden

      • Beste Wil,
        Bedankt voor je antwoord. Een beetje late reactie van mijn kant, maar nu Child Themify (nog) niet werkt met WP 4.0 ga ik toch de handmatige methode toepassen. Waar ik nog mee zit is het volgende:
        Als je al wijzigingen hebt aangebracht aan je parent thema en daarna pas een child aanmaakt hoe zorg je er dan voor dat deze wijzigingen in het Child Theme terecht komen? En als je het Child Theme geactiveerd hebt en wijzigingen aanbrengt in de codes hoe komt dit dan in het Child Theme terecht? Als je bijvoorbeeld een wijziging wilt aanbrengen in de footer.php met je dan eerst deze footer.php kopiëren naar je child theme en dan wijzigen? Is dat misschien de stap die ik heb overgeslagen en waardoor de wijzigingen bij een update van het thema niet worden meegenomen?
        En als dit klopt moet je dan ieder bestand eerst naar je child kopiëren voordat je wijzigt? Dus bij wijzigingen in de header eerst de header.php via FTP kopiëren naar je child? Ik hoop dat ik het een beetje handig heb uitgelegd en dat je begrijpt wat ik bedoel. Zo niet, dan hoor ik dat graag. Alvast bedankt.

        Beantwoorden

        • Hallo Carla,

          De style.css wordt anders behandeld dan een PHP template.

          Als er een footer.php in de map van het kind staat, dan wordt de footer.php van de ouder genegeerd. Eventuele gewijzigde PHP templates van het ouderthema, kopieer je dus eerst naar de folder van het kindthema. Daarna kun je de originele templates terugzetten in de directory van het ouderthema.

          De style.css van het kind importeert de CSS van de ouder (via de @import functie). Daarna worden de CSS regels in de style.css van het kindthema toegepast.

          Je zult dus eventuele wijzigingen in de style.css van de ouder, moeten overbrengen naar de style.css van het kind. Dit vereist dat je het aangepaste stijlblad vergelijkt met het origineel. Eventuele wijzigingen kun je dan overbrengen naar het kindthema. Dit is monnikenwerk, zeker bij langere stijlbladen.

          Een praktische benadering is starten met een origineel ouderthema en een kindthema met een schoon style.css. Bij voorkeur doe je dit op een lokale WordPress installatie. Vervolgens vergelijk je visueel de live site met de lokale site. Als je iets hebt gewijzigd zie dat dan snel genoeg. Eventuele correcties vallen je dan snel genoeg op. Deze breng je dan over naar de style.css van het kindthema.

          Succes,

          Wil Ransz

          P.S. als ik zelf wijzigingen aanbreng in bestanden van een ouderthema, dan zet ik daar altijd een commentaarregel bij. In CSS bestanden bijvoorbeeld 

          /* Toegevoegd door Wil Ransz */

          en in PHP templates 

          //  Toegevoegd door Wil Ransz

          . Wil ik weten welke wijzigingen ik heb aangebracht, dan zoek ik eenvoudig op ‘Ransz’.

          Beantwoorden

          • Hoi Will, bedankt weer voor je snelle beantwoording. Ik vind het toch best ingewikkeld. Je tip voor hoe je de wijzigingen kunt herkennen vind ik zeer goed. Dit ga ik zeker ook doen.
            Even nog een (hopelijk) laatste vraag voor mijn duidelijkheid. Ik heb nu een kindthema met daarin een juiste style.css. Als ik nu iets wil wijzigen in de header.php of de footer.php en het kindthema is geactiveerd, moet ik dan deze php.templates eerst via FileZIlla kopiëren van ouderthema naar kindthema voordat ik de wijzigingen aanbreng? En dan ook weer de gewijzigde templates terug kopiëren naar het ouderthema zodat daar alles ook is bijgewerkt? Of hoeft dit laatste niet?

            Beantwoorden

            • Hallo Carla,

              De bestanden van het ouderthema laat je in hun originele staat.

              Wil je wijzigingen aanbrengen in de header.php en de footer.php, dan kopieer je die van het ouderthema naar het kindthema. Je kunt die dan via een FTP-client zoals FileZilla – of nog liever lokaal – aanpassen.

              Het ouderthema laat je dus origineel en alle wijzigingen breng je aan in het kindthema. Op deze manier blijven jouw wijzigingen behouden bij updates van het ouderthema.

              Kortom, niet terug kopiëren naar het ouderthema.

              Wil

              Beantwoorden

  13. Oh ik zie dat de tekst die ik heb toegevoegd van de style.css niet in het bericht is gekomen. Graag wil ik je die toch laten zien. Hoe kan ik dat het beste doen?

    Groetjes,
    Carla

    Beantwoorden

  14. Beste,

    Ik heb ook een child theme aangemaakt voor mijn website. In mijn child theme heb ik de style.css en de function.php geplaatst die ik kan aanpassen..

    Echter, ik moet ook weleens aanpassingen doen in andere php templates. Bijvoorbeeld de header.php van mijn theme..

    Hoe plaats ik deze in mijn child? Moet ik de hele template in mijn child plaatsen?

    Bedankt.
    Chndr

    Beantwoorden

    • Hallo Chndr,

      Met betrekking tot kindthema’s zijn de header.php en footer.php inderdaad voor de hand liggende templates. Het child theme gebruikt de template bestanden van het ouderthema tenzij het benodigde PHP bestand ook in zijn eigen folder staat.

      In de regel kun je dus het php bestand dat je wilt aanpassen naar het child theme kopiëren – let wel kopiëren, niet verplaatsen – waarna je de gewenste veranderingen aan kunt brengen in het PHP bestand van het child theme.

      Zoals elke regel kent ook deze uitzonderingen, maar dat merk je snel genoeg. Gebeurt er iets onverwachts, hernoem dan het laatst gewijzigde bestand – bijvoorbeeld door er een _ (underscore) voor te zetten.

      Succes,

      Wil Ransz

      Beantwoorden

  15. Beste Wil,

    Mijn site gebruikt de template ‘Enigma’. Het childtheme hiervan is ‘Cerise’.

    Nu maken Cerise én Enigma gebruik van een slider met 3 slides. Deze heb ik in Enigma aangepast zodat er nu één afbeelding staat en de slider niet meer wordt gebruikt. Dat werkt…

    Maar… wanneer ik Cerise als thema instel, dan wordt de slider weer geactiveerd. Ik heb al gekeken of ik dat in Cerise ook weer kan uitschakelen, maar toch wordt ik tóch weer doorverwezen om dit in Enigma te doen, waar dat natuurlijk al is aangepast.

    Wat kan ik nu het beste doen? Want verder ben ik dik tevreden met Cerise.

    Alvast bedankt voor je hulp!

    Groet, Claudia

    Beantwoorden

    • Beste Claudia,

      Het is me niet duidelijk om welke thema’s het gaat. Het Cerise thema in de WordPress Themes Directory is geen child theme van Enigma, maar van Webilizar. Dat is althans het thema waar de [Parent Theme] knop op de Cerise pagina naar door verwijst.

      Helaas kan ik hier niet op specifieke gevallen in gaan, maar ik wil wel in algemeenheden antwoorden. Een kindthema gebruikt de PHP templates en style.css van het ouderthema, tenzij het kindthema afwijkende templates kent. Hiertoe behoort ook de de functions.php van het kindthema. Daarnaast bevat de style.css van het kindthema aanvullingen/correcties of de CSS van het ouderthema.

      Je zou dus kunnen kijken of je de slider via een template van het kindthema (de functions.php misschien?) kunt instellen of uitschakelen.

      Hopelijk heb je hier iets aan.

      Groet,

      Wil

      Beantwoorden

  16. Ha Wil,

    Ik zie dat de laatste reacties van 2014 zijn, maar ik hoop dat je dit blog nog leest/bericht krijgt als er een vraag is. Want die heb ik namelijk.
    Ik begrijp dat je met de style.css je thema ‘netjes’ kunt houden bij updates.
    Kan dit ook met Woocommerce? ALs die update dan worden namelijk alle foto’s weer vergroot (er staat een fout in de woocommerce.css – width 100% waardoor zelfs kleine foto’s worden opgeblazen) en het zou fijn zijn als ik die niet telkens hoef aan te passen.
    En als dit kan, waar moet je die dan zetten binnen het childthema? Moet dit op dezelfde plek als waar het in het normale thema staat, of toch ergens anders?
    Ben benieuwd!
    Chrissy

    Beantwoorden

    • Hallo Chrissy,

      Jazeker, hier wordt nog steeds gemodereerd. En zelfs gepubliceerd. Als he wijzigingen aanbrengt in de style.css van het ouderthema, dan gaan die bij een update verloren.

      Het belangrijkste argument voor het gebruik van een kindthema, is dus dat je niet alleen wijzigingen kunt aanbrengen, maar dat die wijzigingen bij een update van het ouderthema ook behouden blijven.

      En wat voor het ouderthema geldt, gaat ook op voor plugins. Wil je dus de styling van WooCommerce aanpassen, dan doe je dat via de style.css van het kindthema. Je kunt ze onderaan in de style.css van het kindthema plaatsen, maar wel boven de Media Queries. Eventueel zet je er een kopje “/* WooCommerce */” (zonder de aanhalingstekens) boven.

      Succes,

      Wil Ransz

      Beantwoorden

Trackbacks

Geef een reactie

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