Stay In Touch
Het stijlen van een WordPress website

Een tutorial over WordPress childtheme en css aanpassingen maken

Wanneer je een WordPress website mag bezitten, dan ben je een gelukkig mens. De vele voordelen die een WordPress website biedt, heb ik al in een ander blogartikel over WordPress beschreven. Ben je nog helemaal nieuw op het gebied van WordPress dan raad ik je aan deze eerst te lezen.

Vereisten om aan de slag te kunnen gaan met deze tutorial:

  1. Een domeinnaam en webruimte bij een webhoster
    (zie punt 2 van WordPress blogartikel).
  2. Een ingericht FTP programma
    (zie punt 1 van WordPress blogartikel).
  3. Een WordPress installatie in wwwroot van webruimte
    (zie punt 1 van WordPress blogartikel).
  4. Een goed functionerende WordPress Thema (bijvoorbeeld Twenty Ten of Twenty Eleven).
  5. Een goede text editor (bijvoorbeeld Adobe Dreamweaver).
    Er zijn ook (gratis) alternatieven voor Dreamweaver. Zoek daarvoor op internet.
    In dit artikel worden wat gratis alternatieven besproken. Ik heb persoonlijk geen ervaringen met deze programma’s.
  6. De Firefox browser en de add-on Firebug. Deze laatste is uiterst handig om de juiste css codes die je aan wilt passen te vinden.
  7. Wat kennis van css. Mocht je dit niet hebben, dan kun je op internet ook allerlei tutorials hierover vinden. Een hele goede startpunt is de engelstalige website van W3C.

WordPress childtheme maken

Als uitgangspunt heb ik het thema ‘Twenty Eleven’ genomen, maar vul gerust hiervoor jouw eigen gekozen thema naam in.

  1. Ga via jouw FTP programma naar de map themes van jouw WordPress installatie (www.jouwdomeinnaam/wwwroot/wp-content/themes/)
  2. Maak daar een nieuwe map aan met de naam ChildofTwentyeleven (mag ook een andere voor jou herkenbare naam zijn). Dit kun je eenvoudig doen door met rechts te klikken en te kiezen voor ‘Map aanmaken’.
  3. Maak in jouw text editor een nieuwe css bestand aan met alleen de volgende tekst (knip en plak):
    ——————————————————————————————-

    @import url(‘../twentyeleven/style.css’);

    /*
    Theme Name: Child of Twentyeleven
    Theme URI: http://www.jouwdomeinnaam/wp-content/themes/childofTwentyeleven
    Description: Aangepast Twentyeleven thema
    Author: jouw naam
    Author URI: http://jouwdomeinnaam
    Template: Twenty Eleven
    */

    ———————————————————————————————–

Uitleg

  • @import url(‘../twentyeleven/style.css’);
    dit importeert de style sheet van het oorspronkelijke thema twenty eleven, zodat je blijft profiteren van de opmaak die jou al bevalt van het oorspronkelijke thema . Alles wat je in de childtheme stylesheet wijzigt, overschrijft wat er in de stylesheet van het oorspronkelijke thema staat. Mocht er iets mis gaan, dan is de oorspronkelijke stylesheet altijd nog in tact. Verder wordt de childtheme stylesheet niet overschreven bij een update van het oorspronkelijke thema. Zo maak je gebruik van de goede onderdelen van het oorspronkelijke thema en blijven jouw wijzigingen altijd van kracht, ook na een update van het oorspronkelijke thema.
  • Thema Name: een eigen bedachte naam voor jouw childtheme.
  • Theme URI: het pad waar jouw childtheme zich bevindt => http://jouwdomeinnaam/wwwroot/wp-content/themes/ChildofTwentyeleven is de map die je zelf aangemaakt hebt in de themes map.
  • Description: een eigen bedachte omschrijving van jouw childtheme.
  • Template: naam van het oorspronkelijke thema. Let op! Deze is wel hoofdletter gevoelig. Kijk in de dashboard van jouw WordPress website onder thema’s hoe daar de naam van het oorspronkelijke thema geschreven staat.
  • Ga nu naar de WordPress dashboard van jouw website en kies voor Weergave => Thema’s.
    Je zult nu zien dat jouw childtheme wordt vermeld als thema. Activeer jouw childtheme. Zolang je nog niets gewijzigd hebt in de style sheet van jouw childtheme, zal jouw website er nog steeds zo uitzien als toen je het originele thema geactiveerd had.

Stylesheet van childtheme aanpassen
Je kunt ervoor kiezen om de stylesheet van jouw childtheme bij te werken via de WordPress dashboard optie Weergave => Bewerker. Je moet dan wel weten wat de toegepaste codes zijn voor CSS.
Ben je nog niet zover, dan raad ik het gebruik van Dreamweaver aan, omdat deze suggesties geeft voor stijlopties.

In de volgende videotutorial laat ik met behulp van het FTP programma FileZilla, text editor Adobe Dreamweaver en Firefox add-on Firebug zien hoe je onderdelen van jouw WordPress childtheme qua stijl kunt aanpassen.



Kijk hier voor het vervolg:Een WordPress website stijlen – deel 2


Is het je gelukt om een childtheme en bijbehorend stylesheet te maken en aan te passen? Laat het me dan weten.
Ook als je nog vragen hebt, ben ik graag bereid je verder te helpen.

————————————————————————————————–

Yvonne Alefs - webdesigner

Yvonne Alefs is webdesigner bij van Wens naar Website – voor betaalbare doch professionele WordPress websites. Het hebben van een (huis)stijlvolle Facebook- en/of Twitterpagina achtergrond, vindt zij net zo belangrijk als een goed uitziende visitekaartje. Zij ontwerpt dan ook Facebook en Twitterpagina achtergronden bij Pimp mijn Pagina .

Tags:

Comments
Send a Comment

Jos Rokebrand says:

Hallo Yvonne,
Ik dacht eindelijk een makkelijke uitleg gevonden te hebben om een Child Theme van mijn twenty eleven te maken, maar ik loop helemaal vast. Via het FTP programma moet ik naar de map themes. Staat die map bij mijn provider op de server (daar zie ik alleen FTP beheer), of bedoel je bij “Program Files” op mijn eigen C-schijf? Daar kom ik WS-FTP tegen met o.a. een map theme. Ik heb daar een nieuwe map gemaakt “Child theme”. In Notepad heb ik het nieuwe css bestand aangemaakt, maar hoe nu verder? Waar zet ik dat css bestand neer en hoe krijg ik het een bij het ander?
Zou je dankbaar zijn als je mij verder op weg zou willen helpen. Ik heb nl. wat kleine wijzingen in het originele Twentyeleven aangebracht (font kleur) en dat raak ik kwijt als ik 3.3.2 zou downloaden.
Met vriendelijke groet,
Jos Rokebrand

Hoi Jos, ik stuur je een mailtje toe met een uitleg!

Hallo Yvonne,
Ik heb onderstaande style.css in de map childoftwentytwelve gezet
@import url(‘../twentytwelve/style.css’);
/*
Theme Name: Child of Twentytwelve
Theme URI: http://www.vibha.nl/blog/wp-content/themes/childoftwentytwelve
Description: Aangepast Twentytwelve thema
Author: Vibha
Author URI: http://www.vibha.nl/blog/
Template: Twenty Twelve
*/
Bij geinstalleerde thema’s staat boven aan ingeschakeld(1), uitgechakeld(2) en incompleet(1)
ingeschakeld is Twenty Twelve en als ik kijk bij incompleet staat daar Child of Twentytwelve met een beschrijving in rood Er is geen hoofdhema aanwezig. Installeer het hoofdthema “Twenty Twelve”.

Ik snap het even niet. Ik heb Twenty Twelve al een keer verwijdert en op nieuw geinstalleerd en geactiveerd en dat wordt ook actief weergegeven. Ik weet niet wat er nou fout is.
Met vriendelijke groet,
Wim Holthof

Beste Wim,

Je moet in dit geval je Child Theme juist actief maken en Twenty Twelve deactiveren (maar wel geïnstalleerd laten). Wat gebeurt er dan?

De volgende HTML-tags en -attributen zijn toegestaan: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Vind mij op social media!
Link to my Facebook Page
Link to my Linkedin Page
Link to my Twitter Page