Free

Display current user role in WordPress

Add this snippet to functions.php:

Use this shortcode [display_user_role] to display the user role wherever you want.

How to Change Genesis Widget Title from H3 to div

Classic Widgets – Disable Block Editor for Widgets

Delete all WooCommerce Products

Run an SQL command through PhpMyAdmin

Make sure, that you made backup your database before you execute the SQL statement! Than select table “wp_posts” (if you have wp prefix) and run the SQL statement. If your database prefix is not the default wp_, you will need to replace this with the database prefix you are using.

WordPress Loop with Taxonomy for Custom Post Type

Fetch post data from another WordPress website with Rest API

Redirect after MailPoet subscription

This snippet will redirect the visitor after three seconds to a specific thank you page.

const submit = document.querySelector('.wysija-submit');
submit.addEventListener('click', () => {
    setTimeout(() => window.location.replace("YOUR_CUSTOM_URL"), 3000);
});

Fixing Site Health’s Security Headers Error WordPress

Add this snippet to .htaccess

# Really Simple SSL
 Header always set Strict-Transport-Security: "max-age=31536000" env=HTTPS 
 Header always set Content-Security-Policy "upgrade-insecure-requests"
 Header always set X-Content-Type-Options "nosniff"
 Header always set X-XSS-Protection "1; mode=block"
 Header always set Expect-CT "max-age=7776000, enforce"
 Header always set Referrer-Policy: "no-referrer-when-downgrade"
# End Really Simple SSL

HSTS – When this header is set on your domain, a browser will do all requests to your site over HTTPS from then on.
Upgrade-Insecure-Requests – This header is an additional method to force requests to your own domain over https://.
X-Content-Type-Options – This header will force the browser not to “guess” what kind of data is passed. If the extension is “.doc”, the browser should get a .doc file, not something else (a .exe).
X-XSS-Protection – Will stop pages from loading if a reflected cross-site scripting (XSS) attack is detected.
Expect-CT, Certificate Transparency – A Certificate Authority (the issuer of the SSL certificate) needs to log the certificates that are issued in a separate log, the CT framework., preventing fraud.
No Referrer When Downgrade header – Only sets a referrer when going from the same protocol and not when downgrading (HTTPS -> HTTP).

Fetch API – Local text, json, external API – with Arrow Functions

Get Local Text File Data

function getText() {
  fetch('test.txt')
    .then(res => res.text())
    .then(data => {
      console.log(data);
      document.getElementById('output').innerHTML = data;
    })
    .catch(err => console.log(err));
}

Get Local JSON Data

function getJson() {
  fetch('posts.json')
    .then(res => res.json())
    .then(data => {
      console.log(data);
      // This is an array so we have to loop through it
      let output = '';

      data.forEach(function(post){
        output += `<li>${post.title}</li>`;
      });
      document.getElementById('output').innerHTML = output;

    })
    .catch(err => console.log(err));
}

Get External API Data

function getExternal() {
  fetch('https://api.github.com/users')
    .then(res => res.json())
    .then(data =>  {
      console.log(data);
      let output = '';

      data.forEach(function(user){
        output += `<li>${user.login}</li>`;
      });
      document.getElementById('output').innerHTML = output;

    })
    .catch(err => console.log(err));
}

Fetch API – Local text, json, external API

View Demo

Fetch API is a new standard for dealing with http requests.

Get Local Text File Data

document.getElementById('button1').addEventListener('click', getText);

function getText() {
  fetch('test.txt')
    .then(function(res){
      return res.text();
    })
    .then(function(data) {
      console.log(data);
      document.getElementById('output').innerHTML = data;
    })
    .catch(function(err){
      console.log(err);
    });
}

Get Local JSON Data

document.getElementById('button2').addEventListener('click', getJson);

// Get local json data
function getJson() {
  fetch('posts.json')
    .then(function(res){
      return res.json();
    })
    .then(function(data) {
      console.log(data);
      // This is an array so we have to loop through it
      let output = '';

      data.forEach(function(post){
        output += `<li>${post.title}</li>`;
      });
      document.getElementById('output').innerHTML = output;

    })
    .catch(function(err){
      console.log(err);
    });
}

Get external API data

document.getElementById('button3').addEventListener('click', getExternal);

function getExternal() {
  fetch('https://api.github.com/users')
    .then(function(res){
      return res.json();
    })
    .then(function(data) {
      console.log(data);
      // This is an array so we have to loop through it
      let output = '';

      data.forEach(function(user){
        output += `<li>${user.login}</li>`;
      });
      document.getElementById('output').innerHTML = output;

    })
    .catch(function(err){
      console.log(err);
    });
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" />
  <link rel="icon" href="#">
  <title>Ajax Sandbox</title>
</head>
<body>
  <div class="container">
    <h1>Fetch API Sandbox</h1>
    <button id="button1">Get Text</button> 
    <button id="button2">Get JSON</button>
    <button id="button3">Get API Data</button>
    <br><br>
    <div id="output"></div>
  </div>

  <script src="app.js"></script>
</body>
</html>

Fetch API with Bootstrap 5

View Demo

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.83.1">
    <title>Breaking Bad API with Bootstrap 5</title>
    <link rel="icon" href="#">

    <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/album/">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>

    
  </head>
  <body>
    
<header>
  <div class="collapse bg-dark" id="navbarHeader">
    <div class="container">
      <div class="row">
        <div class="col-sm-8 col-md-7 py-4">
          <h4 class="text-white">About</h4>
          <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
        </div>
        <div class="col-sm-4 offset-md-1 py-4">
          <h4 class="text-white">Contact</h4>
          <ul class="list-unstyled">
            <li><a href="#" class="text-white">Follow on Twitter</a></li>
            <li><a href="#" class="text-white">Like on Facebook</a></li>
            <li><a href="#" class="text-white">Email me</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="navbar navbar-dark bg-dark shadow-sm">
    <div class="container">
      <a href="#" class="navbar-brand d-flex align-items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
        <strong>Fetch API</strong>
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
  </div>
</header>

<main class="bg-dark">

  <section class="py-5 text-center container">
    <div class="row py-lg-5">
      <div class="col-lg-6 col-md-8 mx-auto">
        <h1 class="fw-light text-white">Breaking Bad API</h1>
        <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
        <p>
          <a href="#" id="button1" class="btn btn-lg btn-primary my-2 bg-danger bg-gradient border-0">Get Data</a>
        </p>
      </div>
    </div>
  </section>

  <div class="album py-5 bg-dark">
    <div class="container">

      <div id="output" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">

      </div>
    </div>
  </div>

</main>

<footer class="text-muted py-5 bg-dark">
  <div class="container">
    <p class="float-end mb-1">
      <a href="#">Back to top</a>
    </p>
    <p class="mb-1">Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
    <p class="mb-0">New to Bootstrap? <a href="/">Visit the homepage</a> or read our <a href="/docs/5.0/getting-started/introduction/">getting started guide</a>.</p>
  </div>
</footer>


    <script src="app.js"></script>

      
  </body>
</html>

JavaScript

document.getElementById('button1').addEventListener('click', getExternal);

// Get external API data
function getExternal() {
  fetch('https://www.breakingbadapi.com/api/characters ')
    .then(function(res){
      return res.json();
    })
    .then(function(data) {
      // This is an array so we have to loop through it
      let output = '';

      data.forEach(function(character){
        output += `
        <div class="col">
        <div class="card text-center border-0">
          <div class="card-img-top" style="
            background-image: url(${character.img});
            background-size: cover;
            width: 100%;
            height: 500px;
          "></div>
          <h4 class="card-header">
            ${character.name} (${character.nickname})
          </h4>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">${character.portrayed}</li>
            <li class="list-group-item">${character.occupation}</li>
          </ul>
        </div>

          <div class="card shadow-sm">
          </div>
        </div>
        
        `;
      });
      document.getElementById('output').innerHTML = output; 

    })
    .catch(function(err){
      console.log(err);
    });
}

How to add logo to Genesis Footer

Create a custom hook where You want to place the logo

<?php do_action('genesis_footer_logo'); ?>

functions.php

// =========================================================================
// Adds the WordPress custom logo to the footer.
// =========================================================================
function theme_prefix_output_custom_logo_footer() {
    if ( current_theme_supports( 'genesis-custom-logo' ) ) {
        add_action( 'genesis_footer_logo', 'the_custom_logo', 11 );
    }
}
add_action( 'after_setup_theme', 'theme_prefix_output_custom_logo_footer', 11 );

Receive data from external API (Chuck Norris jokes)

View Demo

Generate Chuck Norris jokes asynchronously from external API of Internet Chuck Norris Database.

https://api.icndb.com/jokes/random/

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" />
  <link rel="icon" href="#">
  <title>Chuck Norris API</title>
  <style>
      .imgBx img{
          border-radius: 50%;
          display: block;
          margin: auto;
          max-width: 200px;
      }
      button{
          display: block;
          margin: 30px auto;
      }
      .text-center{
          text-align: center;
          margin-top: 20px;
      }
      form input{
          display: block;
          margin: auto;
      }
      form label{
          text-align: center;
      }
  </style>
</head>
<body>
    <div class="container">
        <div class="imgBx">
            <img src="norris.jpg" alt="Chuck Norris">
        </div>
        <div class="txtBx">
            <h1 class="text-center">Chuck Norris API</h1>
        </div>
        <form>
            <div>
                <label for="number">Number of jokes</label>
                <input type="number" id="number">
            </div>
        </form>
        <button id="button">Get Jokes</button>

        <ul class="jokes"></ul>
    </div>

  <script src="app.js"></script>
</body>
</html>

JavaScript

document.getElementById('button').addEventListener('click', getJokes);

function getJokes(e) {
    const number = document.querySelector('input[type="number"]').value;

    const xhr = new XMLHttpRequest();

    xhr.open('GET', `http://api.icndb.com/jokes/random/${number}`, true);

    xhr.onload = function(){
        if(this.status === 200){

            const response = JSON.parse(this.responseText);

            let output = '';

            if(response.type === 'success'){
                response.value.forEach(function(joke){
                    output += `
                        <li>${joke.joke}</li>
                    `;
                });

            } else{
                output += '<li>Something went wrong</li>';
            }

            document.querySelector('ul.jokes').innerHTML = output;
        }
    }
    xhr.send();

    e.preventDefault();
}

Receive data from JSON file with Ajax

View Demo

document.getElementById('button1').addEventListener('click', loadCustomer);
document.getElementById('button2').addEventListener('click', loadCustomers);

// Load Single Customer
// Create a function named LoadCustomer and passing the Event Object 
function loadCustomer(e){
    const xhr = new XMLHttpRequest();

    xhr.open('GET', 'customer.json', true);

    xhr.onreadystatechange = function(){

        if(this.readyState === 4 && this.status === 200){

            const customer = JSON.parse(this.responseText);

            const output = `
                <ul>
                    <li>ID: ${customer.id}</li>
                    <li>Name: ${customer.name}</li>
                    <li>Company: ${customer.company}</li>
                    <li>Phone: ${customer.phone}</li>
                </ul>
            `;

            document.getElementById('customer').innerHTML = output;
        }
    }

    xhr.send();

    e.preventDefault();
}

// Load Customers
function loadCustomers(e){
    const xhr = new XMLHttpRequest();

    xhr.open('GET', 'customers.json', true);

    xhr.onreadystatechange = function(){

        if(this.readyState === 4 && this.status === 200){

            const customers = JSON.parse(this.responseText);

            let output = '';

            // We can't just output the data, we need to loop through

            customers.forEach(function(customer)  {

                output += `
                <ul>
                    <li>ID: ${customer.id}</li>
                    <li>Name: ${customer.name}</li>
                    <li>Company: ${customer.company}</li>
                    <li>Phone: ${customer.phone}</li>
                </ul>
            `;  
            });

            document.getElementById('customers').innerHTML = output;
        }
    }

    xhr.send();

    e.preventDefault();
}

Book List Application with JavaScript ES6

View Demo

HTML

JavaScript

Book List Application with JavaScript ES5

View Demo

I have created a simple book list application with JavaScript ES5.

HTML

JavaScript

WordPress Customizer phone, email and social links

Display contact info

CSS

ul.social {
     display: flex;
     margin: 30px auto;
     justify-content: space-between;
     width: 130px;
 }

Free

Run an SQL command through PhpMyAdmin

Add this snippet to .htaccess

Get Local Text File Data

Get Local JSON Data

Get External API Data

Get Local Text File Data

Get Local JSON Data

Get external API data

HTML

HTML

JavaScript

HTML

JavaScript

HTML

JavaScript

HTML

JavaScript

Display contact info

Display social icons

CSS

HTML

JavaScript

HTML

JavaScript

HTML

JavaScript