Add a custom sidebar to your Genesis child theme

Genesis Framework

When using the Genesis Framework for WordPress, you can set the page you wish to have as your blog page in Settings -> Reading, as with any WordPress site.

This page will then use the default layout for Genesis, styled according to the child theme that you’re using.

This tutorial will explain how to edit the layout of your blog page, to show the page as excerpts, and to adjust the layout to include a sidebar just for use on your site’s posts views by adding a new template to your child theme. We will be using the Genesis hooks and filters.

For this tutorial, we’re using the Genesis Framework with the Executive Pro Theme. I’ve started by installing both, and creating a blog page. I’ve then set that blog page to show posts in Settings -> Reading.

Here’s what we have with some sample posts:

genesis-tutorial-post1

So far, I haven’t set any widgets up in the sidebar, but what I would like to do are two things:

1. Create a custom sidebar widget just for the blog view. The Primary Sidebar will appear on other pages, but the blog view, and single post view will have its own sidebar showing content just for those views.

2. Turn this view into an excerpt view, which can be done straight from the WordPress admin via Genesis settings, but then change the way it’s displayed with a page template and some Genesis hooks.

First, to create my custom sidebar

In the child theme functions file, add the following code. You should find an area where sidebars have already been registered. I’m going to call this sidebar “Blog Page Sidebar”. If you’re editing the Executive Pro Theme itself, then add this to the end of the functions.php file:

genesis_register_sidebar(array(
        'name' => 'Blog Page Sidebar',
        'id' => 'blog-aside',
        'description' => 'This is the widget area for the blog page only',
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget' => '</section>',
        'before_title' => '<h4 class="widget-title widgettitle" itemprop="headline">',
        'after_title' => '</h4>'
) );

This snippet registers the sidebar into the admin area, and can now be accessed via appearance->widgets where content can be added. At this point, nothing will appear on the site as it hasn’t been added yet.

To break it down:

Name =  the name that appears in the admin area
ID = the id used to add the sidebar to the theme (which is covered next)
Description = The description that appears in the theme

OK, so now we’re back to view this in appearance -> Widgets. For the purposes of testing, I’ve added a text widget onto this new sidebar in the screenshot below:

Genesis - Add sidebar widget to child theme

 

Add custom sidebar to the child theme blog page

The blog page, when settings->reading is selected uses the index.php file. Normally, this sits within the Genesis Framework. What we’ll do is create a blog page template as an index.php file within the child theme. Ideally, we would create a page template for the blog page and call that template via the page attributes panel, but for this, well create an index.php file for the child theme which will automatically get assigned to the page that is designated the blog page via Settings->Reading.

First of all, in your child theme, create a blank PHP file called index.php. Now add the following:

<?php
/**
* This is the template for the blog page. Setting a blog page in Settings->Reading will call this index.php
* @author Admarks
* @package Admarks
*/

//* Add custom body class to the head
add_filter( 'body_class', 'admarks_add_body_class' );
function admarks_add_body_class( $classes ) {

$classes[] = 'admarksblog admarksexcerpt';
return $classes;

}
//* Run the Genesis loop
genesis();

Substitute the @author and @package with your own details, or leave them out. Similarly, substitute the comment section at the top with something that suits your needs, or leave them out.

The main thing here is the ‘Custom Body Class’ filter adds custom classes to the <body> tag that will make styling this page in CSS easier to target if needed. This will create <body class=”admarksblog admarksexcerpt”> for me to target with CSS.

At this stage, this is the only thing that will change. This template will still run off the Genesis Framework and the display will be exactly the same as the first screenshot.

Now we’ll add our custom sidebar we added earlier. Add this snippet above the comment tag  //* Run the Genesis loop:


/** Remove default sidebar */
remove_action( 'genesis_sidebar', 'genesis_do_sidebar' );

add_action('genesis_sidebar','admarks_blog_aside');

function admarks_blog_aside() {
    genesis_widget_area( 'blog-aside', array(
        'before' => '<aside class="sidebar sidebar-admarksblog widget-area">',
        'after'  => '</aside>',
    ) );
    
} 

 

 

What is this doing?

Firstly, the remove_action is removing the genesis primary sidebar on this page only from the first screenshot. Next, we’re calling up the new sidebar we added with a function, just for display on the page. I’m using the ‘id’ => ‘blog-aside’ I added in the functions.php file. I’m then adding an <aside> tag to wrap this sidebar with a couple of custom classes I may use for styling with CSS.

OK, so now that’s done, we can now look at the page. Remember the text widget I added for testing earlier? That will be visible now:

genesis-tutorial-post3

Next, we will convert the posts to an excerpt view, and will show the featured image, or first image in the post as a featured image. This is simple. Go to Genesis -> Theme Settings, then scroll to content archives, and set the following settings:

• Display Post Content

• Limit content to 300 Characters

• Choose one of the preset image sizes for the feature image

• Image alignment left

Now save settings.

Now your posts page will look like this (will need images added):

Genesis posts page

You could probably leave it there and edit/add CSS for extra styling, but we can play with the Genesis hooks to alter the structure further.

We’re going to move the entry Meta data so that it sits to the right of the feature image, effectively to become part of the post excerpt.

In your index.php file, add this to snippet:

remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
add_action( 'genesis_entry_content', 'genesis_post_info', 9 );

This simple snippet adds the date and entry meta to be above the excerpt, as below:

genesis-edit-posts-blog2

Depending on your theme, you may need to remove the existing entry meta, as per this screenshot, which is the Executive Pro Theme and still has it above the post.

In this case, the theme’s function.php file already has this snippet:

remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
add_action( 'genesis_entry_header', 'genesis_post_info', 5 );

The functions.php file has already removed the entry header from it’s default location with a priority of 12 (which usually places it at the bottom of everything), and is now giving it a priority of 5. We just removed what was already removed via functions.php and gave it a priority of 9 in our index.php template, so it’s now appearing in two places instead of being moved altogether.

To overcome this, we need to edit the snippet in our file to remove the action that has been placed in the functions.php file so that it applies to our file only, so we need to change our snippet to this:

remove_action( 'genesis_entry_header', 'genesis_post_info', 5 );
add_action( 'genesis_entry_content', 'genesis_post_info', 9 );

The result is below. This particular step is dependent on the theme being edited, so look at the theme’s functions.php file. You can make the edits there or in your page template, depending if you need your edit to be site wide or just called up when you use that page template.

genesis-edit-posts-blog3

Finally, we’ll edit the read more link text to suit our needs, and add a class to it so that it can be styled. Add this before the //* Run the Genesis loop comment (nb: this can also be added the child theme’s functions.php file for a site wide edit):

// Edit the read more link text
add_filter('get_the_content_more_link', 'admarks_read_more_link');
add_filter('the_content_more_link', 'admarks_read_more_link');
function admarks_read_more_link() {
return '&nbsp;<a class="more-link admarks-more-link" href="' . get_permalink() . '" rel="nofollow">Read More &gt;</a>';
}

Genesis Edit Read More Link

 

Finally, when someone clicks to read a post, you want them to see the same new sidebar they see on the excerpt view, so, create a file called single.php in your child theme, and add this code:


<?php
/**
 * This file adds a custom sidebar to the single post template.
 */
 
/** Remove the default genesis sidebar */
remove_action( 'genesis_sidebar', 'genesis_do_sidebar' );


/** Add our custom sidebar */
add_action('genesis_sidebar','admarks_blog_aside');

function admarks_blog_aside() {
    genesis_widget_area( 'blog-aside', array(
        'before' => '<aside class="sidebar sidebar-admarksblog widget-area">',
        'after'  => '</aside>',
    ) );
    
}

genesis();

All this does is tell Genesis to remove it’s sidebar on single.php, and replace that with the one we added earlier. The genesis(); part tells Genesis to then run the normal loop for the post.

 

So there you have it, some simple edits to modify your Genesis child theme. There’ll be more to come.

Here’s the whole index.php page code below:


<?php
/**
* This is the template for the blog page. Setting a blog page in Settings->Reading will call this index.php
* @author Admarks
* @package Admarks
*/

//* Add custom body class to the head
add_filter( 'body_class', 'admarks_add_body_class' );
function admarks_add_body_class( $classes ) {

$classes[] = 'admarksblog admarksexcerpt';
return $classes;

}

/** Remove default sidebar */
remove_action( 'genesis_sidebar', 'genesis_do_sidebar' );

add_action('genesis_sidebar','admarks_blog_aside');

function admarks_blog_aside() {
genesis_widget_area( 'blog-aside', array(
'before' => '<aside class="sidebar sidebar-admarksblog widget-area">',
'after'  => '</aside>',
) );

}

remove_action( 'genesis_entry_header', 'genesis_post_info', 5 );
add_action( 'genesis_entry_content', 'genesis_post_info', 9 );

// Edit the read more link text
add_filter('get_the_content_more_link', 'admarks_read_more_link');
add_filter('the_content_more_link', 'admarks_read_more_link');
function admarks_read_more_link() {
return '&nbsp;<a class="more-link" href="' . get_permalink() . '" rel="nofollow">Read More &gt;</a>';
}

//* Run the Genesis loop
genesis();

About Paul

A graphic and web designer from the UK, based in Australia. Specialising in WordPress Theme design & development, print and online graphic design and illustration.