Can’t get jQuery to load

Hello! I’m having a lot of trouble getting jQuery to load on my site…

In my Child theme I added a folder titled “js” and a a file in that folder titled “title-resize.js” with this code:

;(function($) {
    $.fn.textfill = function(options) {
        var fontSize = options.maxFontPixels;
        var ourText = $('span:visible:first', this);
        var maxHeight = $(this).height();
        var maxWidth = $(this).width();
        var textHeight;
        var textWidth;
        do {
            ourText.css('font-size', fontSize);
            textHeight = ourText.height();
            textWidth = ourText.width();
            fontSize = fontSize - 1;
        } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
        return this;
    }
})(jQuery);

$(document).ready(function() {
    $('.teaching-title').textfill({ maxFontPixels: 48 });
});

I’ve also tried using “jQuery” instead of “$”:

;(function(jQuery) {
    jQuery.fn.textfill = function(options) {
        var fontSize = options.maxFontPixels;
        var ourText = jQuery('span:visible:first', this);
        var maxHeight = jQuery(this).height();
        var maxWidth = jQuery(this).width();
        var textHeight;
        var textWidth;
        do {
            ourText.css('font-size', fontSize);
            textHeight = ourText.height();
            textWidth = ourText.width();
            fontSize = fontSize - 1;
        } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
        return this;
    }
})(jQuery);

jQuery(document).ready(function() {
    jQuery('.teaching-title').textfill({ maxFontPixels: 48 });
});

Then in my child theme’s functions.php I added this:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'title-resize',
        get_template_directory_uri() . '/js/title-resize.js',
        array('jquery')
    );
}

My html is like this:

<div class='teaching-title'>
    <span>My Title is Really Really Long</span>
</div>

and I also added this css:

.teaching-title {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  width: auto;
  height: 85px;
  width: 100%;
  height: 85px;
}

and for some reason i can’t get it to work… Here’s a page i’m trying to get it to run on, for the title:
https://calvarytucson.wpengine.com/teachings/temptations-of-the-times/

Since the titles of these pages can vary greatly, I don’t want it to push the content below it down, so I’m trying to resize the text within the div.

I know in theory it should work, because I’ve tested it out here:
https://jsfiddle.net/MYSVL/4047/

but for some reason I can’t get it to work on wordpress D:<
I know i must be doing something wrong, but I can’t figure it out…

Any help would be greatly appreciated.
Thank you so much for taking the time to read this question, and thank you in advance for your help!

• This topic was modified 8 years, 5 months ago by Calvary Tucson. Reason: typo