Hello Elementor child theme style.css inladen op de juiste manier

CSS bestanden op de juiste manier inladen wanneer je een Hello Elementor child theme gebruikt.Maak je gebruik van het Hello Elementor thema? Dan maak je vast ook gebruik van een child theme. In dit child theme plaats je jouw eigen PHP functies en CSS aanpassingen die niet mogelijk zijn in Hello Elementor.

Het Hello Elementor thema is eigenlijk een leeg thema zonder voor gedefinieerde templates. Handig als je zelf jouw gehele website met de Elementor plugin wil maken.

Wil je echt veel mogelijkheden? Dan adviseer ik om de Elementor Pro plugin aan te schaffen voor nog geen 50 dollar.

Style.css van child theme inladen

Maar hoe laad je dan via functions.php op de juiste manier het style.css bestand van jouw child thema in? Voeg daarvoor onderstaande PHP code toe. Vergeet niet om jouw style.css bestand te voorzien van de juiste gegevens bovenin.

function child_enqueue_scripts()
{
    $version = wp_get_theme()->get('Version');
    wp_enqueue_style('child-style',get_stylesheet_directory_uri() . '/style.css', ['hello-elementor','hello-elementor-theme-style', 'elementor-frontend'], $version);
}
add_action('wp_enqueue_scripts', 'child_enqueue_scripts', 10);

Volgorde van inladen

De bovenstaande code zorgt ervoor dat jouw style.css bestand pas ingeladen wordt na de CSS bestanden van het Hello Elementor thema en de Elementor plugin.

Hiermee voorkom je dat jouw CSS regels worden overschreven door de regels van het thema of de plugin. Hierdoor ontstaan er ook minder conflicten en hoef je ook minder vaak gebruik te maken van !important;.

Overigens is het natuurlijk wel het advies zo min mogelijk eigen CSS regels te gebruiken en zoveel mogelijk in Elementor in te stellen.

Laat een reactie achter

Je e-mailadres zal niet worden gepubliceerd. vereiste velden zijn gemarkeerd met *

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.