How to Make a Password Generator Tool in WordPress without Plugin?

Facebook X Pinterest

With the password term, everybody is aware about it. Password is also called passcode which is used to login into the particular site which you have registered yourself. It must be the strongest one because it can’t be hacked by someone.

Here, tutorial to make strongest password generator tool in WordPress without using any plugin. Yes, it is possible to make a password generator tool in WordPress manually.

Steps to Make Strongest Password Generator Tool in WordPress

Step 1: Open WordPress website’s login page with the relevant login URL.

Step 1 - WordPress Website’s Login Page - Password Generator Tool

For Example:

https://www.YourWebsiteUrl.com/wp-admin/

Step 2: Login to admin panel of the website with the credential details.

Step 2 - Enter Credential Details - Password Generator Tool

After logged in you will be redirected on the website’s dashboard which looks like as below:

Step 2.1 - Dashboard - Password Generator Tool

Step 3: Now hover your mouse cursor on “Pages” and click on “Add New”.

Step 3 - Add New Page - Password Generator Tool

Step 4: Write an attractive title as per your choice.

Step 4 - Write A Title - Password Generator Tool

Step 5: Now click on “+” sign and write “custom html” in the search for a block box and add custom HTML block.

Step 5 - Add Custom HTML Block - Password Generator Tool

Step 6: After adding a custom HTML block just copy below code and paste into your custom HTML block.

<div>
 <label for="length">Password Length:
 <select name="length" id="length" oninput="generate_password()">
 <option value="8">8</option>
 <option value="9">9</option>
 <option value="10">10</option>
 <option value="11">11</option>
 <option value="12">12</option>
 <option value="13">13</option>
 <option value="14">14</option>
 <option value="15">15</option>
 <option value="16">16</option>
 <option value="17">17</option>
 <option value="18">18</option>
 <option value="19">19</option>
 <option value="20">20</option>
 <option value="21">21</option>
 <option value="22">22</option>
 <option value="23">23</option>
 <option value="24">24</option>
 <option value="25">25</option>
 </select>
 </label>
 </div>
 <div>
 <label for="special">
 <input type="checkbox" name="special" id="special" onchange="generate_password()" checked>
 Include Symbols (Ex: !@#$%^&*-)
 </label>
 </div>
 <div>
 <label for="lowercase">   
 <input type="checkbox" name="lowercase" id="lowercase" onchange="generate_password()" checked>
 Include Lowercase (Ex: abcd)
 </label>
 </div>
 <div>
 <label for="uppercase">   
 <input type="checkbox" name="uppercase" id="uppercase" onchange="generate_password()" checked>
 Include Uppercase (Ex: ABCD)
 </label>
 </div>
 <div>
 <label for="numbers">   
 <input type="checkbox" name="numbers" id="numbers" onchange="generate_password()" checked>
 Include Numbers (Ex: 123456789)
 </label>
 </div>
 <div>
 <label for="similar">   
 <input type="checkbox" name="similar" id="similar" onchange="generate_password()" >
 Include Similar Characters (Ex: IloO0)
 </label>
 </div>
 <div>
 <br/>
 <h2>Generated Password</h2>
 <p id="result"></p>
 </div>
 <div>
 <button class="btn btn-primary" id="refresh">Generate Another Password</button>
 </div>
 </div>
 <script>
     document.addEventListener("DOMContentLoaded", (event) => {
         generate_password()
     });
     var special = "!@#$%^&*-"
     var lowercase = "abcdefghijkmnpqrstuvwxyz"
     var uppercase = "ABCDEFGHJKLMNPQRSTUVWXYZ"
     var numbers = "123456789"
     var similar = "lIoO0"
     var result = ''
     var refresh = document.getElementById('refresh')
     refresh.addEventListener('click',generate_password)
     
     function generate_password(){
         let base = ''
         var e = document.getElementById("length");
         var plength = e.options[e.selectedIndex].value;
         if (document.getElementById('special').checked){
             base = base + special
         }
         if (document.getElementById('lowercase').checked){
             base = base + lowercase
         }
         if (document.getElementById('uppercase').checked){
             base = base + uppercase
         }
         if (document.getElementById('numbers').checked){
             base = base + numbers
         }
         if (document.getElementById('similar').checked){
             base = base + similar
         }
         result = ''
         for (i=0; i < plength; i++){
             result+=base.charAt(Math.floor(Math.random()*base.length))
         }
         document.getElementById('result').innerText = result
     }
 </script>