Genesis

How to Change Genesis Widget Title from H3 to div

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

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…

Combine primary and secondary nav menus on mobile in Genesis

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

Fix the mobile menu bouncing bug in Genesis Sample

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

How to change Genesis Next & Previous Page Link Text

Force full-width layout on specific single page in 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.

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

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');

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();

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();

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.

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

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

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

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:

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',
	],
];

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

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' );