Elements – adding js files in footer for one page on site

[Denise]

Hello GP Friends,

I am using DataTables to create an index on my site: Explore AI Ethics. I need to reference the .js scripts, but only for the index page, not the entire site. What is the best way to do this? For now, I created an Element to put the code in the footer and display on just the Index page. It seems to be working, but I’m not sure if this is the is optimal for speed, etc.

Thanks,
Denise

—————————————————–
<!– DataTables CSS –>
<link rel=”stylesheet” type=”text/css” href=”https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css”/&gt;
<link rel=”stylesheet” type=”text/css” href=”https://cdn.datatables.net/select/1.2.6/css/select.dataTables.min.css”/&gt;
<link rel=”stylesheet” type=”text/css” href=”https://cdn.datatables.net/buttons/1.5.4/css/buttons.dataTables.min.css”/&gt;
<link rel=”stylesheet” type=”text/css” href=”https://cdn.datatables.net/responsive/2.2.2/css/responsive.dataTables.min.css”/&gt;

<!– DataTables plugin and extensions –>
<script type=”text/javascript” src=”https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js”></script&gt;

<!– DataTables select rows –>
<script type=”text/javascript” src=”https://cdn.datatables.net/select/1.2.6/js/dataTables.select.min.js”></script&gt;

<!– DataTables buttons –>
<script type=”text/javascript” src=”https://cdn.datatables.net/buttons/1.5.4/js/dataTables.buttons.min.js”></script&gt;
<script type=”text/javascript” src=”https://cdn.datatables.net/buttons/1.5.4/js/buttons.html5.min.js”></script&gt;
<script type=”text/javascript” src=”https://cdn.datatables.net/buttons/1.5.4/js/buttons.print.min.js”></script&gt;

<!– DataTables responsive –>
<script type=”text/javascript” src=”https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.min.js”></script&gt;

[Denise]

And is the code that I pasted the correct way to reference the files?

[Tom]

Hi there,

I don’t see any issues with doing it this way.

However, that’s a lot of JS to load – I would recommend finding a way to trim that down.

Let me know if you need more info 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Denise]

Thanks, Tom.

[Tom]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts