Many WordPress sites now are running with Genesis Framework, a Premium Theme Framework by Studio Press, it’s a great framework for building WordPress site and with state of the art code, smart design architecture and many other built-in theme functionality to make sure your site are high quality. In this tutorial I will share you how to customize default author box and how to replace it with our custom code or custom author box.
Okay let’s start.
Customize the Default Author Box
Before replacing default author box let’s customize it first, here I will show you some technique how to customize default author box.
Modify Author Box Title
PHP
1
2
3
4
5
|
/** Modify the author box title */
add_filter( ‘genesis_author_box_title’, ‘author_box_title’ );
function author_box_title() {
return ‘<strong>About the Author</strong>’;
}
|
Modify Gravatar Size
PHP
1
2
3
4
5
|
/** Modify the size of the Gravatar in the author box */
add_filter( ‘genesis_author_box_gravatar_size’, ‘author_box_gravatar_size’ );
function author_box_gravatar_size($size) {
return ’75′;
}
|
Enable Author Box Globally
If your site has a multiple author, now you don’t need to go each of them and enable author box for post and archive, just simple put this code in functions.php file of your current theme and done.
PHP
1
2
|
/** Display author box on single posts */
add_filter( ‘get_the_author_genesis_author_box_single’, ‘__return_true’ );
|
That’s it, now the default author box show a little bit different 
.
.Replacing Default Author Box
So you’re not satisfied in default author box huh? Well, not problem folks, here I will show you how to add and replace default author box.
Step 1:
Since our goal here is to replace default author box with our own code, so we need to remove default box first, here’s the code to do it.
PHP
1
2
3
4
5
|
//remove from post
remove_action( ‘genesis_after_post’, ‘genesis_do_author_box_single’ );
//remove from archive
remove_action( ‘genesis_before_loop’, ‘genesis_do_author_box_archive’ );
|
Step 2:
In this step we we’re going to create a new custom author box, I have here I pre-coded custom author box just copy and paste this code to try in yourself.
Here are the lists of functions I’m using below.
PHP
1
2
3
4
5
|
if( get_the_author_meta(‘genesis_author_box_single’) == 1) //see if author box is enabled in authors profile.
get_the_author_meta() // a very useful built-in function to get user meta.
if ( is_single() ) // this pretty much obvious
, we only display our author box on every posts. |
Here’s the complete custom Author Box code.
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
add_action(‘genesis_before_comments’, ‘msb_author_box’);
/*
* Add Custom Author Box
* @ Author: Ryan Sutana
*/
function ryans_author_box() {
$output = ”;
if( get_the_author_meta(‘genesis_author_box_single’) == 1) :
$output .= ‘<div>’;
$output .= ‘<h3>About the Author:</h3>’;
$output .= ‘<div>’;
$output .= ‘<div>’;
$output .= get_avatar(get_the_author_meta(‘user_email’), 75);
$output .= ‘</div>’;
$output .= ‘<div>’;
$output .= ‘<div>’;
$output .= ‘<ul>’;
$output .= ‘<li><a href=”‘.get_the_author_meta(‘facebook_url’).’” target=”_blank”>Facebook</a></li>’;
$output .= ‘<li><a href=”http://twitter.com/’.get_the_author_meta(‘twitter_id’).’” target=”_blank”>Twitter</a></li>’;
$output .= ‘<li><a href=”‘.get_the_author_meta(‘linkedin_url’).’” target=”_blank”>Linked In</a></li>’;
$output .= ‘</ul><div></div>’;
$output .= ‘</div>’;
$output .= wpautop(get_the_author_meta(‘description’));
$output .= ‘<div><a href=”‘.get_author_posts_url(get_the_author_meta( ‘ID’ )).’”>Learn More »</a> <a href=”‘.get_author_posts_url(get_the_author_meta( ‘ID’ )).’”>View Posts »</a> </div>’;
$output .= ‘</div>’;
$output .= ‘<div></div>’;
$output .= ‘</div>’;
$output .= ‘</div>’;
endif;
if ( is_single() ) {
echo $output;
}
}
|
CSS
To beatify our custom author box we need to add CSS code.
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
/* Custom Author Box */
.author-box{ }
.author-box .author-inner{ }
.author-box .author-inner .inner-left{
float: left;
width: 96px;
}
.author-box .author-inner .inner-right{
float: left;
width: 400px;
}
.author-box .author-inner .inner-right .social-sharer{
margin-bottom: 10px;
}
.author-box .author-inner .inner-right .social-sharer .share-list, .social-sharer .share-list{
list-style: none;
}
.author-box .author-inner .inner-right .social-sharer .share-list li, .social-sharer .share-list li {
float: left;
padding-right: 6px;
}
.author-box .author-inner .inner-right .social-sharer .share-list li a, .social-sharer .share-list li a{
background: url(‘images/social.png’) no-repeat 0 0;
width: 26px;
height: 26px;
text-indent:
-999999px;
display: block;
}
.author-box .author-inner .inner-right .social-sharer .share-list li .twitter, .social-sharer .share-list li .twitter{
background-position: 0 0;
}
.author-box .author-inner .inner-right .social-sharer .share-list li .facebook, .social-sharer .share-list li .facebook{
background-position: -26px 0;
}
.author-box .author-inner .inner-right .social-sharer .share-list li .linkedin, .social-sharer .share-list li .linkedin{
background-position: -52px 0;
}
.author-box .author-inner .inner-right .learn-more {
margin-top: 10px;
}
.author-box .author-inner .inner-right .learn-more a{
padding: 6px 8px;
background: #3A5999;
font-size: 11px;
color: #fff;
}
|
That’s it 
, hope it helps.
, hope it helps.
0 comments:
Post a Comment