how to call files in child theme?

2 Views

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

Read More

<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!!!!

Post Views: 2

Related posts

Leave a Reply

3 comments

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

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

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