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>
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.
You have error in <script> tag.
Change this line:
<script type="text/javascript>
Into this:
<script type="text/javascript">
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.
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">
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/