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.
Table of Contents
- Best Genesis Framework Hacks for Beginner; You’ll Ever Need
- 1. Customize Entry Meta to Add Author Avatar to It
- 2. Add Content Before Loop in Home or Blog Page
- 3. Customize Genesis Footer Credits
- 4. Customize Single Post Featured Image and Add Before Entry
- 5. Register a Widget Area and Display After Content-Sidebar
- 6. Add Search Box to Genesis’ Primary Menu
- 7. Add FontAwesome Icon to Search Form Input Button
- 8. Force Full-Width All Pages in Genesis Framework
- 9. Add Text or Link To Genesis Site Description
- 10. Add Estimated Post Reading Time to Genesis Post Entry
- Final Words
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
genesis();tag has 3 main components ( WordPress Functions, HTML5 & XHTML Markup, Actions Hooks )
- Don’t include the PHP opening tag
<?phpwhile 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
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
2. Add Content Before 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
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
4. 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.
5. Register a 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.
6. 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.
7. 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
8. 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.
9. 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.
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.
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.