Binnenkort komt WordPress 3.5 uit dus leek het mij een goed moment om je te laten zien hoe je zelf een WordPress child theme kunt maken.
Een child theme is een afgeleid thema van het hoofd thema dat je gebruikt op je WordPress site / blog.
Een child theme is vooral van belang als je een standaard thema van WordPress gebruikt zoals Twenty Eleven of Twenty Ten. Zeker als je daarin de nodige aanpassingen hebt gedaan om jouw site een eigen gezicht te geven.
Bij een upgrade waar ook de thema's gewijzigd zijn verlies je al die aanpassingen (dus back-up! voor je update!). Met een child theme kun je dat voorkomen.
Structuur van een Child Theme
De basis van een child theme bestaat uit een aantal bestanden. Daarbij is er maar een verplicht, de style.css waarmee de opmaak mee geregeld wordt.
Daarnaast kun je een functions.php of een footer.php opnemen, helemaal afhankelijk van je wensen.
Een child thema komt ook in een eigen thema map te staan, maar roept wel de functies aan van het boven liggende thema.
Nu klinkt bovenstaande voor de meeste mensen die net met WordPress beginnen allemaal nogal ingewikkeld.
De One-Click Child Theme Plugin
Er is echter een hele simpele oplossing, de one-click child theme plugin http://wordpress.org/extend/plugins/one-click-child-theme/.
Installeer die net als iedere andere plugin en maak het thema actief waar je een Child theme van wilt hebben, voor de meeste zal dat het standaard Twenty Eleven thema zijn.
Ga nu in je Dashboard naar weergave en kies voor Child Theme.
Als je dat aan klikt dan krijg je een eenvoudig scherm te zien waar je maar een paar zaken in hoeft te vullen.
Inderdaad: De naam van je Thema, Een beschrijving van je Thema en je eigen naam.
De naam van je thema wordt gebruikt om de map van je child thema aan te maken, in dit geval wordt dat dus /wp-beginner/.
Klik op Create Child en je eigen child thema is nu klaar.
Je nieuwe thema is nu ook actief en als je naar je site kijkt zul je geen verschil zien.
WordPress Child Thema Aanpassen
Als je nu naar Weergave -> Bewerker gaat dan zie je daar je nieuwe style.css staan en een melding: Dit subthema overerft templates van een hoofdthema, Twenty Eleven.
Alle style wijzigingen die je nu door wilt voeren, zet je in dit style.css bestand. Als je al verandering had gedaan, kopieer ze dan naar dit bestand. In principe hoeven alleen de style codes met wijzigingen op genomen te worden.
Wil je een wijziging aan brengen in het footer.php bestand, kopieer dan (via FTP) alleen het footer.php bestand van het originele thema naar je nieuwe thema map.
Nu zul je bij de bewerker ook die footer.php zien staan en kun je daar de wijzigingen doen.
Bijvoorbeeld om de voettekst te veranderen van Powered by WordPress:
<div id="site-generator">
<p>Copyright © 2012 - <?php echo date('Y'); ?> <a href="https://www.wpsitebouw.nl"> WordPress Website Bouw</a></p>
</div>
Voor de rest is de procedure gelijk aan bovenstaand voorbeeld.
Ik gebruik zelf voor mijn sites meestal een Child theme van StudioPress die als basis het Genesis Framework hebben. Dat is een premium thema dat niet echt goedkoop is, maar zeker de moeite en het geld waard!
Maar nu is het tijd voor actie, maak je eigen child theme en leer wat meer over css op http://www.handleidinghtml.nl/.
Bekijk ook de stylesheet van je basis thema en kopieer dan de elementen die je aan wilt passen naar je child thema style.css bestand.
Beste Herbert. Wat wordt bedoeld met de standaard-thema`s Twenty-ten en Twenty Eleven?
Dit weet ik n.l.nog niet,dus ik kan er nog niet mee beginnen. Ik dank je voor je reactie en ik groet je vriendelijk.
Anton Doove.
@Antoon Doove: De Thema’s Twenty Eleven en Twenty Ten worden standaard meegeinstalleerd bij een eigen gehoste WordPress versie. Op WordPress.com heb je direct een grote keuze uit thema’s, maar kun je de bovenstaande acties niet uitvoeren.
Daar mag je nameljk zelf geen plugins en thema’s installeren.
Hallo Herbert-Jan,
Bovenstaande procedure heb ik uitgevoerd maar dan raak ik het spoor bijster. Als ik naar bewerker ga krijg ik de style.css te zien van de child theme. Vervolgens klik ik op bestand bijwerken onder aan. Succesvol bijgewerkt is de boodschap maar als ik nu de site bekijk staat daar in de header niet de foto die ik daar heb gezet in het twentyeleven theme?
Deze opnieuw geactiveerd en naar bewerker gegaan. Daar de hele inhoud gecopieërd, terug de child geactiveerd en daar geplakt maar nu krijg ik een foutmelding dat die kapot is? Ik zal iets niet goed doen maar weet niet wat. Ik snap ook niet goed hoe het zit met dat bijwerken en of dat wel moet zoals ik nu gedaan heb. Kennelijk niet maar hoe dan?
@Mark: Voordat je een Child theme aanmaakt moet je zorgen dat je huidige thema actief is. Dat heb je zo te lezen ook gedaan.
Je moet niet de hele inhoud van de stylesheet importeren, dan gaat het mis, In de css van je child theme hoef je alleen de gewijzigde code in te voeren.
Probeer na het activeren van je child theme om je geuploade header opnieuw te activeren en kijk of die dan wel goed staat.
Wederom fijn dat je zo snel antwoord! Ik ben ondertussen ook nog verder gaan googlen en ben er achter dat een aanpassing in de header behouden, betekent dat je de header.php ook naar je childtheme zult moeten kopieëren al strookt dat niet helemaal met jou antwoord?
De reden van de foutmelding dat het theme kapot was kwam doordat ik de inhoud van de style.css in de style.css van de child theme plakte waarbij ik de bestaande inhoud deed verdwijnen. 2e keer netjes laten staan en alles er onder gezet en toen werkte het. (buiten die header aanpassing dan maar dat snap ik nu ook)
Dus ook geen probleem gehad met het kopieëren van de gehele inhoud..
Wederom bedankt en tot de volgende post zullen we maar zeggen haha
gr Mark
@Mark: Klopt helemaal als je inderdaad een aanpassing direct in je header.php gedaan hebt. Normaal bij de standaard header aanpassing in Twenty Eleven zou het ook zo moeten werken.
Via de optie Weergave -> Header uploaden van een afbeelding, dan behoud je de header wel.
Heel goed dat het gelukt is en bedankt voor de aanvulling.
toch nog even over die aanpassing van de header. Ik heb die dus via weergave veranderd zoals jij zegt maar dan blijft ie dus niet staan wanneer ik overschakel naar het child theme? Ik laat het nog maar even weten. Misschien dat ik toch iets over het hoofd zie?
gr
Beste HerbertJan,
Ik heb een leuke website gemaakt met theme TritonLite. Veel dingen veranderd in de stylesheet en ook in een aantal andere php’s. Daarna kwam ik er pas achter wat een childtheme is en dat het handig is het te installeren vòòrdat je dingen gaat aanpassen.
Denk je dat ik alsnog een childtheme kan aanmaken? Ik denk dat bv eraan om een domeinnaam die nu niet wordt gebruikt voor een website te gebruiken om het originele thema te uploaden en daaruit de stylesheet te gebruiken? Alvast bedankt voor je antwoord.
@Jacqueline: Dat is zeker een goed idee, je kunt dan dat als basis gebruiken en later op je huidige site die aangepaste versie gaan gebruiken. Zorg wel dat je alle nu aangepaste bestanden eerst download zodat je een back-up hebt.
Iin je child theme hoef je alleen de aangepaste bestanden op te nemen.
Je kunt met een gratis programma zoals http://www.pspad.com heel makkelijk via de Tools-> Text Differences heel makkelijk de verschillen opzoeken tussen jouw versie een de originele versie. Veel succes!
Beste Herbert-Jan,
Allereerst bedankt voor de handleiding voor 3.5 en ook mijn beste wensen voor 2013.
Ik gebruik een SiteMile theme voor WP.
SiteMile heeft meerdere themes die allen volgens dezelfde basis structuur zijn opgebouwd.
Het is mijn bedoeling om 1 thema als basis te nemen en de anderen te enten op de database van de eerste.
WP biedt die mogelijkheid en voor mij is dat interessant omdat ik dan aangemelde leden naar één forum kan sturen ipv 4 forums te onderhouden, dezelfde profiel pagina, dezelfde interne portomonnee, slechts 1 iDeal overeenkomst, enz.
Vraag: Hoe doe ik dat het best, bv Freelance als basis database (omdat het de meest uitgebreide features heeft en Classified, Auction en Project als child theme of alles in een child theme onderbrengen zodat de theme modificaties van SiteMile niet de werking van het door mij gemodificeerde child theme beinvloeden?
Met vriendelijke groet,
Hans
hoi, ik heb de procedure gevolgd en nu ziet mijn website er niet meer uit.Ik heb geen idee wat er aan de hand is. en nu?
@Ingrid: Ja, zo te zien heb je nog geen apart menu gemaakt voor de navigatie, alle pagina’s worden dan weergegeven. Maak een aangepast menu aan en sorteer daar de pagina’s onder of stop daar alleen de standaard pagina’s in en maak een pagina menu aan dat je via het zijmenu (widget) kunt laten zien. Hier kun je meer lezen over aangepaste menu’s in WordPress
dank, heb de pagina bestudeerd en kom er niet uit. in het huidige menu staan alleen de pagina’s die ik oorspronkelijk wil laten zien.Daar hoef ik niks aan te veranderen. Bedoel je dat ik een extra menu moet maken en zoj a hoe doe ik dat. Ben een zeer voorzichtige gebruiker en heb wel “Jip-en Janneke-taal” nodig zogezegd…:) ik hoor graag van je hoe dit probleem opgelost wordt.
@Ingrid: Heeft helaas even geduurd voor ik een reactie kon geven maar ik zie dat je inmiddels e.a. al opgelost hebt door over te schakelen van thema Twenty Ten naar Twenty Eleven. Super, site ziet er goed uit!
Als je toch nog eens ene child theme wilt proberen gebruik dan de plugin terwijl dit thema actief is. De plugin koppelt je child theme namelijk aan het op dat moment actieve thema.
Als ik het dus goed begrijp is het zo dat wanneer ik een child theme maak, dat bij de volgende updates van wordpress mijn instellingen bewaard blijven? Maar dan is mijn child theme niet geupdate en werk ik met oude instellingen? of begrijp ik het verkeerd?
@Tim: In een child theme regel je alleen de speciale opmaak die je wilt hebben en extra functies. Mogelijk ook de header en footers. Als je een WordPress upgrade doet, dan krijg je echt alle nieut zaken door. Doe je een upgrade van je hoofdthema (dus waar je een child theme van gemaakt hebt, dan krijg je ook alle nieuwe functies en instellingen mee. Alle wat je in je chicl theme gedaan hebt blijft, das alle stylesheet aanpassing etc blijven.
Dus je werkt met nieuwe instellingen van WordPress en van je geüpdate hoofd thema, maar je site blijft er hetzelfde uitzien. Precies wat je wilt bereiken, het beste van alles :-)
Hoi Herbert Jan, ik wil je nog even bedanken. Zie dat ik dit vergeten was. Inmiddels alweer een nieuwe website online gezet met een child theme. Ideaal werkt het. Eerst moest ik na elke update mijn website opnieuw aanpassen, nu werkt het gelukkig in 1x allemaal!
Hallo,
Nadat ik deze plugin heb geactiveerd en uitgevoerd is mijn hele website weg.
Ik kan met geen mogelijkheid meer op de website komen.
Weet u het probleem?
Met vriendelijke groet,
Collin
@Colin, voordat je de plugin activeerd moet je wel een thema actief hebben. Na het activeren neemt de plugin namelijk dat thema als basis.
Hallo,
Ik heb de plugin One-Click Child Theme Plugin gebruikt, maar nu is de hele website verdwenen. Ook kan ik niet meer in WordPress Dashboard komen.
Als ik de site open toont hij een lege pagina.
Heeft u een idee hoe ik dit op kan lossen?
Met vriendelijke groet,
Collin
Mijn excuses. Ik dacht dat mijn bericht verwijderd was.
Hallo Colin, nee hoor je bericht was er nog.
Als de plugin niet goed geïnstalleerd is dan kan het wel eens voorkomen dat je site blanco is. Ga dan via FTP naar de map wp-contentplugins en hernoem de map met de foute plugin. Probeer dan opnieuw in te loggen. Je krijgt dan een melding dat die plugin gedeactiveerd is.
Hallo herbert, is het ook mogelijk om child theme te installeren achteraf. Ik heb nl al wijzigingen in het thema gemaakt en ben bang dat ik deze kwijtraak als ik het child theme installeer.
Heb jij tips voor mij?
Bvd, brigitte
@Brigitte: Ja zeker kun je achteraf nog een child theme installeren. Als je dat gedaan hebt, dan kun je de wijzigen die je gedaan hebt bij het originele theme overnemen naar je child thema. Let dan wel op dat je alles overneemt als je ook, bijvoorbeeld, in je footer.php en functions.php zaken gewijzigd hebt.
Die bestanden kun je dan via FTP kopiëren naar je nieuwe child theme map.
Wel altijd zorgen dat je eerst een goede back-up hebt!
Hoi Herbert Jan,
Ik heb het child theme succesvol achteraf geinstalleerd, op wat kleinigheden na zag het er goed uit. Maar, toen ik wat additionele wijzigingn wilde maken in de css van het childtheme werkten deze niet. (Background color aabpassen, logo toevoegen)Heb jij enig idee wat er aan de hand kan zijn?
Groet,
Brigitte
@Brigitte de Veld: Kijk even na of de rechten op die css goed staan en vooral of je hosting provider geen Cache gebruikt om je site sneller te maken. Als dat laatste het geval is kan het even duren voor je wijziging zichtbaar wordt.
Beste herbert-Jan,
Als modificaties in diverse bestanden uit diverse directory’s van een thema uitgevoerd zijn, moet ik dan ook dezelfde directory structuur ook in het child thema aanbrengen of volstaat één kolom met daarin alle gewijzigde bestanden?
Wat moet ik doen met nieuwe bestanden die aan het originele thema zijn toegevoegd?
Ik vraag dit omdat de ontwerper het bestaande thema heeft aangepast en ik gebruik wil maken van nieuwe WP versies en ik met deze Roemeense ontwerper niet meer wil communiceren.
Met vriendelijke groet,
Peter
@Peter: Moeilijk te zeggen zo, ligt eraan wat er allemaal gewijzigd is. Basis is dat je in ieder geval begint met de stylescheet. Daarna inderdaad de gewijzigde bestanden en hoogstwaarschijnlijk ook de bijhorende structuur. In de gewijzigde bestanden kun verwijzingen staan naar andere bestanden die binnen die structuur moeten passen.
Voor je begint, zeker een back-up van je database en de huidige thema bestanden maken zodat je simpel terug kunt.
Beste herbert-Jan,
Ik heb toch nog wat vragen over het child-theme:
Q1: Als ik diverse variaties op een WP-theme wil hebben kan ik dan, in een multisite, aan elke aparte site een eigen child-theme aan hetzelfde WP-theme koppelen?
Q2: Als ik in een child-theme een functions.php maak moet ik dan alle code snippits daarin tussen hun eigen zetten? of kan ik volstaan met één begin en één eind PHP teken na meerdere code snippits?
Met vriendelijke groet,
Peter
@Peter: Voor de thema’s geld denk ik dat je de child theme beschikbaar kunt maken voor de publicatie zoals je nu ook met ander thema’s kunt doen. Maar ik gebruik zelf nooit Multisites , maar wellicht dat je met deze gids wat meer daarover kunt vinden http://premium.wpmudev.org/blog/ultimate-guide-multisite/
Je zet de nieuwe functies altijd zonder de ?> op en sluit code, je kunt ze dus direct in de functions.php zetten, maar zorg wel voor een comment tussen /* en */ zodat je later nog weet waar de nieuwe functie voor is.
Heel goed artikel, zelf ben ik ook fan van het het bouwen van child-themes op deze manier en met Genesis heb je een top framework. Ook hebben de makers van Genesis, copyblogger eigen hosting.
In mijn portfolio staan zeker 30 zelf gemaakte child-themes, ook is onze eigen website geheel gemaakt met Genesis. http://www.globeview.nl is een leuke cartoon website.