I am trying to enqueue both a child theme style sheet and a child theme script. I need to enqueue the script because I put CDN links in there for Bootstrap. I know my enqueue isn't working correctly because I've already laid out the site using Pingendo, which uses Bootstrap. So because my site is a blank, dull mess, I know it's not working. I've copied the code from the codex and tried using that but I still can't figure out why it's not working correctly. Below I've shown my enqueue code and also what my Directory looks like in CPanel.

Update - could there be something wrong with child theme's my JS file?

custom-js.js

<script src=".1.3/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href=".3.5/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src=".3.5/js/bootstrap.min.js"></script>



function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
   $('#blah').attr('src', e.target.result);
}

reader.readAsDataURL(input.files[0]);
}
}
$("#upload").change(function() {
readURL(this);
});

Enqueue code

<?php ob_start(); ?>
<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_stylesheet_directory_uri() . '/style.css' );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/custom-js.js', array(), '1.0.0', true);
}

?>

2nd enqueue code attempted

<?php

function load_css_js() {
    wp_enqueue_style( 'child-css', get_template_directory_uri() . '/style.css', false, NULL, 'all' );

    wp_register_script( 'child-js', get_template_directory_uri() . '/js/custom-js.js', array( 'jquery' ), NULL, false );
    wp_enqueue_script( 'child-js' );
}

add_action( 'wp_enqueue_scripts', 'load_css_js' );

?>

Directory

BlankSlate
BlankSlate-Child --> style.css
                     js (folder) --> custom-js.js 

I am trying to enqueue both a child theme style sheet and a child theme script. I need to enqueue the script because I put CDN links in there for Bootstrap. I know my enqueue isn't working correctly because I've already laid out the site using Pingendo, which uses Bootstrap. So because my site is a blank, dull mess, I know it's not working. I've copied the code from the codex and tried using that but I still can't figure out why it's not working correctly. Below I've shown my enqueue code and also what my Directory looks like in CPanel.

Update - could there be something wrong with child theme's my JS file?

custom-js.js

<script src="https://ajax.googleapis/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn/bootstrap/3.3.5/js/bootstrap.min.js"></script>



function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
   $('#blah').attr('src', e.target.result);
}

reader.readAsDataURL(input.files[0]);
}
}
$("#upload").change(function() {
readURL(this);
});

Enqueue code

<?php ob_start(); ?>
<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_stylesheet_directory_uri() . '/style.css' );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/custom-js.js', array(), '1.0.0', true);
}

?>

2nd enqueue code attempted

<?php

function load_css_js() {
    wp_enqueue_style( 'child-css', get_template_directory_uri() . '/style.css', false, NULL, 'all' );

    wp_register_script( 'child-js', get_template_directory_uri() . '/js/custom-js.js', array( 'jquery' ), NULL, false );
    wp_enqueue_script( 'child-js' );
}

add_action( 'wp_enqueue_scripts', 'load_css_js' );

?>

Directory

BlankSlate
BlankSlate-Child --> style.css
                     js (folder) --> custom-js.js 

• javascript
• wp-enqueue-script
• wp-enqueue-style
• twitter-bootstrap
• cdn

Share Improve this question edited Aug 20, 2015 at 0:43 loltospoon asked Aug 19, 2015 at 20:48 loltospoonloltospoon 11133 bronze badges 6

• 1 Why do you have ob_start() at the top? Do you have an ob_get_clean() somewhere? I suggest trying to remove the ob_start() entirely... – Howdy_McGee ♦ Commented Aug 19, 2015 at 21:09
• It was to solve the "Headers already sent by..." error. – loltospoon Commented Aug 19, 2015 at 21:13
• @Howdy_McGee removing that doesn't help. – loltospoon Commented Aug 19, 2015 at 21:17
• The Headers already sent just points at an error. Do not try to remove the warning, but the reason for it. – kaiser Commented Aug 20, 2015 at 8:52
• @kaiser what is the cause behind the error? – loltospoon Commented Aug 20, 2015 at 20:22

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 1

In the context of parent - child themes, be aware that:

The get_template_directory_uri() will give you the parent theme directory uri: https://codex.wordpress/Function_Reference/get_template_directory_uri.

The get_stylesheet_directory_uri() will give you the child theme directory uri: https://codex.wordpress/Function_Reference/get_stylesheet_directory_uri

You are enqueueing parent-style with get_stylesheet_directory_uri(), which will give you the child theme directory uri.

You are enqueueing child-css and child-js using get_template_directory_uri, which will give you the parent theme directory uri.

So you might want to use get_template_directory_uri() when enqueueing parent scripts and styles, and get_stylesheet_directory_uri() when enqueueing child theme scripts and styles.

If you want to enqueue from another source (e.g. bootstrap) , just use the url:

wp_enqueue_style( 'your-prefix-bootstrap', 'https://maxcdn.bootstrapcdn/bootstrap/3.3.5/css/bootstrap.min.css' );
wp_enqueue_script( 'your-prefix-bootstrap', 'https://maxcdn.bootstrapcdn/bootstrap/3.3.5/js/bootstrap.min.js' );