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 );
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
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
1) Install and activate WP Nav Plus plugin
WP Nav Plus has been designed to fill gaps in the WordPress menu system which make it difficult to accomplish many popular website design patterns.
2) Add this snippet to functions.php
//Remove original genesis header remove_action('genesis_header','genesis_do_header'); //Crate Left / Right menu widget areas genesis_register_sidebar( array( 'id' => 'header-left-menu', 'name' => __( 'Header Left Nav Menu', 'wpflames' ), ) ); genesis_register_sidebar( array( 'id' => 'header-right-menu', 'name' => __( 'Header Right Nav Menu', 'wpflames' ), ) ); //Create the function that split the navigation around centered logo function wpflames_header_widgets() { if ( is_active_sidebar( 'header-left-menu' ) || is_active_sidebar( 'header-right-menu' ) ) { echo '<div class="row">'; genesis_widget_area( 'header-left-menu', array( 'before' => '<div class="col-lg-5 header-nav-menu header-left-menu">', 'after' => '</div>', ) ); echo ' <div class="col-lg-2 logo"> <img src="YOUR_IMAGE_SOURCE" alt=""> </div>'; genesis_widget_area( 'header-right-menu', array( 'before' => '<div class="col-lg-5 header-nav-menu header-right-menu">', 'after' => '</div>', ) ); echo '</div>'; } } add_action( 'genesis_header', 'wpflames_header_widgets' ); function remove_hamburger_menu_from_desktop(){ if(!wp_is_mobile()){ remove_action( 'genesis_header', 'genesis_do_nav', 12 ); } } add_action('init', 'remove_hamburger_menu_from_desktop');
3) CSS
/*ONLY MOBILE*/ @media (max-width: 768px) { .header-left-menu, .header-right-menu { display: none; } } @media (min-width: 768px) { #menu-left-menu, #menu-right-menu { display: flex; justify-content: space-evenly; } }
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' );