php - Trying to publish a little bit of Javascript on the homepage AND at the bottom

  <script type="text/javascript">

  function toggleDiv() {
    var triggeredDiv = document.querySelector('.triggeredDiv');
    if (document.getElementById('myonoffswitch').checked) {
      triggeredDiv.classList.remove('shown');
    } else {
      triggeredDiv.classList.add('shown');
    }
  }
  document.getElementById('myonoffswitch').addEventListener("change", toggleDiv);

  </script>

I need to print this little snippet of Javascript at the bottom of the homepage...

I know that I can do that using a functions.php command like this:

function for_homepage() {
    return 'JavaScript HERE';
}
add_shortcode('for_homepage', 'for_homepage');

And then my shortcode would be [for_homepage] but I don't believe that this is the best approach - I think it is better to enque the script?

Also - should I print it directly on the page (at the bottom where it needs to be for this to work) for speed reasons?

Thanks!

BTW this is to make this switcher work: /

++++++

UPDATE

I believe that this might be the better approach:

function add_inline_script() {
  echo "<script>/* do awesome things */</script>\n";
}
add_action( 'wp_head', 'add_inline_script', 0 );

However - I would change the wp_head to the correct footer function...

Is this the best approach?

  <script type="text/javascript">

  function toggleDiv() {
    var triggeredDiv = document.querySelector('.triggeredDiv');
    if (document.getElementById('myonoffswitch').checked) {
      triggeredDiv.classList.remove('shown');
    } else {
      triggeredDiv.classList.add('shown');
    }
  }
  document.getElementById('myonoffswitch').addEventListener("change", toggleDiv);

  </script>

I need to print this little snippet of Javascript at the bottom of the homepage...

I know that I can do that using a functions.php command like this:

function for_homepage() {
    return 'JavaScript HERE';
}
add_shortcode('for_homepage', 'for_homepage');

And then my shortcode would be [for_homepage] but I don't believe that this is the best approach - I think it is better to enque the script?

Also - should I print it directly on the page (at the bottom where it needs to be for this to work) for speed reasons?

Thanks!

BTW this is to make this switcher work: https://proto.io/freebies/onoff/

++++++

UPDATE

I believe that this might be the better approach:

function add_inline_script() {
  echo "<script>/* do awesome things */</script>\n";
}
add_action( 'wp_head', 'add_inline_script', 0 );

However - I would change the wp_head to the correct footer function...

Is this the best approach?

• php
• functions

Share Improve this question edited Mar 20, 2019 at 11:49 Qaisar Feroz 2,14711 gold badge99 silver badges2020 bronze badges asked Mar 20, 2019 at 9:14 HenryHenry 98311 gold badge88 silver badges3131 bronze badges 2

• 1 The best approach is to use wp_enqueue_script() where you can set dependencies and whether to use the script in the footer. – Max Yudin Commented Mar 20, 2019 at 10:13
• wp_footer action? – cybmeta Commented Mar 20, 2019 at 12:02

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can use the functions is_front_page() or is_home() depending on what your home page is. Also instead of wp_head you can use wp_enqueue_scripts Your code will look something like this

function add_inline_script() {
    if(is_home() || is_front_page)
    wp_enqueue_script('js-handler-name', 'js-url');
}
add_action( 'wp_enqueue_scripts', 'add_inline_script');