Support

Account

Register Login

Home › Forums › General Issues › Archives Not Loading/Updating Stylesheet in Script

Solved

Archives Not Loading/Updating Stylesheet in Script

  • I am using an ACF select field “cog_background_color” to give my client the option of choosing a stylesheet:

    /wp-content/themes/hello-theme-child-master/custom-css/white.css : White
/wp-content/themes/hello-theme-child-master/custom-css/black.css : Black
/wp-content/themes/hello-theme-child-master/custom-css/blue.css : Blue
/wp-content/themes/hello-theme-child-master/custom-css/tan.css : Tan
/wp-content/themes/hello-theme-child-master/custom-css/gray.css : Gray

    This script in the functions.php seems to work as expected to control the stylesheet that gets loaded on Posts/Pages:

    /** Insert Dynamic Stylesheet Into <Head> using ACF Field **/
add_action( 'wp_head', 'add_head_script' );
function add_head_script() { ?>

<?php 
$cog_stylesheet = get_field('cog_background_color');
if( $cog_stylesheet ): ?>
    <link rel="stylesheet" href="<?php echo esc_url( $cog_stylesheet ); ?>">
<?php endif; ?>

<?php }

    I don’t seem to be able to control the stylesheet on Post Archives the same way. I have created Archive templates in Elementor with no color styling. The ACF select field is visible in the WP edit view of the archive templates, but changing it doesn’t change the stylesheet that gets loaded on the Archive pages. Clearing cache doesn’t update the stylesheet. One archive is stuck on the initial stylesheet I created as a test (blue.css), and the other archives I’ve created aren’t loading a stylesheet at all.

    Any idea how to control which stylesheet gets loaded/updated on Archive pages using this method? Modifying or appending something to the PHP maybe? I’m a PHP newbie and was pretty excited to have even gotten the above code to work on Pages/Posts.

  • I’ve tried these approaches, but neither are working:

    /** Enqueue Dynamic Stylesheet using ACF Field **/
function singular_style() {
	$singular_css = get_field('singular_css');
	if (is_singular()) {
    wp_enqueue_style( 'singular_css', get_stylesheet_directory_uri(). $singular_css );
	}
}
add_action( 'wp_enqueue_scripts', 'singular_style' );
	
function portfolio_style() {
    $portfolio_css = get_field('portfolio_css', 'option');
	if (is_post_type_archive('portfolio')) {
    wp_enqueue_style( 'portfolio_css', get_stylesheet_directory_uri(). $portfolio_css );
	}
}
add_action( 'wp_enqueue_scripts', 'portfolio_style' );	
	
function careers_style() {
    $careers_css = get_field('careers_css', 'option');	
	if (is_post_type_archive('careers')) {
    wp_enqueue_style( 'careers_css', get_stylesheet_directory_uri(). $careers_css );
	}
}
add_action( 'wp_enqueue_scripts', 'careers_style' );

    And this:

    /** Enqueue Dynamic Stylesheet using ACF Field **/
function dynamic_style() {
	$singular_css = get_field('singular_css');
    $portfolio_css = get_field('portfolio_css', 'option');
    $careers_css = get_field('careers_css', 'option');

	if (is_singular()) {
    wp_enqueue_style( 'singular_css', get_stylesheet_directory_uri(). $singular_css );
	}
	elseif (is_post_type_archive('portfolio')) {
    wp_enqueue_style( 'portfolio_css', get_stylesheet_directory_uri(). $portfolio_css );
	}
	elseif (is_post_type_archive('careers')) {
    wp_enqueue_style( 'careers_css', get_stylesheet_directory_uri(). $careers_css );
	}
}
add_action( 'wp_enqueue_scripts', 'dynamic_style' );

  • Solved. Here are the steps I took:

    I registered these options pages:

    /** Creates ACF Options Pages **/
if( function_exists('acf_add_options_page') ) {
    
    acf_add_options_sub_page(array(
        'page_title'    => 'Posts Style',
        'menu_title'    => 'Posts Stylesheet',
        'parent_slug'   => 'edit.php',
        'capability'    => 'manage_options'
    ));
    
    acf_add_options_sub_page(array(
        'page_title'    => 'Portfolio Style',
        'menu_title'    => 'Portfolio Stylesheet',
        'parent_slug'   => 'edit.php?post_type=portfolio',
        'capability'    => 'manage_options'
    ));
    
    acf_add_options_sub_page(array(
        'page_title'    => 'Careers Style',
        'menu_title'    => 'Careers Stylesheet',
        'parent_slug'   => 'edit.php?post_type=careers',
        'capability'    => 'manage_options'
    ));
    
}

    I created my ACF select fields:

    • singular_css
    • posts_css
    • portfolio_css
    • careers_css

    And they all share these dropdown values:

    • /custom-css/white.css : White
    • /custom-css/black.css : Black
    • /custom-css/blue.css : Blue
    • /custom-css/tan.css : Tan
    • /custom-css/gray.css : Gray

    This code in the functions.php file works:

    /** Enqueue Dynamic Stylesheet using ACF Field **/
function dynamic_style()
{
    if (is_singular()) {
        global $post;
        $singular_css = get_field('singular_css', $post->ID);
        wp_enqueue_style('singular_css', get_stylesheet_directory_uri(). $singular_css);
    } elseif (is_home()) {
        $posts_css = get_field('posts_css', 'option');
        wp_enqueue_style('posts_css', get_stylesheet_directory_uri(). $posts_css);
    } elseif (is_post_type_archive('portfolio')) {
        $portfolio_css = get_field('portfolio_css', 'option');
        wp_enqueue_style('portfolio_css', get_stylesheet_directory_uri(). $portfolio_css);
    } elseif (is_post_type_archive('careers')) {
        $careers_css = get_field('careers_css', 'option');
        wp_enqueue_style('careers_css', get_stylesheet_directory_uri(). $careers_css);
    } elseif (is_404()) {
        wp_enqueue_style('white_css', get_stylesheet_directory_uri(). '/custom-css/white.css');
    }
}
add_action('wp_enqueue_scripts', 'dynamic_style', 99);
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.