Je WordPress-thema op een veilige manier aanpassen

wordpress logo

Je thema in WordPress aanpassen

Als je wat kleine aanpassingen wilt doen aan het uiterlijk van je site lijkt het een handig idee om gewoon de bestanden van je thema te openen en aan te passen. Op de korte termijn is dat ook zeker de snelste oplossing. Todat het thema dat je gebruikt een update krijgt. Dan ben je in één klap alle aanpassingen weer kwijt en kun je opnieuw beginnen. Daarom is het handig om een child theme aan te maken. Een child theme is eigenlijk een nieuw thema dat alle eigenschappen van een ander thema overneemt (en vervolgens aanvult of wijzigt). Met een child theme worden je aanpassingen mooi overzichtelijk opgeslagen en zullen je aanpassingen nooit verloren gaan.

Een child theme aanmaken

In dit voorbeeld gaan we uit van het thema Twenty Fourteen dat ook op deze site wordt gebruikt. We gaan eerst via FTP een nieuwe map aanmaken in de map wp-content/themes op de server. We noemen deze map twentyfourteen-child. Hierin komen alle bestanden voor ons nieuwe child theme.

Een nieuwe map twentyfourteen-child.
Een nieuwe map twentyfourteen-child.

Nu openen we een nieuw bestand in een text-editor en slaan het op als style.css. Dit is het enige bestand dat vereist is voor het maken van een child theme. Het nieuwe bestand moet beginnen met de volgende regels:

[css]
/*
Theme Name: Twenty Fourteen Child
Theme URI: http://wordpress.org/themes/twentyfourteen
Description: Twenty Fourteen Child Theme
Author: Marcel van der Hoek
Author URI: http://marcelvanderhoek.nl
Template: twentyfourteen
Version: 1.0
*/
@import url("../twentyfourteen/style.css");
[/css]

Je kunt de meeste regels gerust aanpassen, als je de regels met Theme Name, Template en @import maar laat staan.

Sla het bestand op en upload het naar de nieuwe map twentyfourteen-child op je server. Nu is het child theme zichtbaar voor WordPress en kunnen we het gaan activeren. Dat doe je via Weergave -> Thema’s in het administratiemenu.

Het nieuwe child theme activeren.
Het nieuwe child theme activeren.

Als je nu je site opent zul je zien dat er niks veranderd is. Dat komt doordat we nog geen echte aanpassingen hebben gedaan. Tijd voor een voorbeeld dus. Op deze site is Twenty Fourteen gecentreerd, terwijl het oorspronkelijke thema aan de linkerkant van het scherm is vastgeplakt. Om het thema te centreren voegen we deze regels CSS toe aan style.css:

[css]
.site {
margin: 0 auto;
}
[/css]

.site is de klasse van de buitenste container van je website en die geven we op deze manier een margin mee van 0 auto. Daardoor wordt hij gecentreerd weergegeven. Sla het bestand op en upload het weer naar de server. Ververs je site en je zult zien dat hij nu gecentreerd op het scherm verschijnt.

Op deze manier kun je alle opmaak van het oorspronkelijke thema wijzigen. Alle aanpassingen die je doet in het nieuwe style.css zullen het oorspronkelijke thema overschrijven.

Functies toevoegen aan je child theme

Het is ook mogelijk om functies toe te voegen aan je thema. Maak daarvoor een nieuw bestand functions.php aan in de map van je child theme. Belangrijk om te weten is dat de functies die je hierin schrijft de functies van het oorspronkelijke thema niet zullen overschrijven zoals dat bij het CSS-bestand het geval is. Het bestand zal vóór het bestand functions.php van het oorspronkelijke thema worden geladen.

Andere bestanden aanpassen

Om één van de andere bestanden van het oorspronkelijke thema aan te passen moet je iets anders te werk gaan. Kopieer het oorspronkelijke bestand naar je child theme en pas het aan. Het nieuwe bestand zal nu geladen worden in plaats van het bestand uit het oorspronkelijke thema en niet in aanvulling op dat bestand.

18 gedachten over “Je WordPress-thema op een veilige manier aanpassen”

  1. De uitleg lijkt stap-voor-stap uitgelegd, maar ik loop al vast bij een nieuwe map aanmaken via FTP in de map wp-content/themes op de server.
    Ik vind wel FTP Management, maar daar kan ik geen nieuwe map aanmaken.
    Ik hoop dat je me verder op weg kan helpen.

      1. https://www.topservers.nl/knowledgebase/hoe-snel-is-mijn-nieuwe-webruimte-online/

        Hier staat dat je in de welkomstmail inloggegevens hebt ontvangen voor de toegang via FTP. Je kunt een programma als Filezilla gebruiken om in te loggen op je server (https://filezilla-project.org/download.php?type=client).

        Hier vind je een artikel over het gebruik van Filezilla: http://www.websitebeginnersgids.nl/filezilla-wat-is-het-en-hoe-werk-je-ermee/

        Succes!

      2. Ik had al eerder geantwoord, maar ik zie nu dat deze reactie van mij niet op de site staat.
        Maar goed, ik zit bij Topservers.nl

  2. hi, heb je enig idee hoe ik in het thema twenty four de tekst kan aanpassen zodat de woorden niet meer door midden worden gehakt?? ik hoor het graag ! thanks gi

    1. Hoi! Da’s makkelijk. Voeg de volgende regels toe aan het bestand style.css van je child theme:
      [css].entry-content,
      .entry-summary,
      .page-content,
      .nav-links,
      .comment-content,
      .widget
      {
      -webkit-hyphens: none;
      -moz-hyphens: none;
      -ms-hyphens: none;
      hyphens: none;
      }[/css]

  3. Hallo Marcel
    Ik heb een child aangemaakt van twenty fourteen met de code zoals je hierboven hebt omschreven. Ik heb de child geactiveerd en als ik nu de editor onder weergeven opvraagt zien ik alleen de code zoals je hierboven hebt omscheven om een child aan te maken. 10 regels. Klopt het om de style.css uit de oorspronkelijk theme te kopieren en in de child style.css te zetten onder de code zoals hierboven omschreven?

    1. Hallo, bedankt voor je reactie! In het child thema maak je aanpassingen ten opzichte van het originele thema. Je hoeft in style.css dus alleen de regels in te voegen die je wilt wijzigen. Het kopiëren van de css uit het originele thema is dus niet nodig omdat het child thema deze al automatisch ‘erft’.

  4. Hallo Marcel,

    als je de website lokaal hebrt staan moet je dan nog wat anders ingeven bij de import url?
    Ik zie nu heel veel verschil in de site.
    Wel heb ik een ander thema maar dat zou toch geen verschil mogen maken.
    Tekst is nu: @import url(“../nisarg/style.css”);

    Groet,

    Stef.

Geef een reactie

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