Om een nieuw thema te kunnen kiezen in WordPress moeten we WordPress eerst laten weten dat we een nieuw thema aan het maken zijn. In dit artikel gaan we ons thema voorbereiden.
WordPress thema wisselen
Laten we , voordat we aan ons eigen thema beginnen, eens kijken naar de standaard thema’s die mee worden geleverd met WordPress.
Log in op je WordPress website. Je komt nu in het WordPress Dashboard. Bovenaan de pagina staat naast het WordPress logo je website naam. Hover met de muis over je website naam. Je krijgt dan een pop-up menu te zien.
Klik op “Site bekijken”. Je krijgt nu de website te zien zoals je bezoekers hem te zien krijgen. Op het moment van schrijven is bij mij het thema Twenty Twenty-One actief.
Om weer terug te keren naar het WordPress Dashboard, hover je opnieuw over je website naam en klik je op “Dashboard” in het pop-up menu.
WordPress thema kiezen
WordPress komt standaard met een aantal vooraf geïnstalleerde thema’s. Afhankelijk van je WordPress versie kun je kiezen uit verschillende thema’s. Op het moment van schrijven kan ik kiezen uit: “Twenty Nineteen”, “Twent Twenty” en “Twenty Twenty-One”.
Om een thema te kiezen vanuit je Dashboard ga je naar Weergave en dan Thema’s. Hover over een thema en kies dan voor Activeren. Je kunt het thema bekijken door naar je site te gaan.
Atom projectmap toevoegen
Open je teksteditor naar keuze. In mijn geval is dat Atom. Heb je nog geen teksteditor, lees dan nog even het artikel: WP development (1): Development Tools.
Voeg je websitemap in htdocs als nieuwe project map toe. In mijn geval is dat wpgoeroe. Als je deze map hebt toegevoegd zie je al de bestanden van de WordPress installatie.
WordPress themamap aanmaken
Elk thema in WordPress heeft een eigen map. De thema map moet worden aangemaakt in wp-content/themes.
WordPress zoekt hier naar beschikbare thema’s. Open in je teksteditor de map wp-content en daarna de map themes. Je ziet dan de verschillende thema’s die al geïnstalleerd zijn met de WordPress installatie. Bij mij twentynineteen, twentytwenty en twentytwentyone.
Maak een eigen thema map aan in wp-content/themes en geef de map de naam van je thema. Ik maak de map wpgoeroe aan als thema map.
WordPress thema bestanden toevoegen
WordPress heeft minimaal twee bestanden nodig in de thema map. Dat zijn index.php en style.css. Maak in je thema map deze twee bestanden aan.
File header
In het style.css bestand zetten we een File Header. De File Header geeft informatie over het thema. In de WordPress codex kun je meer over File Headers lezen.
Open het style.css bestand in de teksteditor. Ga naar de WordPress Codex en kopieer het voorbeeld van de “Theme File Header”. Plak deze informatie in je style.css bestand en pas deze aan voor je eigen thema.
Laten we eens kijken wat we in de File Header hebben gezet.
Theme Name:
De naam van je thema. Dit is de enige waarde die WordPress nodig heeft om je thema te laten werken.
Author:
De maker van het thema. Hier kun je je eigen naam invullen of de naam van het team/bedrijf die het thema maakt.
Author URI:
De website van de maker van het thema.
Description:
Een omschrijving van het thema.
Version:
De versie van je thema.
License:
De licentie die hoort bij je thema.
Text Domain:
Een uniek ID die gebruikt wordt voor vertalingen van je thema.
Thema activeren
De eerste stappen van je eigen thema zijn gezet! Als alles goed is gegaan, dan kun je nu je eigen thema terug vinden in het WordPress Dashboard.
Open je WordPress Dashboard en ga naar de thema pagina. Als je niet meer weet hoe, lees dan hier hoe dat moet.
Gefeliciteerd. Je hebt je eigen thema aangemaakt. Hover met de muis over je thema en klik op “Themadetails”. In de themadetails vind je de verschillende onderdelen terug die je in de File Header hebt gezet.
Klik op “Activeren” om je thema te activeren. Ga nu naar je website en bekijk het resultaat.
Euh… ik zie niks hoor ik je denken. Dat klopt! Het enige wat we tot nu toe gedaan hebben is WordPress vertellen dat we een eigen thema hebben aangemaakt. Verder hebben we in het thema nog helemaal niets aangepast. Geen nood! Dat komt nog wel.
Thema screenshot
Als extraatje in dit artikel kijken we nog even naar het zelf aangemaakte thema. Op dit moment staat je eigen thema trots tussen de andere thema’s. Echter heeft je thema nog geen thema afbeelding.
Op dit moment zie je een transparante achtergrond, of beter gezegd, witte en grijze blokjes.
Om je thema een eigen afbeelding te geven moet je een afbeelding in de thema map zetten.
De geadviseerde grootte van een thema afbeelding is 880 x 660 px. Wil je een afbeelding voor Retina schermen dan worden de dubbele waarden geadviseerd.
Zoek, of maak een afbeelding en zorg er voor dat die de gewenste afmetingen krijgt. Voor het maken van afbeeldingen gebruik ik GIMP. Wil je weten hoe je dit kunt doen met GIMP, stuur mij dan even een bericht en dan schrijf ik daar een mooi artikel over.
Heb je een afbeelding gevonden of gemaakt zet die dan in je themamap.
Let op: De naam van de afbeelding moet screenshot.jpg zijn.
Ververs nu de themapagina en je eigen thema heeft nu een mooi screenshot 🙂
Opmerking: In de video zie je dat ik een screenshot.png bestand toevoeg. Dit werkt in de video. Echter bij het online zetten van de website op de webhost, werd het screenshot niet getoond.
Top! Ons thema wordt herkend door WordPress en we hebben het geactiveerd. De volgende stap is een functions.php bestand aanmaken zodat we kunnen aanhaken bij alle WordPress functies.
Geen idee waar ik het over heb? Lees dan snel WordPress Themedevelopment (4): Functions.php
