How to implement JS from HTML to WordPress?

Question

Recently, I'm really interested in building WordPress template. I started doing it, but I am really stuck now. The thing is, i have HTML file of my frontpage (index.html), and the CSS and JS all in their folders. Now, I can't seem to find a way to make the JS work on WordPress platofrm, like its working on HTML.

I only want to make that menu work, don't mind the other bugs.

http://brainstorm.comoj.com/ -- HTML

http://bsarafimov21.byethost16.com/ -- WordPress

Here is the code i want to transfer from HTML to WordPress:

<script type="text/javascript">
    $(document).ready(function () {
        var trigger = $('.hamburger')
            , overlay = $('.overlay')
            , isClosed = false;

        trigger.click(function () {
            hamburger_cross();
        });

        function hamburger_cross() {

            if (isClosed == true) {
                overlay.hide();
                trigger.removeClass('is-open');
                trigger.addClass('is-closed');
                isClosed = false;
            } else {
                overlay.show();
                trigger.removeClass('is-closed');
                trigger.addClass('is-open');
                isClosed = true;
            }
        }

        $('[data-toggle="offcanvas"]').click(function () {
            $('#wrapper').toggleClass('toggled');
        });
    });
</script>

Dude I still see <script type="text/javascript> in your page. the " is still missing. — hemnath mouli
– hemnath mouli, Commented Jun 25, 2016 at 9:12
@boka18 firstly try to include custom.css which you already have the referer link and also make script tag available inside html tag. Just check these few fixes, As I can see menu is working but due to white background it is not visible. — Manish
– Manish, Commented Jun 25, 2016 at 9:59

meck373 · Accepted Answer · 2016-06-25 10:07:27Z

2

It is best practice to implement JavaScript via the wordpress function.php. Customize the following script to your own needs.

/**
* Enqueue a script with jQuery as a dependency.
*/

function wpdocs_scripts_method() {
    wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom_script.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );

Source: https://developer.wordpress.org/reference/functions/wp_enqueue_script/ https://developer.wordpress.org/themes/basics/including-css-javascript/

answered Jun 25, 2016 at 10:07

meck373

1,1241 gold badge19 silver badges32 bronze badges

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

Comments

Emrah Celik · Accepted Answer · 2016-06-25 09:53:26Z

Your javascript code working correctly but your html structre different than source.

Add this code between HEAD tag.

<link id="custom-css" rel="stylesheet" type="text/css" href="http://brainstorm.comoj.com/css/custom.css" media="all">

Add these lines into #wrapper div.

<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
        <ul class="nav sidebar-nav">
            <li class="sidebar-brand">
                <a href="#">
                   v <small>0.0.1</small>
                </a>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-home"></i> Home</a>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-fw fa-plus"></i> Male <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li class="dropdown-header">Male clothes</li>
                <li><a href="male/shirts.html">Shirts</a></li>
                <li><a href="#">T-Shirts</a></li>
                <li><a href="#">Trousers</a></li>
                <li><a href="#">Hats</a></li>
                <li><a href="#">Belts</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-plus"></i> Female <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li class="dropdown-header">Female clothes</li>
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-cog"></i> Third page</a>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-plus"></i> Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li class="dropdown-header">Dropdown heading</li>
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-bank"></i> Page four</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-dropbox"></i> Page 5</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-twitter"></i> Last page</a>
            </li>
        </ul>
    </nav>

By the way. You dont need to add text/script attribute. Browser defaults text/script for script tag and text/css for link tag.

semanser · Accepted Answer · 2016-06-25 09:04:35Z

0

You have error in <script> tag.

Change this line:

 <script type="text/javascript>

Into this:

<script type="text/javascript">

answered Jun 25, 2016 at 9:04

semanser

2,3682 gold badges19 silver badges36 bronze badges

1 Comment

boka18 Over a year ago

Done. That was a mistake, but didn't fix anything

Aron · Accepted Answer · 2016-06-25 09:29:02Z

0

In you HTML in the WordPress site you have changed the id of your <div> from wraper to page-content-wrapper so to get you JavaScript to work all you need to do is change this:

<div id="page-content-wrapper">

to this:

<div id="wrapper">

answered Jun 25, 2016 at 9:29

Aron

15013 bronze badges

2 Comments

boka18 Over a year ago

nice. It moves now, but still not the way it should be. Can u look further and tell me some more info. Really appreciate this!!

Aron Over a year ago

@boka18 it looks ok to me I think all you need to do now is add your <nav> from the HTML version and you should be good to go :)

Mr Lister · Accepted Answer · 2016-06-26 17:53:43Z

0

If you put it in a separate JS file, you can simply call it in the <head> of your wordpress:

<head>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>

The header tag can be found in header.php, in your main folder of your theme. The default location for that file is: wp-content\themes\your-theme\header.php

Hope this helps :)

EDIT: So essentially, you can call it the same as you do with an HTML file. Wordpress PHP has split up your main page template in a header file, a body file, and a footer file. Find the header file, and you can add your script links just like you would in HTML.

edited Jun 26, 2016 at 17:53

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Jun 25, 2016 at 9:15

Pieter Bron

113 bronze badges

Collectives™ on Stack Overflow

How to implement JS from HTML to WordPress?

5 Answers 5

Comments

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related