Genesis Framework Hacks for Beginner

11 Genesis Framework Hacks for Beginner

wprocket

Genesis Framework is one of the most popular theme frameworks for WordPress.

This framework is insanely popular and used by industry leaders like Harsh Agrawal from ShoutMeLoud,  Syed Balkhi from WPBeginner, Pat Flynn from SmartPassiveIncome, Darren Rowse from ProBlogger.

I use this top-notch theme framework for all of my client projects. RainaStudio built on WordPress and using the Genesis Framework.

Today, I am writing the blog post about the top 10 Genesis Framework customization for beginners. If you are one and looking for Genesis tutorials to customize your own website, this post is for you.

Very recently, I have researched on the web and a few Genesis Framework user-to-user community. Come with the idea to publish some unique snippets to solve ongoing problems.

Best Genesis Framework Hacks for Beginner; You’ll Ever Need

Before you start going through the tutorial, here are some pieces of information you need to know. Each of them helps you more and more to dig into the Genesis Framework.

  • The function should be registered in functions.php
  • Each template of Genesis Framework can act like functions.php
  • Dig into each of Genesis hooks (a complete reference of hooks)
  • The easiest way to customize and revamp Genesis is to utilize functions
  • The genesis(); tag has 3 main components ( WordPress Functions, HTML5 & XHTML Markup, Actions Hooks )
  • Don’t include the PHP opening tag <?php while copy and paste the code

However, if you are using the Genesis Framework for a while, I think you know pretty about it. Let’s see what are the top 10 customizations.

1. Customize Entry Meta to Add Author Avatar to It

customize genesis entry meta

The image is an example of what I want the entry meta to look and I get it on the frontend. So, below is the code snippet for the changes. Copy the code and paste it below into your child theme’s functions.php file.

wprocket-728x98_Black

<?php
// Do NOT include the opening PHP tag

// Customize the entry meta in the entry header
add_filter( 'genesis_post_info', 'bg_entry_meta_header' );

function bg_entry_meta_header( $post_info ) {
    
    // get author details
    $entry_author = get_avatar( get_the_author_meta( 'user_email' ), 30 );
    $author_link = get_author_posts_url( get_the_author_meta( 'ID' ) );


    // build updated post_info
    $post_info = sprintf( '<span class="author-avatar"><a href="%s">%s</a></span>', $author_link, $entry_author );
    
    $post_info .= '[post_author_posts_link] [post_modified_date before="Last updated on "]';
    return $post_info;
}

2. Add Content Before Loop in Home or Blog Page

Content Before Genesis Loop in Home or Blog Page

The above image is pointed at what I achieve. I wanted to get a title and a paragraph before blog posts start. All are hardcoded.

So, if you want to change the title and paragraph in the future, you’ll have edited it from the theme file. Below is the code snippet copy and paste it into your theme’s functions.php file.

<?php
// Do NOT include PHP opening tag

// Adding Content Before Your Posts
function rs_content() {
if ( is_home( ) )
    echo '<div class="before-blog"><h1 class="entry-title blog" itemprop="headline">Premier Publishing Resource</h1>Our Free Resource Helping You with Business Growth Hacking and Revamp WordPress Website</div>';
};
add_action('genesis_before_loop', 'rs_content');

3. Customize Genesis Footer Credits

Customize Genesis Footer Credits

Most of us would like to customize Genesis Framework footer credits. And this tutorial for you if you want to. I wanted to add the first post published date as a website established year and the current year.

You can edit your own to get things to change. Below is the code snippet to customize footer credits in the Genesis child theme. Copy the code and paste into the functions.php file.

<?php
// Do NOT include the PHP opening tag

// Customize the footer section
add_filter('genesis_footer_creds_text', 'bdfg_footer_creds_text');
function bdfg_footer_creds_text($creds) {
  global $wpdb;
  $table = $wpdb->prefix . 'posts';
  $lastDate = date('Y');
  $firstDate = $wpdb->get_var("SELECT YEAR(post_date) FROM $table ORDER BY post_date LIMIT 1");
 
  $text = __(' &middot; <a href="https://rainastudio.com/">RainaStudio.com</a> &middot; Built on <a href="https://wordpress.org">WordPress</a>', 'genesis');
  if($lastDate == $firstDate) $creds = "Copyright ©$firstDate-$lastDate " .$text;
  else $creds = "Copyright ©$firstDate-$lastDate" .$text;
  return $creds;
}

4. Customize Single Post Featured Image and Add Before Entry

Customize Single Post Featured Image and Add Before Entry

We often want to customize the featured image size of the single post in WordPress. If you are using the Genesis theme, you’ll also want to reposition the featured image to fit the website design.

So, I registered a custom image size for the featured image and display it before entry only for the single post. Here is the code, you’ll need to add into the functions file.

<?php
// Do NOT include the PHP opening tag

// Register a custom image size for Singular Featured images
add_image_size( 'singular-featured-thumb', 800, 450, true );

// Display featured image before entry
add_action( 'genesis_before_entry', 'display_featured_image' );
function display_featured_image() {
    if ( ! is_singular( array( 'post' ) ) ) {
        return;
    }
    if ( ! has_post_thumbnail() ) {
        return;
    }
    
    // Display featured image above content
    echo '<div class="singular-featured-image color-gradient">';
        genesis_image( array( 'size' => 'singular-featured-thumb' ) );
    echo '</div>';
}

5. Register a Widget Area and Display After Content-Sidebar

Register Custom Widget Area and Display After Content Sidebar

For better conversion, I wanted to display a contact form below the content-sidebar of Genesis Framework. So, I registered a custom widget area and display it before the footer widgets area.

Here is the code added to register custom widget and display after content-sidebar.

<?php
// Do NOT the PHP opening tag

// Custom widget area for contact form
genesis_register_sidebar( array(
    'id' 			=> 'contact-before-footer',
    'name'			=>	__( 'Contact Before Footer', 'rainastudio' ),
    'description'	=>	__( 'Entry Contact Before Footer Content Widget', 'rainastudio' ),
));

// Display Contact Before Footer
function footer_contact_content() {
    // Check widget activation
    
        if ( is_active_sidebar( 'contact-before-footer' ) ) {
        
                // Display the widget
                genesis_widget_area( 'contact-before-footer', array (
                    'before'	=>	'<div id="contact" class="contact-before-footer content-area"><div class="wrap">',
                    'after'  => '</div></div>',
                
                ) );
        
        } 	
}

add_action( 'genesis_after_content_sidebar_wrap', 'footer_contact_content' );

6. Add Search Box to Genesis’ Primary Menu

Add Search Box to Genesis Primary Menu

Are you a Genesis theme framework user? Would you like to add the search box to the primary navigation menu? Well, I think you want and that’s why you are here. Use the code snippet below to add the search form to the primary navigation menu.

<?php
// Do NOT include the opening PHP tag

// Add search form to 'primary' menu
function theme_menu_extras( $menu, $args ) {
    // Change 'primary' to 'secondary' to add extras to the secondary navigation menu
    if ( 'primary' !== $args->theme_location )
        return $menu;
    
    // add a search form to the navigation menu
    ob_start();
    get_search_form();
    $search = ob_get_clean();
    $menu  .= '<li class="right search">' . $search . '</li>';
    
    return $menu;
}

add_filter( 'wp_nav_menu_items', 'theme_menu_extras', 10, 2 );

7. Add FontAwesome Icon to Search Form Input Button

Add FontAwesome Icon to Search Form Input Button

By default, there is no icon for the Search Form input button in the Genesis Framework. So, you can add the search icon to the input button. To do that, you’ll be needed to add Font Awesome first in your theme header.

The piece of code below helps you to get done. Copy and add them to your theme’s functions.php file.

<?php
// Do NOT add the PHP opening tag

// Add Icon Fonts to theme
add_action( 'wp_enqueue_scripts', 'rs_enqueue_styles' );
function rs_enqueue_styles() {
    
    wp_enqueue_style( 'fa', '//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css', array(), '4.5' );
    
}

// Add search icon to Genesis search form input button
add_filter( 'genesis_search_button_text', 'rs_search_button_text' );
function rs_search_button_text( $text ) {
    
    return esc_attr( '&#xf002;' );
}

8. Force Full-Width All Pages in Genesis Framework

Force Full-Width All Pages in Genesis Framework

If you want to set all pages layout full-width, add the code into functions.php file. Adding this code all pages will be forced full-width.

<?php
// Do NOT include the PHP opening tag

// Full Width All Pages
function all_pages_full_width( $full ) {
    if ( is_page( ) ) {
        $full = 'full-width-content';
        return $full;
    }
}
add_action ('genesis_pre_get_option_site_layout', 'all_pages_full_width');

9. Add Text or Link To Genesis Site Description

Add Text or Link To Genesis Site Description

If you want to add something like text or phone numbers like the image above or link, use the code below to add it. The code snippet below to add custom text or link to Genesis site description.

<?php
// Do NOT include the PHP opening tag 

// Echo Phone Number to Site Description
function psi_phone_after_des() {
    
    echo '<p class="phone-no"><a href="tel:206.322.3186">206.322.3186</a></p>';

}

add_action('genesis_site_description', 'psi_phone_after_des', 10 );

10. Add Estimated Post Reading Time to Genesis Post Entry

If you want to add estimated post reading time to Genesis post entry, install this plugin (Reading Time).  And the code snippet below into your theme’s functions.php file.

<?php

//* Add Estimated Post Reading Time in Genesis Framework using Estimated Post Reading Time plugin
add_filter( 'genesis_post_info', 'afn_post_info_filter' );
function afn_post_info_filter($post_info) {

    $post_info = '[post_date] by [post_author_posts_link] [post_comments] [post_edit] Estimated reading time: [est_time]';
    return $post_info;
    
}

11. Prevent GoogleBot to Index Archive Pages on Your WordPress Blog

A few days back I have asked to answer the question below, on the Genesis WordPress Facebook group:

I do not use any SEO plugin just use genesis default SEO feature. Today I noticed in google search page indexed page/2/ page/3/ page/4/ but I do not want to indexed these page. How can I stop this?

This a piece of code you’ll be needed to paste on your theme’s functions.php

<?php
// Do NOT include opening tag

// add 'noindex' meta to archive
add_action( 'wp_head', 'add_noindex' );

function add_noindex() {
    if(is_archive()) {
      echo '<meta name="robots" content="noindex,follow" />';
    }
}

Adding this code a reflect will be made on Archive pages. It will add a “noindex” meta to Archive.

Final Words

Genesis is the theme framework that has built for the developer by the developer. I love this theme framework for its solidity which leads me to dig more.

If you want to customize the whole theme based on your PSD mockup and face any problem, leave a comment below or contact us. I’ll reply to each of your comments to get things done perfectly. And don’t forget to share your experience with us.

Genesis Framework Customization

You will love the following tutorials:

GenesisPro728x90

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Share on tumblr
Tumblr
Editorial Staff

Editorial Staff

Editorial Staff is an in-house team of native WordPress developer and industry columnists lead by Anwer Ashif. Join the community of 2,77,752 users.

Leave a Reply

Your email address will not be published.

Want to speed up WordPress site?