Remove featured image from Storefront single post
Echo custom post type taxonomy name and slug with function
Force full-width layout on specific single page in Genesis
Show posts with descending order number
How to Show Total Number of Posts, Pages, or Custom Post Types
AJAX Filter for WordPress Custom Post Type Taxonomy
AJAX Filter for WordPress Categories without Plugin
AJAX request from MySQL database
AJAX – Submit data with POST request into a MySQL database
AJAX request – JSON from external API (Breaking Bad)
In this post I’m going to show You, how to use AJAX to fetch data from an external API asyncronously behind the scenes and put it into our website.
We pull the data from https://breakingbadapi.com
HTML
JavaScript
SCSS
AJAX request – JSON local file
Request single JSON data
Request array JSON data
AJAX request – TXT file
With Ajax You can receive data asynchronously without page reload.
Method 1 – onload function
Method 2 – readystate function
Write text from TXT file in a specific div with AJAX
JavaScript addEventListener click
Dropdown Ajax Filter for Custom Post Type Taxonomy
Step 1
Filter by taxonomy terms
Step 2
Send a Request and to Receive Result Data
Step 3
Process the Request in functions.php
jQuery – Add class / remove class
How do I list Custom Post Type’s Taxonomies
Disable right click with JavaScript
If You want to protect your website content by prevent right click there is a single line of JavaScript code to do it:
How to display different menu for logged-in users
Put this snippet in the functions.php
Universal Parallax in Genesis
Demo
Step 1
Download the javascript files, or install via npm
Step 2
Enqueue the JS files in your child theme’s functions.php
Step 3
Create the HTML structure in a the file names parallax.php
Your Child Theme/templates/home/parallax.php
Step 4
Add some line of SCSS
Step 5
Create the shortcode for the above created parallax.php file
Step 6
Put the shortcode [parallax] wherever You want to be shown the parallax background.
Change menu toggle breakpoint in Storefront
I created a child theme with Storefront for a hungarian chocolate manufacture called Sweetic.

When I was shrinking the browser window the standard navigation menu didn’t work the proper way:

I addad this snippet to SCSS to fix it:

Extend the free WooCommerce Wholesale Prices to show tax excluded price
While I was working on one of my projects I was wondering if is it possible to extend the features of the free WooCommerce Wholesale Prices plugin?
Regarding to my client’s request I need to display prices in the shop as tax excluded. So If You don’t want to pay for the premium add-on, that includes a bunch of other features that You don’t even need, here’s my snippet that solves this problem.
Remove the regular price if You are logged in as a wholesaler user role.
Remove tax included price for wholesalers in WooCommerce
Change breadcrumbs home text and link in Storefront
Change breadrumbs only on single product page
Read more in official WooCommerce documentation
How to use Genesis Custom Blocks
WP Engine released the Genesis Custom Blocks plugin, that’s going to be replace the famous Advanced Custom Fields plugin. Best for all, that it works not only with Genesis Themes, but will also you can use with any WordPress theme that supports Gutenberg Block Editor.
1) Install and activate Genesis Custom Blocks plugin

2) Create some custom fields

3) Create a folder in your theme named blocks and a template file with block-{slug}.php

Just copy and paste the following snippet in your template file
4) Let’s go ahead and add your just created block with Gutenberg wherever You want

5) Now You can edit each content field from the block editor

6) The content is going to be shown in the front end

7) After I added some styling to the content, it will be look like this
This is an SCSS code, so need to compile it to make it work.

Now you have nothing to do but drag and drop the widget wherever You want to be shown up this nice looking CTA section.
Change Genesis Search Widget’s Placeholder Text
Add this to functions.php
Change breadcrumbs home text in Genesis
Add this to functions.php
CSS Gradient Text

Landing Page with GSAP Animations
Movie Landing Page with Video Popup
Social Media Profile UI Design
Responsive Grid Layout UI Design HTML + CSS
Webshop Product Page UI Design HTML, CSS, JS
Coca Cola Landing Page Concept
Landing Page with CSS Animations – Karate
Creative Web Design for Fashion Website
Responsive Website with Smooth Scroll Navigation
Add “sticky” class to header when scrolling window
Responsive Product Landing Page – Laptop
Portfolio Landing Page Design HTML, CSS
Card UI Design with CSS Flexbox
Cards Hover Animation with CSS Flexbox
Masonry Grid Layout with CSS
Cards with Neumorphism and Hover Effect – CSS
Cards with Skewed Edge and Hover Effect
Cards with CSS Animation Hover Effect
Neumorphism Box-Shadow Effect

HTML
<body> <div class="container"> <div class="card"> <div class="box"> </div> </div> </div> </body>
SCSS
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #232427; .container{ max-width: 1200px; margin: 40px 0; .card{ position: relative; min-width: 320px; height: 440px; box-shadow: inset 5px 5px 5px rgba(0,0,0,0.2), inset -5px -5px 15px rgba(255,255,255,0.1), 5px 5px 15px rgba(0,0,0,0.3), -5px -5px 15px rgba(255,255,255,0.1); border-radius: 15px; margin: 30px; .box{ position: absolute; top: 20px; left: 20px; right: 20px; bottom: 20px; background: #2a2b2f; border-radius: 15px; box-shadow: 0 20px 50px rgba(0,0,0,.2); } } } }
Responsive Business Website Design with HTML / CSS
Button with Direction Aware Hover Effect
Display Google Maps location address details of ACF field without coordinates
<?php $location = get_field('location'); if( $location ) { // Loop over segments and construct HTML. $address = ''; foreach( array('street_number', 'street_name', 'city', 'state', 'post_code', 'country') as $i => $k ) { if( isset( $location[ $k ] ) ) { $address .= sprintf( '<span class="segment-%s">%s</span>, ', $k, $location[ $k ] ); } } // Trim trailing comma. $address = trim( $address, ', ' ); // Display HTML. echo '<p>' . $address . '.</p>'; }
JavaScript add class / remove class
If You have multiple elements and do You want to set an active class only the clicked item. You can control with this snippet for instance a size selector on a webshop’s product page.
If You have only one element and do You want to control a menu dropdown toggle:
Method 1
HTML
Method 2
JavaScript toggle to add “active” class
JavaScript
function toggle(){ var button = document.getElementById('btn-toggle'); button.classList.toggle('active'); }
HTML
<button id=""btn-toggle" onclick="toggle()">Button</button>