Adding Javascript Page to Wordpress..?

Hello,

I want to add a new page to my wordpress site with an interactive component i.e. user inputs numbers and it creates a new plot.

I would think that this would be rather simple but have had much difficulty. I have tried different plugins with a github project to test out the plugin but have not had success.

Does anyone have any recommendations on how to iteratively get to where I wan to be? Any blogs? Plugins? etc that could be helpful?

Thanks in advance!

franklin76

on November 10, 2022

Say something nice to franklin76…

Post Comment

1

It def is possible without modifications to your theme files. You need to be able to put html in a place where you want to put your input field (custom html widget or page content).

Can help you write that thing next time I need to switch contexts

gigor

·
4 years ago
·
Reply
1. 1
  
  Thanks! That makes more sense to me, in my reply below to joshdance I mentioned that some code for body didn't feel like it fit in the header or footer so maybe its that custom html block you mentioned where I would add that?
  
  franklin76
  
  ·
  4 years ago
  ·
  Reply
  1. 2
    So you need to host these files somewhere on your site:
    https://github.com/GR-Code/kalman-js/blob/master/matrix.js
    https://github.com/GR-Code/kalman-js/blob/master/sketch.js
    
    Put this in the header, replace martix.js and sketch.js with paths to your files
    
    <script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script> <script src="matrix.js"></script> <script src="sketch.js"></script>
    
    This wherever you want your sketch pad
    
    <div id="sketch-holder"></div>
    
    This for sliders
    
    <div> <div id="sliders" class="right"></div> P:<table id="P"></table><br> Q:<table id="Q"></table><br> R:<table id="R"></table><br> K:<table id="K"></table><br> </div>
    
    And this for lenses:
    
    <div id="checkboxes" >Toggle Lines:</div>
    
    gigor
    
    ·
    4 years ago
    ·
    Reply
  2. 1
    Oh, haven't thought of a much simplier option, just reference it by iframe
    
    Put this where you wanna see the widget
    
    <iframe src="https://gr-code.github.io/kalman-js/" style="width:100%; height:700px"/>
    
    gigor
    
    ·
    4 years ago
    ·
    Reply
  3. 1
    
    I haven't seen wordpress in ages, but I think you can toggle something that allows you to put html directly into page content. Like there should be a switch of the editor into the Code mode.
    
    Also, you can add sidebar widget named "Custom html" and put your stuff there
    
    gigor
    
    ·
    4 years ago
    ·
    Reply
    1. 1
      
      Thanks Gigor, joshdance below helped me get to the solution I needed. Appreciate the help though!
      
      franklin76
      
      ·
      4 years ago
      ·
      Reply
1

You could use a form plugin like https://www.gravityforms.com/ to collect user inputs on pages and display the same submissions as you wish.
Second option:
If you need a more custom solution with the latest WP apis, I would suggest creating a custom gutenberg block that can be attached to any page, the block in turn displays the custom form (create new plot interactive component), the form posts to a custom table. From there you can create the output of the submissions as you want (pagination and custom page templates).
If found this blog series (10 parts) very informative when trying out gutenberg
https://awhitepixel.com/blog/wordpress-gutenberg-create-custom-block-part-9-dynamic-blocks-php-render/

NickBabu

·
4 years ago
·
Reply
1. 1
  
  Thanks for the recommendation, I have not tried gravity forms or gutenberg but will take a look!
  
  franklin76
  
  ·
  4 years ago
  ·
  Reply
  1. 1
    
    You're most welcome, they might all be valid options among the many.
    
    NickBabu
    
    ·
    4 years ago
    ·
    Reply
1

What have you tried so far?

This lists 3 methods to put custom Javascript on a page - https://themeisle.com/blog/wordpress-custom-javascript/ - do any of them work?

joshdance

·
4 years ago
·
Reply
1. 1
  
  Thanks Josh!
  
  I have tried the Header and Footers plugin. Specifically I tried that so that I didn't need to create a child theme and modify the functions.php file.
  
  I am not a software engineer/web developer by trade so I try to avoid major changes if I can i.e. stick with plugins.
  
  If thats not working, I assume it may have to do with my theme interfering with the github project.
  
  Should I just go for the child theme/functions.php change?
  
  franklin76
  
  ·
  4 years ago
  ·
  Reply
  1. 2
    
    You tried the Header Footer, what happened? Like did any code get on the page at all?
    
    This video details how to do it in a few ways. https://www.youtube.com/watch?v=204nVlBUXxU
    
    joshdance
    
    ·
    4 years ago
    ·
    Reply
    1. 1
      
      Nothing happened.
      
      This is the page I am trying to recreate on my website as a start and then I was going to modify from there but I cant reproduce this:
      
      https://gr-code.github.io/kalman-js/
      
      Here is the code I am pulling from:
      
      https://github.com/GR-Code/kalman-js/blob/master/index.html
      
      After watching that video and writing this to you I realize I may have some fundamental misunderstandings.
      
      Can I pull straight from a GitHub repo for my own site or do I need to add those .js files to my own site? If there is an expectation of adding <body> code to this site, would I just add that to the footer? After I added to the header and footer I recognized I couldnt control which page it appeared on and I only want it for one particular page?
      
      Thanks for the help!
      
      franklin76
      
      ·
      4 years ago
      ·
      Reply
      1. 2
        
        Ah got it.
        
        K so yes you are correct, you can't just 'import' a Github.
        
        So here is what you would need to do.
        
        Add the HTML to the post. You can write custom HTML in Wordpress. So take the custom HTML from the Github and put into the Wordpress page. You can use this article to guide you - https://www.hostpapa.com/knowledgebase/add-html-content-wordpress-pagepost/
        
        DON'T just copy everything. Just grab the <main> section. So lines 15 to 31 basically.
        
        Add the Javascript that will talk to the custom HTML elements you just added.
        Notice how the index.html page on Github imports 2 Javascript files.
        
        <script src="matrix.js"></script>
        <script src="sketch.js"></script>
        
        You need both of those files on your page.
        
        So grab all the code in matrix.js, and grab all the code in sketch.js and put it into 1 file.
        
        Then use this article - https://www.wpbeginner.com/wp-tutorials/how-to-easily-add-javascript-in-wordpress-pages-or-posts/ scroll down until you see the put the code on one page (not all pages) and put all the code from the combined files onto the page between the scripts tags like the article says.
        
        That should work. :)
        
        joshdance
        
        ·
        4 years ago
        ·
        Reply
        
        2
        
        It worked!
        
        Had a little bit of trouble navigating those docs but after reading a few times I got the understanding I needed! Now that I have that up and running I can go ahead and modify it for my needs.
        
        Really appreciate the help!
        
        franklin76
        
        ·
        4 years ago
        ·
        Reply
        
        1
        
        No problem! Are you wanting to learn to code? Or just wanted to ship this?
        
        joshdance
        
        ·
        4 years ago
        ·
        Reply
        
        2
        
        I currently can write c++, matlab, and some python. I started a website and I am using it as a project to learn more about web development in general.
        
        I have only started with Wordpress but now would like to extend that knowledge through projects like this one.
        
        I plan to take what I have gotten started with your help and modify it/learn from it to create something different through iteration
        
        franklin76
        
        ·
        4 years ago
        ·
        Reply