• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WBXPress.NET

Website Developement Guide

  • apache2
  • nginx
  • mysql
  • php7
  • SSL
  • wordpress
  • genesis
  • caching
  • seo

Customizing Genesis Sample Child Theme

Updated on 31st August 2016 4 Comments

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.

Filed Under: wordpress Tagged With: genesis, genesis-sample, theme-development

Reader Interactions

Comments

  1. Aldi says

    17th February 2018 at 12:54 pm

    Hi I am using your Child Theme, I have a question if you don’t mind to answer which is I want to remove space between content and sidebar, so the content and sidebar is united like in one single page.

    Reply
    • wbxpress says

      18th February 2018 at 10:57 pm

      you need to edit styles.css to increase content width and remove widget bottom margin.

      .content {
      width: 660px;
      }

      and

      .widget {
      margin-bottom: 0px;
      }

      Reply
      • Aldi says

        27th February 2018 at 12:29 pm

        Thank you very much and it worked well.

        One more thing if you don’t mind, it’s hard for me to increase the width of the Body of the theme. So I can enlarge the post and sidebar width.

        Thank you again.

      • Ald says

        3rd April 2018 at 6:58 pm

        Hi may I know how to make sidebar height similar to content or post height? Please tell me how to do it. Thank you very much.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Most Popular Posts

  • Remove/ Defer Render-blocking JavaScripts
  • Customizing Genesis eleven40-pro Theme
  • Free Genesis Child Theme by WBXPress
  • Host Multiple Sites with SSL in Ubuntu 18.04
  • 25 Ways to Boost Website Traffic that Really Work

Recent Comments

  • Ruhul on Customizing Genesis eleven40-pro Theme
  • Priya Agarwal on Customizing Genesis eleven40-pro Theme
  • mimi roy on Remove/ Defer Render-blocking JavaScripts
  • danish choudhary on Customizing Genesis eleven40-pro Theme
  • Radhe on Customizing Genesis eleven40-pro Theme

Copyright © 2021 · Powered by WordPress · Log in