Back on February 13, 2017 I wrote a post Custom Author Box With Genericons that described how to build a custom author box for your Genesis powered website and integrate Genericons with it. At that point in time we used Genericons v3.0.3. At the time of this writing Genericons is now up to v3.2.
Genericons have undergone several changes since that original post. For the complete list of changes you can check their Release Notes.
The most significant change is how we actually use them. In the original post we added a font import rule to the top of our style sheet. Using the current version of Genericons we no longer do that but rather enqueue the Genericons CSS in our
functions.php file. All the other steps are virtually the same.
In this tutorial I’ll reproduce the steps from the original post while including the new information.
Grab the Genericons
First step is to head on over to the Genericons website and download the ZIP file. As I said earlier, the current version is 3.2. Once you’ve downloaded the ZIP extract the contents. You’ll end up with a folder called genericons and a handful of files. All we want is that folder named genericons.
Upload the genericons folder to your child theme’s folder. The structure should look something similar to this,
/themes - YourChildTheme --- genericons --- images ----- various child theme files
Enqueue the Genericons CSS
We need to enqueue the Genericons CSS in our
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 …//* Enqueue CSS files
add_action( 'wp_enqueue_scripts', 'themeprefix_enqueue_styles' );
function themeprefix_enqueue_styles() {
wp_enqueue_style( 'themeprefix-genericons-style', get_stylesheet_directory_uri() . '/genericons/genericons.css' );
}
The above assumes the genericons folder is located at the root of your child theme. If you have that folder nested within another folder or if you have renamed it you’ll need to adjust this line accordingly …
wp_enqueue_style( 'themeprefix-genericons-style', get_stylesheet_directory_uri() . '/genericons/genericons.css' );
Also, you’ll note that I’m appending the various functions and actions with
themeprefix_ Substitute themeprefix_ with the actual name of your child theme. It’s a good habit to get into. For instance, if you’re using Metro Pro, change themeprefix_ to metro_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.
Add the following to the child theme’s
functions.php file …//* Add fields to profile page
function themeprefix_change_contact_info($contactmethods) {
$contactmethods['twitter'] = 'Twitter Username';
$contactmethods['github'] = 'GitHub Username';
$contactmethods['gplus'] = 'Google+ Username';
return $contactmethods;
}
add_filter( 'user_contactmethods','themeprefix_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', 'themeprefix_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', 'themeprefix_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 Gist 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 over to the child theme’s style sheet.
Before we add the style rules I want to show you a screen capture of the custom author box outlining the various elements so that you better understand the CSS.
The following, taken from my own theme, goes into the child theme’s style.css file …
/* Custom Author Box
--------------------------------------------- */
.postauthor {
background-color: #fff;
border: 1px solid #e1e1e1;
border-radius: 3px 3px 0 0;
overflow: hidden;
padding: 32px;
}
.postauthor img {
border-radius: 3px;
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 {
background-color: #a90000;
border: 1px solid #990000;
border-top: 0;
border-radius: 0 0 3px 3px;
color: #fff;
margin-bottom: 40px;
overflow: hidden;
padding: 20px 32px;
}
.postauthor-bottom span {
font-weight: 700;
font-size: 14px;
margin: 0 10px 0 0;
}
.postauthor-bottom p {
margin-bottom: 0;
}
.postauthor-bottom .author-gh::before,
.postauthor-bottom .author-gplus::before,
.postauthor-bottom .author-twitter::before {
color: #fff;
display: inline-block;
font: normal 16px/1 'Genericons';
margin-right: 5px;
vertical-align: middle;
-moz-osx-font-smoothing: grayscale;
-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: #fff;
font-size: 14px;
font-weight: 700;
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 {
text-decoration: underline;
}
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’ll probably want to customize it for your own theme.
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 Wordpress College part.
For Google+ enter +YourUserName if you are using their vanity URLs. For example, my Google+ profile is https://plus.google.com/+brandstore so I enter +brandstore. (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: