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 -->

Rosmarine Popcorn · Accepted Answer · 2016-06-28 13:45:48Z

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.

answered Jun 28, 2016 at 13:45

Rosmarine Popcorn

11k11 gold badges62 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

이지영 Over a year ago

I wrote the wp_enqueue_script/ and wp_enqueue_script in the header.php. please check above link images.

Rosmarine Popcorn Over a year ago

You need to enqueue script in their propper hooks.

Dnyanesh · Accepted Answer · 2016-06-29 17:59:41Z

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.

Collectives™ on Stack Overflow

Insert html & javascript in wordpress

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related