Tag: wordpress

Add Custom Author Box With Social Icons In Your Genesis Child Theme

Genesis a popular theme framework for wordpress. It is Fast, Lighter, and SEO friendly. Most of the Popular blogger used Genesis theme Framework on their website such as Shoutmeloud.com, Crunchify.com etc.

In this article we are going to create / add a custom author box with social icons in our genesis child theme. Because its an important part of your Blog/Website. BTW Genesis Framework‘s has a default author box, But its pretty simple and kind of boring.  If you want to make it more eye catchy then either you require a plugin or you have to make your hand dirty with some coding. There are many Free Author Box Plugin available in WordPress Repository , Which let you customize the author box  according to your requirements. But If you want to customize the author box without any plugin, Then read this guide about how to  Add Custom Author Box With Social Icons In Genesis Child Theme Without Any Plugin.

[Genesis] How To A Add Custom Author Box With Social Icons

In this article I am going to use Font Awesome Icons to add social media Icons in Genesis. Because Font awesome icons are very easy to use and they are quite popular these days. There are several advantage of using Font Awesome Such as :

  • It’s a font
  • It’s retina ready and easy to style
  • It has a performance advantage

The process Of addition Of Custom Author Box In Genesis Require Below Mentioned Steps

  1. Enqueue / Integrate  Font Awesome Support For Your Child Theme Via script
  2. Adding Custom Social Media URL Fields In User Profile Setting
  3. Remove The Default Author Box From Your Child Theme
  4. Register/Add A new Author Box With Social Icons In Your Genesis Child Theme
  5. Styling The Author Box With CSS

1. )Enqueue / Integrate Font Awesome Support For Your Child Theme Via script

The first step to create a custom author box with Social Icons, We are going to enqueue the Font awesome script in our Genesis Child theme. So we can use the icons in our child theme.

To Enqueue or Add Font awesome icons you have to place the below snippet in your genesis child theme. there are two ways to add font awesome icons in your child theme:

Through Child Theme’s Local Directory

// Enqueue Font-Awesome Icons to Your Theme <From Local Directory>

add_action('wp_enqueue_scripts', 'td_genesis_enqueue_styles'); function td_genesis_enqueue_styles() { wp_enqueue_style('fa', get_stylesheet_directory_uri() . '/lib/css/font-awesome.min.css', array()); }

After adding the font awesome support in your child theme, lets move on to the next step.

2.) Adding Custom Social Media URL Fields In User Profile Setting

In this snippets we are customizing the social field in user profile section, after defining the custom meta fields, we will try to remove the default genesis author box and register a new custom author box in genesis child theme.

3.) Remove The Default Author Box From Your Child Theme

The below snippet will remove the genesis’s default author box from genesis child theme.

4.) Register/Add A new Author Box With Social Icons In Your Genesis Child Theme

The below code snippet adds a custom author box and define the author box layout . Also the code integrate font awesome icons with the equivalent social url.

Now you  have successfully created your custom author box with social icons. Now you have to style the Author box with css.

Add Custom Author Box With Icons

Complete Code To Add Custom Author Box With Social Icons In Your Genesis Child Theme

Add this code in your theme's functions.php

Functions.php

Editing a theme functions.php may break your theme. Try to put the code at the very end of the file to avoid that

6.) Styling The Author Box With CSS

Now you have to paste this code in style.css file to implement the customization. Make sure you copy /paste the whole code from the below Gist

Style.css

Paste The code at the end of style.css

This is how you can add custom author box with social icons in your genesis child theme. But this is not the end you can customize it according to your will. The only limit is your mind. Do share your customization with us.

If you face any problem in the above code or you have any suggestion kindly drop us a comment below.