Confusion of creating a child theme properly in wordpress

Question

Trying to create a child theme from wordpress twentyfifteen theme. Wordpress codex says

Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice. The correct method of enqueuing the parent theme stylesheet is to use wp_enqueue_script() in your child theme's functions.php.

The function which is responsible of loading styles and javascript files of twentyfifteen is

function twentyfifteen_scripts() {
    // Add custom fonts, used in the main stylesheet.
    wp_enqueue_style( 'twentyfifteen-fonts', twentyfifteen_fonts_url(), array(), null );

    // Add Genericons, used in the main stylesheet.
    wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.2' );

    // Load our main stylesheet.
    wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );

    // Load the Internet Explorer specific stylesheet.
    wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' );
    wp_style_add_data( 'twentyfifteen-ie', 'conditional', 'lt IE 9' );

    // Load the Internet Explorer 7 specific stylesheet.
    wp_enqueue_style( 'twentyfifteen-ie7', get_template_directory_uri() . '/css/ie7.css', array( 'twentyfifteen-style' ), '20141010' );
    wp_style_add_data( 'twentyfifteen-ie7', 'conditional', 'lt IE 8' );

    wp_enqueue_script( 'twentyfifteen-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20141010', true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }

    if ( is_singular() && wp_attachment_is_image() ) {
        wp_enqueue_script( 'twentyfifteen-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20141010' );
    }

    wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20141212', true );
    wp_localize_script( 'twentyfifteen-script', 'screenReaderText', array(
        'expand'   => '<span class="screen-reader-text">' . __( 'expand child menu', 'twentyfifteen' ) . '</span>',
        'collapse' => '<span class="screen-reader-text">' . __( 'collapse child menu', 'twentyfifteen' ) . '</span>',
    ) );
}
add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );

So after copy it from parent's functions.php and paste it in child's functions.php what i did : 1.Changed the function name. 2.Replaced the line

wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );

with

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

3.Removed code for javascript files.

Do i also remove other style sheets which are not main style sheet of parent theme? How do i include another stylesheet properly which are in the child's theme ? (do i just use wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' ); ?)

Answer 1

Weird, I can answer but not comment yet... I also want to know why people use the @import in the CSS, when WordPress specifically says this is the way:

The following example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies.

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

Setting 'parent-style' as a dependency will ensure that the child theme stylesheet loads after it. See here a more detailed discussion :

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    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')
    );
}

I actually learned now that I didn't always do the dependencies thingy... noob/designer fail or bad documentation fail... ?!? This is used when you want to launch both stylesheets i.e parent theme stylesheet and child theme style sheet. Replace 'parent-style' in this with your parent theme main stylesheet name e.g 'twenty-twenty-one-style' which you can find in scripts function under functions.php

Answer 2

You don't need much to make a child theme, most of the code in your question is not needed:

1. create a folder in your 'themes' directory and name it whatever you'd like. twentyfifteenchild will make it clear

2. create a file called style.css and put the following at the top:

   /*
    Theme Name:   Twenty Fifteen Child
    Theme URI:    http://example.com/twenty-fifteen-child/
    Description:  Twenty Fifteen Child Theme
    Author:       John Doe
    Author URI:   http://example.com
    Template:     twentyfifteen
    Version:      1.0.0
    License:      GNU General Public License v2 or later
    License URI:  http://www.gnu.org/licenses/gpl-2.0.html
    Tags:         light, dark, two-columns, right-sidebar, responsive-layout,             accessibility-ready
    Text Domain:  twenty-fifteen-child
   */
   

3. Create a functions.php file and paste the following into it:

   <?php
   add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
   function theme_enqueue_styles() {
       wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
   
   }