• 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 » Free Content

Free Content

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

Reload the page after click Add to cart button with 3 sec delay

2020-01-20 by Gabor Leave a Comment

var classname = document.getElementsByClassName("add_to_cart_button");

function pageReload(){
        setTimeout(function(){ 
        location.reload();
    }, 3000);
}

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', pageReload, false);
}

Filed Under: Free Content, JavaScript

Create a text field in the Customizer and show it in the front end

2020-01-11 by Gabor Leave a Comment

1) Add this to your functinos.php


// =========================================================================
// REGISTER CUSTOMIZER - PANEL, SECTION, SETTINGS AND CONTROL
// =========================================================================
function theme_name_register_theme_customizer( $wp_customize ) {
    // Create custom panel.
    $wp_customize->add_panel( 'text_blocks', array(
        'priority'       => 10,
        'theme_supports' => '',
        'title'          => __( 'Text Blocks', 'theme_name' ),
        'description'    => __( 'Set editable text for certain content.', 'theme_name' ),
    ) );
    // Add section.
    $wp_customize->add_section( 'custom_title_text' , array(
        'title'    => __('Custom Text','theme-name'),
        'panel'    => 'text_blocks',
        'priority' => 10
    ) );
    // Add setting
    $wp_customize->add_setting( 'title_text_block', array(
         'default'           => __( 'Default text', 'theme-name' ),
         'sanitize_callback' => 'sanitize_text'
    ) );
    // Add control
    $wp_customize->add_control( new WP_Customize_Control(
        $wp_customize,
        'custom_title_text',
            array(
                'label'    => __( 'Custom Text', 'theme_name' ),
                'section'  => 'custom_title_text',
                'settings' => 'title_text_block',
                'type'     => 'text'
            )
        )
    );
 
    // Sanitize text
    function sanitize_text( $text ) {
        return sanitize_text_field( $text );
    }
}
add_action( 'customize_register', 'theme_name_register_theme_customizer' );

2) Show in the Front End with a hook

function add_custom_field(){
    echo get_theme_mod( 'title_text_block');
}
add_action('genesis_site_description', 'add_custom_field');

In this case I’ve placed the custom text in the site-description, but You can put it anywhere You want using the Genesis Visual Hook Guide.

Add custom text via customizer

Filed Under: Free Content, WordPress

How to add PDF upload option to WordPress customizer?

2020-01-09 by Gabor Leave a Comment

1) Add this snippet to functions.php

// =========================================================================
// CUSTOMIZER PDF UPLOAD
// =========================================================================
function pdf_customize_register( $wp_customize ) {
 
    // Add Settings
    $wp_customize->add_setting('customizer_setting_pdf', array(
        'transport'         => 'refresh'
    ));
 
    // Add Section
    $wp_customize->add_section('pdf_section', array(
        'title'             => __('PDF', 'name-theme'), 
        'priority'          => 70,
    ));    
 
    // Add Controls
    $wp_customize->add_control( new WP_Customize_Upload_Control( $wp_customize, 'customizer_setting_pdf', array(
        'label'             => __('PDF Upload', 'name-theme'),
        'section'           => 'pdf_section',
        'settings'          => 'customizer_setting_pdf',    
    )));
}
add_action('customize_register', 'pdf_customize_register');

2) Displaying in the Front End

<a href="<?php echo esc_url( get_theme_mod( 'customizer_setting_pdf' ) ); ?>">Download PDF</a>

Filed Under: Free Content, WordPress Tagged With: file upload, pdf

How to make the font-weight bold of the first word with JS?

2020-01-06 by Gabor Leave a Comment

View Demo in one of my projects

1) Add the class firstWord to your heading or paragraph

<h4 class="firstWord">Gere Solus 2017 Villány</h4>

2) You can select the first word of the text by adding a span class to it with jQuery

    $(".firstWord").html(function(){
      var text= $(this).text().trim().split(" ");
      var first = text.shift();
      return (text.length > 0 ? "<strong>"+ first + "</strong> " : first) + text.join(" ");
    });

Filed Under: Free Content, JavaScript

Parallax Effect without plugin and pagebuilder

2019-12-09 by Gabor Leave a Comment

1) HTML

 <section class="parallax">
    <h1>Rock 'n' Roll</h1>
  </section>

2) CSS



.parallax {
  background: url('YOUR_BACKGROUND_IMAGE_URL');
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax h1 {
  text-align: center;
  padding: 15rem 0;
  font-size: 4em;
  color: white;
  background: rgba(29, 25, 29, 0.37);
}

3) JAVASCRIPT

var parallax= document.querySelector(".parallax");

window.addEventListener("scroll", function() {

var scrolledHeight= window.pageYOffset,
limit= parallax.offsetTop+ parallax.offsetHeight;
                
if(scrolledHeight > parallax.offsetTop && scrolledHeight <= limit) {
   parallax.style.backgroundPositionY=  (scrolledHeight - parallax.offsetTop) /1.5+ "px";
    } 
    else {
     parallax.style.backgroundPositionY=  "0";
    }
});

Filed Under: Free Content, JavaScript

How to align Storefront navigation beside the logo

2019-12-09 by Gabor Leave a Comment

1) Add this snippet to functions.php

// =========================================================================
//CHANGE DEFAULT STOREFRONT HEADER LAYOUT 
// =========================================================================
function remove_storefront_actions() {
    remove_action( 'storefront_header', 'storefront_product_search', 40 );
    remove_action( 'storefront_header', 'storefront_primary_navigation', 50);
    remove_action( 'storefront_header', 'storefront_secondary_navigation', 30);
    remove_action( 'storefront_header', 'storefront_header_cart', 60 );
}
add_action( 'init', 'remove_storefront_actions' );
 
add_action( 'storefront_header', 'storefront_header_cart', 40 );
add_action( 'storefront_header', 'storefront_primary_navigation', 30);

2) CSS

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {  
.woocommerce-active .site-header .site-branding {
	width: 20% !important;
}
   
    .woocommerce-active .site-header .site-header-cart {
	width: 15%;
}
.site-header .col-full {
	padding: 0 !important;
	max-width: 100% !important;
	margin: auto;
	display: flex;
}
    
}/*END*/

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  .site-header .col-full {
	max-width: 90% !important;
}
    
}/*END*/

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
.site-header .col-full {
	max-width: 90% !important;
}
    .woocommerce-active .site-header .main-navigation {
	width: 70% !important;
}
}/*END*/
    
    /* XXL Large devices*/
@media (min-width: 1400px) { 
.site-header .col-full {
	max-width: 80% !important;
    }
    .woocommerce-active .site-header .main-navigation {
	width: 60% !important;
}
}/*END*/

Filed Under: Free Content Tagged With: header, menu, navigation

How to add social icons to Storefront nav menu

2019-11-28 by Gabor Leave a Comment

// =========================================================================
// ADD SOCIAL ICON TO NAV MENU
// =========================================================================
function wdm_add_menu_items( $menu, $args ) {
    // check if it is the 'primary' navigation menu
    if ( 'primary' === $args->theme_location || 'handheld' === $args->theme_location)
    {
      // add the search form
      ob_start();
      $menu  .= '<li id="menu-item-5000" class="menu-item menu-icon">
                    <a target="_blank" href="">
                        <i class="fab fa-instagram"></i>
                    </a>
                </li>
                <li id="menu-item-6000" class="menu-item menu-icon">
                    <a target="_blank" href="">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                </li>
                
                ';
      ob_get_clean();
    }
    return $menu;
}
add_filter( 'wp_nav_menu_items', 'wdm_add_menu_items', 10, 2 );

Filed Under: Free Content, WooCommerce Tagged With: social icons

Masonry layout with Bootstrap – grid cloumns

2019-11-19 by Gabor Leave a Comment

If You would like to implement only the masonry component of bootstrap

//CARD COLUMNS
.card-columns .card {
  margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
  .card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
  }
  .card-columns .card {
    display: inline-block;
    width: 100%;
  }
}

HTML structure with WordPress loop

<?php
wp_reset_postdata();
  
$args = array(
    'post_type' => 'post_type',
    'posts_per_page' => -1
);
  
$the_query = new WP_Query( $args ); ?>
 
    <div class="card-columns">
        
        <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
     
           <div class="card">
                
                <!---->
               
            </div>
 
        <?php endwhile; endif; ?>
    </div>
 
<?php wp_reset_postdata(); ?>

Filed Under: Bootstrap, CSS, Free Content

Add page slug to body_class

2019-11-19 by Gabor Leave a Comment

// =========================================================================
// ADD PAGE SLUG TO BODY CLASS
// =========================================================================
function add_slug_to_body_class( $classes ) {
    global $post;
    if ( isset( $post ) ) {
        $classes[] = $post->post_name;
    }
    return $classes;
}
add_filter( 'body_class', 'add_slug_to_body_class' );

Filed Under: Free Content, PHP, WordPress Tagged With: body_class

How to create custom Hooks in WordPress

2019-11-17 by Gabor Leave a Comment

1) Define the custom hook in functions.php

function latest_products_hook() {
	do_action('latest_products_hook');
}

2) Place anywhere you want in your template files

<?php latest_products_hook(); ?>

3) Create the function

add_action( 'latest_products_hook', 'storefront_recent_products', 30);

Filed Under: Free Content, WooCommerce, WordPress Tagged With: custom hook

How to change the color of Ninja Form placeholder

2019-11-15 by Gabor Leave a Comment

.nf-field-container .field-wrap .nf-element::placeholder {
	color: orange;
}

Filed Under: CSS, Free Content Tagged With: Ninja Forms

How to remove ‘Menu’ text in Genesis mobile navigation

2019-11-14 by Gabor Leave a Comment

1) You need to find this file: genesis-sample/config/responsive-menus.php

2) Add this line of code before the line menuClasses:

'mainMenu'    => __( '', 'genesis-sample' ),

3) The full code need to look like this:

return [
	'script' => [
        'mainMenu'    => __( '', 'genesis-sample' ),
		'menuClasses' => [
			'others' => [ '.nav-primary' ],
		],
	],
	'extras' => [
		'media_query_width' => '960px',
	],
];

Filed Under: Free Content, Genesis

How to force hamburger menu on desktop in Genesis

2019-11-14 by Gabor Leave a Comment

All You need to do is just add some rows of CSS:

.genesis-responsive-menu {
	display: none;
}
.menu-toggle, .sub-menu-toggle {
	display: block;
	visibility: visible;
}

Filed Under: CSS, Free Content, Genesis

How to get Advanced Custom Field slug

2019-10-29 by Gabor Leave a Comment

<?php $anchor = strtolower(str_replace(array(' ', ':'), array('-', ''), get_sub_field('title'))); ?>
<a href="#<?php echo $anchor; ?>"><?php the_sub_field('title'); ?></a>
<h2 id="<?php echo $anchor; ?>" class="headline"><?php the_sub_field('title'); ?></h2>

Filed Under: Advanced Custom Fields, Free Content

Add Image Size to Advanced Custom Fields

2019-10-07 by Gabor Leave a Comment

Define the custom size in functions.php

// =========================================================================
// ADD CUSTOM IMAGE SIZE 
// =========================================================================
add_image_size( 'gallery-thumb', 600, 400, array( 'left', 'top' ) ); // Hard crop left top

Single line solution

<?php echo wp_get_attachment_image_src( get_field('field_name'), 'medium' )[0]; ?>

With bootstrap card and variables

 <?php
        $attachment_id = get_field('image');
        $size = 'gallery-thumb';
        $image = wp_get_attachment_image_src( $attachment_id, $size )[0];
       ?>
       
       
        <div class="col-md-3">
            <div class="card">
                <div class="card-img-top">
                    <a href="<?php the_field('link'); ?>">
                        <img src="<?php echo $image; ?>" alt="<?php the_field('title'); ?>">
                    </a>
                </div>
                <div class="card-body">
                    <h4 class="card-title"><?php the_field('title'); ?></h4>
                </div>
            </div>    
        </div>   

Filed Under: Advanced Custom Fields, Free Content, WordPress

How to Make Custom Post Type Child of Page

2019-10-06 by Gabor Leave a Comment

'rewrite' => array(
            'slug' =>  get_post_field( 'post_name', get_option('cpt_parent_page') ) . '/PARENT/YOUR_POST_TYPE',
            'with_front' => false
)

Filed Under: Free Content, WordPress

Change the Structure of Custom Post Type’s Breadcrumb in Single Page

2019-10-06 by Gabor Leave a Comment

// =========================================================================
// FIX BREADCRUMB IN CUSTOM POST TYPE
// =========================================================================
function add_custom_breadcrumb(){
    if(is_singular('YOUR_CPT')){
        if ( function_exists('yoast_breadcrumb') ) :
          $post_types = array('YOUR_CPT');    

            ?>
            <div class="breadcrumb custom">
                <span xmlns:v="http://rdf.data-vocabulary.org/#">
                    <span typeof="v:Breadcrumb"><a href="<?php echo home_url(); ?>/" rel="v:url" property="v:title">Home</a></span> / 
                    <a href="#">Page 1</a> / 
                    <a href="#">Page 2</a> /
                    <a href="#">Page 3</a> /
                    <?php the_title(); ?>
                    <span typeof="v:Breadcrumb"><strong class="breadcrumb_last" property="v:title"><?php post_type_archive_title(); ?></strong></span>
                </span>
            </div>
            <?php
            else :
                yoast_breadcrumb('<div class="breadcrumb"> ','</div>');

        endif;
    }
}
add_action('genesis_before_loop', 'add_custom_breadcrumb');

Filed Under: Free Content, WordPress Tagged With: Breadcrumb

Add Three Column Layout to Genesis Front Page and Two Column for Other Pages

2019-09-28 by Gabor Leave a Comment

1) Go to Customizer / Theme Settings/ Site Layout / Select Site Layout to Secondary Sidebar – Content – Primary Sidebar
2) Add this snippet to functions.php

// =========================================================================
// ADD SECONDARY SIDEBAR - CONTENT - SIDEBAR - 3 COL LAYOUT TO FRONT-PAGE
// =========================================================================
function add_three_column_layout_to_frontpage() {
    if ( !is_front_page() ) {
        return 'content-sidebar';
    }
}
add_filter( 'genesis_pre_get_option_site_layout', 'add_three_column_layout_to_frontpage' );

Filed Under: Free Content, Genesis

Disable Gutenberg only for Posts

2019-09-28 by Gabor Leave a Comment

// =========================================================================
// DISABLE GUTENBERG FOR POSTS
// =========================================================================
function wpflames_disable_gutenberg($is_enabled, $post_type) {
	
	if ($post_type === 'post') return false; // it could be any kind of custom post type
	
	return $is_enabled;
	
}
add_filter('use_block_editor_for_post_type', 'wpflames_disable_gutenberg', 10, 2);

Filed Under: Free Content, WordPress Tagged With: Gutenberg

ACF Post Object with Multiple Options

2019-09-14 by Gabor Leave a Comment

<?php

/*
*  Loop through post objects (assuming this is a multi-select field) ( don't setup postdata )
*  Using this method, the $post object is never changed so all functions need a seccond parameter of the post ID in question.
*/

$post_objects = get_field('YOUR_CUSTOM_FIELD');

if( $post_objects ): ?>
    <ul>
    <?php foreach( $post_objects as $post_object): ?>
        <li>
            <a href="<?php echo get_permalink($post_object->ID); ?>"><?php echo get_the_title($post_object->ID); ?></a>
        </li>
    <?php endforeach; ?>
    </ul>
<?php endif;

?>

Filed Under: Free Content, WordPress Tagged With: ACF, Post Object

ACF Post Object for Related Posts with Repeater Field

2019-09-14 by Gabor 2 Comments

   <?php if( have_rows('ITEMS') ): ?>

        <?php while ( have_rows('ITEMS') ) : the_row(); ?>   

                <?php $post_object = get_sub_field('ITEM'); ?>

                <?php if( $post_object ): ?>

                    <?php $post = $post_object; setup_postdata( $post ); ?>

                       <h4><?php echo get_the_title($post_object->ID); ?></h4>

                    <?php wp_reset_postdata(); ?>

                <?php endif; ?>

            <?php endwhile; ?>

<?php endif; ?>

Filed Under: Free Content, WordPress

Add sub-page to body_class if it’s not front-page

2019-08-28 by Gabor Leave a Comment

// =========================================================================
// ADD SUBPAGE BODY CLASS 
// =========================================================================
function body_class_subpage($classes) {
    global $wpdb, $post;
    if(!is_front_page()){
       $classes[] = 'sub-page';
    }
    return $classes;
}
add_filter('body_class','body_class_subpage'); 

Filed Under: Free Content, WordPress Tagged With: body_class

Simple Bar – Scroll Bar

2019-08-26 by Gabor Leave a Comment

DEMO

funtcions.php

// =========================================================================
// SIMPLE BAR 
// =========================================================================
function simple_bar() {  
    if(is_front_page()){
        wp_enqueue_style('simple_bar_css', 'https://unpkg.com/simplebar@latest/dist/simplebar.min.css');
        wp_enqueue_script('simple_bar_js', 'https://unpkg.com/simplebar@latest/dist/simplebar.js', array(), '4.1.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'simple_bar' );

HTML

<div class="demo1" data-simplebar>
      <h2>Scroll me!</h2>
      <p>Some more content</p>
      <p class="odd">Some content</p>
      <p>Some more content</p>
      <p class="odd">Some content</p>
      <p>Some more content</p>
      <p class="odd">Some content</p>
      <p>Some more content</p>
      <p class="odd">Scroll me!</p>
      <p>Some more content</p>
      <p class="odd">Some content</p>
      <p>Some more content</p>
      <p class="odd">Some content</p>
      <p>Some more content</p>
      <p class="odd">Some content</p>
      <p>Some more content</p>
      <p class="odd">Scroll me!</p>
      <p>Some more content</p>
      <p class="odd">Some content</p>
      <p>Some more content</p>
      <p class="odd">Some content</p>
      <p>Some more content</p>
      <p class="odd">Some content</p>
      <p>Some more content</p>
      <p class="odd">Some content</p>
      <p>Some more content</p>
      <p class="odd">Some content</p>
      <p>Some more content</p>
</div>

CSS

.demo1 {
  height: 376px;
  max-width: 100%;
}

Filed Under: Free Content, JavaScript Tagged With: scrollbar

Remove “You are here” from Genesis breadcrumb

2019-08-23 by Gabor Leave a Comment

// =========================================================================
// REMOVE YOU ARE HERE FROM BREADCRUMB
// =========================================================================
add_filter( 'genesis_breadcrumb_args', 'afn_breadcrumb_args' );
function afn_breadcrumb_args( $args ) {
	$args['labels']['prefix'] = '';
return $args;
}

Filed Under: Free Content, Genesis Tagged With: Breadcrumb

Remove menu items from WordPress admin

2019-07-26 by Gabor Leave a Comment

// =========================================================================
// REMOVE MENU ITEMS FROM ADMIN
// =========================================================================
function remove_menus(){
  remove_menu_page( 'edit.php?post_type=client' );
  remove_menu_page( 'edit.php?post_type=offer' );
  remove_menu_page( 'edit.php?post_type=testimonial' );
  remove_menu_page( 'edit.php?post_type=layout' );
}
add_action( 'admin_menu', 'remove_menus' );

Filed Under: Free Content, WordPress Tagged With: admin, WordPress admin

Genesis translations

2019-07-24 by Gabor Leave a Comment

<?php
// =========================================================================
// GENESIS TRANSLATIONS WITHOUT LOCO TRANSLATE
// =========================================================================
function genesis_hungarian_translations( $translated, $original, $domain ) {
    if ( $translated == "Leave a Comment" ) { $translated = "Hozzászólás írása"; }
    if ( $translated == "by" ) { $translated = "Szerző: "; }
    if ( $translated == "Filed Under: " ) { $translated = "Kategória: "; }
    if ( $translated == "Tagged With: " ) { $translated = "Címkék: "; }
return $translated;
}
add_filter( 'gettext', 'genesis_hungarian_translations', 10, 3 );

Filed Under: Free Content, Genesis Tagged With: translate

Add category and tag support to pages in WordPress

2019-07-17 by Gabor Leave a Comment

// =========================================================================
// ADD CATEGORY SUPPORT TO PAGES
// =========================================================================
function add_categories_to_pages() {
    register_taxonomy_for_object_type( 'category', 'page' );
}
add_action( 'init', 'add_categories_to_pages' );


// =========================================================================
// ADD TAG SUPPORT TO PAGES
// =========================================================================
function tags_support_all() {
	register_taxonomy_for_object_type('post_tag', 'page');
}
add_action('init', 'tags_support_all');

Filed Under: Free Content, WordPress Tagged With: category, tags

How to hide Google reCAPTCHA v3 badge with CSS

2019-07-16 by Gabor Leave a Comment

.grecaptcha-badge{
	visibility: collapse !important;  
}

Filed Under: CSS, Free Content Tagged With: reCAPTCHA

How to move additional information after add to cart button

2019-07-13 by Gabor Leave a Comment

// =========================================================================
// REMOVE ADDITIONAL INFORMATION TAB
// =========================================================================
add_filter( 'woocommerce_product_tabs', 'remove_additional_information_tab', 100, 1 );
function remove_additional_information_tab( $tabs ) {
    unset($tabs['additional_information']);

    return $tabs;
}

// =========================================================================
// ADD ADDITIONAL INFORMATION AFTER ADD TO CART
// =========================================================================
add_action( 'woocommerce_single_product_summary', 'additional_info_under_add_to_cart', 35 );
function additional_info_under_add_to_cart() {
    global $product;

    if ( $product && ( $product->has_attributes() || apply_filters( 'wc_product_enable_dimensions_display', $product->has_weight() || $product->has_dimensions() ) ) ) {
        wc_display_product_attributes( $product );
    }
}

Filed Under: Free Content, WooCommerce Tagged With: single product

How to show custom message based on shipping class on single product page

2019-07-13 by Gabor Leave a Comment

// =========================================================================
// Custom Text on Product Page based on Shipping Class 
// =========================================================================
function display_shipping_class_on_product_page() {
    $product = wc_get_product();

    $shipping_class = $product->get_shipping_class();

    switch ( $shipping_class ) {
        case 'your_shipping_class_1':
            echo '';
            break;
        case 'your_shipping_class_2':
            echo '';
            break;
    }
}
add_action( 'woocommerce_single_product_summary', 'display_shipping_class_on_product_page', 10 );

Filed Under: Free Content, WooCommerce

Two-third / One-third Gutenberg columns

2019-07-08 by Gabor Leave a Comment

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {  
 .two-third .wp-block-column:first-child {
	flex-basis: 66%;
  }
}

Filed Under: Free Content, WordPress Tagged With: Gutenberg

How to list categories in a dropdown menu

2019-06-26 by Gabor Leave a Comment

<?php
    if( $terms = get_terms( array(
        'taxonomy' => 'category', // to make it simple I use default categories
        'orderby' => 'name'
    ) ) ) : 
        // if categories exist, display the dropdown
        echo '<div class="isotope-filter-wrapper">';
            echo '<select name="categoryfilter"><option value="">Select category...</option>';
            foreach ( $terms as $term ) :
                echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID of the category as an option value
            endforeach;
            echo '</select>';
        echo '</div>';
    endif;  
?>

Filed Under: Free Content, JavaScript

Remove Storefront page title

2019-04-05 by Gabor Leave a Comment

// =========================================================================
// REMOVE STOREFRONT PAGE TITLE
// =========================================================================
function storefront_remove_title() {
    remove_action( 'storefront_page', 'storefront_page_header' );
}
add_action( 'wp', 'storefront_remove_title' );

Filed Under: Free Content, WooCommerce

Add custom image size to media image

2019-04-03 by Gabor Leave a Comment

// =========================================================================
// ADD CUSTOM IMAGE SIZE 
// =========================================================================
add_image_size( 'custom-size', 800, 540, array( 'left', 'top' ) ); // Hard crop left top

Filed Under: Free Content, WordPress Tagged With: image size

Add class to the excerpt with filter

2019-04-03 by Gabor Leave a Comment

// =========================================================================
// ADD CLASS TO EXCERPT
// =========================================================================
add_filter( "the_excerpt", "add_class_to_excerpt" );

function add_class_to_excerpt( $excerpt ) {
    return str_replace('<p', '<p class="card-text"', $excerpt);
}

Filed Under: Free Content, WordPress Tagged With: excerpt

Force full width container with CSS

2019-03-31 by Gabor Leave a Comment

    margin-left: calc(-100vw / 2 + 1280px / 2);
    margin-right: calc(-100vw / 2 + 1280px / 2);

Filed Under: CSS, Free Content

Add cart icon with item numbers to Storefront header

2019-03-30 by Gabor Leave a Comment

// =========================================================================
// REMOVE ACCOUNT AND SEARCH ICON FROM storefront-handheld-footer-bar
// =========================================================================
function jk_remove_handheld_footer_links( $links ) {
	unset( $links['my-account'] );
	unset( $links['search'] );
	return $links;
}
add_filter( 'storefront_handheld_footer_bar_links', 'jk_remove_handheld_footer_links' );

// =========================================================================
// REMOVE STOREFRONT HANDHELD BAR
// =========================================================================
function remove_storefront_handheld_footer_bar() {
  remove_action( 'storefront_footer', 'storefront_handheld_footer_bar', 999 );
}
add_action( 'init', 'remove_storefront_handheld_footer_bar' );

// =========================================================================
// MOVE STOREFRONT HANDHELD FOOTER BAR WITH CART ICON TO HEADER
// =========================================================================
add_filter( 'storefront_header', 'storefront_handheld_footer_bar' );

Filed Under: Free Content, WooCommerce

Shortcode with attributes – custom link and text

2019-03-29 by Gabor Leave a Comment

// =========================================================================
// BUTTON SHORTCODE WITH ATTRIBUTES
// =========================================================================
function btn_shortcode( $atts, $content = null ) {
    $a = shortcode_atts( array(
        'href'  =>  '#',
        'text' => ''
    ), $atts );

    return '<a class="btn-cta" href="' . esc_attr($a['href']) . '">' . esc_attr($a['text']) . '</a>';
}
add_shortcode( 'button', 'btn_shortcode' );

Filed Under: Free Content, WordPress Tagged With: shortcode

Add parent page slug to body_class

2019-03-29 by Gabor Leave a Comment

// =========================================================================
// ADD PARENT PAGE SLUG TO BODY CLASS 
// =========================================================================
function body_class_section($classes) {
    global $wpdb, $post;
    if (is_page()) {
        if ($post->post_parent) {
            $parent = end(get_post_ancestors($current_page_id));
        } else {
            $parent = $post->ID;
        }
        $post_data = get_post($parent, ARRAY_A);
        $classes[] = 'parent-' . $post_data['post_name'];
    }
    return $classes;
}
add_filter('body_class','body_class_section'); 

Filed Under: Free Content, WordPress

Add top header widget to Storefront

2019-03-27 by Gabor Leave a Comment

// =========================================================================
// ADD CUSTOM WIDGET - TOP HEADER
// =========================================================================
add_action( 'widgets_init', 'register_new_top_header' );

function register_new_top_header() {

  register_sidebar(array(
    'id' => 'top-header',
    'name' => __( 'Top Header', 'storefront' ),
    'description' => __( 'Top Header.', 'storefront' ),
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h4 class="widgettitle">',
    'after_title' => '</h4>',
  ));
}
// =========================================================================
// CREATE FUNCTION FOR TOP HEADER WIDGET 
// =========================================================================
function top_header_widget(){
    dynamic_sidebar('Top Header');
}
// =========================================================================
// HOOK THE WIDGET BEFORE HEADER
// =========================================================================
add_action( 'storefront_before_header', 'top_header_widget', 2 );

Filed Under: Free Content, WooCommerce

Remove sidebar from checkout page in Storefront

2019-03-27 by Gabor Leave a Comment

// =========================================================================
//REMOVE SIDEBAR OF STOREFRONT CHECKOUT AND CART PAGE 
// =========================================================================
function remove_checkout_sidebar_storefront() {
    if( is_checkout() || is_cart()) {
        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( 'wp', 'remove_checkout_sidebar_storefront' );

Filed Under: Free Content, WooCommerce

Remove sidebar from cart page in Storefront

2019-03-27 by Gabor Leave a Comment

// =========================================================================
//REMOVE SIDEBAR OF STOREFRONT CART PAGE 
// =========================================================================
function remove_cart_sidebar_storefront() {
    if( is_cart()){
	    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( 'wp', 'remove_cart_sidebar_storefront' );

Filed Under: Free Content, WooCommerce

Remove sidebar from single product page in Storefront

2019-03-26 by Gabor 1 Comment

// =========================================================================
// REMOVE SIDEBAR FROM SINGLE PRODUCT PAGE IN STOREFRONT
// =========================================================================
add_action( 'get_header', 'wpninja_remove_storefront_sidebar' );
 
function wpninja_remove_storefront_sidebar() {
    if ( is_product() ) {
        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 ' ) );
        } );
    }
}

Filed Under: Free Content, WooCommerce

Conditionally add Full-Width Layout for Storefront with ACF and custom body_class

2019-03-25 by Gabor 1 Comment

Create a True / False custom field with ACF Pro

Add this to functions.php

// =========================================================================
// FULL WIDTH CHECKBOX
// =========================================================================
function add_full_width_layout(){
     if( get_field('full_width') ){
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( 'wp', 'add_full_width_layout' );

Filed Under: Free Content, WordPress Tagged With: body_class

Remove Storefront built-in homepage sections

2019-03-25 by Gabor Leave a Comment

function remove_storefront_home_sections( $args ) {
    remove_action( 'homepage', 'storefront_product_categories', 20 );
    remove_action( 'homepage', 'storefront_recent_products', 30 );
    remove_action( 'homepage', 'storefront_featured_products', 40 );
    remove_action( 'homepage', 'storefront_popular_products', 50 );
    remove_action( 'homepage', 'storefront_on_sale_products', 60 );
    remove_action( 'homepage', 'storefront_best_selling_products', 70 );
}
add_action( 'wp', 'remove_storefront_home_sections' );

Filed Under: Free Content, WooCommerce

Add Facebook Pixel to wp_head

2019-03-25 by Gabor Leave a Comment

// =========================================================================
// ADD FACEBOOK PIXEL TO WP_HEAD
// =========================================================================
function add_facebook_pixel() { ?>
   <!-- Facebook Pixel Code -->
    <script>
      !function(f,b,e,v,n,t,s)
      {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
      n.callMethod.apply(n,arguments):n.queue.push(arguments)};
      if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
      n.queue=[];t=b.createElement(e);t.async=!0;
      t.src=v;s=b.getElementsByTagName(e)[0];
      s.parentNode.insertBefore(t,s)}(window, document,'script',
      'https://connect.facebook.net/en_US/fbevents.js');
      fbq('init', 'xxxxxxxxxxx');
      fbq('track', 'PageView');
    </script>
    <noscript><img height="1" width="1" style="display:none"
      src="https://www.facebook.com/tr?id=xxxxxxxxxxx&ev=PageView&noscript=1"
    /></noscript>
    <!-- End Facebook Pixel Code -->
<?php } 
add_action('wp_head', 'add_facebook_pixel');


// =========================================================================
// ADD FACEBOOK CONVERSION EVENT SNIPPET TO THANK YOU PAGE
// =========================================================================
function conversion_tracking_thank_you_page() { ?>
    <script>
        fbq('track', 'Purchase');
    </script>';
<?php }
add_action( 'woocommerce_thankyou', 'conversion_tracking_thank_you_page' );

Filed Under: Free Content, WordPress Tagged With: facebook, pixel

How to set different CSS on WPML languages

2019-03-22 by Gabor Leave a Comment

.your_selector:lang(de) {
	display: none !important;
}

Filed Under: CSS, Free Content Tagged With: WPML

How to get slug of current page?

2019-03-22 by Gabor Leave a Comment

<?php 
    global $post;
    $post_slug=$post->post_name;
?>

Filed Under: Free Content, WordPress

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