Ongeacht het thema van je voorkeur, wat je waarschijnlijk wilt aanpassen is de voettekst. In dit bericht laat ik zien hoe je dat kunt doen. We gebruiken daarvoor het TwentyTwelve thema.

Als je het bericht over het maken van een child theme nog niet hebt gelezen, dan zou ik dat eerst doen. In dit artikel ga ik er namelijk van uit dat je weet hoe je een kindthema maakt.

De eerste stap op weg naar onze aangepaste voettekst, is een child theme van het TwentyTwelve thema. De style.css van dit kindthema bevat minimaal de volgende inhoud:

/*
Theme Name: Twenty Twelve Child
Template: twentytwelve

-------------------------------------------------------------- */

@import url(../twentytwelve/style.css);

Dit stijlblad bevat dus enkele commentaarregels en de importregel waarmee we gebruik maken van de style.css van het ouderthema. De commentaarregels omvatten de naam van het kindthema en een verwijzing naar de folder van het ouderthema.

Het begin is gemaakt. Vervolgens kopiëren we de footer.php van het TwentyTwelve thema naar de folder van het kindthema.

In deze laatste folder bevinden zich nu dus drie bestanden:

• footer.php
• screenshot.png
• style.css

De footer.php bevat de volgende code:

Ook dit bestand begint met een aantal commentaarregels.

Wat tussen <?php en ?> staat, is PHP code.

<?php is de openingstag en ?> de sluittag.

De overige code is een combinatie van HTML en CSS selectors. Deze CSS selectors bewerk je als het ware met de CSS regels in de style.css.

Met behulp van de style.css geef je wat je wilt doen met de HTML tags en CSS selectors, dus hoe de website er uit moet zien. Op de website, ziet de standaard footer.php er zo uit:

Als je de footer.php van het ouderthema wil laten zoals die is, dan hoef je deze niet naar het kindthema te kopiëren. Met “Template: twentytwelve” in de kop van het style.css verwijs je immers naar de template (PHP) bestanden in de folder van het TwentyTwelve thema. Wil je een bestand van het ouderthema aanpassen, dan kopieer je dat eerst naar de folder van het kindthema.

Vervolgens kun je daar de gewenste wijzigingen aanbrengen. Op deze manier blijft jouw maatwerk bij een volgende update van het TwentyTwelve thema behouden. Voor ons doel is met name het de volgende segment relevant:

Willen we dit deel aanpassen, dan kunnen we twee wegen bewandelen. We kunnen wat er nu staat waar nodig corrigeren. Heb je geen ervaring met PHP en/of WordPress template tags, dan is dat niet zo eenvoudig.

Bovendien komt het allemaal nogal nauw. Vergeet je een aanhalingsteken of puntkomma, dan eindig je met een blanco of onvolledige pagina.

De andere strategie is het relevante codeblok in zijn geheel vervangen. Dat is wat wij gaan doen.

We gaan twee korte voetteksten maken. De eerste komt aan de linkerkant, de andere aan de rechterkant. En dat doen we niet met PHP, maar met HTML. Daarna toon ik nog even de PHP variant.

HTML-versie van onze voettekst

Zoals al aangegeven willen we dat onze voettekst uit twee delen bestaat; een linker- en een rechterdeel.

Links willen we “Copyright © 2014 wpZaken · Alle rechten voorbehouden”, plaatsen. Uiteraard met een hyperlink naar de homepage van de website.

Rechts wensen we een tekst met wat meer promotionele waarde “Wilt u een afspraak? Ja, bel me!”. Deze keer inclusief een e-mailadres.

De HTML ziet dat er zo uit:

Als we de oorspronkelijke, relevante code vervangen door onze HTML-code, dan is dit het resultaat op de website:

Dat is nog niet helemaal goed, want nu staat alles aan de linkerzijde. Dat lossen we op met een beetje CSS. We creëeren hiervoor twee CSS-classes, ‘voet-links’ en ‘voet-rechts’, die we toevoegen met behulp van een span tag:

Nu moeten we onze CSS selectors ook toevoegen aan de style.css van ons kind thema. Vanzelfsprekend voegen we daar nog wat opmaak aan toe.

Onder de @importregel van de style.css zetten we:

.voet-links {
	color: #999;
	float: left;
	padding-bottom: 25px;
}

.voet-rechts {
	color: #999;
	float: right;
	padding-bottom: 25px;
}

.voet-links a,
.voet-rechts a {
	text-decoration: none;
}

Nou zijn we er:

De ene tekst staat links, de andere rechts. En doordat we de kleur van de paragraaftekst iets lichter hebben gemaakt (#999), vallen de hyperlinks ook op zonder onderstreping (tekstdecoratie).

Het nadeel van deze voettekst is echter dat we elke eerste januari het jaartal moeten aanpassen. Dat is niet handig. Maar dat kunnen we oplossen met een snufje PHP.

Hiertoe vervangen we het jaartal 2014 door:

<?php echo date('Y') ; ?>

De herziene HTML-versie is bevat nu dus al een beetje PHP en is daarmee “dynamisch” geworden:

Zodra er een nieuw jaar aanbreekt, wordt het jaartal automatisch aangepast. We zijn nu klaar met de HTML-versie van onze persoonlijke voettekst.

PHP-versie van onze voettekst

Zoals je waarschijnlijk al verwacht, is de PHP-versie van onze voettekst wat gecompliceerder dan de HTML-versie. Deze uitvoering maakt namelijk volop gebruik van WordPress template tags, zeg maar WordPress variabelen. Deze variabelen worden uit de database van je WordPress installatie gevist. Ik presenteer de PHP-versie zonder verdere commentaar. Hier is die:

Oefening baart kunst.

Maar waarom moeilijk doen als het ook gemakkelijk kan? Het grote voordeel van de PHP-uitvoering zit hem in de gebruikte WordPress template tags. Dit zijn variabelen die gevuld worden met gegevens uit de database. Hierdoor worden dus voor elke WordPress installatie de juiste naam, hyperlink en dergelijke getoond, zonder dat de gebruiker deze gegevens eerst heeft ingegeven – ze zitten immers al in de database.

Zolang je geen WordPress thema’s creëert voor de distributie aan derden – betaald of onbetaald – kun je gerust gebruik blijven maken van een HTML-voettekst. Wel zo gemakkelijk.

Een complicerende factor ten aanzien van de PHP-strategie is bovendien dat elke thema-auteur zijn eigen methoden hanteert. Dus al je het jezelf gemakkelijk wilt maken houd je het gewoon bij de HTML-variant.

Mijn doel met dit bericht was jou een beetje op weg helpen, zodat je de voettekst van een WordPress thema zelf kunt aanpassen. Het is vooral een kwestie van doen.

Probeer het eerst altijd uit op een lokale installatie en zorg ervoor dat je regelmatig een back-up (kopie) maakt van je werk in uitvoering. Als het een keer tegen zit, kun je terugvallen op een eerdere versie. Succes ermee!