WordPress, Genesis Framework and Storefront customization tutorials

Home » Archives for Gabor

Gabor

Universal Parallax in Genesis

by 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.

Extend the free WooCommerce Wholesale Prices to show tax excluded price

by 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.

How to use Genesis Custom Blocks

by 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.

Neumorphism Box-Shadow Effect

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

Display Google Maps location address details of ACF field without coordinates

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