Hoe maak je een child theme op basis van Thematic

Hoe maak je een child theme op basis van thematic? Het antwoord hierop is, zoals je later zult zien, verrassend eenvoudig. Zo vlak voor de jaarwisseling heb je kunnen lezen dat ik Thematic ging gebruiken als basis voor de transformatie naar een nieuw design hier op de WordPress Dimensie.

Om te beginnen is het goed om te weten wat een child theme in combinatie met een Framework nu eigenlijk inhoudt. WordPress Child Themes zitten gewoon in je  /wp-content/themes/ net als elk ander Theme wat je geïnstalleerd heb. Je activeert een Child Them ook op exact dezelfde manier als elk ander Theme. In een Child Theme folder vind je vaak exact dezelfde mappen voor je afbeeldingen, je scripts en daarnaast vind je in ieder geval een style.css bestand en mogelijk ook een functions.php.

Het enige verschil is dat ze geen theme bestanden nodig hebben. Geen index.php, sidebar.php, header.php, footer.php. In feite heb je helemaal geen PHP nodig om een Child Theme te maken. Overigens is het goed mogelijk dat een Child Theme wel alle bovengenoemde bestanden heeft, maar strikt noodzakelijk gezien zijn deze niet nodig.

Wanneer je een stylesheet van een Child Theme zou bekijken in je favoriete tekstverwerkingprogramma (Notepadd++) dan zul je iets vergelijkbaars terug vinden:

/*
Theme Name: WordPress Dimensie
Theme URI:  http://wpdimensie.nl
Description: WordPress Dimensie child theme op basis van Thematic.
Author: Remkus de Vries
Author URI: http://www.forsitemedia.nl/
Template: thematic
Version: 1.0
Tags: Thematic
.
Thematic is © Ian Stewart http://themeshaper.com/
.
*/

De regel die hier het meest belangrijk is, is de volgende:

Template: thematic

Hiermee geeft een Child Theme aan welk Theme de Parent Theme is. Alle CSS die je verder vermeldt in je stylesheet is óf aanvullend ten opzichte van je Parent Theme óf een wijziging. In het voorbeeld van het Theme voor WordPress Dimensie zul je in de map /wp-content/themes/wpdimensie nog een paar meer bestanden treffen maar daarover later meer.

Zoals je kunt zien heb ik tot nu nog maar kleine wijzigingen aangepast hier ten opzichte van het origineel. Het meest belangrijke is dat ik in de header.php een extra div id toe hebt gevoegd die topnav heet. Deze zorgt voor de zwarte ruimte hierboven met de linkjes naar ons Twitter profiel en RSS Feeds.

/************************************************
*	Header  							*
************************************************/
#header {
	background: #f4f4f4;
	}

/************************************************
*	Top Navbar      							*
************************************************/

#topnav {
	background: #000000;
	border-bottom: 1px solid #1F2B73;
	}

#topnavbar {
	width: 960px;
	height: 25px;
	color: #DDDDDD;
	margin: 0px auto 0px;
	padding: 0px;
	}

#topnavbar a, #topnavbar a:visited {
	font-size: 11px;
	font-weight: bold;
	color: #DDDDDD;
	text-decoration: none;
	margin: 3px;
	}

#topnavbar a:hover {
	color: #FFFFFF;
	text-decoration: underline;
	}

#topnavbar p {
	font-size: 11px;
	font-weight: bold;
	padding: 0px;
	margin: 0px;
	}

.topnavbarleft {
	width: 260px;
	float: left;
	margin: 0px;
	padding: 0px;
	}

.topnavbarright {
	width: 700px;
	float: right;
	margin: 0px;
	padding: 2px 0px 0px 0px;
	text-transform: capitalize;
	text-align: right;
	}

.topnavbarright a img {
	border: none;
	margin: 0px 3px 3px 0px;
	padding: 0px;
	}
.rsslink {
	padding: 2px 5px 2px 20px;
	background: url(images/rss.png) no-repeat left center;
	}

.twitterlink {
	padding: 2px 5px 2px 20px;
	background: url(images/twitter.png) no-repeat left center;
	}	

#twitter_update_list{
	list-style: none;
	}

Door enkel deze toevoeging hebben we al een Child Theme gemaakt. Immers elke wijziging ten opzichte van het origineel is per definitie al een Child Theme. De bestaande div id header heb ik enkel een wijziging ten opzichte van Thematic doorgevoerd in vorm van een achtergrond kleur #f4f4f4.
Volgende keer ga ik wat dieper in op de tot nu toe extra toegevoegde code en bestanden zoals je ze nu al in de Filezilla screenshot ziet.