WordPress.org

Ready to get started?Download WordPress

Forums

adding Javascript to a single page (25 posts)

  1. jnascarb
    Member
    Posted 1 year ago #

    Hi

    I'm a webdev, but not a WordPress user & I'm completely confused by http://codex.wordpress.org/Using_Javascript .. it assumes too much that I don't know.

    I'm working on an existing WordPress blog and there's a page that contains a Javascript calculator that doesn't work now we've moved to WP. The Javascript is on the page, and not required elsewhere.

    Here's how much I don't know .. I've edited the page and put in an wp_enqueue_script() call, and also one in <php ?> and both were published to the page.

    Would anyone care to walk me through it or give me a hint? Tbh, wp_enqueue_script() seems overkill, it's just one-off script on the one page.

  2. reghyz
    Member
    Posted 1 year ago #

    hi,

    you said that you Js is "on the page", do you mean the js code or the include to a .js file ?
    is it called/included into the header ? or in the page template (and is it a spécific page template) ?

    i'm agree with the fact that wp_enqueue_script() seems overkill, you could also use you js the old way, if it depends from others scripts (like jquery ?) you should add it after your wp_head() call (in case the others dependencies would be loaded with the wp_enqueue_script() method).

    if youre adding it from the header.php, you could do this to use it for this specific page you want, where "the_page_slug" is your page slug id from the admin, and js/ is your js/ folder in your template :

    <?php if( $post->post_name == "the_page_slug" ) { ?>

    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/"></script>
    or
    <script> ... the js code ... </script>

    <?php } ?>

    hope this could help..

  3. jnascarb
    Member
    Posted 1 year ago #

    Thanks reghyz,

    The js code is on the page, it's basically where the text content goes, so no, not in the header, nor in the template.

    It doesn't depend on anything else, it's not JQuery or anything.

    I'll try the header php and I'll let you know how far I get :-)

    All the best
    J

  4. birgire
    Member
    Posted 1 year ago #

    you could write your own javascript shortcode.

    Here is one basic example you can add to your functions.php file in the current theme directory:

    //[myjavascript]
    function myjavascript_func( $atts ){
     return "<script>alert('hello world');</script>";
    }
    add_shortcode( 'myjavascript', 'myjavascript_func' );

    add the shortcode [myjavascript] into your post/page editor content box, and you should get "hello world" only on that post/page.

    More about shortcodes here:
    http://codex.wordpress.org/Shortcode_API

    Hope this helps.

  5. birgire
    Member
    Posted 1 year ago #

    another version:

    if you want the javascript in the head tags for only one post (id=123), you could add this into your functions.php :

    function myjavascript_in_wp_head($pid){
       if (is_single()) {
           global $post;
           if($post->ID=="123"){ // only for post Id = 123
                echo "<script>alert('hello world');</script>";
           }
       }
    }
    add_action( 'wp_head', 'myjavascript_in_wp_head' );

    (untested)

    ps: you can also check for $post->post_name or $post->post_title instead of $post->ID.

  6. jnascarb
    Member
    Posted 1 year ago #

    Seems I need FTP access for all this, and I haven't got that. I'll go seek it, but if there's a way to do it without FTP access, do spill. (Thanks for your help so far)

  7. jnascarb
    Member
    Posted 1 year ago #

    In
    function myjavascript_in_wp_head($pid)
    why am I asking for $pid?

  8. birgire
    Member
    Posted 1 year ago #

    sorry, it should not have been there ;-)

  9. birgire
    Member
    Posted 1 year ago #

    have you also tried to paste the javascript into the editor (html view) for this particular post/page?

    For example:

    <script>alert('hello world');</script>

    (I don't recommend it, I would rather use the other methods)

  10. jnascarb
    Member
    Posted 1 year ago #

    Sorry birgire :-), I posted it into functions.php and the blog fell over, so I was just wondering why that was.

    Actually, you're right, that Hello World works (dammit, embarassed :-) ) .. yeah, maybe I jumped too early to conclude that the code that was working in a different platform and now wasn't in WP was because JS was blocked. It's not. Thanks for your help, I'll delve into that. No doubt I'll be back with another question.

  11. birgire
    Member
    Posted 1 year ago #

    ok good luck with your project

    cheers

  12. jnascarb
    Member
    Posted 1 year ago #

    Ah, OK, not so fast.

    So Javascript runs if I say <script>alert('hello world');</script> but the Javascript comprises functions called from form fields (onchange, etc). The functions don't work.

    They are defined above the HTML.

    What's wrong?

  13. jnascarb
    Member
    Posted 1 year ago #

    Does WordPress somehow prevent functions but allow single Javascript lines? Makes no sense ..

  14. esmi
    Forum Moderator
    Posted 1 year ago #

  15. ladyopita
    Member
    Posted 1 year ago #

    I have been looking for an answer to this for a long time and have reading and re-reading 'Using_Java script' and many other suggestions but no matter what I do I still can't make it work.

    As jnascarb mentioned above... my javascript is not a simple 'hello world'. The Hello World works fine.

    The javascript gets executed within a form that has onfocus, onkeyup, etc.. How do you make it work? I only need this javascript in one page and only one page. I even created a page template; I used the enqueue...and many other suggestions and none of them work. Obviously I'm doing something wrong... but what am I doing wrong?

    My page displays.. my form displays but yet the java script does not appear to be working. The whole purpose of the javascript is to inform the user of the number of allowed characters they have left (based on a hardcoded maximum character) as they type in the input form. Similar how twitter counts the characters entered for a tweet. The java script works when I use plain HTML but it does not work with WP.

    Perhaps jnascarb found the answer?

    Thanks in advance

  16. Andrew
    Forum Moderator
    Posted 1 year ago #

    If you require support on your issue, create your own thread.

  17. ladyopita
    Member
    Posted 1 year ago #

    thanks I will. I thought that because is the same topic and the same problem... it could be using the same post.

  18. birgire
    Member
    Posted 1 year ago #

    One way would be to translate all the inline javascript code into jQuery code that can be put into an external javascript file or in the header/footer, using the methods I mentioned above or the enqueue script method.

    cheers

  19. jnascarb
    Member
    Posted 1 year ago #

    Thanks LadyOpita, yes, I think we have the same problem so thanks for speaking up.

    I'm off to read the Using_Javascript thing.

    Birgire, I know jQuery's great and all, but it feels like a big library for what I want to do. Anyway, my code isn't jQuery code, it's proper Javascript, it doesn't feel right to re-write that to use a big library when it already works fine, WordPress is the problem* :-)

    * How to make friends and influence people on a WordPress forum :-)

  20. esmi
    Forum Moderator
    Posted 1 year ago #

    Whether you use jQuery or not, you should still place your javascript in an external file and enqueue it using wp_enqueue_script().

  21. birgire
    Member
    Posted 1 year ago #

    @jnascarb

    another way: you could write a page template for your form (including your inline javascript)

    http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates

    but an external javascript file is cleaner ;-)

    cheers

  22. jnascarb
    Member
    Posted 1 year ago #

    Ta, the "Creating a Multiple Script File" part of http://codex.wordpress.org/Using_Javascript is where I'm at, I'll let you know if it works and if not, I'll come back to those, tvm :-)

  23. cparente
    Member
    Posted 11 months ago #

    Hi all, total JS noob and same problem. And in other online forums the etiquette is to try and NOT start new threads for the same issue. Is WP Support different?

    I've got JavaScript code that I want to work on a single post. Tried manually entering in Text field, nothing. Tried Javascript and CSS plugin, didn't work. Could someone explain the "external file" method?

    If helpful, I'm trying to replicate the wine value comparison tool shown on this page, widget down the right side: http://www.wellesleywinepress.com/2009/05/modeling-value-introducing-wwpqpr.html

    Thanks in advance.

  24. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    Is WP Support different?

    Yes, per: http://codex.wordpress.org/Forum_Welcome#Where_To_Post

    It helps keep the forums better organized and avoids the difficulties in having multiple conversations at the same time with what are often not actually the same situations.

    Here's some general info -

    http://codex.wordpress.org/Using_Javascript

    But please do start a new thread if you need more help.

  25. cparente
    Member
    Posted 11 months ago #

    Thanks WPyogi, I'll follow the rules and do so. But just some feedback -- when I have problems I'm constantly finding relevant threads, that unfortunately always seem to be closed. Other forums don't shut down the conversation like WP Support.

    Appreciate the link.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags