Wanneer je wat vaker WordPress sites maakt krijg je vroeg of laat te maken met het feit dat je CSS wilt gaan toevoegen of aanpassen.
Je kunt dit op verschillende manieren doen, bijvoorbeeld door in de Customizer CSS toe te voegen. Je zult al snel merken dat dit niet lekker werkt doordat de interface van dit onderdeel in de Customizer niet heel gebruiksvriendelijk is ingericht.
Veel mensen maken gebruik van een plugin om dit te doen, wij raden plugins altijd af als ze niet echt nodig zijn. Je kunt niet 100% zeker zijn van de code in externe plugins, en tevens is iedere geïnstalleerde plugin extra belasting op je WordPress omgeving dus kost dit weer iets aan laadtijd van jouw website.
Ook kun je in de style.css werken van je gebruikte child theme.
Nadeel hiervan is dat veel thema’s geen goede volgorde aanhouden bij het inladen van stylesheets. Dus moet je achter iedere regels !important gaan plaatsen, hetgeen not-done is.
Hoe dan? Zul je denken, we gaan een eigen gemaakt stylesheet toevoegen en deze als laatste stylesheet inladen zodat ons eigen stylesheet voorrang krijgt op alle andere stylesheets.
Open FileZilla (FTP-client) als je dit programma nog niet hebt, download FileZilla dan hier. En log in op je FTP-omgeving.
Ga naar functions.php (Meestal: public_html > wp-content > themes > jouw-child-theme-naam > functions.php) en download dit bestand.
Open het bestand in jouw favoriete code editor.
Plaats onderstaande code onderin je functions.php en upload je functions.php weer.
function daan_webdesign_custom_styles() {
// Registreer mijn custom stylesheet
wp_register_style( 'custom-styles', get_stylesheet_directory_uri() . '/css/custom.css' );
// Laad mijn custom stylesheet
wp_enqueue_style( 'custom-styles' );
}
add_action( 'wp_enqueue_scripts', 'daan_webdesign_custom_styles', 99 );Wat staat hierboven precies? WordPress werkt met zogenaamde functions om extra functionaliteiten toe te voegen aan jouw WordPress website.
Allereerst geven we onze functie een naam, hier dus: daan_webdesign_custom_styles , je mag dit aanpassen naar een naam die je zelf wilt zolang de benaming maar uniek is en je tussen ieder woord gebruik maakt van een underscore _ .
Let op! Wanneer je de naam aanpast, pas deze dan ook aan op de laatste regel van het script.
Daarna registreren we het nieuwe stylesheet en geven we de locatie aan.
get_stylesheet_directory_uri() staat voor het pad naar je child theme.
Nadat het nieuwe stylesheet geregistreerd is gaan we deze inladen.
Het getal: 99 staat voor de inlaad positie van het stylesheet. CSS werkt namelijk op volgorde, de laatste toegevoegde styles krijgen het meeste voorrang.
Het enige wat we nu nog moeten doen is in je child theme een map aan te maken genaamd: css en daarin je custom.css bestand te plaatsen.
Gefeliciteerd, je hebt zojuist je eigen custom stylesheet ingeladen op de juiste manier! 😉
