Ontwikkeling bestaand WordPress thema met kindthema

Een van de meeste handige methodes om een bestaand thema aan te passen is het gebruik maken van de WordPress optie om een kindthema (child theme) te creëren en daarin de wijzigingen in te voeren die je nodig hebt om een bestaand thema of sjabloon zo te stijlen als jij dat wilt.

De klassieke fout

Vaak gaan developers de CSS en andere themabestanden van het thema zelf direct bewerken. Dat is niet handig aangezien je dan fouten kan maken en wijzigingen lastig te achterhalen zijn. Een ander nadeel is dat als je met een bestaand WordPress thema werkt en en er is een update zul je deze update niet kunnen doorvoeren zonder  een grote kans te hebben je wijzigingen te verliezen.

De slimme WordPress ontwikkelaar..

Om dit laatste te omzeilen moet je ofwel een geheel nieuw thema uit het bestaande creëren zodat deze geen updates zal krijgen tenzij je hem zelf in de WordPress database zet en gaat onderhouden. De andere – lees beste – optie is dus om alle thema wijzigingen in je kindthema (child theme) te doen zodat het hoofdthema wel upgedate kan worden naar de laatste WordPress vereisten en dat je alle stijlwijzigingen en eventuele functietoevoegingen niet kwijtraakt. Dat is vele malen sneller en werkt veel lekkerder

Voordelen gebruik kindsjabloon samengevat

Hier in het kort de redenen van het gebruikmaken van een kindthema bij bewerken van een bestaand thema:

• Behoudt wijzigingen na update hoofdthema (parent theme)
• Overzicht van aanpassingen aangezien alleen de zaken die je wijzigt in het child theme’s style.css of functions.php staat en niet alle andere bestaande code in die bestanden voorkomt
• Optie om gebruik te blijven maken van verbeteringen en updates van het moederthema zodat je site mee blijft doen met de laatste WordPress ontwikkelingen aangezien deze gewoon worden overgenomen of geërfd van het moederthema

Creatie kind sjabloon

Creëer een nieuwe map in /wp-content/themes/ en geef hem een naam naar keuze. Ik noem hem meestal moederthema-kind waarin moederthema de naam van het thema is waar je wijzigingen in wilt aanbrengen en waarop je kindthema dus verder op zal bouwen. Binnen deze map maak je style.css aan. Deze open je met je favoriete editor (GEdit, TextMate, Notepad++). In dit bestand voeg je de volgende code toe:

/*
 Theme Name: Kind sjabloon
 Theme URI: http://domein.nl/
 Description: Kindsjabloon voor moeder
 Author: jasper Frumau
 Author URI: http://doede.net/
 Template: moeder
 Version: 1.0
 */
@import url("../moeder/style.css");

De essentiële elementen in je nieuwe style.css

De belangrijke zaken in je nieuwe stylesheet zijn Template: moeder , waarin “moeder” het parent theme is – thema waarop je kindthema steunt en voortborduurt EN @import url(“../moeder/style.css”) waarmee alle stijlelementen van de moeder worden overgenomen. De naam van het moederthema moet correct zijn alsmede het pad naar het stijlblad van de moeder. Nadat je dit hebt opgeslagen en het kindthema hebt geactiveerd zal deze er precies hetzelfde uitzien totdat je nieuwe stijl elementen aan style.css in je kindsjabloon zet. CSS werkt “cascading” en de laatste stijl wordt opgepikt. Dus als body {font-family:Arial;} is in de moeder en body {font-family:Times;} in het kindthema dan zal Times worden gekozen. En zal dat zijn met alle stijlwijzigingen die je toepast. Kinderlijk eenvoudig!

NB Niet vergeten de andere “dummy” gegevens ook aan te passen. Niet noodzakelijk, maar maakt alles wel zo netjes.

Extra functionaliteit

Mocht er behoefte zijn bepaalde functionaliteit toe te voegen zoals thumb nails, custom post types en dergelijken, dan kunnen deze in de functions.php van je nieuwe thema geplaatst worden. Hetzelfde geldt voor Page templates die je zou willen toevoegen. Over deze laatste zaken zullen we in de nabije toekomst schijven.

Tip Niet vergeten dat het child theme in de map themes moet zoals alle andere sjablonen en dat deze geactiveerd moet worden!

Bronnen

http://op111.net/53
http://codex.wordpress.org/Child_Themes