WordPress child theme error

Question

Hi I am using a WordPress theme by WooThemes. I am using the storefront theme and trying to add my own child theme(css file) but it will not work correctly.

I have added it in my setup.php functions file

function storefront_child_scripts() {
    if ( is_child_theme() ) {
        wp_enqueue_style( 'storefront-child-style', get_stylesheet_uri().'/custom-child.css', array('parent-style'), '1.0.0' , 'all' );
    }
}

I have also added what i believe to be the right syntax to the css file..

/*
Theme Name:     Storefront
Theme URI:      http://www.woothemes.com/storefront
Author:         WooThemes
Author URI:     http://www.woothemes.com
Description:    Storefront is the perfect theme for your next WooCommerce project. Designed and developed by WooThemes, it features a deep integration with our market leading WooCommerce plugin, several layout & color options to personalise your shop, multiple widget regions, a responsive design and much more. Developers will love it's lean and extensible codebase making it a joy to customise and extend. Looking for a WooCommerce theme? Look no further!
Version:        1.5.3
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    storefront
Tags:           black, white, light, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support
*/

@import url("../storefront/style.css");

When i inspect it in my browsers it shows in the very top of the head but not correctly and the browser cannot seem to find it. I also find it strange that it loads at the top of the head when its soppose to be loaded last . I shows as...

<link rel="stylesheet" type="/custom-child.css" href="mystyle.css">

As you can see this is completely wrong the href points to 'mystyle' which I have no idea where that came from and the type shows the name of my file .

If any body has any experience with this and is willing to help would be great. Thanks

Answer 1

You can always install a plug-in called custom css which overwrites the main css file. In that case you can even customize css in your backend without having to use ftp.

I normally wouldn't recommend this because this makes a child theme pretty useless, unless you write your own functions.