[Resolved] Do we use @import function in style.css with child theme?

[Faris]

Hello team,

I have seen an online course where below function used in the style.css of a child theme to inherit style from the parent theme.

@import url(“..

Is that necessary with GeneratePress child theme?
And another question please: Is there any important code snippets I need to add to the blank starter child theme you mention in this page (whether in functions.php or style.css)?

[David]

Hi there,

the @import is not necessary, GP takes care of that for you.

There aren’t any specific code snippets that we rate as important.
GP tries to only load what you use, so whereas other themes you may find yourself removing thing vis functions.php, GP tries to avoid that.

For me, there are some common things i do:

1. if i am using Google Fonts i will generally load them locally and that requires some @font-face CSS:

https://docs.generatepress.com/article/adding-local-fonts/

2. If you have a child theme style sheet and you want to load them in the editor:

add_filter( 'generate_editor_styles', function( $editor_styles ) {
    $editor_styles[] = 'style.css';

    return $editor_styles;
} );

3. Remove the WP core global styles and SVG Image Filters that WP thinks we all need, but i never use:

remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );

4. If I use a lazy loader plugin and i want to exclude the First featured image and the single post featured image i add:

function skip_lazy_class_first_featured_image($attr) {
  global $wp_query;
  if ( 0 == $wp_query->current_post ) {
      $attr['class'] .= ' first-featured-image';  
  }
  return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'skip_lazy_class_first_featured_image' );

This adds the first-featured-image class that can be used to exclude featured image from the lazy loader.

Thats most of the ones i find myself reaching for.

[Faris]

Really appreciate the details and sharing your experience!
With regard to the style sheet (number 2), I have this snippet code on my functions.php:

/* 1- Enqueue stylesheet:
enqueue script for parent theme stylesheet */
function childtheme_parent_styles() {

// enqueue style
wp_enqueue_style( ‘parent’, get_template_directory_uri().’/style.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘childtheme_parent_styles’);

How is it comparing to your snippet code in number 2? Is it the same or I need to replace or what exactly?

[David]

#2 that function loads your styles in the block editor so you get the wysiwyg experience. And it also takes care of editor specific classes so you don’t need editor styles as well as front end styles.

[Faris]

Thank you David!

[David]

You’re welcome!

[Author]

Posts