I have converted my PHP website to a WordPress theme but my Bootstrap modal is not opening in WordPress.
***Header.php***
<a id="modal_trigger" href="#modal" class="sign-in-up"><i class="fa fa-user"></i> Sign In/Up</a>
<div id="modal" class="modal fade" role="dialog" >
<div class="popupHeader">
<span class="header_title">Login</span>
<span class="modal_close"><i class="fa fa-times"></i></span>
</div>
<section class="popupBody">
<div class="social_login">
<div class="">
<a href="#" class="social_box fb">
<span class="icon"><i class="fab fa-facebook"></i></span>
<span class="icon_title">Connect with Facebook</span>
</a>
<a href="#" class="social_box google">
<span class="icon"><i class="fab fa-google-plus"></i></span>
<span class="icon_title">Connect with Google</span>
</a>
</div>
<div class="centeredText">
<span>Or use your Email address</span>
</div>
<div class="action_btns">
<div class="one_half"><a href="#" id="login_form" class="btn">Login</a></div>
<div class="one_half last"><a href="#" id="register_form" class="btn">Sign up</a></div>
</div>
</div>
<div class="user_login">
<form action="" method="post">
<label>Email / Username</label>
<input name="username" type="text" id="username" />
<br />
<label>Password</label>
<input name="password" type="password" id="password" />
<br />
<div class="checkbox">
<input id="remember" type="checkbox" />
<label for="remember">Remember me on this computer</label>
</div>
<div class="action_btns">
<div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
<div class="one_half last"><button type="submit" class="btn btn_red">Login</button></div>
</div>
</form>
<a href="#" class="forgot_password">Forgot password?</a>
</div>
<div class="user_register">
<form action="" method="post">
<label>Username</label>
<input name="username" type="text" id="username" />
<br />
<label>Email Address</label>
<input name="email" type="email" id="email" />
<br />
<label>Password</label>
<input name="password" type="password" id="password" />
<br />
<div class="checkbox">
<input id="send_updates" type="checkbox" />
<label for="send_updates">Send me occasional email updates</label>
</div>
<div class="action_btns">
<div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
<div class="one_half last"><button type="submit" class="btn btn_red">Register</button></div>
</div>
</form>
</div>
</section>
</div>I tried hard but did not find any solution. I have imported all the necessary files like Bootstrap and JavaScript but still modal is not working. I have a header.php file in which I have an anchor tag and I want to open a modal when clicking on it.
2
Answers
Maybe you didn’t enqueue bootstrap properly.
first, enqueue your bootstrap CSS and JS.
For enqueue, your style & JS WordPress has an action hook.
You have to do that inside your fuctions.php
your_scripts is your callback function. you can name it whatever your want.
wp_enqueue_style takes 5 parameter.1st is a unique id, the second is your src or link, the third is dependency, the fourth is version and the last is media. for know, more details follow the below link.
[https://developer.wordpress.org/reference/functions/wp_enqueue_style/][1]
wp_enqueue_script also takes 5 parameters.
$handle is the name for the script.
$src defines where the script is located.
$deps is an array that can handle any script that your new script depends on, such as jQuery.
$ver lets you list a version number.
$in_footer is a boolean parameter (true/false) that allows you to place your scripts in the footer of your HTML document rather than in the header so that it does not delay the loading of the DOM tree.
for Know, more details follow the below link.
[https://developer.wordpress.org/reference/functions/wp_enqueue_script/][1]
Now enqueue your style and CSS and try your modal.
Your
<a>tag needsdata-toggle="modal"anddata-target="#modal"attributes. See the Bootstrap 4 modal documentation.