Confusion of creating a child theme properly in wordpress

0 Views

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.

Read More

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

Post Views: 0

Related posts

Leave a Reply

2 comments

  1. 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' );

}

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