Back on February 1, 2017 I wrote a post called Tutorial: Full Width Breadcrumbs in which I explained how I modified the Genesis breadcrumbs to span the full width of the page in a couple of my child themes.
In case you haven’t noticed I absolutely love the Genesis framework. It’s an awesome piece of software packed with oodles of features not the least of which is an author box that includes a brief summary about the author and a Gravatar image. You can choose to display the Genesis author box on single post pages, the author archive page or both.
Having said that, I wanted something a little bit different. There is nothing wrong with the built-in Genesis author box – it works just fine. But I’m the type of person who loves to tinker and break stuff. As such I wanted to see if I could come up with something just a tad bit different so off to Google I went. It didn’t take long for me to find exactly what I was looking for.
The end result is a completely custom author box complete with Genericons which are an icon font. You can see a live example of it in action at the end of this very post. Or you can check out the screen capture below.
Now you may be asking why I elected to use Genericons especially when I showed you how to integrate Dashicons in the previous post. The only reason for that is because I wanted to include a link to my GitHub profile but couldn’t find the icon font for it at Dashicons. Genericons has a GitHub icon font so I went that route. But you could certainly use Dashicons if you wanted to as they do have the appropriate icon fonts for some of the popular social media sites like Twitter etc.
Okay, enough of the small talk. Let’s get started.
This entire tutorial is based on code written by Vivek of WPStuffs which in turn is based on code written by Chris Wiegman. Chris’s original code included text links to social media profiles. Vivek modified it by adding images to the links. I further modified it by dropping the images in favour of an icon font. The other modification I made was dropping
get_the_author_id() for get_the_author_meta( 'ID' ) as the former is now deprecated.Grab the Genericons
First step is to head on over to the Genericons website and download the ZIP file. At the time of this writing it is v3.0.3. Once you’ve downloaded the ZIP extract the contents. You’ll end up with a folder called genericons. Inside that folder is another folder called font. That’s the one we want.
Upload the font folder to your child theme’s folder. The structure should look something similar to this,
/themes
– YourChildTheme
— font
— images
—– various child theme files
– YourChildTheme
— font
— images
—– various child theme files
Next, add the following to the top of the child theme’s style sheet …
/*
Font Import
------------------------------------------------------------------------ */
@font-face {
font-family: 'Genericons';
src: url('font/genericons-regular-webfont.eot');
src: url('font/genericons-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('font/genericons-regular-webfont.woff') format('woff'),
url('font/genericons-regular-webfont.ttf') format('truetype'),
url('font/genericons-regular-webfont.svg#genericonsregular') format('svg');
font-weight: normal;
font-style: normal;
}
Alright, we’re done with this for now.
Add Profile Fields to Your Profile Page
If you navigate to Users > Your Profile you’ll see a few profile fields under Contact Info such as E-mail, Website etc. What we’re going to do is add a few more profile fields so that we can add some links to various social media sites.
For the purposes of this tutorial we’re only going to add links to Twitter, GitHub and Google+ although you can add as many as you want.
We do so via the child theme’s functions.php file. Using your favourite FTP client download the child theme’s functions.php file to your desktop and make a backup of it. Now open it up with a plain text editor and add the following …
//* Add fields to profile page
function change_contact_info($contactmethods) {
$contactmethods['twitter'] = 'Twitter Username';
$contactmethods['github'] = 'GitHub Username';
$contactmethods['gplus'] = 'Google+ Username';
return $contactmethods;
}
add_filter( 'user_contactmethods','change_contact_info', 10, 1 );
What we have just done is add 3 new profile fields to your Profile page. Check your Profile page to make sure they are there. If they are then continue on. If not go back and make sure you did everything correctly.
Replace Genesis Author Box
Our next step is to replace the Genesis author box with our custom author box. Add the following to your child theme’s functions.php file …
//* Replace Genesis author box with custom author box on single post page remove_action( 'genesis_after_entry', 'genesis_do_author_box_single', 8 ); add_action( 'genesis_after_entry', 'theme_author_box', 8 ); //* Replace Genesis author box with custom author box on author archive page remove_action( 'genesis_before_loop', 'genesis_do_author_box_archive', 15 ); add_action( 'genesis_before_loop', 'theme_author_box_archive', 15 );
What we have done is remove the Genesis author box from both single post pages and the author archive page (yikes!) and replaced it with our custom author box which we’ll actually build next.
The following also goes into the child theme’s functions.php file …
Note: while copy/paste from the normal code blocks is fine do not copy/paste directly from the Gist above. Use the view raw link.
We’re finished here so you can put the functions.php file away.
The CSS
Let’s head back over to the child theme’s style sheet.
Before we add the style rules I want to show you another screen capture of the custom author box, this time outlining the various elements so that you better understand the CSS.
The following goes into the child theme’s style.css file …
/* Custom Author Box
--------------------------------------------- */
.postauthor {
background-color: #fff;
border: 1px solid #e1e1e1;
border-radius: 3px;
margin-top: 15px;
overflow: hidden;
padding: 32px;
}
.postauthor img {
display: block;
float: left;
height: 100px;
margin-right: 15px;
width: 100px;
}
.postauthor h4 {
color: #444;
font-size: 20px;
margin-bottom: 0px;
margin-left: 105px;
padding: 0 0 8px;
}
.postauthor p {
color: #666;
font-size: 16px;
line-height: 27px;
margin-bottom: 0;
}
.postauthor-bottom {
margin-bottom: 20px;
overflow: hidden;
padding: 10px 20px 0 20px;
}
.postauthor-bottom span {
font-weight: bold;
font-size: 14px;
margin: 0 10px 0 0;
}
.postauthor-bottom .author-gh::before,
.postauthor-bottom .author-gplus::before,
.postauthor-bottom .author-twitter::before {
color: #666;
display: inline-block;
font: normal 16px/1 'Genericons';
margin-right: 5px;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
}
.postauthor-bottom .author-gh::before {
content: '\f200';
}
.postauthor-bottom .author-gplus::before {
content: '\f206';
}
.postauthor-bottom .author-twitter::before {
content: '\f202';
}
.postauthor-bottom .author-gh,
.postauthor-bottom .author-gplus,
.postauthor-bottom .author-twitter {
color: #666;
font-size: 14px;
margin: 0 10px 0 0;
padding: 0 0 0 25px;
}
.postauthor-bottom .author-gh:hover,
.postauthor-bottom .author-gplus:hover,
.postauthor-bottom .author-twitter:hover {
color: #a90000;
}
.postauthor-bottom .author-gh:hover::before,
.postauthor-bottom .author-gplus:hover::before,
.postauthor-bottom .author-twitter:hover::before {
color: #a90000;
}
By referring to the screen capture you should be able to easier see what the CSS is doing.
Keep in mind the above CSS was written specifically for my theme. I included it so that you can use it as a starting point. You can customize it until the cows come home.
An important point: when adjusting the font size of the Genericons icon font it is best to use multiples of 16. At least that is what the official documentation says. For example, it is currently set by this rule …
font: normal 16px/1 'Genericons';
If you wanted to increase the size you would have to go up to 32 as such …
font: normal 32px/1 'Genericons';
According to the documentation the icon fonts may look fuzzy by using off-numbers although I haven’t personally seen it. Just something to keep in mind.
As I said earlier, you can add whatever and how many profile fields you want. Just study the code under the heading Add Profile Fields to Your Profile Page and the Gist under the heading Replace Genesis Author Box and follow the same format.
One more thing. When filling out your new profile fields you need only enter your username rather than the complete URL. For example my Twitter profile is https://twitter.com/wpcanada but I enter just the wpcanada part.
For Google+ enter +YourUserName if you are using their vanity URLs. For example, my Google+ profile is https://plus.google.com/+LenKutchma so I enter +LenKutchma. (minus the period) If you’re still using the old Google+ profile URLs it will look something like this https://plus.google.com/117573566699941542724 Just enter the number into the profile field.
Now go forth and build those custom author boxes!
No comments: