embeding Javascript

  • Hi there,
    I am using a theme with an ability to embed html code. I have the following javascript widget that I would like to be visible on my page. I inserted the following line in the header section using the header and footer plugin. 

    <script src="https://cinkciarz.pl/widget/cinkciarz.widget.js"></script>
How do I embed this script with the page?
<div id="cinkciarzPlWidget"></div>
<div id="cinkciarzPlWidgetNbp"></div>

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @jaygr3y,

    I recommend adding 

    
<script src="https://cinkciarz.pl/widget/cinkciarz.widget.js"></script>

    to your footer so that your divs are declared before the JavaScript library runs. This will avoid any JavaSript errors.

    Putting this line of code in the footer will also help avoid slowing down your page due to waiting for the cinkciarz.widget.js library to load.

    Then, where ever you want the widget to show up on your page, insert a code snippet (or custom HTML) block or component (whatever your theme calls it) first. Then copy/paste your divs into that HTML/snippet element.

    Here’s a simple straight-up HTML mock demo for you on CodePen as an example.

    Does that make sense? If not, ask.

    Thanks! ??

    Moderator bcworkz

    (@bcworkz)

    While it is possible to place <script> elements directly onto templates, for the record, the recommended way to reference external script files is by using wp_enqueue_script(). With this function, you specify which other registered scripts it depends upon to ensure they get loaded first. You can also specify your script is loaded from the footer instead of the head section.

    If done correctly, the resulting output is the same either way. But only one is The WordPress Way? ??

    Hello @jaygr3y,

    Just to clarify that I’m not implying that you add my code snippet directly to any WordPress PHP template files.

    Since you said you are using the Insert Headers and Footers plugin, I am suggesting to move your code into the footer section of the plugin. I’ve already stated this in my CodePen that I posted earlier ;-).

    If you decide to manually enqueue that script yourself (must be comfortable with coding PHP), then please use the enqueue method that @bcworkz kindly pointed out.

    Here’s a usage example of enqueuing CSS, a JS library, and inline JS: https://gist.github.com/marklchaves/1c616eb28382b813232c23e0f29d164a

    Cheers ??

    • This reply was modified 4 years, 5 months ago by mark l chaves. Reason: Typos
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘embeding Javascript’ is closed to new replies.