1

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.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

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

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/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 
  • 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 Aug 19 '15 at 21:09
  • It was to solve the "Headers already sent by..." error. – loltospoon Aug 19 '15 at 21:13
  • @Howdy_McGee removing that doesn't help. – loltospoon Aug 19 '15 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 Aug 20 '15 at 8:52
  • @kaiser what is the cause behind the error? – loltospoon Aug 20 '15 at 20:22
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.org/Function_Reference/get_template_directory_uri.

The get_stylesheet_directory_uri() will give you the child theme directory uri: https://codex.wordpress.org/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.com/bootstrap/3.3.5/css/bootstrap.min.css' );
wp_enqueue_script( 'your-prefix-bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js' );
  • I changed to get_stylesheet_directory_uri() but it's still not using the Bootstrap CDN links...I really thought it was just an enqueueing problem. Can Wordpress not use CDN links or something? – loltospoon Aug 20 '15 at 20:24
  • Yes, WordPress can use CDN links or any url you want to use. Just edited my answer to show how would you enqueue bootstrap from MaxCDN. How are you debugging this? Are the tags on your header section? Are you looking at the source code to see if the link and script tags are there? Are you using developer tools on your browser (network tab) to see if they are being loaded or are you getting an error? – Mauricio Robayo Aug 21 '15 at 11:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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