5 Useful Genesis Child Theme Tweaks



Although your WordPress blog is running on Genesis framework and a child theme, it may be lacking some of the essential features.

Some people blame Genesis for not providing enough easy-to-use customization options. Some other people think that Genesis customization requires coding knowledge. Although it's true, even non-coders are able to tweak their code to some extent.

In this post, I will provide you with some tweaks, that are useful.

Before that, remember these things:

  • You should only add tweaks to the child theme, not the parent theme.
  • Backup your child theme, before applying changes.

Let's roll.

Adding rounded avatar below the post title

Open your child theme's functions.php. It will be under Appearance>Editor.

Scroll all the way down. In the end, insert the below code.

add_action('genesis_entry_header', 'post_author_avatar');
function post_author_avatar() {
if(is_home() || is_single() )
echo get_avatar(get_the_author_meta('email'), 40);

Save the file.

Now, when you visit your site, avatar will appear in a square shape.

Avatar square

Now if you wish, you could make the avatar appear round shape by adding some CSS code to style.css file of your child theme.

 img.avatar.avatar-40.photo {
 border-radius: 27px;
 margin-top: 3px;

Save the file. Visit your site and preview the changes.

Rounded avatar

If the changes are not reflected in your live site, there may be cache issues. Try cache refresh in your browser (CTRL+F or Command-Shift-R in Mac).
If your byline elements are not in order, to make the things simple install Genesis Simple Edits plugin. Along with byline, this plugin helps you easily modify exit meta, footer credits, with a variety of flexible shortcodes.


Adding Genesis comment form above comments

Comment form before comments

Having comments form, above all the comments for a blog post is beneficial in getting more number of comments.

In Genesis, if you want to do so, just add the below code to the bottom of functions.php.

add_action( ‘genesis_before_comments’ , ‘wps_post_type_check’ );
function wps_post_type_check () {
if ( is_single() ) {
if ( have_comments() ) {
remove_action( ‘genesis_comment_form’, ‘genesis_do_comment_form’ );
add_action( ‘genesis_list_comments’, ‘genesis_do_comment_form’ , 5 );

Credits: WP Smith


Make primary navigation menu sticky

In order to make the navigation menu sticky (making it visible even when you scroll down), you need to make some changes to the CSS code.

Open your child theme's style.css file.

Search (CTRL +F, Command+F in Mac) for the below piece of code.


If you find the above code, it will be associated with styles like,

.genesis-nav-menu {

Now add the below missing styles to it.

.genesis-nav-menu {
clear: both; 
font-size: 15px;
background-color: #000;
border-bottom: 1px solid #000; 
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 99;

Save the file. See your site live.

Sticky nav bar


You can notice that the navigation bar follows till the end of your web page.

Add clickable logo that's responsive

When I bought the Genesis theme, I struggled hours together to add an image logo, that's mobile responsive and as well as clickable.

By editing the core Genesis Framework files, I could have done that. But after a single update, any modifications done to the core framework are removed. And moreover, modifying core Genesis framework files is not advised.

For making logo responsive, I could have added @media only screen stuff. But hopefully, I came across an awesome plugin.

Easy genesis logo uploader
Don't get lost, after activation. Logo upload option will be there in theme customization page.

It's Easy Genesis Logo Uploader. It made my blog logo both responsive and clickable to the home page.

Highlight post author's comment

Authors comment

You can notice that in the above screenshot, my (author's) comment background is relatively deeper grey. It gives comments section a good look. At the same time, as the color pops the eye of the visitors, it highlights that the author is responding to all the comments that readers make.

For this, open your child theme's style.css. Add the below code at last.

li .bypostauthor {
background-color: #E8E8E8; 

You can choose whatever color you wish to be as your background.

For getting the HEX code of a color you can use online tools like ColorPicker or to pick up colors you come across any sites, use ColorZilla. It has extension/addon for both Chrome and Firefox.

Final words
If you would like to learn new tweaks and apply CSS styles by yourself, you need to master the art of using inspect element feature packed in your browser.

Watch the below video. In the video, Firefox has been used. However Inspect Element option is also there on Google Chrome.

If you are some sort of a person, who needs to edit function.css, then I would recommend you to look at WPsites page. It clearly demonstrates you the positions of various Genesis hooks.

I think you found this post helpful. Hit the share buttons, below. Don't forget to leave comments.


6 thoughts on “5 Useful Genesis Child Theme Tweaks

  1. Hi Akshay,

    I believe that those using the child themes will find these tweaks useful.

    Thanks for always posting valuable and useful post for your community members.



Leave a Comment