How To Add Widget After Post In Genesis

There are mainly two different way to create widget area after post in genesis. You can either use a plugin named simple hooks or you can use the code which I have provided here.

If you use the plugin then you will face a small problem. The problem is that your custom widget will be shown below the post area and also below the archive area. Inorder to fix this you will have to use the conditional tags.

Actually, by default genesis does not provide any custom widget area. Over here, I am not considering the sidebar and footer, since these are the basic place. So to create any custom widget area in genesis, you will have to first find the required action hook. And in order to do so, you can use a plugin named genesis visual hook guide.

In the screenshot, which I have attached above, you can see this plugin in action. It does not alter anything on your website but only shows the markup to the administrator. This means your readers, contributors or anyone else will not see them. But if you don’t wan to use this plugin then you can check this visual hook guide.

Adding Widget After Post In Genesis.

Before you start editing your child theme I will suggest you make a backup of your existing functions.php file as it is very necessary. If you make even a slight mistake while implementing the code, it will break your theme temporally. And then in order to fix it, you will need all your previous PHP codes.

So use your notepad++ to create a backup and save it locally. Now if any problem occurs, you can easily restore your function using FTP or Cpanel. Now let’s move ahead.

Now you must copy the exact code snippet I have provided below into your child theme’s functions.php file. You must place the code at the bottom of the file, without touching any other code listed in that file.

//* @ Vivek Kumar Poddar - WPVKP
add_action( 'genesis_after_entry', 'wpvkpf', 5 );
function wpvkpf() {
//* Condition
if ( is_singular( 'post' ) )
genesis_widget_area( 'after-entry', array(
'before' => '<div class="after-entry widget-area">',
'after' => '</div>',
) );
}
//* Register New Area
genesis_register_sidebar( array(
'id' => 'after-entry',
'name' => __( 'After Content Area', 'wpvkpf' ),
'description' => __( 'Place your elements here.', 'wpvkpf' ),
) ); 

After placing the code properly, you have to click the update file button and have to reload your website. Now it is time for you to move to your widget page. Over here, you must see a new area named “After Content Area”.

Explanation Of The Snippet.

Step 1: I have created a new function named “wpvkpf”. Within it, I have added a conditional tag. My condition ensures that the widget appears only below the single post. This means it will not execute in the homepage or archive page and that is what you needed.

Step 2: Using an array, I created an HTML wrapper which matches to the genesis default. I have also added class definition which gives me the power to customize that area with custom CSS.

Step 3: Now I have registered the newly created widget area so that you could modify it through; wp-admin -> appearance -> widget page.

Step 4: I have given it a unique name so that you could identify it easily.

Styling With CSS.

You can style your widget as per your need. In order to add styles you will have to edit your child theme’s style.css.

.after-entry {
    background: rgb(213,62,62);
    background: -moz-linear-gradient(left,  rgba(213,62,62,1) 0%, rgba(197,46,44,1) 50%, rgba(225,78,76,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(213,62,62,1)), color-stop(50%,rgba(197,46,44,1)), color-stop(100%,rgba(225,78,76,1)));
    background: -webkit-linear-gradient(left,  rgba(213,62,62,1) 0%,rgba(197,46,44,1) 50%,rgba(225,78,76,1) 100%);
    background: -o-linear-gradient(left,  rgba(213,62,62,1) 0%,rgba(197,46,44,1) 50%,rgba(225,78,76,1) 100%);
    background: -ms-linear-gradient(left,  rgba(213,62,62,1) 0%,rgba(197,46,44,1) 50%,rgba(225,78,76,1) 100%);
    background: linear-gradient(to right,  rgba(213,62,62,1) 0%,rgba(197,46,44,1) 50%,rgba(225,78,76,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d53e3e', endColorstr='#e14e4c',GradientType=1 );
    color: #fff;
    margin-bottom: 40px;
    text-align: center;
    border: 2px solid #ececec;
    outline: 2px solid #ddd;
}

.after-entry p {
    font-family: 'Open sans',serif;
    font-weight: 400;
    font-size: 14px;
    color: #fff;
}

.after-entry p a {
    color: #ececec;
}

.after-entry p a:hover {
    font-family: 'Open sans',serif;
    font-weight: 400;
    font-size: 14px;
    font-style: italic;
    color: #fff;
}

.after-entry .widget {
    padding: 20px 0;
    margin-bottom: 0;
}

.after-entry li {
    list-style-type: none;
}

In the styling, instead of using a single solid color I have used gradient.It makes the area more attractive and catchy.
I have tried my level best to explain every step in detail. I think these codes are really easy to understand. But if you still face any problem then please share your query in the comment section.