WordPress child-theme maken
WordPress child-theme maken kan voor WordPress website ontwikkelaars een belangrijk onderdeel zijn. Het maken van een WordPress child-theme zou bij de basiskennis moeten horen. Als men een thema koopt zit er meestal ook een child-theme bij. Deze kan men zo installeren en gebruiken.
De mensen die een thema kopen bij bijvoorbeeld ThemeForest of Template Monster, of een gratis thema downloaden op WordPress krijgen er normaal ook een child-theme bij. Maar er zijn mensen die niet weten waar dit voor dient en hoe ze deze kunnen gebruiken. Ook voor deze mensen kan dit artikel handig zijn.
Belangrijkste van dit artikel is dat als men geen child-theme heeft en er zelf eentje willen aanmaken en voor anderen die meer willen weten over het gebruik ervan.
Men zal vaak gelezen hebben dat men speciale custom code of kleine aanpassingen moeten plaatsen in een child-theme. Voor deze mensen die dit zelf willen doen en meer willen weten over het maken van een WordPress Child Theme zullen we de volgende onderdelen bespreken:
- Wat is een WordPress child-theme?
- Waarom een WordPress child-theme maken?
- Hoe een WordPress child-theme maken?
- Gebruik van WordPress child-theme
Gebruik de links om direct naar het ontwerp te gaan.
Met een WordPress Onderhoudspakket kunt u zorgeloos ondernemen.
Wat is een WordPress child-theme?
Het child-theme is een apart theme dat gekoppeld wordt met het hoofd thema maar hier kunnen we allerlei aanpassingen in aanbrengen. Op deze manier kunnen we allerlei extra functionaliteiten toevoegen maar we kunnen ook bestanden van het hoofd thema overschrijven. En dit alleen maar door bestanden van het hoofd thema te kopiëren naar het child theme en deze aan te passen. Op deze manier kunnen dus hele templates of template onderdelen volledig overschreven worden.
Het is dus niet zo dat als men een child-theme gebruikt men het hoofd thema kan verwijderen. Beide zijn nodig om goed te functioneren en beide moeten dus aanwezig zijn.
Waarom een WordPress child-theme maken?
Waarom een WordPress child-theme maken belangrijk is, is om te voorkomen dat met updates de aanpassingen worden verwijderd.
Als men een thema koopt of gratis download van WordPress dan wil men deze ook updaten als er updates beschikbaar zijn. De updates zijn vaak belangrijker voor de veiligheid van de website en om mee te gaan met bijvoorbeeld nieuwe versies van PHP en dergelijken.
Door een child-theme te gebruiken worden alle aanpassingen in dit child-theme geplaatst. Bij een update wordt alleen het hoofd thema geactualiseerd en worden de aanpassingen en verbeteringen niet verwijderd. Nu kan men dus zorgeloos van alles aanpassen en toevoegen wat men wilt zonder dit kwijt te raken of problemen te veroorzaken als er een update is.
Hoe een WordPress child-theme maken?
Nu wordt het tijd dat we een eigen child-theme maken voor WordPress. Een WordPress child-theme maken gaat in 5 stappen en deze zijn als volgt.
- Child-theme folder aanmaken
- Style-sheet aanmaken
- Functions.php aanmaken
- Afbeelding toevoegen(Optineel)
- Child-theme activeren
Gebruik de links om direct naar het ontwerp te gaan.
Nu we dit hebben besproken is het tijd om te beginnen het WordPress child-theme te maken.
Stap 1: Child-theme folder aanmaken
Om te beginnen hebben we een folder nodig waar het child theme wordt geplaatst. Hiervoor gaan we met ftp naar wp-content/themes. Hier maken we een nieuwe folder aan. Best practice is om de naam van het parent theme te gebruiken waar we “-child” achter zetten. Stel dat het hoofd thema my-theme is dan kan wordt de naam van de nieuwe folder my-theme-child.
Dit is best practice maar eigenlijk kan je elke willekeurige naam gebruiken. Wat wel heel belangrijk is, is dat de naam uniek is en geen spaties, geen hoofdletters en geen speciale tekens bevat.
Stap 2: Style-sheet aanmaken
Het belangrijkste document van je child theme is het bestand style.css. Deze kan je maken met bijvoorbeeld notepad(Windows) teksteditor(Mac) of wat dan ook en daarna de extensie aanpassen naar css.
In deze style.css plaats je de volgende code.
/*
Theme Name: My theme child
Theme URI: https://www.cornelisdeleeuwvanweenen.nl/my-theme-child/
Description: Child Theme For My Theme
Author: Cornelis de Leeuw van Weenen
Author URI: https://www.cornelisdeleeuwvanweenen.nl/
Template: my-theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: fast, light, two-columns, sidebar, responsive, modern
Text Domain: text-domain
*/
Er zijn twee zaken die hier belangrijk zijn.
– “Theme name” moet uniek zijn om problemen met het systeem te voorkomen.
– “Template” is de naam van de folder van het parent theme. In dit geval is my-theme genomen zoals in de vorige stap is gedaan.
Alle overige zaken kan men naar eigen wens aanpassen.
Vergeet niet om het bestand style.css te uploaden naar de nieuwe flder die we hebben aangemaakt in stap 1.
Dit is eigenlijk alles dat we echt nodig hebben maar als je de stylesheet ook gaat gebruiken voor aanpassingen moeten we hiervoor een functions.php gaan aanmaken.
Stap 3: Functions.php aanmaken
De style.css moet waarschijnlijk geladen worden op de website en waarschijnlijk willen we enkele nieuwe functies toevoegen. Dus hiervoor hebben we een functions.php nodig.
Nu moet er dus een functions.php bestand aangemaakt worden. Dit kan op dezelfde manier als met de style.css in stap 2.
Hier is het heel erg belangrijk dat dit document altijd begint met “<?php” en hiervoor mogen zelfs geen spaties voor staan. Als je dit niet doet is het mogelijk dat je het witte scherm te zien krijgt en niets wordt getoond op de website.
Voordat we iets in functions.php gaan plaatsen moeten we eerst kijken op welke manier de style.css wordt geladen in het hoofd thema. Er zijn twee manieren om de stylesheet te laden. Als het parent theme de style.css laad met “get_template_directory()” of “get_template_directory_uri()” dan is het niet nodig nogmaals deze te laden en kunnen we alleen de nieuwe stylesheet laden met de volgende code.
<?php // CLW Load Child Theme Style
add_action('wp_enqueue_scripts', 'enqueue_style_child_theme');
function enqueue_style_child_theme() {
wp_enqueue_style('my-child-style', get_stylesheet_uri(), array('parenthandle'), wp_get_theme()->get('Version'));
}
?>
De “wp_get_theme()->get(‘Version’)” werkt alleen als in de style.css ook “Version” is ingevuld.
Als het parent theme gebruik maakt van “get_stylesheet_directory()” of “get_stylesheet_directory_uri()” om de stylesheet te laden dan moeten we ook kijken welke handle gebruikt wordt. In bovenstaande voorbeeld is “my-child-style” de handle. Dit is de ID waar het mee is geregistreerd in de database. Deze hebben we nodig voor de volgende code want nu moeten we beide sylesheets, van het parent en child theme, laden. Dit doen we met de volgende code waar we als handle “my-parent-css” gebruiken.
<?php // CLW Load Child Theme Styles
add_action('wp_enqueue_scripts', 'enqueue_style_child_theme');
function enqueue_style_child_theme() {
wp_enqueue_style('my-parent-css', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get('Version'));
wp_enqueue_style('my-child-style', get_stylesheet_uri(), array('parenthandle'), wp_get_theme()->get('Version'));
}
?>
Als dit klaar is kan je ook functions.php uploaden naar de folder die we gemaakt hebben in stap 1. Hiermee zijn we eigenlijk klaar met het maken van ons WordPress child theme.
Als extra is het mogelijk om ook een afbeelding te plaatsen zodat het er mooier eruit ziet als men kijkt bij de thema’s in WP admin. Dit is onze volgende stap.
Vraag vrijblijvende een offerte aan.
Stap 4: Afbeelding toevoegen(Optineel)
Deze stap is optioneel maar kan interessant zijn als je een web ontwikkelaar bent en misschien een beetje aan branding wilt doen. Als je white label ontwikkelaar bent net als ik dan kan het voor de klant ook leuk zijn om bijvoorbeeld het logo van het bedrijf te gebruiken.
De afbeelding is eigenlijk bedoeld om een screenshot te tonen maar dit kan uiteraard geheel naar eigen wens gedaan worden.
Er zijn enkele zaken waar je rekening moet houden om een afbeelding toe te voegen, deze zijn:
- Naam van de afbeelding moet zijn screenshot.png
- De afbeelding moet een png zijn
- De verhouding van de afbeelding moet zijn 4:3(breedte x hoogte)
- Aanbevolen afmeting is 1200x900px
- Minimale afmeting moet zijn 400x300px
Deze afbeelding kan je ook uploaden naar de folder die we hebben aangemaakt in stap 1.
Stap 5: Child-theme activeren
Nu zijn we eindelijk toegekomen aan de laatste stap voor het maken van een WordPress child theme. Als alles goed is gedaan dan kan men inloggen op WordPress en gaan naar Weergave >> Thema’s. Daar zal nu het nieuwe child theme te zien zijn. Deze kan nu geactiveerd worden. Zolang er nog geen aanpassingen en toevoegingen zijn gedaan zal de website er nog precies hetzelfde uit moeten zien.
Hopelijk is nu duidelijk dat een WordPress child-theme maken niet zo moeilijk is als het lijkt.
Gebruik van WordPress child-theme
Als men een premium thema heeft gekocht of een gratis thema heeft gedownload dan is er waarschijnlijk al een child theme. Dit child theme kan men gewoon uploaden en installeren. Belangrijk is te weten dat als men al een child theme heeft ontvangen met het thema dan is het altijd het beste deze te gebruiken en geen nieuwe te maken.
In het child theme kan men nu alle aanpassingen toevoegen die men wenst. Om templates te overschrijven hoeft men alleen die template te kopiëren naar het child-theme waar men de aanpassingen in kan doen. De structuur moet wel het zelfde blijven. Als een template bijvoorbeeld is geplaatst in de folder “templates” dan moet deze ook in het child-theme geplaatst worden in de folder “templates”. Als de folder niet aanwezig moet deze aangemaakt worden.
Belangrijk is te weten dat iedere keer eerst gekeken wordt naar het child theme. Als een template dat niet aanwezig is wordt gekeken in het hoofd thema, het parent theme. Dit geldt voor alle bestanden.
Als men heel veel templates overschrijft en aanpassingen toevoegt kan het beter zijn om een nieuw hoofd thema te ontwikkelen. Het child theme is bedoeld om onderdelen van het hoofd thema aan te passen en enkele nieuwe extra functies toe te voegen. Het is dus niet de bedoeling hiermee het gehele hoofd thema te veranderen.
Wanneer men extra scripts en stylesheet wil laden is het belangrijk om “get_stylesheet_directory_uri()” te gebruiken. Deze geeft namelijk aan dat gekeken met worden in het child theme. Als het uit het hoofd thema apart geladen moet worden kan men gebruik maken van “get_template_directory_uri()”.
Nu is het tijd om de gewenste verandering aan te brengen zonder dat de aanpassingen verloren zullen gaan bij een update van het hoofd theme. Het hoofd thema kan men nu altijd zorgeloos updaten.
Er zijn nog geen reacties. Wees de eerste..!!