WBXPress.NET

genesis-sample

  • Add Widgets in Front Page of Genesis Theme

    ·

    wbxpress

    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

    ·

    wbxpress

    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 a Search Box in Primary Navigation

    ·

    wbxpress

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

  • Customized Genesis Sample Theme V 2.8.0

    ·

    wbxpress

    I recently customized genesis sample theme version 2.8.0 for use at wbxpress. I like to share it here, so that you can use it too.

    Requirements: Genesis Framework

    Here are few features of this theme:-

    1. Gutenberg Ready
    2. Based on the latest Genesis Sample version 2.8.0
    3. Single Column, No Sidebar.
    4. 2-widgets Footer
    5. Featured Images Ready (Recommended size 1280×720)
    screenshot

    If you are a minimalist design lover, you should try this theme from the download link below.

    Download: WBXP10.ZIP

  • New Genesis Sample Theme – A Fresh Update

    ·

    wbxpress

    With Genesis 2.6, Genesis Sample theme got better than ever before. Genesis is now Google Adsense ready. It means you don’t have to worry about placing ads in your site. You just enable Google auto adsense and it will do the rest. Genesis Sample theme now looks better because the fonts are smaller in size and soothing for eyes.

     

     

    Check demo.

  • Customizing Genesis Sample Child Theme

    ·

    wbxpress

    Genesis Sample is the best child theme for customization. You can make awesome theme from this starter theme. Here we shall describe steps to make a single column, responsive, minimal theme for use in this site.

    1. Personalize the theme (Optional)

    If you want to rename this theme as yours, then you need to make few changes:-

    a. Change the folder name from genesis-sample to your theme name e.g. wbxpress.

    b. Use Notepad++ to replace all occurrences of genesis-sample to your desired name e.g. wbxpress.

    c. Place your own favicon.ico inside /images

    2. Remove Primary and Secondary Sidebars

    (1) To make a single column layout we need to remove primary and secondary sidebars. To achieve this ADD the following code at the end of functions.php file.

    //* Remove sidebars
unregister_sidebar( 'sidebar' );
unregister_sidebar( 'sidebar-alt' );

//* Force full-width-content layout setting
add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );

//* Remove site layouts
genesis_unregister_layout( 'content-sidebar' );
genesis_unregister_layout( 'sidebar-content' );
genesis_unregister_layout( 'content-sidebar-sidebar' );
genesis_unregister_layout( 'sidebar-content-sidebar' );
genesis_unregister_layout( 'sidebar-sidebar-content' );

    (2) Further search all elements inside style.css containing sidebar and DELETE it.

    Delete this:

    /* ## Column Widths and Positions
--------------------------------------------- */

/* ### Wrapping div for .content and .sidebar-primary */

.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
	width: 1060px;
}

.content-sidebar-sidebar .content-sidebar-wrap {
	float: left;
}

.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
	float: right;
}

    Then, delete this:

    content-sidebar .content,
.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content {
	float: left;
}

.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content,
.sidebar-sidebar-content .content {
	width: 660px;
}

    Then delete this:

    /* ### Primary Sidebar */

.sidebar-primary {
	float: right;
	width: 360px;
}

.sidebar-content .sidebar-primary,
.sidebar-sidebar-content .sidebar-primary {
	float: left;
}

/* ### Secondary Sidebar */

.sidebar-secondary {
	float: left;
	width: 180px;
}

.content-sidebar-sidebar .sidebar-secondary {
	float: right;
}

    Then delete this:

    ,
.sidebar .widget-title a

    Then delete this:

    /* # Plugins
---------------------------------------------------------------------------------------------------- */

/* ## Genesis eNews Extended
--------------------------------------------- */

.sidebar .enews-widget,
.sidebar .enews-widget .widget-title {
	color: #fff;
}

.sidebar .widget.enews-widget {
	background-color: #333;
}

.sidebar .enews-widget input,
.sidebar .enews-widget input:focus {
	border: 1px solid #333;
}

.sidebar .enews-widget input[type="submit"] {
	background-color: #c3251d;
	color: #fff;
}

.sidebar .enews-widget input:hover[type="submit"],
.sidebar .enews-widget input:focus[type="submit"]  {
	background-color: #fff;
	color: #333;
}

.enews-widget input {
	font-size: 16px;
	font-size: 1.6rem;
	margin-bottom: 16px;
}

.enews-widget input[type="submit"] {
	margin: 0;
	width: 100%;
}

.enews form + p {
	margin-top: 24px;
}

    Then delete this:

    /* # Sidebars
---------------------------------------------------------------------------------------------------- */

.sidebar {
	font-size: 16px;
	font-size: 1.6rem;
	margin-bottom: 40px;
}

.sidebar .widget {
	background-color: #fff;
	padding: 40px;
}

    Then delete this from media queries:

    	.content-sidebar-sidebar .content-sidebar-wrap,
	.sidebar-content-sidebar .content-sidebar-wrap,
	.sidebar-sidebar-content .content-sidebar-wrap {
		width: 920px;
	}

	.sidebar-content-sidebar .content,
	.sidebar-sidebar-content .content,
	.content-sidebar-sidebar .content {
		width: 580px;
	}

	.sidebar-primary {
		width: 300px;
	}

	.content-sidebar-sidebar .content-sidebar-wrap,
	.sidebar-content-sidebar .content-sidebar-wrap,
	.sidebar-sidebar-content .content-sidebar-wrap {
		width: 740px;
	}

	.sidebar-content-sidebar .content,
	.sidebar-sidebar-content .content,
	.content-sidebar-sidebar .content {
		width: 400px;
	}

    3. Adjust width for different screen-size

    (1) As we made a single column layout we do not need any complex code for different screen size. So remove the following codes:

    @media only screen and (max-width: 1340px) {

	.site-inner,
	.wrap {
		max-width: 1140px;
	}

	.content-sidebar-sidebar .content-sidebar-wrap,
	.sidebar-content-sidebar .content-sidebar-wrap,
	.sidebar-sidebar-content .content-sidebar-wrap {
		width: 920px;
	}

	.content,
	.site-header .widget-area {
		width: 800px;
	}

	.sidebar-content-sidebar .content,
	.sidebar-sidebar-content .content,
	.content-sidebar-sidebar .content {
		width: 580px;
	}

	.sidebar-primary {
		width: 300px;
	}

	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3 {
		width: 340px;
	}

	.footer-widgets-1 {
		margin-right: 60px;
	}

}


@media only screen and (max-width: 1200px) {

	.site-inner,
	.wrap {
		max-width: 960px;
	}

	.content-sidebar-sidebar .content-sidebar-wrap,
	.sidebar-content-sidebar .content-sidebar-wrap,
	.sidebar-sidebar-content .content-sidebar-wrap {
		width: 740px;
	}

	.content,
	.site-header .widget-area {
		width: 620px;
	}

	.sidebar-content-sidebar .content,
	.sidebar-sidebar-content .content,
	.content-sidebar-sidebar .content {
		width: 400px;
	}

	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3 {
		width: 300px;
	}

	.footer-widgets-1 {
		margin-right: 30px;
	}

}

    (2) Now REPLACE:

    @media only screen and (max-width: 1023px) {

    with

    @media only screen and (max-width: 880px) {

    4. Change Footer Widgets

    By default there are 3 footer widgets in the genesis-sample theme. But we want to make it 2 because after making single column layout we have a narrow site and for this 2 column footer widgets will be appropriate.

    (1) Open functions.php and Replace:

    //* Add support for 3-column footer widgets
add_theme_support( 'genesis-footer-widgets', 3 );

    with

    //* Add support for 2-column footer widgets
add_theme_support( 'genesis-footer-widgets', 2 );

    (2) Open style.css and replace

    /* # Footer Widgets
---------------------------------------------------------------------------------------------------- */

.footer-widgets {
	background-color: #fff;
	font-size: 18px;
	font-size: 1.8rem;
	clear: both;
	padding: 60px 0;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
	width: 380px;
}

.footer-widgets-1 {
	margin-right: 70px;
}

.footer-widgets-1,
.footer-widgets-2 {
	float: left;
}

.footer-widgets-3 {
	float: right;
}

    with

    /* # Footer Widgets
---------------------------------------------------------------------------------------------------- */

.footer-widgets {
	background-color: #fff;
	font-size: 18px;
	font-size: 1.8rem;
	clear: both;
	padding: 60px 0;
}

.footer-widgets-1,
.footer-widgets-2 {
	width: 420px;
}


.footer-widgets-1 {
	margin-right: 50px;
}

.footer-widgets-1,
.footer-widgets-2 {
	float: left;
}

    (3) Remove all instances of footer-widgets-3 from style.css

    Now you have a theme as ours. Let us know if you find any problem implementing the codes. Thanks for reading.