Topic: Loading Javascript in the header

Author

Posts
December 17, 2013 at 11:12 am #1725

Martin
Participant

Hi there, I use integrity light,

I want to installed the Grid Accordion plugin, there for I need to load javascript and some more code in the HEADER and some stuff in the Body!!!

FIRST in the header:
<link rel=”stylesheet” type=”text/css” href=”css/grid-accordion.min.css” media=”screen”/>

<script type=”text/javascript” src=”js/jquery-1.10.1.min.js”></script>
<script type=”text/javascript” src=”js/jquery.gridAccordion.min.js”></script>

SECOND IN THE BODY:
<body>
<div id=”my-accordion” class=”grid-accordion”>
<div class=”ga-panels”>
<div class=”ga-panel”>
<img src=”path/to/image1.jpg” />
</div>
<div class=”ga-panel”>
<img src=”path/to/image2.jpg” />
</div>
<div class=”ga-panel”>
<img src=”path/to/image3.jpg” />
</div>
<div class=”ga-panel”>
<img src=”path/to/image4.jpg” />
</div>
<div class=”ga-panel”>
<img src=”path/to/image5.jpg” />
</div>
</div>
</div>
</body>

After including the required files in the header and creating the HTML markup, you will need to instantiate the accordion by adding the following code before the </head> tag:

<script type=”text/javascript”>
jQuery(document).ready(function($) {
$(‘#my-accordion’).gridAccordion();
});
</script>

I aldready downloaded child theme direcctory and have the functions.php from intergrity light. But I dont know what to write there into the functions.php that it works. The code that I posted above is for HTML, but in our case here with the great ultimate x theme, it is php. Would be nice if you can tell me the solution for php.

Thanks

December 17, 2013 at 1:17 pm #1740

Kory
Keymaster

Hey Martin,

We can surely help you with this. However, I wanted to make sure that you knew that we already include an accordion shortcode for X via our shortcode plugin! Is there any reason in particular why you want to use this accordion element instead? Ours is incredibly easy to implement. We are just about to launch our new revamped shortcode generator, as well as a page builder, where this will be integrated right into the Visual Composer plugin. Building your pages out with our accordion should be far easier in the long run.

Do let us know when you have the time.

Thanks!

December 17, 2013 at 2:23 pm #1746

Martin
Participant

hey there,
I did not know that you already have a accordian widget,
I have time now, or what do you mean, but I develop my website first on localhost.

So do you have a manuel for your accordian? where can I find it, thanx°!

December 17, 2013 at 2:51 pm #1749

Kory
Keymaster

Martin,

We have online documentation located here, as well as examples to look at the shortcodes here.

Let us know if you need anything else!

December 17, 2013 at 3:11 pm #1752

Martin
Participant

hey there,
thanks for all your answers, but your accordion that you already have in your x template is nice, but I mean another one, the grid accordion, that I already bought.
So can you please tell me, how to implement the javascripts how I asked in the first question.

Thanks a lot

December 17, 2013 at 3:47 pm #1756
Kory
Keymaster
Martin,

The first thing you’ll want to do is put the JavaScript file for the accordion into your child theme. I would recommend putting it in a new directory in your child theme named js, so your file structure should look like this:
```
/x-child-integrity-light/js/jquery.gridAccordion.min.js
```
After that, open up the provided functions.php file and enter in the following snippet of code:
```
function enqueue_my_custom_scripts() {

  wp_register_script( 'x-grid-accordion', get_template_directory_uri() . '/js/jquery.gridAccordion.min.js', array( 'jquery' ), NULL, false );

  if ( ! is_admin() ) {
    wp_enqueue_script( 'x-grid-accordion' );
  }

}

add_action( 'wp_enqueue_scripts', 'enqueue_my_custom_scripts' );
```
After that, you should be able to add the last snippet you included via the Custom section of the Customizer in the CSS field.

Make sure that the snippet you copy and paste above doesn’t convert the single quotes (‘) into apostrophes. If this happens, you will get errors with the code.

Let us know if you need anything else!
December 17, 2013 at 8:11 pm #1761

Martin
Participant

thanks, I tried what you´ve written.
but in which folder should I copy the x-child-intergrity-light directory?
under framework/views/integrity and make in intergrity a new folder x-child-intergrity-light? thats what I did.

I need to load also a second js, called jquery-1.10.1.min.js that I also copied in the new js folder.
How to I load that jquery-1.10.1.min.js, please, I am not that good at php.

I´ve done all you said, but it does not work yet, thats the reason why I´m asking.

thank you very much.

December 17, 2013 at 9:52 pm #1766

Kory
Keymaster

Martin,

The child theme should be uploaded to WordPress like a regular theme, then you should activate it like you did X. When you do this though, keep in mind that you’ll be starting from “scratch,” so any updates you’ve made to the look of the site, export them first using the Customizer Export page, and then import them after activating the child theme. If you need more information on child themes and how to install them and set them up, check out our video tutorial here.

Once that is installed, you’ll need to FTP to your server to add the js directory in your child theme to put your script, as well as add the function I gave you to your functions.php file.

The jquery-1.10.1.min.js script you mentioned is already included with WordPress, so you will not need to do anything with this.

Hopefully this clears things up. Do let us know if you need any further explanation.

Thanks!

December 18, 2013 at 10:30 am #1809

Martin
Participant

hey

I installed the child theme as you explained, thanks. The jquery.gridAccordion.min.js is also loaded through the functions.php.
It still doesnt work, maybe its because I also have to load a grid-accordion.min.css
shoud I copy the content of the grid-accordion.min.css into the style.css of the integrity child light theme.
Or shoud I copy the content of the grid-accordion.min.css into the css customizer from the x theme in the wordpress backend.
Honestly I would like to know how to tell the x theme to load the grid-accordion.min.css

Another thing is that I have to instantiate the grid-accordion, the manual says:

After including the required files in the header and creating the HTML markup, you will need to instantiate the accordion by adding the following code before the </head> tag:

<script type=”text/javascript”>
jQuery(document).ready(function($) {
$(‘#my-accordion’).gridAccordion();
});
</script>

I copied
jQuery(document).ready(function($) {
$(‘#my-accordion’).gridAccordion();
});

into the javascript field of the customizer, but I still doesnt work. The manuel says I have to copy the javascript at the end of the header, before </head>

Thank you for helping me.

December 18, 2013 at 11:31 am #1819

Kory
Keymaster

Martin,

Please send us an email using our main contact form and I will send you a child theme to upload.

Thanks.

December 18, 2013 at 2:44 pm #1846

Martin
Participant

ok thanx I did that 😉

December 18, 2013 at 4:09 pm #1855

Kory
Keymaster

Response sent. Feel free to reply to that email if you need any help on this particular question.

Thanks!

April 1, 2014 at 11:14 pm #28902

Shaun S
Participant

For anyone else having the issue of trying to add a javascript file through your child theme. Use the above code provided by the Support – however don’t use:

get_template_directory_uri()

This will reference the parent theme and get you no-where, especially if your js file is in child-theme/js/js-file.js

My work around was using:

get_stylesheet_directory_uri()

Which references the directory stated in your child themes css file. BUT, BUT, BUT!

You need to make sure that where the Theme URI: is stated in your child theme css, you need to reference your child theme.

April 1, 2014 at 11:35 pm #28909

Support
Member

Hi Shaun,

We really appreciate your detailed response.

Thanks
Author

Posts