CODEWITHSUNDEEP
wordpress
Kiran Dash
Kiran Dash

Reputation: 4956

functions.php file unable to filter parent theme

I am going through a tutorial to create modular css in wordpress at the following link:

http://themeshaper.com/2009/04/30/modular-css-wordpress-child-themes/

When I use style.css to import css files from the library it works. Here is the code in style.css in the child theme:

style.css

/* CSS Document */
/*
Theme Name: Chiron
Description: Child theme of thematic
Template: thematic
*/

/* Using @import, we can borrow style sheets from the Parent Theme */

/* Reset the browser defaults */
@import url('../thematic/library/styles/reset.css');

/* Apply default typography */
@import url('../thematic/library/styles/typography.css');

/* Add WordPress image styles */
@import url('../thematic/library/styles/images.css');

/* Add a basic layout */
@import url('../thematic/library/layouts/2c-l-fixed.css');

/* Start with some default styles */
@import url('../thematic/library/styles/18px.css');

But when I am removing all the imports from style.css and using functions.php inside my child theme directory to load the css files it is not working.

functions.php

<?php

function childtheme_create_stylesheet() {
    $templatedir = get_bloginfo('template_directory');
    $stylesheetdir = get_bloginfo('stylesheet_directory');
    ?>
    <link rel="stylesheet" type="text/css" href="<?php echo $templatedir ?>/library/styles/reset.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo $templatedir ?>/library/styles/typography.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo $templatedir ?>/library/styles/images.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo $templatedir ?>/library/layouts/2c-l-fixed.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo $templatedir ?>/library/styles/18px.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo $stylesheetdir ?>/style.css" />

    <?php    
}
add_filter('thematic_create_stylesheet', 'childtheme_create_stylesheet');

?>

Can any one please suggest where am I doing wrong?

Upvotes: 0

Views: 128

Answers (3)

vrajesh
vrajesh

Reputation: 2942

Try this: 1. if you want to you use parent theme url :

get_template_directory_uri();

  1. if you want to you use child theme url :

get_stylesheet_directory_uri();

In style.css(child theme):

/*
Theme Name: twentyfifteen-child
Template: twentyfifteen

*/

In Function.php

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

}

Try this:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    echo  get_template_directory_uri();
    echo  get_stylesheet_directory_uri();
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );    
    wp_enqueue_style( 'parent-stylereset', get_template_directory_uri() . '/library/styles/reset.css' );
    wp_enqueue_style( 'parent-styletypo', get_template_directory_uri() . '/library/styles/typography.css' );
    wp_enqueue_style( 'parent-styleimges', get_template_directory_uri() . '/library/styles/images.css' );
    wp_enqueue_style( 'parent-style2c', get_template_directory_uri() . '/library/layouts/2c-l-fixed.css' );
    wp_enqueue_style( 'parent-style18px', get_template_directory_uri() . '/library/styles/18px.css' );

}

Upvotes: 1

Simon Pollard
Simon Pollard

Reputation: 2588

You should be using the correct method to add in stylesheets (and scripts) with the relevant functions:

// Enqueue Scripts
function my_scripts() {
  wp_register_style( 'main', get_stylesheet_directory_uri() . '/assets/css/main.css');
  wp_register_style( 'anotherfile', get_stylesheet_directory_uri() . '/assets/css/main.css');
  wp_enqueue_style( 'main' );
  wp_enqueue_style( 'anotherfile' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

Especially as you have a lot of files this will allow you to make use of something like W3TC and combine and minimise the files.

You can add this code into your child themes functions.php file.

See https://codex.wordpress.org/Function_Reference/wp_register_style and https://codex.wordpress.org/Function_Reference/wp_enqueue_style for more detail.

Upvotes: 1

Ujjwal
Ujjwal

Reputation: 529

You can try using 

href="<?php echo $templatedir; ?>/library/styles/reset.css

instead of 

href="<?php echo $templatedir ?>/library/styles/reset.css

But be ensure that $templatedir and $stylesheetdir are giving you the right directory.

Also use

add_action( 'admin_init', 'childtheme_create_stylesheet' );

instead of 

add_filter('thematic_create_stylesheet', 'childtheme_create_stylesheet');

it is highly recommended to use wordpress default function. You can visit here for this :

https://codex.wordpress.org/Function_Reference/add_editor_style

Thanks

Upvotes: 1

Related Questions