Add code to Wordpress site page

Question

I have this code, attached in JsFiddle and am wondering how i would add it to a single wordpress page? I have tried a few plugins but they just seem to mess up the formatting and stop the javascript from working. Any help would be greatly appreciated. There is a lot of code so i have only added a small snippet here.

<div id="top">  
    <div class= "toptext">  
        <span>Bet Type</span>
        <select id = "typeoption"> 
            <option value="0">Qualifying Bet</option> 
        </select>
    </div>

https://jsfiddle.net/yLqwthyr/1/

Answer 1

You need to modify your jquery code to run your script in noConflict mode.

If you plan to add a single js file, you need to enqueue it with wp_enqueue_script().

A possible way to do this, assuming you want to add your form structure to a page (with an ID and permalink)

 add_action('wp_enqueue_scripts', 'se_40975160');

 function se_40975160(){
      if(is_page('your-page')){
           wp_enqueue_script('jquery');
           wp_register_script('form-js', PATHTOJS . '/js/your-js.js', array('jquery'));

      }
 }

For the jQuery script: When you enqueue script that is dependent on jQuery, note that the jQuery in WordPress runs in noConflict mode, which means you cannot use the common $ alias. You must use the full jQuery instead. Alternately, place your code using the $ shortcut inside a noConflict wrapper.

jQuery( document ).ready( function( $ ) {
// $() will work as an alias for jQuery() inside of this function
[ your code goes here ]
} );

To insert your form structure, you can use add_shortcode() or simply use the visual editor. I will use a shortcode to handle the form response with php. You can see more details in the shortcode api pages.

Answer 2

Step :1 Create Shortcode for the display purpose

function mycustomcode(){
    /*Place your code here*/
}
add_shortcode('mycustomcode','mycustomcode');

Step :2 open file where you want to display just use this shortcode,

In php filecode,

do_shortcode('mycustomcode');

In WYSWYG (Wordpress Editor),

['mycustomcode']

Step :3

En queue you style and script

Answer 3

To edit page, you should first figure out which template the page used.

You could refer the WordPress Template Hierarchy for more detail.

Or you could create a page template for specific use, and assign the page template to the page at wp-admin.

If you still can't find the template to edit, there are plugins like Show Current Template and Display Template Name to help you find it out.

Remember, when you are editing the template files, do it in the child theme.