• Skip to main content
  • Skip to primary sidebar

WordPress, Genesis Framework and Storefront customization tutorials

  • Archive
    • Free
    • Premium
  • Blog
  • About
  • Contact
  • Newsletter
  • Membership
  • Login
Home ยป Genesis

Genesis

How to Change Genesis Widget Title from H3 to div

Filed Under: Free Tagged With: Genesis

How to add logo to Genesis Footer

Create a custom hook where You want to place the logo

<?php do_action('genesis_footer_logo'); ?>

functions.php

// =========================================================================
// Adds the WordPress custom logo to the footer.
// =========================================================================
function theme_prefix_output_custom_logo_footer() {
    if ( current_theme_supports( 'genesis-custom-logo' ) ) {
        add_action( 'genesis_footer_logo', 'the_custom_logo', 11 );
    }
}
add_action( 'after_setup_theme', 'theme_prefix_output_custom_logo_footer', 11 );

Filed Under: Free Tagged With: Genesis

How to use Genesis Hooks to customize your theme

Step #1 Install and activate Genesis Visual Hook Guide plugin

If You want to display the positions of Genesis action hooks this plugin will help You a lot. Once installed this plugin adds a drop down menu to the admin bar to select between three views (Hook, Filter, and Markup). Select an option or all three to see the hooks in their actual locations on your current theme.

Step #2 The hooks mark a specific position of website’s layout.

You can pick one and add an action hook to display your custom content. If You want to display a banner on the top of every single post, just copy this snippet in functions.php and set the source url of the image.

But it could be any kind of content for example CTA section, warning message, calculator, etc…

Filed Under: Free Tagged With: Genesis

Combine primary and secondary nav menus on mobile in Genesis

Create a file named responsive-menus.js and enqueue it in your functions.php

Filed Under: Free Tagged With: Genesis

Fix the mobile menu bouncing bug in Genesis Sample

// SITE HEADER
//*****************
.site-header .title-area {
max-width: 150px;
}

Filed Under: Free Tagged With: Genesis

How to change Genesis Next & Previous Page Link Text

Filed Under: Free Tagged With: Genesis

Force full-width layout on specific single page in Genesis

Filed Under: Free Tagged With: Genesis

Universal Parallax in Genesis

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: Free Tagged With: Genesis, Parallax

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

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 Tagged With: Genesis

Change Genesis Search Widget’s Placeholder Text

To change “Search this site …” add this snippet to functions.php:

Filed Under: Free Tagged With: Genesis

Change breadcrumbs home text in Genesis

Add this to functions.php

Filed Under: Free Tagged With: Genesis

Remove sidebar from cart and checkout page in Genesis WooCommerce

// =========================================================================
//REMOVE SIDEBAR OF GENESIS CHECKOUT AND CART PAGE 
// =========================================================================
function remove_checkout_sidebar_genesis($opt) {
    if( is_checkout() || is_cart()) {
       $opt = 'full-width-content';
        return $opt;
    }
}
add_filter('genesis_site_layout', 'remove_checkout_sidebar_genesis');

Filed Under: Free Tagged With: Genesis

Display sticky post first, then the last published posts in Genesis

function custom_loop_with_pagination() {
    global $post;

    $sticky = get_option( 'sticky_posts' );
 
    $args = array(
        'paged'          => get_query_var( 'paged' ),
        
        'sticky_first' => array(
            'post_type'      => 'post', 
            'category_name'  => 'program',
            'post__in' => $sticky, 
            'posts_per_page' => 2,  
        ),
        'last_published' => array(
            'post_type'      => 'post', 
            'category_name'  => 'program',
            'post__not_in' => $sticky, 
            'posts_per_page' => 10,
            
        )
        
    );
 
    global $wp_query;
    $wp_query = new WP_Query( $args );
    
    require 'templates/loop/grid.php';

}
add_action( 'genesis_loop', 'custom_loop_with_pagination' );
add_action( 'genesis_before_loop', 'genesis_posts_nav' );
 
 
genesis();

Filed Under: Free Tagged With: Genesis

Custom single post template for specific category in Genesis

Add this snippet to single.php

<?php
  
function custom_single_post() { 
        
        if(in_category('program')){
            include('single-CATEGORY_1.php');
        }elseif(in_category('piacter')){
            include('single-CATEGORY_2.php');    
        }else{
            include('single.php');
        }
   }
   add_action('genesis_before_loop', 'custom_single_post', 0);

genesis();

Filed Under: Free Tagged With: Genesis

Custom Post Type with Pagination in Genesis

Do You want to create a Custom Post Type loop with the Genesis core pagination? In this post I’m gonna show You how to do it.

1) Create a Custom Post Type and add some posts to it

You can create a Custom Post Type with code, or You can use a plugin like Custom Post Type UI to do it.

pagination-01

2) Create a new page named Pagination and leave it blank

pagination-02

3) Create a genesis template file named page-pagination.php and place this code into it

If You set the slug of the previous created page after the file name page.php -> page-pagination.php, You don’t need to specify the Template name: Pagination right after the opening php tag.

<?php
// =========================================================================
// CUSTOM POST TYPE WITH PAGINATION
// =========================================================================
function custom_loop_with_pagination() {
	global $post;

	$args = array(
		'post_type'      => 'books',  //---YOUR CUSTOM POST TYPE
		'posts_per_page' => 4,        //---SET HOW MANY POSTS MUST BE SHOWN ON ONE PAGE
		'paged'          => get_query_var( 'paged' )
	);

	global $wp_query;
	$wp_query = new WP_Query( $args );

	if ( have_posts() ) : 
		while ( have_posts() ) : the_post(); ?>
            
            <article>
                <h2><?php the_title(); ?></h2>
                <?php the_excerpt(); ?>
			</article>

		<?php endwhile;
		do_action( 'genesis_after_endwhile' );
	endif;

	wp_reset_query();
}
add_action( 'genesis_loop', 'custom_loop_with_pagination' );
remove_action( 'genesis_loop', 'genesis_do_loop' );


genesis();

4) The result will be look like this

pagination

Filed Under: Free Tagged With: Genesis

How to add sticky footer to Genesis with flexbox

/* Sticky Footer */

.site-container {
     display: -ms-flexbox;
     display:-webkit-flex;
     display:-webkit-box;
     display:flex;
     -ms-flex-direction:column;
     -webkit-flex-direction:column;
     -webkit-box-orient:vertical;
     -webkit-box-direction:normal;
     flex-direction:column;
     min-height:100vh;
}

.site-inner {
     -ms-flex:1;
     -webkit-flex:1;
     -webkit-box-flex:1;
     flex:1;
     width: 100%;
     padding: 20px 0;
     word-wrap: break-word;
}

Filed Under: Free Tagged With: Genesis

Split Menu Around the Logo in Genesis Sample

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: Premium Tagged With: Genesis

How to remove ‘Menu’ text in Genesis mobile navigation

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 Tagged With: Genesis

How to force hamburger menu on desktop in Genesis

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: Free Tagged With: Genesis

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

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 Tagged With: Genesis

  • Go to page 1
  • Go to page 2
  • Go to page 3
  • 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 Genesis Google Maps Gutenberg HTML Isotope JavaScript jQuery loop Map Menu Parallax PHP 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
© 2023 WP Flames - All Right Reserved