Adding jquery to WordPress Theme the right way

Hi Everyone,

I’m creating my one of my first WordPress themes and I would really like to add the “fit text” script as seen here.

At first I did something that I’ve since learned is a ‘no-no’ and added the script directly to the header.php and footer.php documents. I did this because fittext is not yet available as a WordPress Pluggin.

Here is the code that the site asks you to add:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
  $("#responsive_headline").fitText();
</script>

This method, of course, made other pluggins that use jquery break due to calling up multiple libraries.

I tried to work around this problem by altering the code with a conflict workaround I found:

<?php wp_enqueue_script("jquery"); ?>
<script type="text/javascript"
   src="<?php bloginfo("template_url"); ?> jquery.fittext.js"></script>

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

<script>

var $j = jQuery.noConflict();

$j(function(){

$j("h1").fitText(1.4, { minFontSize: '18px', maxFontSize: '30px' });

$j("#site-title").fitText(1.4, { minFontSize: '25px', maxFontSize: '50px' });

$j(".entry-title").fitText(1.4, { minFontSize: '15px', maxFontSize: '20px' });

$j("#header span.site-desc").fitText(1.4, { minFontSize: '12px', maxFontSize: '15px' });
});

This code actually worked in a theme I built previously but Its causing nothing but problems now. I would be very happy to hear from someone that knows what I’m doing wrong and how I might add this script without doing undo harm to my theme. Thanks in advance for your help.