PopWP

WordPress and Genesis Tutorials

Improve Genesis Sample with features and Bug fixes

Last Updated on Favorited: 0 times

Genesis Sample is the most popular lightweight and easy to use child theme which offers almost core features.

This tutorial provides the steps to enhance and improve the Genesis Sample which will help you to design and develop #GenesisWP websites faster and easier than before.

Here are some of the changes You can make.

1. Adding js, no-js classes in <body>

This is an important thing which should be followed while working with any design.

These two classes will help you to customize your site based on javascript is enabled (.js) or not (.no-js) in user Browser.

Web Developer extension will help you to test this feature and more.

2. Enhance .title-area and .nav-primary site header

Genesis Sample 2.6.0 was having some js issue which making the .nav-primary to behave differently in with case when js is enabled or disabled in mobile and desktop screens.

One can fix it by following above .js or .no -js guide and use CSS like

.js .nav-primary {
    display: none;
}

@media only screen and (min-width: 960px) {

    .no-js .nav-primary {
        display: block;
        padding-top: 15px;
        padding-bottom: 15px;
    }

}

We can also use flexbox for centering these elements for desktop screens.

@media only screen and (min-width: 960px) {

    .site-header .wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    .title-area {
        float: none;
    }

    .nav-primary {
        float: none;
        margin-left: auto;
        padding-top: 15px;
        padding-bottom: 15px;
    }

}

3. full-width-content Layout

The default full-width-layout in New Genesis Sample is not full width and have a width of 65%. This should be 100% for full width layout settings.

Open style.css and under the min-width 960px media query below

.content {
    float: left;
    width: 65%;
}

add

.full-width-content .content {
    float: none;
    width: 100%;
}

4. Font Size px vs rem

html {
	font-size: 62.5%; /* 10px browser default */
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

More coming soon…

You can also create an advanced Widgetized front page in Genesis Sample theme.

It is recommended to start your work with these changes.

Related Posts

Reader Interactions