0

I am using Enough theme and i want to create a child theme the way suggested in codex i.e. using wp_enqueue_style. I am doing it the way it's explained but left margin more now like it's indented to right. Seems to me some stylesheet loading problem.

I have created style.css and functions.php in child theme folder. In parent theme folder there is 1 style.css file and 11 css file inside '/css' directory.

I have tried lot of things but not able to do it correctly. Below is how i am trying to load parent theme style sheets.

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {

    wp_enqueue_style( 'styles', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'styles', get_template_directory_uri() . '/css/admin-options.css' );
    wp_enqueue_style( 'styles', get_template_directory_uri() . '/css/base.css' );
    wp_enqueue_style( 'styles', get_template_directory_uri() . '/css/colors.css' );
    wp_enqueue_style( 'styles', get_template_directory_uri() . '/css/box-modules.css' );
    wp_enqueue_style( 'styles', get_template_directory_uri() . '/css/approach.css' );
    wp_enqueue_style( 'styles', get_template_directory_uri() . '/css/comment.css' );
    wp_enqueue_style( 'styles', get_template_directory_uri() . '/css/fonts.css' );
    wp_enqueue_style( 'styles', get_template_directory_uri() . '/css/layout-fluid.css' );
    wp_enqueue_style( 'styles', get_template_directory_uri() . '/css/normalize.css' );
    wp_enqueue_style( 'styles', get_template_directory_uri() . '/css/post-format.css' );
    wp_enqueue_style( 'styles', get_template_directory_uri() . '/css/ua.css' );
}
?> 

I am using 'style' as first parameter because in the functions.php in parent theme i.i Enough i have following code, (I have put a line with arrow ------------> in front of the the code line) -

/**
 *
 *
 */
if ( !function_exists( "enough_enqueue_scripts_styles" ) ) {

    function enough_enqueue_scripts_styles() {

        global $is_IE, $enough_version;

        $enough_csses = array( "css/normalize.css", "genericons/genericons.css", "css/fonts.css", "css/box-modules.css", "css/comment.css", "css/ua.css", "css/colors.css", "css/base.css", "css/layout-fluid.css", "css/post-format.css", "css/approach.css" );

        foreach ( $enough_csses as $ecnough_css_path ) {

            if ( file_exists( trailingslashit( get_stylesheet_directory() ) . $ecnough_css_path ) ) {

                wp_enqueue_style( 'enough_' . basename( $ecnough_css_path, '.css' ), trailingslashit( get_stylesheet_directory_uri() ) . $ecnough_css_path, array(), $enough_version );
            } else {

                wp_enqueue_style( 'enough_' . basename( $ecnough_css_path, '.css' ), trailingslashit( get_template_directory_uri() ) . $ecnough_css_path, array(), $enough_version );
            }
        }

----------->wp_enqueue_style( 'styles', get_stylesheet_uri(), array( 'enough_approach' ), $enough_version );
        $gallery_style = enough_gallerys_css();
        wp_add_inline_style( 'styles', $gallery_style );

        wp_enqueue_style( 'enough-web-font', apply_filters( 'enough_web_font', '//fonts.googleapis.com/css?family=Ubuntu:400,700' ) );

        wp_enqueue_script( 'jquery' );

        wp_enqueue_script( 'comment-reply' );

        if ( $is_IE ) {

            wp_register_script( 'html5shiv', get_template_directory_uri() . '/inc/html5shiv.js', array(), '3', false );

            wp_enqueue_script( 'html5shiv' );
        }
    }

}

Do i need to create all css files in child themes ? or I can have only 1 css file namely style.css in child theme ? What would be the correct way of doing this ?

Edited this way

<?php

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'style1', get_template_directory_uri() . '/css/admin-options.css' );
    wp_enqueue_style( 'style2', get_template_directory_uri() . '/css/base.css' );
    wp_enqueue_style( 'style3', get_template_directory_uri() . '/css/colors.css' );
    wp_enqueue_style( 'style4', get_template_directory_uri() . '/css/box-modules.css' );
    wp_enqueue_style( 'style5', get_template_directory_uri() . '/css/approach.css' );
    wp_enqueue_style( 'style6', get_template_directory_uri() . '/css/comment.css' );
    wp_enqueue_style( 'style7', get_template_directory_uri() . '/css/fonts.css' );
    wp_enqueue_style( 'style8', get_template_directory_uri() . '/css/layout-fluid.css' );
    wp_enqueue_style( 'style9', get_template_directory_uri() . '/css/normalize.css' );
    wp_enqueue_style( 'style10', get_template_directory_uri() . '/css/post-format.css' );
    wp_enqueue_style( 'style11', get_template_directory_uri() . '/css/ua.css' );

}
?>

And here is style.css in child theme

/*
Theme Name: Enough Child
Theme URI: http://www.tenman.info/wp3/enough/
Description: Satisfied enough necessary minimum structure Responsive Theme. HTML5 , Supports Post Format Archives , You can select your favorite Post Format
Author: Tenman
Author URI: http://www.tenman.info/wp3/
Version: 1.22
Tags: two-columns,custom-colors, custom-header, custom-background, custom-menu, editor-style, threaded-comments, sticky-post, flexible-header
Template:     enough
Text Domain: enough-child
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

The images _

Parent Enough enter image description here

2 Answers 2

1

It is very best described in the WordPress Child theme codex page.

Basically to load child theme and parent theme stylesheet files, you have to just add following code in the functions.php file of your child theme.

function my_theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'styles',
    get_stylesheet_directory_uri() . '/style.css',
    array( $parent_style, 'enough_base' ),
    wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 99 );

You don't need to enqueue other parent theme CSS files if you are not changing them.

18
  • I understand and i did that but there is only one problem and that too with ''enough'' theme. Is there anyway i can show the images ? If you know any site or something. The problem is that the body in which i write text has shrunk or i can say now there is greater margin on the left and right of the text.
    – Desperado
    Commented Apr 21, 2017 at 9:35
  • Yes you can upload image sin your question as described in this topic meta.stackexchange.com/a/75498/218052 Also please share your site URL to troubleshoot the issue. Commented Apr 21, 2017 at 9:39
  • Here is the link Have edited the question . Please have a look . Images - There is margin difference and that is the only problem.
    – Desperado
    Commented Apr 21, 2017 at 9:48
  • I don't see the issue on your shared site and also don't see you are using any child theme on your site. Please advise. Commented Apr 21, 2017 at 9:55
  • Just take a screenshot and then i will change theme to child .
    – Desperado
    Commented Apr 21, 2017 at 9:57
1

about styles you need to specify a name for each style the cant be the same and its necessary if you are overwriting it in your child and you want the parent styles to come before overwriting.

so if you want to your parents style.css loads after your childs style.css you need to queue it in your functions.php file so add this in your child themes functions.php:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'enough_style'; // needs to be same as parent style

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css');
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles',100 ); //it will be queued after base.css and overwrites it
?>

i tested this code and it works well now. your style.css is ok and u dont need to change it.

9
  • What changes should i make ? I have already added the template you @vahid have shown. Do you mean that for every wp_enqueue_style function call i should use different name for first parameter ? Currently i have used 'styles'. Can i put any name that i want ?
    – Desperado
    Commented Apr 21, 2017 at 6:58
  • @Desperado yes you can specify any name, and actually they has to be different. Commented Apr 21, 2017 at 7:03
  • I have edited code and also posted here ( edited the question ) . Have a look tell me what i am doing wrong ? Styling is still different.
    – Desperado
    Commented Apr 21, 2017 at 7:07
  • you don't have to create all css files in the child theme and you only need style.css , you need to load css parents only if you are overwriting them, actually you don't even need fuctions.php. Commented Apr 21, 2017 at 7:18
  • @Desperado wait a few minutes and i will edit my answer Commented Apr 21, 2017 at 7:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.