Geplaatst op

Child theme maken

Child theme aanmaken

Wil je weten hoe je een child theme aan kunt maken? Lees dan gauw verder. In deze blog gaan we een child theme maken. We nemen je mee door het proces en leggen je uit waarom het belangrijk en soms handig kan zijn om een child theme te gebruiken. Een child theme aanmaken voor WordPress is vrij eenvoudig. Mocht je na het lezen van deze blog er toch niet helemaal uitkomen? Geen probleem! We helpen je graag verder bij het aanmaken van jouw eerste WordPress child theme.

Wat is een child theme?

Een child theme is niets meer dan een thema dat de functies en styling overneemt van een hoofdthema dat je al gebruikt. Wil je bijvoorbeeld bepaalde styling in CSS of bepaalde functies in PHP veranderen? Doe dit dan met zo’n child theme. Zo voorkom je dat jouw wijzigingen verloren gaan bij een update van het desbetreffende hoofdthema. Een child theme bestaat tenminste uit 1 folder met 1 CSS bestand. Zonder het CSS bestand kun je het thema niet vinden in jouw WordPress dashboard. Een child theme kun je op verschillende manieren aanmaken.

Handmatig een child theme maken

Aangezien het niet moeilijk is om handmatig een child theme aan te maken, gaat onze voorkeur hier ook naar uit. Zoals eerder benoemd moet een child theme tenminste bestaan uit één folder en één CSS bestand. Het is de bedoeling dat je in het CSS bestand een aantal regels aan gaat maken dat er voor moet zorgen dat het child theme verbinding gaat maken met het hoofdthema dat je al geïnstalleerd hebt. Neem de stappen zorgvuldig door!

  1. Maak eerst verbinding met de FTP server of de filemanger op jouw control panel.
  2. Ga vervolgens door de mappenstructuur opzoek naar de map ‘themes’ in WordPress. Standaard gaat het via het volgende bestandspad: ‘httpdocs/wp-content/themes’.
  3. Hier zie je als het goed is ook jouw hoofdthema staan dat je wellicht al gebruikt. Het is nu de bedoeling hier een nieuwe folder aan te maken. Je mag deze zelf een gewenste naam geven.
  4. Na het aanmaken van de gewenste folder, kun je deze openen en maken hier een text bestand aan dat we vervolgens ‘style.css’ noemen.
  5. Open nu het bestand ‘style.css’. Dit kun je het beste openen met een code editor als Notepad ++ of Atom bijvoorbeeld.

Nu we het bestand style.css aangemaakt hebben kunnen we dit bestand voorzien van de benodigde code om hem te laten verbinden met het hoofdthema dat je hiervoor wil gebruiken. Voeg hiervoor de volgende code toe:

/*
Theme Name: De Web Developer
Theme Name: De Web Developer
Theme URI: https://www.dewebdeveloper.nl/
Author: Bouke Lourens
Author URI: https://www.dewebdeveloper.nl/
Description: Hier kun je een omschrijving invullen voor het template.
License: Hier vul je de eventuele license in.
License URI: license.txt
Tags: Tags: tags, kun, je, op, deze, manier, invoeren
Text Domain: Hier vul je de mapnaam van je childtheme in.
Template: storefront
Version: Hier vul je de versie in van jouw template, bijvoorbeeld: 1.0
*/

Na het toevoegen van de bovenstaande code moet je nog bij ‘Template:’ de templatenaam invullen van het hoofdthema waarvoor je deze child theme aanmaakt. De naam moet wel exact overeenkomen met de naam van het hoofdthema (parent theme), anders kan deze geen verbinding maken en zul je hem niet zien tussen de jouw templates. Je kunt de naam vrij eenvoudig opzoeken in de template folder via FTP of de filemanager. Nadat je de bovenstaande code juist heb ingevuld kun je de style.css pagina opslaan. Gelukt! Jouw child theme is nu aangemaakt.

Het child theme activeren

Nu jouw child theme aangemaakt is, kunnen we deze activeren. Dit doe je door allereerst in te loggen op jouw WordPress dashboard. Nadat je ingelogd bent ga je naar: ‘Weergave’ > ‘Thema’s’. Op deze pagina zie je vervolgens alle geïnstalleerde thema’s staan. Ook zul je jouw net aangemaakte child thema hier zien staan. Om het child thema te gebruiken moeten we deze eerst nog activeren. Hover met je muis over het child theme, waarna je de knop ‘Activeren’ ziet staan en klik hierop. Gefeliciteerd! Je WordPress website is nu ingesteld met jouw eigen net aangemaakte child theme. Je kunt ook nog even drukken op ‘Themadetails’. Hier zie je vervolgens alle details die je hebt kunnen invullen in de code die je opgeslagen hebt in het style.css bestand. Echter, zie je nog geen tumbnail oftewel een thema afbeelding. Hoe we dit oplossen, gaan we nu bespreken.

Preview afbeelding instellen voor jouw child theme

Zoals je hebt kunnen merken hebben alle templates netjes een thema preview afbeelding, behalve jouw eigen child theme. Dit kunnen we vrij eenvoudig oplossen door een afbeelding in het juiste formaat en bestandsformaat te uploaden in de hoofdfolder van het child theme. Doe dit als volgt:

  1. Open een fotobewerkings- programma als Adobe Photoshop of het gratis fotobewerk programma GIMP.
  2. Maak hier een nieuw bestand aan in de volgende afmetingen: 880 pixels breed en 660 pixels hoog.
  3. Wat we zelf altijd doen voor onze klanten, is een printscreen maken van de homepage en deze te gebruiken als preview afbeelding.
  4. Sla de preview op in het bestandstype PNG met de volgende bestandsnaam: ‘screenshot.png’.
  5. Upload de afbeelding ‘screenshot.png’ naar de hoofdmap van jouw child theme.

Als je nu weer terug gaat naar de thema pagina in jouw WordPress dashboard zul je de preview moeten zien bij jouw child theme. Mocht dit niet het geval zijn, controleer dan even goed of je de juiste bestandsnaam en of bestandstype gebruikt.

PHP functies toevoegen aan jouw child theme

Het kan ook voorkomen dat je bepaalde wijzigingen wilt doorvoeren aan jouw template. Hiervoor zou je de PHP code bijvoorbeeld naar het bestand ‘functions.php’ kunnen doorvoeren van jouw parent theme. Echter zal na een update ook hier de code weer verdwijnen uit de ‘functions.php’. Het is daarom aan te raden hiervoor een ‘functions.php’ voor aan te maken in de hoofdfolder van jouw child theme. Zo blijven de wijzigingen na een thema update netjes bewaard.

Om jouw eigen functions.php in te laden zullen we deze eerst moeten aanmaken. Deze kan aangemaakt worden in de hoofdmap van jouw child theme. Dit gaat op dezelfde wijze als het aanmaken van het style.css bestand. Maak nu een nieuw bestand aan via FTP en noem deze ‘functions.php’. Voer vervolgens het onderstaande script in:

<?php
function my_function() {
    // Hier kun je jouw aangepaste functions plaatsen.
}
?>

Vervolgens kun je jouw aangepast functies toevoegen in de placeholder van bovenstaande script. Het bovenstaande script zal ervoor zorgen dat de huidige functions.php overschreven zal worden.

Child theme aanmaken via een plugin

Zoals eerder besproken is het ook mogelijk een child theme aan te maken door hiervoor een plugin te gebruiken. Dit zouden we enkel adviseren als het via de handmatige manier niet wil lukken. Voor het aanmaken van een child theme kun je de volgende plugins gebruiken:

Uiteraard zullen er nog veel meer plugins zijn die je kunnen helpen bij het maken van een child theme. Voor meer informatie over bovenstaande plugins kun je altijd contact opnemen met de ontwikkelaars van deze plugins.

Hulp nodig bij het aanmaken van jouw child theme?

We helpen je graag bij al je vragen omtrent het aanmaken van jouw eigen child theme. Loop je vast op een bepaalde stap, of werken bepaalde functies niet? Neem dan gerust contact met ons op, en we helpen je graag verder!

Geplaatst op

Wat is WordPress?

Wat is WordPress, koffie en notities

Wellicht heb je er al eens van gehoord, WordPress! Wat is WordPress? En wat kun je er mee? We leggen je het graag uit in deze blog. We proberen je een zo goed en duidelijk mogelijk beeld te geven wat WordPress precies is, en wat je er mee kunt doen. Heb je via deze blog geen antwoord kunnen vinden op jouw vraag? Laat het ons dan even weten in de comments.

Wat kun je doen met WordPress?

WordPress is een Content Management System ook wel afgekort als CMS. Het is momenteel het populairste CMS systeem dat we kennen. WordPress heeft wereldwijd zo’n 18 miljoen gebruikers. WordPress is gerealiseerd in 2003 en kent zijn oorsprong als blog platform, maar hiervoor wordt WordPress allang niet meer alleen voor gebruikt. Tegenwoordig bouwen de meeste webdesign bedrijven met WordPress de mooiste en exclusievere websites. De mogelijkheden zijn dan ook erg toereikend.

Hoe werkt een WordPress website?

Een WordPress website bestaat uit een voor en achterkant. Aan de voorkant zie je de website, wat het publiek, dus iedereen ziet. Aan de achterkant wijzig je bijvoorbeeld de teksten, afbeeldingen of pagina’s. Dit doe je door in te loggen op je website. Hiervoor ga je naar bijvoorbeeld ‘example.com/wp-admin’. Je ziet dat er achter je domeinnaam nog ‘/wp-admin’ staat. Dit betekend dat je direct doorgestuurd wordt naar de inlogpagina van jouw WordPress website. Eenmaal ingelogd kun je gelijk wijzigingen aanbrengen aan jouw website.

Verschil tussen WordPress.com en WordPress.org

Je hebt twee soorten WordPress websites. Een versie die online gehost wordt door WordPress zelf, de WordPress.com. En een versie die je zelf kan installeren op je eigen webserver, WordPress.org. Het voordeel van WordPress.com is dat hosting je niets kost, echter loop je hier weer tegen limieten aan. Zo kun je bijvoorbeeld niet je WordPress.com website back-uppen en overzetten naar je eigen hosting. Met de WordPress.org versie kan dit weer wel. Laat je hierover erg goed informeren, als je eenmaal de website op WordPress.com hebt staan, kan deze dus niet overgezet worden.

Is een WordPress website maken moeilijk?

Een WordPress website maken kan inderdaad moeilijk zijn. Het ligt er eigenlijks maar net aan wat je er precies mee wilt doen. Om te beginnen zal WordPress geïnstalleerd moeten worden op jouw webserver (webhosting). Dit kan al een moeilijke klus zijn voor velen. Echter, bieden veel hostingproviders ook zo geheten One Click Installaties aan. Dit wil zeggen dat je een op WordPress gebaseerd hostingpakket kan afnemen, waar je middels 1 klik op de knop een complete WordPress website installeert.

Wat heb je nodig om WordPress te kunnen gebruiken?

Om gebruik te kunnen maken van WordPress heb je in eerste instantie hosting nodig met ten minste 1 database. We hebben het hier over de WordPress.org. De volgende specificaties worden aanbevolen (21/07/2021):

  • PHP versie 7.4 of nieuwer
  • MySQL 5.6 of MariaDB versie 10.1 of hoger
  • Ngix of Apache met de mod_rewrite module
  • HTTPS ondersteuning

Aangezien de ontwikkelingen op het gebied van PHP en MySQL razend snel gaan, raden we je aan om de actuele server vereisten te bekijken op de officiele website van WordPress.org

Wat zijn plugins?

Om terug te komen op de vraag, of het moeilijk is om een WordPress website te maken? Kunnen we je vertellen dat er voor WordPress momenteel zo’n 55.000 plugins beschikbaar zijn. Hiermee kun je via een vrij simpele weg, zonder enige programmeerkennis bepaalde functies verkrijgen op jouw WordPress website. Hiermee wordt het maken van een WordPress website een stuk makkelijker. Let wel op! Te veel plugins, of de verkeerde plugins zullen je website enorm kunnen vertragen. Kijk altijd naar de actieve downloads en reviews in de plugin directory van WordPress. Als er een mogelijkheid is om zelf de gewenste functie te programmeren, en hiermee een plugin kunt voorkomen, doe dit dan altijd!

Kies een goed thema

WordPress werkt met thema’s. Er zijn in WordPress verschillende soorten thema’s. Zo heb je gratis thema’s, maar ook betaalde thema’s. Een goede website waar je goede en actuele thema’s op kunt vinden is TemplateMonster. Voor gratis thema’s kun je het beste op de officiele website van WordPress kijken, of via het dashboard van jouw WordPress website. Let hierbij weer goed of je een actueel thema kiest. Je kunt dit zien door te kijken naar de update status van het gewenste template dat aangeboden wordt. Thema’s die al maanden of zelfs jaren niet bijgehouden zijn, kunnen onveilig zijn. Het laatste dat je wilt is dat jouw WordPress website gehackt wordt.

Een eigen thema maken

Ben je gevorderd en wil je meer uit een thema halen? Dan is het ook mogelijk om een eigen thema te maken. Hiervoor heb je wel enige programmeerkennis nodig. Zo is het handig om goed de basis van HTML en CSS te kennen. PHP en Java zijn een pre. Er zijn twee manieren om een eigen thema te maken:

  • Een child theme aanmaken op een bestaand hoofdthema.
  • Een compleet eigen thema maken vanaf scratch.

Het meest populair, is het aanmaken van een child theme. Het voordeel van het maken van een child theme is dat zodra je het WordPress hoofd theme update, de wijzigingen niet verloren gaan. Met wijzigingen bedoelen we je eigen geschreven CSS en overig scripting dat je vervolgens opslaat in het style.css bestand of bijvoorbeeld in je eigen functions.php bestand.

Is WordPress goed te beveiligen?

Een WordPress website is wel gevoelig voor aanvallen, vooral omdat WordPress een open source systeem is. Dit komt natuurlijk omdat het platform momenteel erg populair is. Niet alleen bij de eindgebruikers, maar ook bij hackers natuurlijk. Gelukkig zijn er voor WordPress tal van mogelijkheden om jouw website goed te beveiligen. Dit kan uiteraard ook op server niveau. Een populaire beveiligings plugin die erg veel gebruikt wordt, is WordFence. WordFence is er in een gratis, maar ook betaalde versie. Deze plugin scant jouw complete rootfolder (hoofdmap van jouw website) op malafide software en bestanden. Ook houdt WordFence continue verdachte activiteiten in de gaten, en blokkeert indien noodzakelijk. Denk hierbij aan bijvoorbeeld IP adressen.

Kan een WordPress website goed gevonden worden?

Zeker weten! Een WordPress website kan dus goed gevonden, echter hebben we hier wel wat hulp bij nodig. Een goede tool die we jullie kunnen aanraden is de plugin Yoast SEO. Deze plugin is al gratis te gebruiken, echter wel met wat beperkingen, maar niet rampzalig. Deze plugin geeft je een goed inzicht van jouw SEO score wat betreft je webpagina. Per pagina kun je de verbeterpunten inzien. Zodra je deze punten netjes aanpakt, zal alles groen kleuren. Yoast SEO kijkt naar bijvoorbeeld de meta omschrijven en titel. Hierbij wordt gekeken of je bepaalde trefwoorden genoeg naar voren laat komen. Bekijk onze blog "Beter gevonden worden" voor meer informatie over het beter vindbaar maken van jouw website.

Is een WordPress website snel?

Een WordPress website is meestal in het begin erg snel, en zal langzamer kunnen worden naar mate je meer plugins installeert en andere taken laat uitvoeren op je website. Maar WordPress zou WordPress niet zijn, als hier geen plugin voor te krijgen is. Het klinkt misschien raar.. je website sneller maken door juist een plugin te installeren. Maar je moet het zo zien, als een plugin je website traag kan maken, dan moet een andere plugin dit ook weer goed kunnen maken. Een veel gebruikte plugin is W3 Total Cache. Bekijk het blog "Jouw WordPress website optimaliseren” voor meer informatie over het sneller maken van jouw WordPress website.

Heb je nu een beter beeld van WordPress?

Als het goed is, begrijp je nu een klein beetje van wat WordPress is, hoe het gebruikt kan worden en bovendien wat de mogelijkheden zijn. Aangezien WordPress erg groot en complex kan zijn, is dit maar een deel van de informatie. We zijn er in vogelvlucht doorheen gegaan zeg maar. Mocht je vragen hebben over WordPress, dan kun je die vrijblijvend stellen hieronder in de comments.

Kunnen jullie mij helpen met mijn WordPress website?

We helpen je graag verder met jouw WordPress website. Ook als je al een WordPress website hebt, of juist een hele nieuwe WordPress website wilt laten bouwen. Neem gerust telefonisch contact met ons op, of per e-mail en chat.