blog-guten child theme functions.php code

(@almcr)


<?php
  // Ref: https://developer.ww.wp.xz.cn/themes/advanced-topics/child-themes/
  function my_theme_enqueue_styles() {
    $parent_style = 'blog-guten-style';   
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
      get_stylesheet_directory_uri() . '/style.css',
      array( $parent_style ),
      wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

When I use this code in my child theme’s functions.php file, the bootstrap css code is enqueued after the theme and child theme css code. Why does this code not work if I want to use it in a child theme of blog-guten?

ps this code is a direct copy of code from the developer handbook, only change is name of theme

This topic was modified 6 years, 1 month ago by almcr.

Viewing 3 replies - 1 through 3 (of 3 total)

Thread Starter almcr
(@almcr)

6 years, 1 month ago

I don’t believe this is a theme problem, rather it is a problem with how “wp_enqueue_style” works. it seems to put the files you are enqueueing in the child theme at the top of the list and then adds the other files you are trying to enqueue after that. I guess that makes sense when you realize that the child functions.php loads before the theme’s functions.php, and not after it.

I have another theme which enqueues a genericons file just before enqueueing the style sheet and it acts the same way. the order in which the files are enqueued is altered, the genericons file is enqueued after the theme and child theme style sheets.

interesting dilemma, how do code up the functions.php in such a awy that it will work properly in the child theme?

Al

Thread Starter almcr
(@almcr)

6 years, 1 month ago

this is my solution to the situation where you want to enqueue a CSS file like bootstrap.css before the theme/child CSS files:

<?php // Ref: https://developer.ww.wp.xz.cn/themes/advanced-topics/child-themes/ function my_blog_guten_scripts() { wp_enqueue_style( 'bootstrap-4', get_template_directory_uri() . '/assets/css/bootstrap.css', array(), 'v4.3.1', 'all' ); wp_enqueue_style( 'blog-guten-fonts', '//fonts.googleapis.com/css?family=Barlow:400,400i,600,600i&display=swap' ); wp_enqueue_style( 'slicknavcss', get_template_directory_uri() . '/assets/css/slicknav.css', array(), 'v1.0.10', 'all' ); wp_enqueue_style( 'blog-guten-style', get_template_directory_uri() . '/style.css', array(), 'v1.0.8', 'all' ); wp_enqueue_style( 'blog-guten-child-style', get_stylesheet_directory_uri() . '/style.css', array('blog-guten-style'), 'v1.0.0', 'all' ); wp_enqueue_script( 'slicknav', get_template_directory_uri() . '/assets/js/jquery.slicknav.js', array('jquery'), 'v1.0.10', true ); wp_enqueue_script( 'blog-guten-skip-link-focus-fix', get_template_directory_uri() . '/assets/js/skip-link-focus-fix.js', array(), '20151215', true ); wp_enqueue_script( 'blog-guten-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '20151215', true ); wp_enqueue_script( 'blog-guten-theme', get_template_directory_uri() . '/assets/js/theme.js', array('jquery'), '1.0.0', true ); if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } } add_action( 'wp_enqueue_scripts', 'my_blog_guten_scripts' );

the child theme’s functions.php loads first, and the second enqueue of a file does not seem to take place, I was really wondering if enqueueing a file like bootstrap-4 in both the child theme and the theme would work, but it seems to be working OK. this code does load the CSS files in the order you want them to load and seems to get around the problem I was having with the original child theme functions.php file.

Al

Thread Starter almcr
(@almcr)

6 years ago

found a better solution, use the Child Theme Configurator plugin to generate the child theme code. the plugin enqueues the bootstrap and slicknav files before enqueueing the theme’s style sheet.

Al

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘blog-guten child theme functions.php code’ is closed to new replies.

Tags