• Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

Easy Web Design Tutorials

WordPress Tutorials and more

  • Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

10 February - 2016 By Paal Joachim 13 Comments
Last updated on: March 11, 2017

This tutorial contains lots of widget areas that can be used in Genesis child themes.

One of the reasons why I use Genesis themes is all the information that is available on how to use it.
My affiliate link to: StudioPress Genesis Child themes

To add a widget area to any theme you need to know the areas you can add it to called a hook.
For Genesis there is a visual hook guide so one can see the name of each section.

The After Entry and Footer Header widget areas.

Some are based on the Genesis child theme Metro by StudioPress. (I added an affiliate link.)

I made the The After Entry widget area which is located on single post pages below the content
and the Footer Header widget area which is located just above the Footer widgets.

The after entry widget area and the footer header widget area.

Widget areas

 

The after entry post widget area

The following will only be visible in single posts screen after the post/article.

In the Child theme functions.php file I added:
(NB! replace any mention of the theme name metro with the theme name you are using.)

genesis_register_sidebar( array(
    'id' => 'after-entry',
    'name' => __( 'After Entry', 'metro' ),
    'description' => __( 'This is the after entry section.', 'metro' ),
 ) );

Since it will only be visible after the post we also need to add some additional code:

//* Hooks after-entry widget area to single posts -- Widget at the end of posts
 add_action( 'genesis_entry_footer', 'after_post' );
 function after_post() {
        if ( ! is_singular( 'post' ) )
        return;
         genesis_widget_area( 'after-entry', array(
        'before' => '<div class="after-entry widget-area"><div class="wrap">',
        'after' => '</div></div>',
   ) );
}

 

The widget is added right before the footer area begins. A check is made: ! is_singualar with a following return meaning if it is not a single page then do nothing. The next code will be the default for all single pages. A widget will be seen in all single post pages. Which can then be used for for instance an author widget or something else that may follow right after the post and before the comments area.

The CSS:

 .after-entry {
   /* background: url(assets/img/lines.png); */
   border-radius: 10px;
   border: 1px solid #ccc;
   background-size: 8px 8px;
   margin-top: 5px;
}
.after-entry .wrap {
   background-color: #fff;
   padding: 32px;
}
.after-entry p {
   margin-bottom: 20px;
}
after-entry .widget-title,
.archive-title,
.comments-title,
.widget .entry-title {
   font-size: 20px;
}

NB! Genesis has a built-in shortcode for the after entry widget so one can use this code instead inside the functions.php file:

//* Add support for after entry widget
add_theme_support( 'genesis-after-entry-widget-area' );

The footer header section

This widget section I call the footer header which is to be included before the footer widgets.

In the functions.php file add the following:

//* Since I want to keep this section before the footer section I am adding this code before the following footer widgets code.
add_action( 'genesis_after', 'add_genesis_footer_header' );
function add_genesis_footer_header() {
      genesis_widget_area( 'footer-header', array(
  'before' => '<div class="footer-header widget-area">',
  'after' => '</div>',
 ) );
}
/* Add the following code to where widgets are registered area of the functions file */
genesis_register_sidebar( array(
  'id' => 'footer-header',
  'name' => __( 'Footer Header', 'genesis' ),
  'description' => __( 'This is the Footer Header.', 'custom' ),
) );

 

The CSS:

/* Added as an extra area right above the footer. */
.footer-header {
   background-color: #fff;
   clear: both;
   font-size: 15px;
   margin: 25px auto;
   max-width: 1140px;
   /* padding: 36px 36px 0; */
   border: 3px solid #DDD;
   border-radius: 6px; 
   box-shadow: 0px 1px 10px -4px #000, 0px 0px 40px #EEEEEE;
   box-shadow: 0px 3px 5px #444; 
   width: 100%;
   padding: 15px;
}
/* Inner Footer Header area */
.footer-header .wrap {
   padding: 8px;
   background: #f1f1f1;
}

.

A lot more widget areas that can be used in Genesis child themes.

The body background widget area

Checking out the Background slider master plugin I could see the CSS in how they made the background slider stick behind all the content.

I made a new background body widget area that I now can add sliders, text, images etc to and it will stick behind all the content on the page.

What you see in the following screenshot:
– Background image (blue background) I added into the CSS body background.
– A slider added into the body background widget area.
– Background widget with text.
– Header right widget area containing a custom menu.

As I scroll the blue background image and slider is fixed and stays in place. The custom menu floats above.

I took a screenshot just as the slider switched from a beach picture of myself and over to Yogananda.
(As it is now I am not able to control the slider as I believe the controls would be under the other page layers – content, header etc.)

Background Slider in the Body background widget area. Containing a header right section with a custom menu.

Background Slider in the Body background widget area. Containing a header right section with a custom menu.

In the functions.php file add the following:

// In the body of the page. 
genesis_register_sidebar( array(
 'id' => 'body-background-widget',
 'name' => __( 'Body Background', 'custom-genesis-sample' ),
 'description' => __( 'Body Background area.', 'custom-genesis-sample' ),
) );
add_action( 'genesis_before', 'add_body_widget_area' );
function add_body_widget_area() {
 genesis_widget_area( 'body-background-widget', array(
 'before' => '<div class="body-background-widget widget-area">',
 'after' => '</div>',
 ) );
}

 

Add the following code to your CSS stylesheet.

.body-background-widget {
 background: #fcfcfc url('images/Blue-bubbles.jpg') no-repeat left top;
 
 position: fixed;
 overflow: hidden;
 width: 100%;
 height: 100%;
 top: 28px;
 z-index: -1;
}

It might be best to download a widget plugin to control where you are using the body background widget (I prefer the content aware sidebars plugin). Or use CSS to define where you want to use the widget section. To what you see above in the screenshot I used the following CSS. This needs to be improved but is a good start.

.home .body-background-widget,
.single .body-background-widget {
 display: none;
}
.page-id-618 .body-background-widget {
 background: #fcfcfc url('images/Blue-bubbles.jpg') no-repeat left top;
 position: fixed;
 overflow: hidden;
 width: 100%;
 height: 100%;
 top: 28px;
 z-index: -1;
}
.page-id-618 .preheader-container,
.page-id-618 .footer-header,
.page-id-618 .footer-widgets {
 display: none;
}
.page-id-618 .site-header {
 width: 300px;
 background: none;
}

 

A large home page filled with widget areas

As I made a new site with lots of widget areas I will continue this article by adding them in.
This is in addition to the above and the home widgets area tutorial.

Genesis Themes widget sections

Genesis Themes widget sections – For additional widget areas check the Genesis Visual Hook Guide

 

Widget areas used in the above screenshot:
Preheader left
Preheader right
Header right

Home featured full
Home featured left
Home featured right
Home middle 1, 2 and 3
Home bottom

Footer header
Footer 1, 2 and 3
A footer menu location.

In the functions.php file add the following:

/*---------------- WIDGET Areas  Code placed into the functions.php file ------------------*/
//Position the PreHeader Area containing the preheader left and right.
function genesischild_preheader_widget() {
 echo '<section class="preheadercontainer"><div class="wrap">';
 genesis_widget_area ( 'preheaderleft' );
 genesis_widget_area ( 'preheaderright' );
 echo '</div></section>';
}
/* ----- Pre Header Widgets ------ */
genesis_register_widget_area(
 array(
 'id' => 'preheader-left',
 'name' => __( 'Preheader Left', 'custom-genesis-sample' ),
 'description' => __( 'This is the pre header left widget area', 'custom-genesis-sample' ),
 )
);
genesis_register_widget_area(
 array(
 'id' => 'preheader-right',
 'name' => __( 'Preheader Right', 'custom-genesis-sample' ),
 'description' => __( 'This is the pre header right widget area', 'custom-genesis-sample' ),
 )
);
/* Adding a container to contain both preheader left and right */
add_action( 'genesis_before_header', 'my_pre_header' );
function my_pre_header() {
echo '<div class="preheader-container"><div class="wrap">';
 genesis_widget_area( 'preheader-left', array(
 'before' => '<div class="preheader-left widget-area one-half first">',
 'after' => '</div>',
 ) );
 genesis_widget_area( 'preheader-right', array(
 'before' => '<div class="preheader-right widget-area one-half">',
 'after' => '</div>',
 ) );
 echo '</div></div>';
}
// Home page widgets
genesis_register_sidebar( array(
 'id' => 'home-featured-full',
 'name' => __( 'Home Featured Full', 'custom-genesis-sample' ),
 'description' => __( 'This is the featured section if you want full width.', 'custom-genesis-sample' ),
) );
genesis_register_sidebar( array(
 'id' => 'home-featured-left',
 'name' => __( 'Home Featured Left', 'custom-genesis-sample' ),
 'description' => __( 'This is the featured section left side.', 'custom-genesis-sample' ),
) );
genesis_register_sidebar( array(
 'id' => 'home-featured-right',
 'name' => __( 'Home Featured Right', 'custom-genesis-sample' ),
 'description' => __( 'This is the featured section right side.', 'custom-genesis-sample' ),
) );
genesis_register_sidebar( array(
 'id' => 'home-middle-1',
 'name' => __( 'Home Middle 1', 'custom-genesis-sample' ),
 'description' => __( 'This is the home middle left section.', 'custom-genesis-sample' ),
) );
genesis_register_sidebar( array(
 'id' => 'home-middle-2',
 'name' => __( 'Home Middle 2', 'custom-genesis-sample' ),
 'description' => __( 'This is the home middle center section.', 'custom-genesis-sample' ),
) );
genesis_register_sidebar( array(
 'id' => 'home-middle-3',
 'name' => __( 'Home Middle 3', 'custom-genesis-sample' ),
 'description' => __( 'This is the home middle right section.', 'custom-genesis-sample' ),
) );
genesis_register_sidebar( array(
 'id' => 'home-bottom',
 'name' => __( 'Home Bottom', 'custom-genesis-sample' ),
 'description' => __( 'This is the home bottom section.', 'custom-genesis-sample' ),
) );
/*------- Footer Widget Header --------*/
genesis_register_sidebar( array(
 'id' => 'footer-header',
 'name' => __( 'Footer Header', 'custom-genesis-sample' ),
 'description' => __( 'This is the Footer Widget Headline.', 'custom-genesis-sample' ),
) );
//* Footer Widget Header - the number 5 has to do with priority order of widgets
add_action( 'genesis_before_footer', 'add_genesis_footer_header', 5 );
function add_genesis_footer_header() {
 genesis_widget_area( 'footer-header', array(
 'before' => '<div class="footer-header widget-area"><div class="wrap">',
 'after' => '</div></div>',
 ) );
}

 

The CSS

/* ------ Header sections ----- */
.preheader-container {
 /*background: #eaf6dd;*/
}
.preheader-right {
 text-align: right;
 float: right;
 padding-right: 4px;
 margin: 3px 10px 0 0;
 border: 2px solid #ccc;
 min-width: 180px;
 max-width: 40%;
}
.preheader-left {
 text-align: left;
 float: left;
 padding-left: 4px;
 margin: 3px 0 0 10px;
 border: 2px solid #ccc;
 min-width: 180px;
 max-width: 40%;
}
.header-widget-area {
 max-width: 60%;
 border: 1px solid #ccc;
 color: red;
 padding: 3px;
 
}
.site-header .widget-area {
 float: right;
 text-align: left;
 width: 75%;
}
/* ----- Home Widgets ------ */
.home-featured-full {
 padding: 0;
 /* width: 95%; */
 border: 2px solid #ccc;
 margin: auto;
 padding: 5px;
}
/* Contains home featured left and right */
#home-featured-halves {
 padding: 5px;
 width: 100%;
}
.home-featured-left {
 padding: 5px;
 width: 50%; /* Adjusted 50% */
 float: left;
 border: 2px solid #ccc;
}
.home-featured-right {
 padding: 5px;
 float: left;
 width: 50%;
 border: 2px solid #ccc;
}
/* ----- Home Middle ---- */
#home-middle,
#home-featured,
.home-bottom {
 clear: both;
 padding: 10px 0 5px; /* Adjusted 20px 016px */
 padding: 1.2rem 0 0.2rem; /* Adjusted 1.25rem 0 1.6rem */
}
.home-middle-1,
.home-middle-2,
.home-middle-3 {
 width: 30%;
 border: 2px solid #ccc;
 padding: 5px;
}
.home-middle-2 {
 width: 360px;
}
.home-middle-1 {
 margin-right: 40px;
}
.home-middle-1,
.home-middle-2 {
 float: left;
}
.home-middle-3 {
 float: right;
}
#home-middle a {
 color: #20b40c;
}
#home-middle a:hover {
 color: #ccc;
}
#home-middle .widget {
 margin-bottom: 24px;
 margin-bottom: 2.4rem;
}
#home-middle .widgettitle {
 color: #999;
}
#home-middle li {
 list-style-type: none;
 margin-bottom: 6px;
 margin-bottom: 0.6rem;
 word-wrap: break-word;
}
#home-middle .search-form {
 width: 100%;
}
#home-bottom {
 border: 2px solid #ccc;
 padding: 5px;
}
/* ------ Footer Widgets --------- */
/* Added as an extra area right above the footer. */
.footer-header {
 background-color: #0aed0a;
 clear: both;
 font-size: 16px;
 margin: auto;
 /*max-width: 1140px;*/
 /* padding: 36px 36px 0; */
 border: 2px solid #DDD;
 
 box-shadow: 0px 1px 10px -4px #000, 0px 0px 40px #EEEEEE;
 box-shadow: 0px 3px 5px #444; 
 width: 100%;
 padding: 5px;
}
/* Inner Footer Header area */
.footer-header .wrap {
 padding: 8px;
}
.footer-header .widget-title {
 text-align: center;
 font-size: 30px;
 margin: 20px auto;
}
.footer-widgets {
 color: #999;
 clear: both;
 font-size: 14px;
 font-size: 1.4rem;
 padding: 20px 0 16px;
 padding: 2rem 0 1.6rem;
}
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
 width: 30%;
 border: 1px solid #ccc;
 padding: 5px;
}
.footer-widgets-1 {
 margin-right: 40px;
}
.footer-widgets-1,
.footer-widgets-2 {
 float: left;
}
.footer-widgets-3 {
 float: right;
}
.footer-widgets a {
 color: #999;
}
.footer-widgets a:hover {
 color: #ccc;
}
.footer-widgets .widget {
 margin-bottom: 24px;
 margin-bottom: 2.4rem;
}
.footer-widgets .widgettitle {
 color: #999;
}

Adding two new widget areas to a posts page.
– Before Entry
– After Entry

Genesis Themes Post Widget sections

Genesis Themes Post Widget sections

Add the following code to the functions.php file:

/*---- Before Entry -------*/
 genesis_register_sidebar( array(
 'id' => 'before-entry',
 'name' => __( 'Before Entry', 'custom-genesis-sample' ),
 'description' => __( 'This is the before content area', 'custom-genesis-sample' ),
 'before_widget' => '<div class="before-entry">',
 'after_widget' => '</div>',
 ) );
//* Hooks before - entry widget area to single posts
 add_action( 'genesis_before_entry', 'before_post' );
 function before_post() {
 if ( ! is_singular( 'post' ) )
 return;
 genesis_widget_area( 'before-entry', array(
 'before' => '<div class="before-entry widget-area"><div class="wrap">',
 'after' => '</div></div>',
 ) );
}
/* ----- After Entry ------*/
 genesis_register_sidebar( array(
 'id' => 'after-entry',
 'name' => __( 'After Entry', 'custom-genesis-sample' ),
 'description' => __( 'This is the after entry section.', 'custom-genesis-sample' ),
 ) );
//* Hooks after - entry widget area to single posts
 add_action( 'genesis_entry_footer', 'after_post' );
 function after_post() {
 if ( ! is_singular( 'post' ) )
 return;
 genesis_widget_area( 'after-entry', array(
 'before' => '<div class="after-entry widget-area"><div class="wrap">',
 'after' => '</div></div>',
 ) );
}

 

To the CSS file add the following:

/* ----- Before entry - single post widget ----*/
.before-entry {
 /* background: url(assets/img/lines.png); */
 border-radius: 10px;
 background-size: 8px 8px;
 margin-top: 5px;
 }
.before-entry .wrap {
 background-color: #fff;
 padding: 32px;
 border: 1px solid #333;
 }
.before-entry p {
 margin-bottom: 20px;
 }
before-entry .widget-title,
 .archive-title,
 .comments-title,
 .widget .entry-title {
 font-size: 20px;
 }
 /* ----- After entry - single post widget ----*/
.after-entry {
 /* background: url(assets/img/lines.png); */
 border-radius: 10px;
 border: 1px solid #ccc;
 background-size: 8px 8px;
 margin-top: 5px;
 }
.after-entry .wrap {
 background-color: #fff;
 padding: 32px;
 }
.after-entry p {
 margin-bottom: 20px;
 }
after-entry .widget-title,
 .archive-title,
 .comments-title,
 .widget .entry-title {
 font-size: 20px;
 }

 

I also have an older article for creating a widgitized home page layout using Genesis child themes

Resources I used:
https://github.com/neilgee/genesischild
https://www.ryanrudolph.com/prometheus-a-genesis-starter-child-theme/
https://www.gregreindel.com/genesis-html5-child-starter-theme/
https://sridharkatakam.com/genesis-starter-child-theme/
https://github.com/JiveDig/baseline

https://wpsites.net/web-design/widget-genesis/

 

Share this:

  • Email

Categories: Genesis, WordPress

Paal Joachim Romdahl

I enjoy teaching and creating tutorials. As well creating web sites.
I help people gain WordPress knowledge through my easy to follow tutorials and specialized training. Contact me for more information on how I can improve your WordPress skills and to help get your web site quickly up and running.

Comments

  1. 12th Model paper 2021 says

    8 November - 2020

    thanks for providing such a information, Such a grate information about Genesis bro.

    Reply
  2. TS SSC INFO says

    27 October - 2020

    Great article

    Reply
  3. wuxiaworld says

    6 May - 2020

    Thank you very much for the tutorial, very helpful information!

    Reply
  4. ravi says

    30 October - 2019

    Great Article !
    Thanks for sharing this amazing post it is very useful have been looking for similar topic until I come across it on your website. I will be looking forward to get more from you.

    Reply
  5. 11th class result 2019 says

    7 October - 2019

    Thanks for the quality details very nice work done by you.

    Reply
  6. Link says

    26 November - 2018

    Yes Such a grate information about Genesis bro
    Thanking you
    JSC Result 2018 Rajshahi board

    Reply
  7. Navodaya says

    13 October - 2018

    grate information about easy web design and it is very useful to everyone, thanking you for posting

    Reply
  8. Model Papers 2019 says

    13 October - 2018

    i have created my blog with AMP Coding, anyone can check and suggest any corrections PUC Result 2019

    Reply
  9. JNVST says

    2 May - 2018

    Great Share.. Thanks for this Amazing and very helpful article 🙂

    Reply
  10. Raman Singh says

    24 June - 2016

    Great finally something worked. Will it work on other themes?

    Reply
    • Paal Joachim says

      25 June - 2016

      Hi Raman

      Widget areas uses what is called a hook – meaning an area of the theme. Like the header or footer etc.
      Each theme have their own unique hooks. With their own names. This means you will need to figure out the names of the hooks the theme you uses have built in. But the code technique is very similar to what I show in the tutorial. Here is a link to the WordPress Codex: https://codex.wordpress.org/Widgetizing_Themes You can also do a search on adding a widget to WordPress and look at some of the articles that come up.

      Reply
      • Raman Singh says

        3 July - 2016

        Thanks Paal. since there was not much information about widget areas configuration on various themes. I have started to use Genesis and it has given a lots of power to me.

        Reply
        • Paal Joachim says

          3 July - 2016

          Hi Raman

          What is really great about Genesis themes is the community and all the information that available on how to use the themes.
          Various themes from different companies have their own way of accomplishing varies aspects of WordPress.

          I do my best to create tutorials that will fit most themes, but on occasion I also create a tutorial that is Genesis specific using their filters and actions as can be seen in the code.

          Btw I went ahead and added an affiliate link in the top for others who are interested in purchasing the Genesis Framework and child themes.

          Reply

Leave a Comment Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2021 · By Easy Web Design Tutorials · Built on the Genesis Framework · WordPress · Log in · ⇪

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.