Icoontjes toevoegen in social media navigatiemenu bij standaard WordPress-theme

.social-navigation ul {
list-style: none;
margin: 0 0 -1.6em 0;
}

.social-navigation li {
float: left;
}

.social-navigation a {
display: block;
height: 3.2em;
position: relative;
width: 3.2em;
}

.social-navigation a:before {
content: “\f415”;
font-size: 24px;
position: absolute;
top: 0;
left: 0;
}

.social-navigation a[href*=”codepen.io”]:before {
content: “\f216”;
}

.social-navigation a[href*=”digg.com”]:before {
content: “\f221”;
}

.social-navigation a[href*=”dribbble.com”]:before {
content: “\f201”;
}

.social-navigation a[href*=”dropbox.com”]:before {
content: “\f225”;
}

.social-navigation a[href*=”facebook.com”]:before {
content: “\f203”;
}

.social-navigation a[href*=”flickr.com”]:before {
content: “\f211”;
}

.social-navigation a[href*=”foursquare.com”]:before {
content: “\f226”;
}

.social-navigation a[href*=”plus.google.com”]:before {
content: “\f206”;
}

.social-navigation a[href*=”github.com”]:before {
content: “\f200”;
}

.social-navigation a[href*=”instagram.com”]:before {
content: “\f215”;
}

.social-navigation a[href*=”linkedin.com”]:before {
content: “\f208”;
}

.social-navigation a[href*=”pinterest.com”]:before {
content: “\f210”;
}

.social-navigation a[href*=”getpocket.com”]:before {
content: “\f224”;
}

.social-navigation a[href*=”polldaddy.com”]:before {
content: “\f217”;
}

.social-navigation a[href*=”reddit.com”]:before {
content: “\f222”;
}

.social-navigation a[href*=”stumbleupon.com”]:before {
content: “\f223”;
}

.social-navigation a[href*=”tumblr.com”]:before {
content: “\f214”;
}

.social-navigation a[href*=”twitter.com”]:before {
content: “\f202”;
}

.social-navigation a[href*=”vimeo.com”]:before {
content: “\f212”;
}

.social-navigation a[href*=”wordpress.com”]:before,
.social-navigation a[href*=”wordpress.org”]:before {
content: “\f205”;
}

.social-navigation a[href*=”youtube.com”]:before {
content: “\f213”;
}

.social-navigation a[href*=”mailto:”]:before {
content: “\f410”;
}

.social-navigation a[href*=”spotify.com”]:before {
content: “\f515”;
}

.social-navigation a[href*=”twitch.tv”]:before {
content: “\f516”;
}

.social-navigation a[href$=”/feed/”]:before {
content: “\f413”;
}

.social-navigation a[href*=”path.com”]:before {
content: “\f219”;
}

.social-navigation a[href*=”skype.com”]:before {
content: “\f220”;
}

Waar staan de codes ‘fXXX’ eigenlijk voor?

Deze codes, bijvoorbeeld f220, staan voor de icoontjes. Je vindt alle mogelijke icoontjes op https://glyphsearch.com.

Het icoontje dat ik wil staat niet in de Stylesheet van WordPress, wat nu?

Als voorbeeld heb ik het over de website van een vriendin die fotograaf is. Zij wilde in haar social media menu een link naar haar profiel op Lensculture. Je kunt nu op glyphsearch.com zoeken naar een icoontje dat je mooi vindt. Selecteer hiervoor links in de navigatiebalk bij ‘copy’ voor ‘hex’ (van hexadecimal). Klik op het icoontje van je wens en de f-code is gekopieerd. Plak hem nu in bijvoorbeeld het kladblok. Nu zie je het f-nummer van het icoontje van je wens.

In de stylesheet plakken

Nu moet je in de stylesheet bij het rijtje met icoontjes van het social navigatiemenu (zie hierboven) bijvoorbeeld de code (onder de disclaimer-alinea) plakken op de juiste plek. Wat is de juiste plek? Bijvoorbeeld ergens middenin de opsomming met icoontjes. Na het plakken natuurlijk (let op: lees eerst onderstaande disclaimer) de stylesheet (style.css) opslaan.

Disclaimer

Let op: als je zelf de stylesheet gaat aanpassen is dit nooit helemaal zonder risico’s. Wat ik zelf doe is een kopie maken van de bestaande stylesheet en deze plakken in een Word-bestand. Verder weet ik dat ik tegen betaling bij mijn hostingprovider een backup kan terugzetten. Daarom neem ik af en toe het risico om zelf in bijvoorbeeld style.css of Functions.php aanpassingen te doen. Als je geen risico’s wilt lopen, roep dan de hulp in van een specialist. Het is je eigen verantwoordelijkheid als je style.css aanpast.

Code voor in de stylesheet bij bijvoorbeeld het icon van Instagram:

.social-navigation a[href*=lensculture.com’]::before {
content: “\f215”;
}

Et voila, als het goed is heb je met bovenstaande handleiding je social media navigatiemenu in het standaard WordPress-theme (bijvoorbeeld Twenty Fifteen of Twenty Sixteen) aangepast.

Suggestie: maak een childtheme aan

Let op: als je een update van WordPress uitvoert, gaat het icoontje dat je zo mooi hebt toegevoegd in de stylesheet verloren. Hij wordt overschreven door het stylesheet van het thema. Denk erom dat je dus na elke update elke keer het stukje code toevoegt. Nog gemakkelijker: een childtheme maken van het standaard WordPress theme dat je gebruikt. Dit doe je eenvoudig met een plugin zoals Orbisius Child Theme. De plugin-maker legt heel helder uit hoe je een childtheme maakt. Heb je hem aangemaakt en bij weergave geactiveerd, dan kun je bij weergave – editor/bewerker het childtheme rechtsboven selecteren. Nu kun je in het stylesheet van the child het stukje code voor het social media navigatiemenu kopiëren. The child overerft de templates van het hoofdthema. Alleen de Stylesheet wordt wel gerespecteerd na de update. Na een update van Wordpress blijft hierdoor je social media menu gewoon in tact.

Dankbetuigingen

Ik had mijn vriendin nooit zo goed kunnen helpen zonder de hulp van Klaas van der Linden. Man, wat is die man handig met WordPress. Een selfmade-developper in php/wordpress. Hij is erg slim en kan ook apps bouwen. Kijk maar eens op zijn website Klaasmaakt.nl.