Free

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>

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;
 }

Number Guesser JavaScript app with Skeleton UI

View Demo

HTML

JavaScript

Simple Calculator with Vanilla JavaScript

View Demo

Loan calculator with Bootstrap UI

HTML

JavaScript

[Read more…]

Task List Application with Vanilla JavaScript

View Demo

HTML

JavaScript

[Read more…]

How to use ACF image with alt tag

Add this snippet to functions.php

Now You can reuse this function in your WordPress template files with custom class.

<?php acf_image_with_alt_tag('your_image_class'); ?>

ACF Repeater field with post object

How to use Genesis Hooks to customize your theme

Step #1 Install and activate Genesis Visual Hook Guide plugin

If You want to display the positions of Genesis action hooks this plugin will help You a lot. Once installed this plugin adds a drop down menu to the admin bar to select between three views (Hook, Filter, and Markup). Select an option or all three to see the hooks in their actual locations on your current theme.

Step #2 The hooks mark a specific position of website’s layout.

You can pick one and add an action hook to display your custom content. If You want to display a banner on the top of every single post, just copy this snippet in functions.php and set the source url of the image.

But it could be any kind of content for example CTA section, warning message, calculator, etc…

Combine primary and secondary nav menus on mobile in Genesis

Create a file named responsive-menus.js and enqueue it in your functions.php

Free

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

Step #1 Install and activate Genesis Visual Hook Guide plugin

Step #2 The hooks mark a specific position of website’s layout.