Insert html & javascript in wordpress

Question

I need to insert the html and javascript files in wordpress, but I'm struggling with embedding a HTML to wordpress.

I made the html file and javascript and css file. How do I insert this file to php?

I already searched for the solution, so I wrote the code like the pictures: Example 1 and Example 2, but I'm really a beginner at php, so it's not working.

I use a vantage-child theme and I put javascript and css files up into the vantage-child folder.

What should I do next?

 <script type="text/javascript" src="/calc/common.js"></script>
<script type="text/javascript" src="/calc/jquery-1.4.4.min.js"></script>
<!-- bin/jquery.slider.min.css -->
	<link rel="stylesheet" href="/calc/css/jslider.css" type="text/css">
	<link rel="stylesheet" href="/calc/css/jslider.blue.css" type="text/css">
	<link rel="stylesheet" href="/calc/css/jslider.plastic.css" type="text/css">
	<link rel="stylesheet" href="/calc/css/jslider.round.css" type="text/css">
	<link rel="stylesheet" href="/calc/css/jslider.round.plastic.css" type="text/css">
 <!-- end -->
	<!-- bin/jquery.slider.min.js -->
	<script type="text/javascript" src="/calc/js/jshashtable-2.1_src.js"></script>
	<script type="text/javascript" src="/calc/js/jquery.numberformatter-1.2.3.js"></script>
	<script type="text/javascript" src="/calc/js/tmpl.js"></script>
	<script type="text/javascript" src="/calc/js/jquery.dependClass-0.1.js"></script>
	<script type="text/javascript" src="/calc/js/draggable-0.1.js"></script>
	<script type="text/javascript" src="/calc/js/jquery.slider.js"></script>
 <!-- end -->
 
 

Answer 1

You have a bunch of miss-conception on your snippets.

First of all JavaScript and CSS are loaded via wp_enqueue_script and wp_enqueue_style

As for your markup it depends where you want to place it and how your theme is written. I would suggest to checkout template hierarchy.

• 이지영: I wrote the wp_enqueue_script/ and wp_enqueue_script in the header.php. please check above link images.
• Rosmarine Popcorn: You need to enqueue script in their propper hooks.

Answer 2

Create new folders in your child theme name 'js' and 'css'

Paste all .js file 'js' and .css files in 'css' folder

In child-theme edit functions.php

and register those files in functions.php file as follow.

// Register Script files
function wp_register_custom_scripts() {
 wp_register_script( 'my-script1', get_template_directory_uri() . '/js/common.js', array(), '1.0.0', true );
 wp_enqueue_script('my-script1');
 wp_register_script( 'my-script2', get_template_directory_uri() . '/js/jquery-1.4.4.min.js', array(), '1.0.0', true );
 wp_enqueue_script('my-script2');
 // bin/jquery.slider.min.js 
 wp_register_script( 'my-script3', get_template_directory_uri() . '/js/query.numberformatter-1.2.3.js', array(), '1.0.0', true );
 wp_enqueue_script('my-script3');
 wp_register_script( 'my-script4', get_template_directory_uri() . '/js/tmpl.js', array(), '1.0.0', true );
 wp_enqueue_script('my-script4');
 wp_register_script( 'my-script5', get_template_directory_uri() . '/js/jquery.dependClass-0.1.js', array(), '1.0.0', true );
 wp_enqueue_script('my-script5');
 wp_register_script( 'my-script6', get_template_directory_uri() . '/js/draggable-0.1.js', array(), '1.0.0', true );
 wp_enqueue_script('my-script6');
 wp_register_script( 'my-script7', get_template_directory_uri() . '/js/jquery.slider.js', array(), '1.0.0', true );
 wp_enqueue_script('my-script7');
}
add_action( 'wp_enqueue_scripts', 'wp_register_custom_scripts' );
// Register Stylesheets
function wp_register_custom_styles() {
wp_register_style( 'slider-style1', get_template_directory_uri() . '/css/jslider.css',false,'1.1','all');
wp_enqueue_style( 'slider-style1' );
wp_register_style( 'slider-style2', get_template_directory_uri() . '/css/jslider.blue.css',false,'1.1','all');
wp_enqueue_style( 'slider-style2' );
wp_register_style( 'slider-style3', get_template_directory_uri() . '/css/jslider.plastic.css',false,'1.1','all');
wp_enqueue_style( 'slider-style3' );
wp_register_style( 'slider-style4', get_template_directory_uri() . '/css/jslider.round.css',false,'1.1','all');
wp_enqueue_style( 'slider-style4' );
wp_register_style( 'slider-style5', get_template_directory_uri() . '/css/jslider.round.plastic.css',false,'1.1','all');
wp_enqueue_style( 'slider-style5' );
}
add_action( 'wp_enqueue_scripts', 'wp_register_custom_styles' );

you can change files path according to your directory sturcture in theme

You can set priority of files

You dont need to call function in perticular page if you register files in fuctions.php it will apply globally.