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.
Leave a Reply