How do I add a Jquery script to thematic? NEED HELP

ThemeShaper Forums » Thematic

[closed]

How do I add a Jquery script to thematic? NEED HELP

(14 posts)

Started 3 years ago by gideonvd
Latest reply from gideonvd
This topic is not resolved

Tags:

gideonvd
Member

L.s,

I would like to add an additional jquery script to my thematic child theme. Basically it enables a full screen background image. I wrote the script, tested it on static page. It works like a charm. Now how do I add it to thematic. I noticed the ../library/scripts/ directory but how are these scripts included within thematic.

So this is what I need to add:
<script src="js/bg.js"></script> <script> $(document).ready(function(){ $.bg("img/bg.jpg", {speed: 150}); }); </script>
I don't even know where to start looking. Whatever file I open it just has thematic hooks and filters. Where are the actual includes. Please help me out.

Gideon

Posted 3 years ago #
helgatheviking
Moderator

You could start w/ the search function in the forums, b/c we just tackled this last week. this thread should give you a good push in the right direction.

http://themeshaper.com/forums/topic/how-to-add-jquery#post-12435

Posted 3 years ago #
gideonvd
Member
I did read that discussion but it doesn't answer my question. If it had I wouldn't have started a new topic. The question was: "Where are scripts included within thematic?" Thematic already uses some scripts but where do I find the includes?

I know about jquery.no.conflict and the wp_enqueue function and I can make it work if I want to but not the correct way. I could just paste the following snippet in my header.php (or footer.php for that matter)
```
<script src="js/bg.js"></script>
<script>
jQuery(document).ready(function(){
jQuery.bg("img/bg.jpg", {speed: 150});
});
</script>
```
I've been using this for a couple of days now and it works fine but apparently this is bad practice since we should only edit our child theme.
Posted 3 years ago #

azoomer
Member

Ok I'm a newbie but have you tried to paste something like this in the functions.php of your childtheme:

function call_jquery() {?>
<?php wp_enqueue_script('jquery'); ?>
<?php }
add_action('wp_head', 'call_jquery');

function script_in_head(){ ?>
<script src="js/bg.js"></script>
<script>
jQuery(document).ready(function(){
jQuery.bg("img/bg.jpg", {speed: 150});
});
</script>
<?php }
add_action('wp_head', 'script_in_head');

Not sure if its correct but you could try it. You would have to find the right image path though.

Posted 3 years ago #

gideonvd
Member
Ok so let me understand what you are doing here. We call jquery than embed it in our header. Why do we need to do this? Jquery has already been loaded. We can see this by looking at our source code.

But this is exciting:
```
<?php }
add_action('wp_head');
function script_in_head(){ ?>
```
If this works, you will make a lot of people happy.
Posted 3 years ago #

azoomer
Member

Maybe this part alone would do

function script_in_head(){ ?>
<script src="js/bg.js"></script>
<script>
jQuery(document).ready(function(){
jQuery.bg("img/bg.jpg", {speed: 150});
});
</script>
<?php }
add_action('wp_head', 'script_in_head');

But again the image path would have to be corrected

Posted 3 years ago #

gideonvd
Member
So, to be sure, I add this to my child theme's functions.php. What part of the code actually takes care of putting the scripts in my header.php.
```
add_action('wp_head', 'script_in_head');
```
Does this add the script_in_head function to my header.php?
Posted 3 years ago #

azoomer
Member

You need to have all of it with, not just what you wrote in the codeblock.
This is an example of something i have in my childtheme's functions.php and it seem to work

function jqueryscript_in_head(){ ?>
<script type="text/javascript">
    var $j = jQuery.noConflict();
	$j(document).ready(function () {
    $j("li:has(ul)").children("a").click(function () {
    return false;
    });
    });
	$j(document).ready(function () {
	$j("li:has(ul)").children("a").css('cursor','default');
	});
</script>
<?php }
add_action('wp_head', 'jqueryscript_in_head');

Posted 3 years ago #

azoomer
Member

The above example adds the jquerey snippet in the head

Posted 3 years ago #

azoomer
Member

function jqueryscript_in_head(){ ?>

In this place you put what you want to be added in the head

<?php }
add_action('wp_head', 'jqueryscript_in_head');

You can call the function whatever you like.

Posted 3 years ago #

gideonvd
Member

I don't think you need to specify no.conflict again, you can just replace all $ with jQuery since no.conflict has all ready been loaded.

<script type="text/javascript">
	jQuery(document).ready(function () {
   jQuery("li:has(ul)").children("a").click(function () {
    return false;
    });
    });
	jQuery(document).ready(function () {
	jQuery("li:has(ul)").children("a").css('cursor','default');
	});
</script>

Posted 3 years ago #

azoomer
Member

Yes that will also work

Posted 3 years ago #

azoomer
Member

It is quite useful another example:

function childtheme_favicon() { ?>
<link rel="shortcut icon" href="<?php echo bloginfo('stylesheet_directory') ?>/favicon.ico" />
<?php }
add_action('wp_head', 'childtheme_favicon');

Puts a link to the favicon in the head section

Posted 3 years ago #

gideonvd
Member

Ok thanks a lot! Awesome!

Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.