• Skip to main content
  • Skip to primary sidebar

WordPress, Genesis Framework and Storefront customization tutorials

  • Archive
    • Free
    • Premium
  • Blog
  • About
  • Contact
  • Newsletter
  • Login
Home » Free » Page 13

Free

Phone snippet – Analytics

The phone snippet should be added to the pages on your website where the phone number you’d like to track appears. The phone snippet should be placed right after the global site tag.

<script>
  gtag('config', 'AW-CONVERSION_ID/CONVERSION_LABEL', {
    'phone_conversion_number': '1-650-555-5555'
  });
</script>

Filed Under: Free Tagged With: Analytics

Event snippet – Google Analytics

The event snippet should be installed on the conversion page itself. Google recommends placing it within the

<head>[/php ] section for the best tracking accuracy.

[php]
  <!-- Event snippet for Example conversion page -->
    <script>
      gtag('event', 'conversion', {'send_to': 'AW-CONVERSION_ID/CONVERSION_LABEL',
        'value': 1.0,
        'currency': 'USD'
      });
    </script>

Filed Under: Free Tagged With: Analytics

CSS only for IE10+ – Internet Explorer

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
}


Filed Under: Free Tagged With: CSS

Add Google Tag Manager Container to WordPress with Hook

// =========================================================================
// GOOGLE TAG MANAGER - <head>
// =========================================================================
function add_gtag_to_head() { ?>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
    <!-- End Google Tag Manager -->
<?php } 
add_action('wp_head', 'add_gtag_to_head');


// =========================================================================
// GOOGLE TAG MANAGER - <body>
// =========================================================================
function add_gtag_to_body() { ?>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
<?php } 
add_action('wp_body_open', 'add_gtag_to_body');

Filed Under: Free Tagged With: tag manager

How to set different posts_per_page on mobile devices

<?php
wp_reset_postdata();

 if( wp_is_mobile() ) {
        $posts_per_page = 15;
    } else{
        $posts_per_page = -1;
 }

 
$args = array(
      'post_type'      => 'my_post_type',
      'posts_per_page' => $posts_per_page,
);

Filed Under: Free Tagged With: PHP

How to fix collapsed checkout fields in Storefront (Bootstrap)

#customer_details .col-1,  
#customer_details .col-2  {
	width: 100%;
	max-width: 100%;
}
.woocommerce-input-wrapper {
	display: block !important;
	width: 100%;
}

Filed Under: Free Tagged With: Bootstrap, Storefront

Online minifiers for JavaScript and CSS files

Minify Assets – Minification reduces the file size of JavaScripts and CSS by removing spaces, line breaks and comments.

  • Google Closure Compiler Service
  • CSS Minifier

Filed Under: Free Tagged With: Tool

jQuery – Do something if checkbox is checked

const $pdfs = $('a[href$=".pdf"]');
$pdfs.on('click', function(event){
  //check if checkbox has been checked 
  //if zero checkboxes are checked 
  if ($(':checked').length === 0){
    //prevent download of document 
    event.preventDefault();
    //alert the user 
    alert('Please check the box to allow PDF downloads.');
  }
});

Filed Under: Free Tagged With: jQuery

jQuery Changing Element Styles and Classes

//Select every second link
const $odd = $('a:odd');

//Select all secure links
const $secureLinks = $('a[href^="https://"]');

//Select all links that ends with .pdf
const $pdfs = $('a[href$=".pdf"]');

//Add target blank attribute to every secure link
$secureLinks.attr('target', '_blank');

//Make downloadable pdf-s instead of open it in the browser
$pdfs.attr('download', true);

Filed Under: Free Tagged With: jQuery

Full-width hero image on category / tag / taxonomy archive pages in Genesis

Below is a variation of the earlier linked tutorial which will work not only on category archives (Ex.: example.com/category/category-1) but also on tag archives (Ex.: example.com/tag/headlines) and any other custom taxonomy term archive pages (Ex.: example.com/portfolio_category/featured).

Step 1

Install and activate WP Term Images plugin.

Step 2

Edit category / tag / taxonomy archive pages and set your desired images.

Step 3

Add the following in child theme’s functions.php:

// Register custom image size for hero images on category / tag / taxonomy archive pages.
add_image_size( 'category-image', 1600, 400, true );

add_action( 'genesis_after_header', 'sk_taxonomy_term_hero_image' );
/**
 * Display hero image below header on category / tag / taxonomy archive pages.
 */
function sk_taxonomy_term_hero_image() {
    global $wp_query;

    // if we are not on a category archive or tag archive or a taxonomy archive, abort.
    if ( ! is_category() && ! is_tag() && ! is_tax() ) {
        return;
    }

    // get and store the object of current taxonomy term or category or tag.
    $term = is_tax() ? get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) ) : $wp_query->get_queried_object();

    if ( ! $term ) {
        return;
    }

    // image id is stored as term meta.
    $image_id = get_term_meta( $term->term_id, 'image', true );

    // image data stored in array, second argument is which image size to retrieve.
    $image_data = wp_get_attachment_image_src( $image_id, 'category-image' );

    // image url is the first item in the array (aka 0).
    $image = $image_data[0];

    // if there's no image for this category, abort.
    if ( empty( $image ) ) {
        return;
    }

    printf( '<figure class="term-image"><img src="%s" alt="%s" /></figure>', $image, single_cat_title( '', false ) );
}

Step 4

Add the following in child theme’s style.css:

.category-image img {
    vertical-align: top;
    width: 100%;
}

References:

How to display taxonomy term image below archive intro text in Genesis

single_cat_title()

Filed Under: Free Tagged With: Genesis

jQuery Switcher .hide() .show()

HTML

<div class="switch-wrapper">
                    <label class="switch">
                      <input id="map-switcher" type="checkbox" checked>
                      <span class="slider round"></span>
                    </label>
                    <div class="switch-map">
                        Térkép
                    </div>
               </div>

CSS

/*SWITCH*/
.switch-wrapper {
	width: 60px;
	display: block;
	margin: auto;
	margin-top: -20px;
}
.switch-map {
	width: 60px;
    margin-top: 20px;
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
    transform: rotate(90deg);
}


.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #28122E;
}

input:focus + .slider {
  box-shadow: 0 0 1px #28122E;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.switch-wrapper {
	position: absolute;
	left: 0;
	right: 0;
}

JS

jQuery('#map-switcher').change(function(){
    if ($(this).is(':checked')) {
    jQuery(".hide-with-switch").show();
  } else {
    jQuery(".hide-with-switch").hide();
  }
});

Filed Under: Free Tagged With: jQuery

How to fix Yoast breadcrumb in Custom Post Types

Create a file called breadcrumb-fix.php

<div class="breadcrumb-wrapper">
<?php
    if ( function_exists('yoast_breadcrumb') ){
    
            if(get_post_type() == 'szolgaltatas'){

                include('breadcrumb-services.php');  
            }
            elseif(get_post_type() == 'post'){

                include('breadcrumb-post.php');  
            }
            else { 
                    yoast_breadcrumb( '<p id="breadcrumbs">','</p>' ); 
                } 
        }
?>
</div>

Create another file

<p id="breadcrumbs">
        <span xmlns:v="http://rdf.data-vocabulary.org/#">
            <span typeof="v:Breadcrumb">
                <a href="<?php echo home_url(); ?>/" rel="v:url" property="v:title">
                    wtsklient.hu
                </a>
            </span>
                <i class="fas fa-chevron-right"></i>
            <span typeof="v:Breadcrumb">
                    <?php lang_post_breadcrumbs(); ?>
            </span>
                <i class="fas fa-chevron-right"></i>
            <span typeof="v:Breadcrumb">
                <span class="breadcrumb_last" property="v:title">
                    <?php the_title(); ?>
                </span>
            </span>
        </span>
</p>

Create a function for 3 languages

/****************************************************
//BREADCRUMBS POSTS
****************************************************/
function lang_post_breadcrumbs(){
    if(ICL_LANGUAGE_CODE=='hu'){
        echo '<a href="#">Hírek</a>';
        }
    elseif(ICL_LANGUAGE_CODE=='en'){
        echo '<a href="#">News</a>';    
        }
    elseif(ICL_LANGUAGE_CODE=='de'){
        echo '<a href="#">Nachrichten</a>';    
        }
}

Filed Under: Free Tagged With: CPT

How to hide WordPress admin bar

function disable_admin_bar() {
   if (current_user_can('administrator') || current_user_can('contributor') ) {
     show_admin_bar(true);
   } else {
     // hide admin bar
     show_admin_bar(false);
   }
}
add_action('after_setup_theme', 'disable_admin_bar');

Filed Under: Free Tagged With: PHP

How to hide WordPress admin menus?


function hide_menu_items(){
		remove_menu_page( 'index.php' );								// Dashboard
		remove_menu_page( 'edit.php' );								 // Posts
		remove_menu_page( 'upload.php' );							 // Media
		remove_menu_page( 'edit.php?post_type=page' );	
// Pages
		remove_menu_page( 'edit-comments.php' );				
// Comments
		remove_menu_page( 'themes.php' );							 // Appearance
		remove_menu_page( 'plugins.php' );							// Plugins
		remove_menu_page( 'users.php' );								// Users
		remove_menu_page( 'tools.php' );								// Tools
		remove_menu_page( 'options-general.php' );			
// Settings
}
add_action( 'admin_menu', 'hide_menu_items' );

Filed Under: Free Tagged With: PHP

How to use tags on pages?

function add_tags_to_pages() {
	register_taxonomy_for_object_type( 'post_tag', 'page' );
}
add_action( 'init', 'add_tags_to_pages' );

Filed Under: Free Tagged With: tags

Ninja Forms: How do I Edit or Translate “Fields marked with an * are required?”

// =========================================================================
// TRANSLATE REQUIRED FIELDS IN NINJA FORMS
// =========================================================================
function my_custom_ninja_forms_i18n_front_end( $strings ) {
    $strings['fieldsMarkedRequired'] = 'A *-gal jelölt mezők kitöltése kötelező';
    return $strings;
}
add_filter( 'ninja_forms_i18n_front_end', 'my_custom_ninja_forms_i18n_front_end' );

Filed Under: Free Tagged With: PHP

Remove Entry Meta from Genesis Single Post

//Remove Entry Meta from Genesis Single Post
add_action( 'loop_start', 'remove_entry_meta' );
function remove_entry_meta() {
if ( is_singular('post') ) {
    remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
    remove_action( 'genesis_entry_footer', 'genesis_post_meta' );

    }
}

Filed Under: Free Tagged With: Genesis

How to create Custom Post Type Taxonomy

// =========================================================================
// CUSTOM POST TYPE TAXONOMY
// =========================================================================

function create_custom_post_types_taxonomy() {
    register_taxonomy(
        'POST_TYPE_cat',
        'POST_TYPE',
        array(
            'label' => __( 'Kategória' ),
            'rewrite' => array( 'slug' => 'POST_TYPE-type' ),
            'hierarchical' => true,
            'show_admin_column' => true,
        )
    );
}
add_action( 'init', 'create_custom_post_types_taxonomy' );

Filed Under: Free Tagged With: PHP

Vertical centering with flexbox

.cover {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: white;
}

Filed Under: Free Tagged With: CSS

Add Cover Image Upload Option to Customizer

Add this to functions.php

// =========================================================================
// CUSTOMIZER COVER
// =========================================================================
function genesis_cover_customize_register( $wp_customize ) {

    // Add Settings
    $wp_customize->add_setting('customizer_setting_cover_image', array(
        'transport'         => 'refresh',
        'height'         => 325,
    ));

    // Add Section
    $wp_customize->add_section('cover_section', array(
        'title'             => __('Cover image', 'name-theme'), 
        'priority'          => 70,
    ));    

    // Add Controls
    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'customizer_setting_cover_image', array(
        'label'             => __('Add cover image', 'name-theme'),
        'section'           => 'cover_section',
        'settings'          => 'customizer_setting_cover_image',    
    )));
}
add_action('customize_register', 'genesis_cover_customize_register');

Call

<img src="<?php echo esc_url( get_theme_mod( 'customizer_setting_cover_image' ) ); ?>" alt="Cover image">

Hook cover v1

// =========================================================================
// COVER
// =========================================================================
add_action('genesis_before_content', 'cover');
    function cover(){
        if ( is_front_page() ){
            echo '<img class="cover" src="'.esc_url( get_theme_mod( 'customizer_setting_cover_image' ) ).'" alt="Cover Image">';
    }
}

Hook cover v2

// =========================================================================
// COVER
// =========================================================================
add_action('genesis_after_header', 'add_cover');
function add_cover(){
    if( is_front_page() ){
        include('inc/cover.php');
    }
}
include('functions/add-cover-to-customizer.php');

Filed Under: Free Tagged With: PHP

  • « Go to Previous Page
  • Page 1
  • Interim pages omitted …
  • Page 11
  • Page 12
  • Page 13
  • Page 14
  • Page 15
  • Interim pages omitted …
  • Page 19
  • Go to Next Page »

Primary Sidebar

Gabor Flamich

Hi! I'm Gabor.
I write tutorials on WordPress and WooCommerce.

MacBook

12 Essential Snippets for Genesis Developers

Subscribe to my Newsletter to view my basic collection of Genesis snippets that I use for my projects!

Sign Up for Free
  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube
UpdraftPlus Premium

Tags

ACF Ajax Analytics API Bootstrap Breadcrumb category CPT CSS fetch FSE Genesis Google Maps Gutenberg HTML Isotope JavaScript jQuery loop Map Menu Parallax PHP Rest API SASS SEO SQL Storefront SVG tab tag manager tags Taxonomy Tool upsell Webpack Wholesale WooCommerce WordPress WPML

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 / Terms of Service
© 2025 WP Flames - All Right Reserved