11 Genesis Framework Hacks for Beginner « RainaStudio

11 Genesis Framework Hacks for Beginner

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 Genesis Framework.

Today, I am writing the blog post about 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 on going 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 know. Each of them helps you more and more to dig into Genesis Framework.

  • 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 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.

https://gist.github.com/anwerashif/9b50ee9b0d0e62ba42a1e70906c9ba35

2. Add Content Before Loop in Home or Blog Page

Content Before Genesis Loop in Home or Blog Page

The above image is pointed what I achieve. I wanted to get a title and a paragraph before blog posts start. All are hard coded. So, if you want to change the title and paragraph in future, you’ll have edit from theme file. Below is the code snippet copy and paste it into your theme’s functions.php file.

https://gist.github.com/anwerashif/36800007f0f223b93a421b2099584f11

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 website established year and the current year. You can edit your own to get things change. Below is the code snippet to customize footer credits in Genesis child theme. Copy the code and paste into the functions.php file.

https://gist.github.com/anwerashif/fd5e6bf4e9c3f485b1c69262419e886e

4. Customize Single Post Featured Image and Add Before Entry

Customize Single Post Featured Image and Add Before Entry

We often want to customize featured image size of the single post in WordPress. If you are using 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.

https://gist.github.com/anwerashif/95417be7d839ef49a273c08a47332d3c

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.

https://gist.github.com/anwerashif/507c6d74f2d0dc988879a0fe8655b649

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 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.

https://gist.github.com/anwerashif/7d813d7ebf58cf31b9547d57552e261b

7. Add FontAwesome Icon to Search Form Input Button

Add FontAwesome Icon to Search Form Input Button

By default, there is no icon for Search Form input button in Genesis Framework. So, you can add the search icon to input button. To do that, you’ll be needed to add FontAwesome first in your theme header. The piece of codes below helps you to get done. Copy and add them to your theme’s functions.php file.

https://gist.github.com/anwerashif/18aa13a838df47e4c984eb77b7be8a8a

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.

https://gist.github.com/anwerashif/d2f597bcfa0cf9b3ce997c55602448cf

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 number 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.

https://gist.github.com/anwerashif/2cf0720ff351deda7d3520e91e3e03f7

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.

https://gist.github.com/wpspeak/0f6fc6a83982e18783eb

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

A few days back I have asked to answer the question below, on 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

https://gist.github.com/anwerashif/ae6ff1df63b9d020af74475aecce0368

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 which 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 each of your comment to get things done perfectly. And don’t forget to share your experience with us.

Genesis Framework Customization

Editorial Staff
 

Editorial Staff is an in-house team of native WordPress developer and industry columnists.

>