Add code to head tag in upfront

How to I add javascript etc. to the <head> ... </head> tag in upfront?

Thanks,

Troy

  • Adam Czajczyk

    Hello Troy,

    I hope you're well today and thank you for your question!

    You will want to create a MU (Must Use) plugin for this. To do this, create an empty file with ".php" extension and put this code inside:

    <?php
    function my_header_js() {
    ?>
    <script type="text/javascript">
    /* here goes your code */
    </script>
    <?php
    }
    add_action('wp_head','my_header_js');

    To apply it to your site, access your server via FTP and switch to "/wp-content" folder. If there's no "/mu-plugins" folder already, please create it and then upload the file inside.

    Please note however than instead of printing Java Script directly to theme's header it's recommended to use native WP "wp_enqueue_scripts()" function instead. You could use that in an mu-plugin as well.

    Please take into account as well that Upfront parent theme itself also heavily depends on Java Script so make sure that the code you're willing to add is not causing any conflicts here.

    In case you had further questions on this, let me know please and I'll be glad to assist.
    Best regards,
    Adam

  • Jean-Claude

    Hi Adam, and what if one just wants to inject some custom JavaScript code only on one or just a few specific pages, how would one do this?

    Creating a custom MU plugin to do this seems terribly cumbersome. Why not just provide in the Upfront page editor some code areas where one can just cut and paste their custom JavaScript code, similar to the way Thrive Themes does this. One area allows one to paste their code to run before the closing </head> tag, one area allows to paste their code just after the page opening <body> tag, and another that allows one to paste their code to run just before the page closing </body> tag of the page.

    Is there perhaps an existing plugin (like perhaps Tracking Code Manager Pro) that would allow one do this easier than having to create a custom MU plugin every time one wants to add some custom JavaScript to a page?

    Thanks,
    Jean-Claude

  • Dimitris

    Hello Jean-Claude,

    hope you're doing good! :slight_smile:

    what if one just wants to inject some custom JavaScript code only on one or just a few specific pages, how would one do this?

    You can use any conditional tags in an if statement to control your JS snippets. Check couple of specific pages for example like:

    <?php
    function my_header_js() {
      if( is_page( array( 'about-us', 'contact', 'management' ) ) {
      //either in about us, or contact, or management page is in view
      // Ref: https://developer.wordpress.org/reference/functions/is_page/
      ?>
        <script type="text/javascript">
        /* here goes your code */
        </script>
      }
    <?php
    }
    add_action('wp_head','my_header_js');

    Creating a custom MU plugin to do this seems terribly cumbersome. Why not just provide in the Upfront page editor some code areas where one can just cut and paste their custom JavaScript code, similar to the way Thrive Themes does this. One area allows one to paste their code to run before the closing </head> tag, one area allows to paste their code just after the page opening <body> tag, and another that allows one to paste their code to run just before the page closing </body> tag of the page.

    There isn't such functionality but this could be a nice addition. Feel free to use our Features & Feedback section for your proposals so that other members and our devs could further engage.
    At the moment there's only a Code element in Upfront's draggable elements which includes a HTML, a CSS and a JS section. Please keep in mind that these code elements can be used inside the body element rather than the head tag.

    Is there perhaps an existing plugin (like perhaps Tracking Code Manager Pro) that would allow one do this easier than having to create a custom MU plugin every time one wants to add some custom JavaScript to a page?

    There's a plugin like Simple Custom CSS & JS that can help you automating these procedures.

    Hope that was some help, take care,
    Dimitris