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="https://wordpress.stackexchange.com/questions/82474/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="https://wordpress.stackexchange.com/questions/82474/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!!!!
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:
wp_register_script()wp_enqueue_script()wp_register_style()wp_enqueue_style()
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' );
