Een child-theme opzetten in WordPress

Het opzetten van een child thema is kinderlijk eenvoudig en voorkomt dat je later problemen krijgt. Om dit te doen, moet je echter wel weten waar je de bestanden kan vinden en hoe je deze kan verplaatsen en editten. Wij gaan ervan uit dat je weet hoe je een ftp verbinding op moet zetten en hoe je een bestand kan openen, aanpassen, opslaan en uploaden. Loop je tegen problemen aan? Neem dan contact met Talentz.biz op, en wij kunnen dit voor je regelen.

[content_box color=”#e3007e”]Deze tutorial bestaat uit 3 delen, dit is deel 1. Lees verder of klik direct op een van de tutorials om door te gaan.

Introductie – Affiliate webshop maken met WordPress en WooCommerce
Deel 1 – Een child-theme opzetten in WordPress
Deel 2 – Een WooCommerce child maken
Deel 3 – Producten direct linken naar de adverteerder
[/content_box]

Ga met je FTP browser naar je website, en open je theme map (in ons geval twentythirteen): wp-content/themes/twentythirteen

  1. Kopieer je style.css bestand naar een lokale directory, dus ergens op je desktop op op je harde schijf.
  2. Open dit bestand, en delete alle inhoud
  3. Kopieer de volgende tekst in het bestand:

/*
Theme Name: Twenty Thirteen Child
Theme URI: http: //watjijwilt.com/
Description: Child theme voor het 2013 thema
Author: Uw Naam
Author URI: http: //watjijwilt.nl/
Template: twentythirteen
Version: 0.1.0
*/

Let op, van essentieel belang zijn de zin Template: twentythirteen welke aangeeft welk hoofdthema gebruikt wordt.

Vervolgens moeten we zorgen dat de oude style.css ook ingeladen wordt, dit doe je door de volgende zin in te voegen:

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

Vervolgens kan je onder deze zijn nog een comment toevoegen, waardoor je je style.css een mooie duidelijke structuur geeft:

/*************** zet je eigen opmaak hieronder ***************/

Uiteindelijk ziet je style.css er dus zo uit:

/*
Theme Name: Twenty Thriteen Child
Theme URI: http://watjijwilt.com/
Description: Child theme voor het 2013 thema
Author: Uw Naam
Author URI: http://watjijwilt.nl/
Template: twentythirteen
Version: 0.1.0
*/
@import url("../twentythirteen/style.css");
/*************** zet je eigen opmaak hieronder ***************/

Sla het bestand op.

Maak vervolgens in je folder wp-content/themes/ de volgende map aan: twentythirteen-child en upload je nieuw gemaakte stylesheet naar deze map.

child-theme

Optioneel kan je er nog voor kiezen om een .png bestand te uploaden, waardoor je het child theme een eigen look en feel geeft. Noem dit bestand screenshot.png en zorg ervoor dat het een dimensie van 600 × 450 heeft.

In principe moet het child-theme werken zodra je deze activeert in je WordPress backend en kan je vervolgens met een gerust hart aanpassingen in je style.css doen via http://www.WEBSITE.nl/wp-admin/theme-editor.php

Echter, onze ervaring is dat niet alle thema’s direct geschikt zijn om met een child-theme te werken. Heb je het idee dat de style.css van je child-theme de opmaak van je hoofdthema niet overschrijft? Lees dan verder. Werkt het wel? Ga dan verder naar stap 2: een WooCommerce child maken.

 

Style.css van child thema overschrijft hoofdthema niet?

Sommige thema’s zijn niet goed opgezet, waardoor childthemes niet zonder meer werken. Dit is het geval als het thema de style.css altijd inlaadt, zonder te kijken of er een child-theme is. Dit gebeurt in de header.php, en is eenvoudig te herstellen als je weet waar je moet zoeken.

Maak allereerst een kopie van de header.php uit je hoofdthema en sla deze op. Open hem in een editor en zoek naar de code <?php bloginfo('template_directory'); ?>
Als je deze gevonden hebt, vervang je hem door <?php bloginfo('stylesheet_directory'); ?>
Mocht je de code niet vinden, zorg er dan in elk geval voor dat <?php bloginfo('stylesheet_directory'); ?> er in komt te staan. Deze verwijst naar de juiste stylesheets.

Sla header.php op en upload deze naar je child-theme folder. Nu is je thema helemaal klaar om met child-themes te werken.

Ga verder naar stap 2: een WooCommerce child maken.

1 reactie op “Een child-theme opzetten in WordPress”

Reacties zijn uitgeschakeld.