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

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

Home Forums Support Do we use @import function in style.css with child theme?

  • This topic has 5 replies, 2 voices, and was last updated 1 month ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2230756
    User 7

    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)?

    #2230800
    David
    Staff
    Customer Support

    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.

    #2231831
    User 7

    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?

    #2231877
    David
    Staff
    Customer Support

    #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.

    #2231905
    User 7

    Thank you David!

    #2232002
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.