Maak een bestand genaamd custom-less.php in de thema map. (bijvoorbeeld met onderstaande content)
div.container-fluid.whitepaper {
<?php the_field('whitepaper_module','option');?>
}
div.container-fluid.blgovrzicht {
<?php the_field('blog_overzicht','option');?>
}
div.container-fluid.news {
<?php the_field('nieuws_blok','option');?>
}
div.container-fluid.cta {
<?php the_field('cta_blok','option');?>
}
div.container-fluid.cases {
<?php the_field('cases_blok','option');?>
}
div.container-fluid.quote {
<?php the_field('quote_blok','option');?>
}
div.container-fluid.partners {
<?php the_field('partners_blok','option');?>
}
div.container-fluid.blog {
<?php the_field('blog_blok','option');?>
}
Plak de onderstaande code in functions.php
// Custom CSS/LESS
function generate_options_css() {
$ss_dir = get_stylesheet_directory();
ob_start(); // Capture all output into buffer
require($ss_dir . '/custom-less.php'); // Grab the custom-style.php file
$css = ob_get_clean(); // Store output in a variable, then flush the buffer
file_put_contents($ss_dir . '/custom.less', $css, LOCK_EX); // Save it as a css file
}
add_action( 'acf/save_post', 'generate_options_css' ); //Parse the output and write the CSS file on post save
Voeg een extra ACF subpage toe . (in functions.php)
acf_add_options_sub_page(array(
'title' => 'Styling',
'capability' => 'administrator'
));
Maak een extra optie groep aan en plak de slugs van de velden in de custom-less.php
Voeg de import regel toe aan de style.less direct boven de variabelen
@import url("custom.less");