genesis

  • How to Disable Genesis SEO Feature Completely

    ·

    Replace the following /wp-content/themes/genesis/lib/functions/seo.php

    function genesis_detect_seo_plugins() {
    
    	return genesis_detect_plugin(
    		// Use this filter to adjust plugin tests.
    		apply_filters(
    			'genesis_detect_seo_plugins',
    			// Add to this array to add new plugin checks.
    			[
    
    				// Classes to detect.
    				'classes'   => [
    					'All_in_One_SEO_Pack',
    					'All_in_One_SEO_Pack_p',
    					'HeadSpace_Plugin',
    					'Platinum_SEO_Pack',
    					'wpSEO',
    					'SEO_Ultimate',
    				],
    
    				// Functions to detect.
    				'functions' => [],
    
    				// Constants to detect.
    				'constants' => [ 'WPSEO_VERSION', 'SEOPRESS_VERSION' ],
    			]
    		)
    	);
    
    }

    Replace with:-

    function genesis_detect_seo_plugins() {
    
    	return true;
    }
  • Add Widget area after the Header of Genesis theme

    ·

    Add this into functions.php

    genesis_register_sidebar( array(
    'id' => 'custom-widget',
    'name' => __( 'Custom Widget', 'wbxpress' ),
    'description' => __( 'Custom Widget Area', 'wbxpress' ),
    ) );
    
    add_action( 'genesis_after_header', 'add_genesis_widget_area' );
    function add_genesis_widget_area() {
                    genesis_widget_area( 'custom-widget', array(
    		'before' => '<div class="custom-widget widget-area">',
    		'after'  => '</div>',
        ) );
    }

    Then add this into styles.php

    .custom-widget {
    	background-color: #fff;
    	padding: 30px 20px;
    	margin: 30px auto 0;
    }
    @media only screen and (min-width: 960px) {
    	.custom-widget {
    		max-width: 1080px;
    	}
    	.custom-widget .widget {
    		float: left;
    		padding: 0 20px;
    		width: 25%;
    	}
    }

    The above style is for 4 columns widget area. You can change the width to customize according to your requirement. for example width: 50%; for 2 column layout.

  • Add Widgets in Front Page of Genesis Theme

    ·

    We have earlier shared “How to Add Widgets to Homepage of Genesis theme“. Now we are sharing a similar guide, “how to add widgets in frontpage of any genesis theme” so that it become a magazine theme.

    There are three steps as usual.

    Step 1: To add code in functions.php
    Step 2: To create a front-page.php file
    Step 3: To add code in style.css

    Step 1: Add the following code into functions.php

    Step 2: Create front-page.php

    Step 3: Add the following codes into style.css

    Inside the media query of style.css add the following code:

    That’s it. Now you will get a magazine style homepage as follows:

    front-page
  • Move Footer Menu below Site Header in Genesis

    ·

    This guide is applicable for Genesis Sample theme > 2.9. For older version check this tutorial.

    By default the Secondary Menu in Genesis Sample theme is placed inside Footer section. To relocate this menu to below the site header we need to follow the steps as mentioned below:-

    Step 1: Open /themes/genesis-sample/config/menus.php and change the text as follows.

    return array(
    'primary' => ( 'Header Menu', 'genesis-sample' ), 'secondary' => ( 'Secondary Navigation', 'genesis-sample' ),
    );

    Step 2: Delete the following from /themes/genesis-sample/functions.php

    // Repositions the secondary navigation menu.
    remove_action( 'genesis_after_header', 'genesis_do_subnav' );
    add_action( 'genesis_footer', 'genesis_do_subnav', 10 );

    Step 3: Edit Responsive menu settings from functions.php

    $settings = array(
    'mainMenu' => ( 'Menu', 'genesis-sample' ), 'menuIconClass' => 'dashicons-before dashicons-menu', 'subMenu' => ( 'Submenu', 'genesis-sample' ),
    'subMenuIconClass' => 'dashicons-before dashicons-arrow-down-alt2',
    'menuClasses' => array(
    'combine' => array(
    '.nav-primary',
    '.nav-secondary',
    ),
    'others' => array(),
    ),
    );

    Step 4: In /themes/genesis-sample/js/genesis-sample.js change the following line

    $( '.site-inner' ).css( 'margin-top', siteInnerMarginTop );
    into

    $( '.nav-secondary' ).css( 'margin-top', siteInnerMarginTop );

    Step 5: In /themes/genesis-sample/style.css inside the media query change the following:

     
    .site-inner {
    margin-top: 70px;
    max-width: 1140px;
    }

    to

    .site-inner {
    margin-top: 0;
    max-width: 1140px;
    }

    Step 6: In /themes/genesis-sample/style.css change the following:

    /* Footer Menu
    --------------------------------------------- */
    .nav-secondary {
    margin-top: 10px;
    }
    .nav-secondary .genesis-nav-menu {
    line-height: 1.5;
    }
    .nav-secondary .menu-item {
    display: inline-block;
    }
    .nav-secondary a {
    margin-left: 10px;
    margin-right: 10px;
    padding: 0;
    }
    to

    /* Secondary Navigation
    --------------------------------------------- */
    .nav-secondary {
    clear: left;
    padding: 15px 0;
    background-color: #eee;
    width: 100%;
    }
    .nav-secondary .menu-item {
    display: inline-block;
    }
    .nav-secondary a {
    padding: 10px 15px;
    color: #333;
    }

    Step 7: In /themes/genesis-sample/style.css inside the media query add the following:

    .nav-secondary .wrap {
    max-width: 960px;
    margin: 0 auto;
    }

    That’s it.

  • Add the following code inside the Genesis theme functions.php file:-

    That’s all.

  • Add a Search Box in Primary Navigation

    ·

    How to add a search box in primary menu of a genesis theme which is located at the site header. This is applicable for secondary menu also.

    First of all, add the following code inside the functions.php file:

    // Add a Search Bar to PRIMARY Navigation Menu
    add_filter( 'wp_nav_menu_items', 'theme_menu_extras', 10, 2 );
    function theme_menu_extras( $menu, $args ) {
    if ( 'primary' !== $args->theme_location )
    return $menu;
    $menu  .= '<li class="search-bar">' . get_search_form( false ) . '</li>';
    return $menu;
    }

    If you want to add a search box in secondary menu, you need to change the word, “primary” to “secondary”.

    After adding the code the the site header will look like:-

    desktop view
    mobile view

    Now add the following code inside media only screen section of style.css:-

    .genesis-nav-menu > .search-bar {
    float: right;
    }
    desktop view

    Now, we should either remove the search button or place the button inline with the search box. To achieve this we need to make some modification in our style.css file.

    .search-form input[type="search"] {
    width: 60%;
    float: left;
    }

    Now the site header will look good as follows:-

    desktop view
    mobile view

    Finally, if you would like to hide the search button, you need to add the following codes inside style.css:-

    .genesis-nav-menu .search-form input[type="submit"] {
    display: none;
    }
    .search-form input[type="search"] {
    width: 100%;
    float: left;
    }

    The new looks will be cleaner.

    final result

    For further fine tuning, you need to add the following code into style.css

    /* Search Form
    --------------------------------------------- */
    .genesis-nav-menu .search-form input[type="submit"] {
    display: none;
    }
    .search-form input[type="search"] {
    width: 160px;
    float: left;
    font-size: 14px;
    padding: 10px 15px;
    background-color: #ddd;
    }