Nooit meer onverwachte wijzigingen in WordPress met een child theme





wordpress child themeWat zag mijn WordPress-blog er prachtig uit! De header flitste van het scherm en ook de kleuren en lettertypen pasten precies bij wat ik wou. Urenlang had ik in de bewerker doorgebracht, op zoek naar de CSS-codes die precies die elementen beschreven die ik wou veranderen.

Maar helaas: met de nieuwste updates waren al mijn wijzigingen in een klap verloren! Gefrustreerd bekeek ik mijn blog, dat er ineens weer standaard uitzag. Het thema was overschreven en al mijn werk was weg. Hoe voorkom je zulke problemen?

Voorkom ongewenste verrassingen met een child theme

Bovenstaande situatie is voor veel lezers heel herkenbaar. Wie nog niet zo bekend is met WordPress of gewoonweg niet van child themes afweet, weet niet anders dan dat je je thema vanuit het Dashboard of de Bewerker naar smaak opfleurt. Waarschijnlijk weet je dan ook dat je al het werk eens in de zoveel tijd opnieuw moet doen. Zonde!

Gelukkig bestaat er een oplossing voor, namelijk werken vanuit een child theme. Een child theme is een thema dat alle instellingen van een hoofdthema erft, behalve de instellingen die je hebt aangepast. Het hoofdthema kan dan gewoon een update ondergaan zonder dat je werk verloren gaat. Handig, toch?

De voorwaarden voor een child theme:

  • Je moet WordPress op je eigen webruimte gebruiken.
  • Je moet iets afweten van de scripttaal CSS of het leren. Bezoek een online cursus CSS.




Een child theme aanmaken

Tip: voordat je grote wijzigingen aan je website/blog aanbrengt, is het aan te raden om je bestanden te back-uppen.

1. Maak op je webruimte in de map /wp-content/themes een nieuwe map aan voor het nieuwe thema.

Het child theme komt dus net als andere thema’s in een eigen map te staan. Kies een herkenbare naam, bijvoorbeeld de naam van het oorspronkelijke thema gevolgd door ‘child’, bijvoorbeeld ‘twentyeleven-child’.

2. Maak een nieuw bestand aan genaamd style.css.

Maak dit bestand aan in een tekstverwerker zonder opmaak, bijvoorbeeld het Kladblok in Windows. Vul het bestand met de volgende code:

/*
Theme Name: <vul een naam in voor je nieuwe thema>
Description: <bedenk een omschrijving voor je nieuwe thema>
Template: twentyeleven
*/
@import url(../twentyeleven/style.css);

Let op: in dit voorbeeld wordt een child theme gemaakt van het bestaande Twenty Eleven-thema. Je moet bovenstaande informatie aanpassen aan het thema waarvan je een child theme wilt maken.

  • Vul achter Template de naam in van de map waarin het hoofdthema staat. Dit moet precies overeenkomen, anders werkt het niet.
  • Vul achter @import url de URL in van de stylesheet van het hoofdthema.

child-theme-wordpress

Je hebt zojuist een nieuwe stylesheet gemaakt voor je child theme, alleen is die nog leeg. Je kunt de nieuwe stylesheet nu vullen met CSS-stijlen uit het hoofdthema die je wilt veranderen. Je hoeft dus niet alle stijlen te kopiëren, alleen diegene die je wilt wijzigen. De rest wordt namelijk geërfd van het hoofdthema.

Als je niet veel van CSS afweet, is het vaak lastig om te herkennen welke stijlen welke opmaak op je blog beschrijven. Het is dan een kwestie van uitproberen. Hierbij wat tips:

  • Kijk goed naar het commentaar in de stylesheet van het hoofdthema, dus de tekst tussen /* en */. Het commentaar zegt veel over wat het specifieke stukje code beschrijft.
  • Kopieer niet in het wilde weg, maar zorg dat je alle tekst kopieert die bij een stijl hoort. In onderstaande code staan drie stijlen. Elke stijl begint met een hashtag # en de inhoud staat tussen accolades, dus { en }. Vergeet niet om de afsluitende accolade mee te kopiëren.
/* =Header
----------------------------------------------- */

#branding {
       border-top: 2px solid #bbb;
       padding-bottom: 10px;
       position: relative;
       z-index: 9999;
}

#site-title {
       margin-right: 270px;
       padding: 3.65625em 0 0;
}

#site-title a {
       color: #111;
       font-size: 30px;
       font-weight: bold;
       line-height: 36px;
       text-decoration: none;
}
  • Wijzig alleen de informatie achter dubbele punten, bijvoorbeeld de kleurcode, tekstgrootte, enzovoort, tenzij je weet wat je doet.

3. Plaats de nieuwe style.css in de map van het nieuwe child theme.

4. Ga naar het Dashboard van WordPress en vervolgens naar Weergave/Thema’s en activeer het nieuwe child theme.

Het nieuwe child theme moet tussen de bestaande thema’s staan. Voordat je het child theme activeert, kun je een voorbeeld weergeven om te kijken of het werkt. Hiermee voorkom je eventuele problemen.

Comments

  1. Halllo Mariska,

    Super fijn jouw site.
    Ik ben bezig om de CSS te veranderen en dan met jouw aanwijzingen
    een CHILD css te maken. alleen omdat ik op google inspect element kijk
    zie je in hun css een punt (bijv
    .main-navigation {
    clear: both;
    margin: 0 auto;
    max-width: 1080px;
    min-height: 45px;
    position: relative;
    }
    in plaats van een hash tag wat jij zei.
    Moet ik die voor de css vervangen voor een #?

    Ik hoor het graag
    Alvast bedankt

    SUzette

  2. John-Paul de Rooij says:

    Hoi suzette, dit moet je niet aanpassen de . staat voor class een class kan je meerdere keren gebruiken in document maar een # maar eenmaal. Zoek anders even op t internet rond naar het verschil tussen class en divs op bijvoorbeeld w3schools 😉

    Mvg JP

  3. Hoi Mariska,
    Hiermee kan je dus alleen de css bewerken? Ik heb in een thema ook wat aanwijzingen in php formulieren gemaakt. Als ik nu mijn theme of wordpress update dan moet ik de php formulieren ook weer veranderen. Werkt dat hetzelfde voor de php formulieren?
    Groetjes
    Erika

  4. Hoi Erika
    Daar ben ik nu ook mee aan het worstelen. Er staat het een en ander over hier: http://codex.wordpress.org/Child_Themes
    Oftewel: je hangt een php-file met dezelfde naam als het origineel onder het chid-theme en plaatst daarin de wijzigingen en aanvullingen.
    Maar voor mij werkt het nog niet goed helaas.
    Succes! Annick

    • Heb het nu een soort van voor elkaar:
      De php-file die je bewerkt hebt, kopieer je en plak je onder het child theme, op precies dezelfde locatie. Dus als ie bijvoorbeeld in je theme in een submap zit, dan maak je eerst in je child theme een submap aan met diezelfde naam. en daarin hang je dan je php-file.
      Als het goed is werkt het zo. Succes!