• Skip to main content
  • Skip to primary sidebar

WordPress, Genesis Framework and Storefront customization tutorials

  • Archive
    • Genesis
    • WooCommerce
    • WordPress
  • Premium
  • Blog
  • About
    • Tools I Use
  • Contact
  • Login
Home » Archives for Gabor

Gabor

Remove Storefront Page Title

2021-01-13 by Gabor Leave a Comment

Filed Under: WooCommerce Tagged With: storefront

Remove featured image from Storefront single post

2021-01-11 by Gabor Leave a Comment

Filed Under: WooCommerce Tagged With: featured image, storefront

Echo custom post type taxonomy name and slug with function

2021-01-07 by Gabor Leave a Comment

Filed Under: WordPress Tagged With: CPT, name, slug, taxonomy

Force full-width layout on specific single page in Genesis

2021-01-07 by Gabor Leave a Comment

Filed Under: Genesis

Show posts with descending order number

2021-01-07 by Gabor Leave a Comment

Filed Under: PHP, WordPress

How to Show Total Number of Posts, Pages, or Custom Post Types

2021-01-07 by Gabor Leave a Comment

Filed Under: PHP, WordPress

AJAX Filter for WordPress Custom Post Type Taxonomy

2020-12-06 by Gabor Leave a Comment

View Demo

Step #1 - Enqueue scripts in functions.php



Step #2 - Build the filter



To view the full content, please sign up for the membership.

If You are already a member, please log in below:

 
 
Forgot Password

Filed Under: JavaScript, PHP, Premium Content, UI / UX Tagged With: ajax

AJAX Filter for WordPress Categories without Plugin

2020-12-04 by Gabor Leave a Comment

View Demo

Step #1 - Enqueue scripts in functions.php



To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: JavaScript, PHP, Premium Content, UI / UX, WordPress Tagged With: ajax

AJAX request from MySQL database

2020-12-03 by Gabor Leave a Comment

HTML

PHP

JavaScript

View GitHub

Filed Under: JavaScript, PHP, SQL Tagged With: ajax

AJAX – Submit data with POST request into a MySQL database

2020-12-03 by Gabor Leave a Comment

To make it work you will need to create a database in phpMyAdmin.

HTML

PHP

JS

View GitHub

Filed Under: JavaScript, PHP Tagged With: ajax

AJAX request – JSON from external API (Breaking Bad)

2020-11-30 by Gabor Leave a Comment

View Demo

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

GitHub

Filed Under: JavaScript, UI / UX Tagged With: ajax, API

AJAX request – JSON local file

2020-11-30 by Gabor Leave a Comment

Request single JSON data

Demo
GitHub

Request array JSON data

Demo
GitHub

Filed Under: JavaScript Tagged With: ajax, json

AJAX request – TXT file

2020-11-30 by Gabor Leave a Comment

With Ajax You can receive data asynchronously without page reload.

Method 1 – onload function

GitHub

Method 2 – readystate function

Write text from TXT file in a specific div with AJAX

Demo
GitHub

Filed Under: JavaScript Tagged With: ajax

JavaScript addEventListener click

2020-11-30 by Gabor Leave a Comment

Filed Under: JavaScript

Dropdown Ajax Filter for Custom Post Type Taxonomy

2020-11-27 by Gabor Leave a Comment

Step 1

Filter by taxonomy terms

Step 2

Send a Request and to Receive Result Data

Step 3

Process the Request in functions.php

Filed Under: JavaScript Tagged With: ajax, jquery

jQuery – Add class / remove class

2020-11-27 by Gabor Leave a Comment

Filed Under: JavaScript Tagged With: jquery

How do I list Custom Post Type’s Taxonomies

2020-11-26 by Gabor Leave a Comment

Filed Under: WordPress Tagged With: custom post type, taxonomy

Disable right click with JavaScript

2020-11-23 by Gabor Leave a Comment

If You want to protect your website content by prevent right click there is a single line of JavaScript code to do it:

Filed Under: JavaScript, Other

How to display different menu for logged-in users

2020-11-11 by Gabor Leave a Comment

Put this snippet in the functions.php

Filed Under: WordPress Tagged With: menu

Universal Parallax in Genesis

2020-11-10 by Gabor Leave a Comment

Demo

Universal Parallax GIT

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.

Filed Under: Genesis Tagged With: parallax

Change menu toggle breakpoint in Storefront

2020-10-29 by Gabor Leave a Comment

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:

Filed Under: CSS, WooCommerce Tagged With: storefront

Extend the free WooCommerce Wholesale Prices to show tax excluded price

2020-10-29 by Gabor Leave a Comment

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.

Filed Under: WooCommerce Tagged With: wholesale

Remove tax included price for wholesalers in WooCommerce

2020-10-29 by Gabor Leave a Comment

Filed Under: WooCommerce Tagged With: storefront

Change breadcrumbs home text and link in Storefront

2020-10-28 by Gabor Leave a Comment

Change breadrumbs only on single product page

Read more in official WooCommerce documentation

Filed Under: WooCommerce Tagged With: Breadcrumb, storefront

How to use Genesis Custom Blocks

2020-10-15 by Gabor Leave a Comment

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

genesis-custom-blocks settings

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

genesis-custom-blocks template file

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

add genesis-custom-block with gutenberg

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.

genesis-custom-blocks cta

Now you have nothing to do but drag and drop the widget wherever You want to be shown up this nice looking CTA section.

Filed Under: Free Content, Tutorial, WordPress Tagged With: custom fields

Change Genesis Search Widget’s Placeholder Text

2020-10-14 by Gabor Leave a Comment

Add this to functions.php

Filed Under: Free Content, Genesis

Change breadcrumbs home text in Genesis

2020-10-14 by Gabor Leave a Comment

Add this to functions.php

Filed Under: Free Content, Genesis Tagged With: Breadcrumb

CSS Gradient Text

2020-09-16 by Gabor Leave a Comment

Filed Under: CSS Tagged With: gradient

Landing Page with GSAP Animations

2020-09-12 by Gabor Leave a Comment

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium Content, UI / UX Tagged With: greensock, gsap

Movie Landing Page with Video Popup

2020-09-11 by Gabor Leave a Comment

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium Content, UI / UX

Social Media Profile UI Design

2020-09-11 by Gabor Leave a Comment

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium Content, UI / UX

Responsive Grid Layout UI Design HTML + CSS

2020-09-09 by Gabor Leave a Comment

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium Content, UI / UX Tagged With: grid, layout

Webshop Product Page UI Design HTML, CSS, JS

2020-09-09 by Gabor Leave a Comment

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium Content, UI / UX

Coca Cola Landing Page Concept

2020-09-07 by Gabor Leave a Comment

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium Content, UI / UX

Landing Page with CSS Animations – Karate

2020-09-06 by Gabor Leave a Comment

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium Content, UI / UX Tagged With: landing

Creative Web Design for Fashion Website

2020-09-05 by Gabor Leave a Comment

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Pages: Page 1 Page 2

Filed Under: Premium Content, UI / UX

Responsive Website with Smooth Scroll Navigation

2020-09-05 by Gabor Leave a Comment

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium Content, UI / UX Tagged With: css, html, smooth scroll

Add “sticky” class to header when scrolling window

2020-09-03 by Gabor Leave a Comment

Filed Under: JavaScript Tagged With: scroll, sticky

Responsive Product Landing Page – Laptop

2020-09-01 by Gabor Leave a Comment

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium Content, UI / UX

Portfolio Landing Page Design HTML, CSS

2020-09-01 by Gabor Leave a Comment

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium Content, UI / UX Tagged With: landing

Card UI Design with CSS Flexbox

2020-08-29 by Gabor Leave a Comment

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium Content, UI / UX Tagged With: card, design, flexbox

Cards Hover Animation with CSS Flexbox

2020-08-29 by Gabor Leave a Comment

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium Content, UI / UX Tagged With: animation, card

Masonry Grid Layout with CSS

2020-08-29 by Gabor Leave a Comment

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium Content, UI / UX Tagged With: grid, masonry

Cards with Neumorphism and Hover Effect – CSS

2020-08-29 by Gabor Leave a Comment

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium Content, UI / UX Tagged With: card, hover

Cards with Skewed Edge and Hover Effect

2020-08-27 by Gabor Leave a Comment

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium Content, UI / UX Tagged With: card, hover, skew

Cards with CSS Animation Hover Effect

2020-08-27 by Gabor Leave a Comment

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium Content, UI / UX Tagged With: animation, card, hover

Neumorphism Box-Shadow Effect

2020-08-26 by Gabor Leave a Comment

Neumorphism Box-Shadow Effect

View Demo

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

Filed Under: CSS Tagged With: box-shadow

Responsive Business Website Design with HTML / CSS

2020-08-25 by Gabor Leave a Comment

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium Content, UI / UX Tagged With: css, html, landing, responsive, website

Button with Direction Aware Hover Effect

2020-08-20 by Gabor Leave a Comment

View Demo

This content is FREE, but You need to register to view the full content.

If You are already a member, please log in below:

Filed Under: Subscribers, UI / UX Tagged With: buttons, hover

Display Google Maps location address details of ACF field without coordinates

2020-08-15 by Gabor Leave a Comment

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

Filed Under: PHP Tagged With: ACF, Google Maps

JavaScript add class / remove class

2020-08-15 by Gabor Leave a Comment

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

Filed Under: JavaScript Tagged With: addEventListener, click

JavaScript toggle to add “active” class

2020-08-14 by Gabor Leave a Comment

JavaScript

function toggle(){
    var button = document.getElementById('btn-toggle');
    button.classList.toggle('active');
}

HTML

<button id=""btn-toggle" onclick="toggle()">Button</button>

Filed Under: JavaScript Tagged With: toggle

  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Interim pages omitted …
  • Go to page 8
  • Go to Next Page »

Primary Sidebar

  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube
WP Rocket - WordPress Caching Plugin
UpdraftPlus Premium

Disclosure: Some of the links in this site are affiliate links. I will be paid a commission if you use this link to make a purchase.

  • Privacy Policy
  • Flames Design
© 2021 WP Flames - All Right Reserved