how to call files in child theme?

Question

I created a child theme "my-theme" . In style.css I wrote nothing just the mandatory details I wrote there.

/*
Theme Name:     my-theme
Theme URI:      http://example.com/
Description:    Child theme for the Twenty Twelve theme 
Author:         Bhuvnesh
Author URI:     http://example.com/about/
Template:       my-theme
Version:        0.1.0
*/

All the style rules I am writting in "my-theme/css/style.css" file. Now in index.php I am calling <?php get_header(); ?> this will call header.php now in header.php file I am calling that css file as

<link href="css/style.css" rel="stylesheet" type="text/css" />

but this is not loading my css. same like this I am calling some .js files which are under "my-theme/js/" directory as

<script type="text/javascript" src="js/jquery-1.7.2.min.js"> </script>

this is also not loading.

I know I am making some mistakes to call files or may be in functions.php .

I just copied the full file functions.php of twentytwelve . Is there any mistake I am doing ?

Please tell me what to write in functions.php file and how to call files like js files under js directory .php files under includes directory , images under Images directory.

I searched how to create child theme and it's done but unable to call files.

Please Help me!I will be very thankful to you!!!!

kaiser · Accepted Answer · 2013-01-22 04:48:42Z

One does not simply throw <link> (CSS) or <script> tags into the <head> of a WordPress theme.

The right way to do it: Register, enqueue ... tadaa!

WordPress has the "Dependency API" for this task. It consists basically out of those public functions:

Then there're aligning functions to deregister scripts or styles, get data from PHP to JS - for example to use them for localization or AJAX calls - and checks/Conditionals to see if a style or script was registered/enqueued.

How to use them

First, you need to make sure that your header.php file has the appropriate hook:

wp_head();

Then add function to your themes functions.php file, like explained on WP Make. As you can see, both scripts and files, use the wp_enqueue_scripts-hook.

add_action( 'wp_enqueue_scripts', 'wpse82474_load_styles' );
add_action( 'wp_enqueue_scripts', 'wpse82474_load_scripts' );
wpse82474_load_styles()
{
    wp_enqueue_style( /* etc. */ );
}
wpse82474_load_scripts()
{
    wp_enqueue_script( /* etc. */ );
}

The arguments

The main arguments are the following

 wp_enqueue_style( $handle, $src, $deps, $ver, $media );

In the real world (to speak: In your theme), you'll use it like the following. The examples shows a script that has jQuery loaded as dependency (in other words: loaded before your enqueued file).

wp_enqueue_script(
     'my-theme-script'
    ,get_template_directory_uri().'/js/custom_script.js'
    ,array( 'jquery' )
);

Getting the path right

From within a childtheme you'd always want to use get_stylesheet_directory_uri() and from within a parent or "normal" theme, you'd use get_template_directory_uri().

Loading from a subfolder of your child theme would use a path like this:

$stylesheet_path = get_stylesheet_directory_uri().'/css/style.css';

Loading WP scripts & styles shipped with core

In case you want to load files that are already shipped with core, then you can simply enqueue them without and further arguments.

wp_enqueue_script( 'jquery' ); // Load jQuery

The same goes for each and every other script (or style) shipped with core, as you can read in Codex.

If you want to know if a script is already registered, there's no need to look in core or search in Codex. Simply use wp_script_is() (or it's equivalent for styles). Per default this checks the enqueue list, but you can also use registered or done as arguments.

wp_script_is( 'jquery', 'registered' ) AND wp_enqueue_script( 'jquery' );

Tom J Nowell · Answer 2 · 2013-01-21 15:20:35Z

All your included js and css files are included using relative paths. This is bad.

You'll find that the use of a child theme is irrelevant, as it is horribly broken with and without a child theme.

So instead, learn to enqueue styles and scripts properly using wp_enqueue_style in functions.php

http://codex.wordpress.org/Function_Reference/wp_enqueue_style

function theme_styles()  
{ 
  // Register the style like this for a theme:  
  // (First the unique name for the style (custom-style) then the src, 
  // then dependencies and ver no. and media type)
  wp_register_style( 'custom-style',
    get_template_directory_uri() . '/css/style.css', 
    array(), 
    '20120208', 
    'all' );

  // enqueing:
  wp_enqueue_style( 'custom-style' );
}
add_action('wp_enqueue_scripts', 'theme_styles');

and wp_enqueue_script:

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

function my_scripts_method() {
    wp_enqueue_script( 'jquery' );
}    

add_action('wp_enqueue_scripts', 'my_scripts_method');

Final notes:

Never include scripts and styles directly in header.php
Always use wp_enqueue_style and wp_enqueue_script
If you don't use those functions, caching plugins cannot modify them and you miss out on things
Never bundle JQuery in your theme, always use the copy that came via WordPress, nevermind bundling a version as outdated as v1.7.x

Mike Madern · Answer 3 · 2013-01-21 12:24:04Z

In the style.css file of your child theme, you have a line Template: my-theme. This should be the name of the template you want to have as parent.

An example for a child theme of the default Twenty Twelve theme:

/*
Theme Name:     Twenty Twelve Child
Theme URI:      http://example.com/
Description:    Child theme for the Twenty Twelve theme 
Author:         Your name here
Author URI:     http://example.com/about/
Template:       twentytwelve
Version:        0.1.0
*/

A quick explanation of each line:

Theme Name. (required) Child theme name.

Theme URI. (optional) Child theme webpage.

Description. (optional) What this theme is. E.g.: My first child theme. Hurrah!

Author. (optional) Author name.

Author URI. (optional) Author webpage.

Template. (required) directory name of parent theme, case-sensitive.

NOTE. You have to switch to a different theme and back to the child theme when you modify this line.

Version. (optional) Child theme version. E.g.: 0.1, 1.0, etc.

More information about child themes you can find here in the Codex pages.

This way you shouldn't have any problems anymore with child theme files that won't load.

Mark Kaplun · Answer 4 · 2013-01-21 12:56:51Z

up vote -4 down vote

The URL's you are using in

<link href="css/style.css" rel="stylesheet" type="text/css" />

and

<script type="text/javascript" src="js/jquery-1.7.2.min.js"> </script>

are relative to the URL of the page being loaded, not to your theme. What you need to do is to specify the absolute URL by adding the URL of the directory of your child theme like this

<link href="<?php bloginfo('stylesheet_directory'); ?>/css/style.css" rel="stylesheet" type="text/css" />

and

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.7.2.min.js"> </script>

bloginfo('stylesheet_directory') echos the URL of the root directory of your child theme

answered Jan 21 at 12:56

Mark Kaplun
1,4162210

4

No, No, No and No. This is really not the way to load your stylesheets and scripts. Please read into wp_enqueue_script() and wp_enqueue_style() as well as their wp_register_script()/*_style() equivalents. – kaiser Jan 21 at 15:00

3

This is a poor example and a lost opportunity to advocate best practices, and point out an old version of jquery – Tom J Nowell Jan 21 at 15:23

1

There is no excuse for encouraging someone to hard-code their own copy of jQuery into a theme. None! They will only come back later on with "my website don't work when I {upgraded|added plugin}". – webaware Jan 22 at 0:39

1

Then you create a small plugin (or functions.php hack) to deregister jQuery and register an old copy, temporarily, while you get the nasty old calendar fixed. But you don't do that by hard-coding a link to jQuery, otherwise you could end up with two (or more!) copies each overwriting the previous copy and bollocksing up other plugins / features that rely on jQuery. 1: don't do it; 2: if doing it, do it right. 2 is only for experts. – webaware Jan 22 at 5:39

2

We didn't do it for the fun of it, these 'projects' fix real issues and are pretty much standard everyday boilerplate now – Tom J Nowell Jan 22 at 9:33

show 7 more comments

asked	4 months ago
viewed	585 times
active	4 months ago

how to call files in child theme?

4 Answers

The right way to do it: Register, enqueue ... tadaa!

How to use them

The arguments

Getting the path right

Loading WP scripts & styles shipped with core

Your Answer

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

how to call files in child theme?

4 Answers

The right way to do it: Register, enqueue ... tadaa!

How to use them

The arguments

Getting the path right

Loading WP scripts & styles shipped with core

Your Answer

Sign up or log in

Post as a guest

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

Related