WBXPress.NET

Website Developement Guide

Customizing Genesis Sample Child Theme

Updated: by 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.

Related Posts:

Reader Interactions

Comments

  1. 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

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

      .content {
      width: 660px;
      }

      and

      .widget {
      margin-bottom: 0px;
      }

      Reply

      • 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.

      • 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

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