Free
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
To change “Search this site …” add this snippet to functions.php:
Change breadcrumbs home text in Genesis
Add this to functions.php
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>';
}
Display title of current post’s category
$category = get_the_category(); echo $category[0]-> cat_name;
Enqueue CSS for WordPress admin
// =========================================================================
// WPADMIN CSS
// =========================================================================
function admin_css() {
wp_enqueue_style( 'admin_css', get_stylesheet_directory_uri() . '/assets/css/wpadmin.css' );
}
add_action('admin_print_styles', 'admin_css' );
Query ACF Repeater Field with embedded Group
<!--REPEATER-->
<?php if( have_rows('repeater') ): ?>
<?php while( have_rows('repeater') ): the_row(); ?>
<!--GROUP-->
<?php if( have_rows('group') ): ?>
<?php while( have_rows('group') ): the_row();
// vars
$title = get_sub_field('title'); ?>
<?php echo $title; ?>
<?php endwhile; ?>
<?php endif ?>
<?php endwhile; ?>
<?php endif ?>
Sticky footer in Storefront
Remove sidebar and force full width layout in Storefront
// =========================================================================
// STOREFRONT REMOVE SIDEBAR - FULL WIDTH LAYOUT
// =========================================================================
function wpflames_remove_storefront_sidebar() {
remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
add_filter( 'body_class', function( $classes ) {
return array_merge( $classes, array( 'page-template-template-fullwidth page-template-template-fullwidth-php ' ) );
} );
}
add_action( 'get_header', 'wpflames_remove_storefront_sidebar' );
How to use single social icon with svg sprite without include the whole Font Awesome icon set
Create a file named sprite.svg
<svg> <symbol id="fb-icon" viewbox="-20 -20 200 200"> <path fill="white" d="M91.84,71.34l3.37-21.99h-21.1V35.08c0-6.02,2.95-11.88,12.4-11.88h9.59V4.49c0,0-8.7-1.49-17.03-1.49 C61.7,3,50.35,13.53,50.35,32.59v16.76H31.04v21.99h19.31v53.15h23.77V71.34H91.84z"/></path> </symbol> </svg>
Paste this in functions.php
function add_image_sprite_map(){
include('assets/images/sprite.svg');
}
add_action('storefront_before_header', 'add_image_sprite_map');
Use the icon wherever You want
<a target="_blank" href="" rel="noopener noreferrer">
<svg class="fb-svg"><use xlink:href="#fb-icon" /></svg>
</a>
Enqueue script with WordPress hook
Hook Data Layer with variables for Google Tag Manager in WooCommerce
Display the selected checkbox in ACF
<?php
$colors = get_field('colors');
if( $colors ): ?>
<ul>
<?php foreach( $colors as $color ): ?>
<li><?php echo $color; ?></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>