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

H

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

SEE ALSO:: Formulas to Create a Killer Headline

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>

Download Password Generator Tool Code

Step 6 - Place the Password Generator Tool Code

You can customize appearance, color, font and many more as per your choice.

After placing the password generator tool code, your page like as below:

Step 7: Now click on publish and your password generator tool is ready for use.

Step 7 - Click on Publish - Password Generator Tool

SEE ALSO:: How to Make Basic Contact Form for HTML Website?

Semih Durmuş

- eskişehir eskort - eskort bodrum - adana eskort - ankara eskort - eskort mersin