How To Add a Sliding Author Bio Box to the Tonal Child WordPress Theme

There certainly is a lot of imaginative stuff you can do to add subtle personal touches to a WordPress theme. My Tonal Child theme, that I created in a previous post called How To Create a WordPress Child Theme, is beautiful in its minimalism and simplicity. However, one thing that I thought could personalize it a bit more is a nice sliding author’s bio box tucked at the end of the single post content. Here’s how I went about adding one using the Tonal Child’s functions.php file, CSS, and jQuery.

The End Result

I don’t know about you, but when I read something interesting, be it on the web or in a paper publication, I get very curious about the person who wrote it. It’s not enough to know the name. I want to know where the author comes from, her background, what else she might have written, etc.

This is equally true for blog posts. It’s nice to have a non-intrusive info box at the end of each article, that lets me know something more about the post’s author, especially if it’s a multi-author blog.

For the Tonal Child theme I thought about something like this:

WordPress Tonal Child author info box closed
WordPress Tonal Child theme author info box closed

When the user clicks the View Author’s Bio link, an info box slides down looking like this:

WordPress Tonal Child theme author bio box open
WordPress Tonal Child theme author info box open

What I Did

The easiest approach would be to use an author box plugin, like Fancier Author Box, WP Biographia, etc. Just browse the WordPress.org plugins directory and take your pick.

A bit more hands-on approach is to duplicate single.php from the parent to the child theme and make all the changes needed to get an info box working. There’s nothing wrong with this approach, but my motto is: if you can achieve the same if not a better result without modifying a template file, that’s the best approach.

All the markup and functionality in the Tonal Child theme for the info box have been added using functions.php, style.css, and tonalchild-scripts.js, a JavaScript file containing a snippet of jQuery code for the sliding animation on the box.

One general point to make here is: before customizing a WordPress theme, take some time to browse through its files. Open each file and try to understand what it does and how it’s related to the code in other files. WordPress functions and tags, as well as PHP, are very close to spoken English in their semantics, which helps understand what’s going on.

Also, start using the WordPress function reference and template tags list in the Codex: they’re a minefield of information, sample code and useful related links. Having this overall comprehension is invaluable when it comes to approaching the strategy to your customization tasks.

In this case, scanning single.php in the Tonal parent theme, I found out that the post’s date, author, categories and tags at the bottom of the article are output by a function called tonal_posted_on(). This function is in inc/template_tags.php. Just above it, as a sort of premise, one finds this very important check:

if ( ! function_exists( 'tonal_posted_on' ) ) :

This simple check makes this theme very child theme friendly. In fact, only if the function tonal_posted_on doesn’t exist anywhere else, then Tonal goes ahead and runs it. If, however, a child theme uses the same function, the one in the parent doesn’t even begin to do anything and can then be overwritten by the child.

Here’s what needs to be done next:

#1 copying and pasting the tonal_posted_on() function from Tonal to Tonal Child’s functions.php;

#2 making the necessary adjustments to the function so that it outputs the author’s info box together with the other information.

Enough talking, here’s how I did just that.

Tonal Child functions.php

The tonal_posted_on() function uses some PHP and WordPress-specific functions to format and display meta information about the single post, i.e., post date, author, categories and tags. They look complicated, but once you know this, it starts to make sense.

To follow along, please visit the Tonal Theme template-tags.php file page in the WordPress.org repository and find the tonal_posted_on() function.

The changes to the function for the author box look like this:

global $post;
if ( is_single() && isset ($post->post_author) ) {
 printf( __( '<span class="posted-on">Posted on %1$s</span><span class="byline"> by %2$s</span>', 'tonalchild' ),
  sprintf( '<a href="%1$s" rel="bookmark">%2$s</a>',
esc_url( get_permalink() ),
  $timetonaltring
 ),
 sprintf( '<span class="author vcard"><a class="url fn n" href="%1$s">%2$s</a></span><span class="toggle-author-bio"><a href="#">%3$s</a></span>',
   esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
   esc_html( get_the_author() ),
   esc_html__("View Author's Bio", "tonalchild")
  )
);

printf('<div class="clearfix author-bio-container">%1$s <p>%2$s</p></div>',
  get_avatar( get_the_author_meta( 'ID' ), 128 ),
  esc_html__( get_the_author_meta('description'), 'tonalchild' )
 );
}  //end if
else {
//code from tonal_posted_on in parent theme
} 

I highlighted the points where crucial changes have been made. Tonal uses the PHP built-in printf() and sprintf() functions to format and output text, therefore I stayed as close as possible to the original code in the parent theme.

What’s important to understand here is:

  • First I check that we’re on a single post page and also that we have author-related information;
  • If we do, we go ahead and add a toggle link after the author name and a container div for the author info;
  • The author’s gravatar image and description are pulled using the get_avatar() and the get_the_author_meta(‘description’) WordPress functions respectively. Both functions get their data from the settings in the WordPress admin panel.
  • If we are not on a single post page or we have no post author, then we run the remainder of the function exactly as it is in the parent theme.

Enqueuing the jQuery script

Before we’re done with functions.php, we need to enqueue the jQuery file where I placed the function that toggles the author bio box on and off the page. What this means is that reference to stylesheet and JavaScript files are never to be hard-coded into the markup itself.

WordPress uses the wp_enqueue_script() function to easily enable us to add stylesheet and script files without ever worrying if our assets are going to be called at the right time, or more than once, or if other files they depend on are also going to be present, etc.

At the bottom of functions.php, I added the magic snippet below:

/**
 * Enqueue scripts and styles
 */
function childtonal_scripts() {
 wp_enqueue_script( 'childtonal_script', get_stylesheet_directory_uri() . '/js/tonalchild-scripts.js', array('jquery'), '20142300', true );
}

add_action( 'wp_enqueue_scripts', 'childtonal_scripts' );

The code above makes sure that the JavaScript file will be referenced in the footer of the document, and that WordPress knows that it depends for its functioning on the jQuery library. The function is hooked to the WordPress Action wp_enqueue_scripts, which ensures that it gets called at the right time.

Tonal Child style.css

The author box and the link that toggles it into view can be styled in any way you like. I kept to the salmon base color of Tonal Child. Here’s the CSS

/*clearfix class to clear floats: add it to the .author-bio-container class*/
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* Author bio toggler link and box at the bottom of single post  */
.posted-on { 
	display: inline-block;
	margin-bottom: 1em;
}

.toggle-author-bio { 
	display: inline-block;
	margin-bottom: 1em;
 }
 
 .toggle-author-bio a { 
	background-color: #e84c3d;
	color: #ddd;
	display: inline-block;
	font-size: 1.1em;
	padding: 0.5em;
	text-decoration: none;
 }
 
 .toggle-author-bio a:hover { 
	color: #fff;
 }
 
.toggle-author-bio a .more-icon,
.toggle-author-bio a .less-icon { 
	font-weight: bold;
	margin-left: 10px;
 }
 
.author-bio-container { 
	background-color: #e84c3d;
	margin: 1em 0;
	padding: 1em;
}

.author-bio-container img {
	border-radius: 4px;
	clear: left;
	float: left;
	margin-bottom: 10px;
	margin-right: 15px;
}

.author-bio-container p { 
	color: #fff;
	font-size: 1.2em;
	max-width: 80%;
}

Tonal Child jQuery Script

Now it’s time to perform a bit of jQuery magic. jQuery is an easy-to-learn JavaScript language. If you want to know more about jQuery, the W3Schools jQuery Tutorial is a great place to start, besides the jQuery website itself, of course.

I created a file called tonalchild-scripts.js and placed it inside a folder called js.

Here’s the initial code:

(function($) {

 //all jQuery code goes here 
 
 //hide author bio on page load
 $('.author-bio-container').hide();

 //clicking the link makes the author bio box slide up and down
 $('.toggle-author-bio a').on('click', function (e) {
  e.preventDefault();
  $('.author-bio-container').slideToggle();
 }
 
})(jQuery);

The thing to note about the code above is how the jQuery symbol, $, is being used in no conflict mode, that is, in a way that doesn’t conflict with other scripts that could also be using the $ sign. To know more, check out Using ‘$’ instead of ‘jQuery’ in WordPress by Chris Coyer.

The snippet above is enough to get the bio box to be hidden on page load and slide up and down by clicking the link.

However, I wanted to add some visual cue for the user by displaying a + sign when the info box is hidden and a – sign when the info box is visible. Therefore, the final jQuery code ended up looking like this:

(function($) {
 //hide author bio on page load
 $('.author-bio-container').hide();
	
 //add a + sign next to the author bio toggler link
 //then toggle the + sign with a - when the bio box is 
 //visible 
 var moreIcon = '+', 
 lessIcon = '-';
	
 $('.toggle-author-bio a').append(moreIcon);
	
 //toggle author bio container on click  
 $('.toggle-author-bio a').on('click', function (e) {
  e.preventDefault();

  if ($('.author-bio-container').is(':hidden')) {
   $('.author-bio-container').slideDown();
   $('.more-icon').remove();
   $('.toggle-author-bio a').append(lessIcon);
  } else if ($('.author-bio-container').is(':visible')) {
   $('.author-bio-container').slideUp();
   $('.less-icon').remove();
   $('.toggle-author-bio a').append(moreIcon);
  } 
 });
})(jQuery); 

The + and – signs are added dynamically to the page according to whether the bio box is hidden or visible.

The page now displays a button link that on click slides down an author info box with a nice animated effect. All this without even touching the markup in the template file.

To Sum Up

While the specific code I used here is not directly portable to all child themes, the general approach of modifying the parent theme’s template files from the child theme only when it’s unavoidable, browsing the parent theme’s files and grasping how they work together, and then applying modifications using the functions.php file in the child theme as much as possible, are all methodological guidelines that are applicable to all WordPress theme customization projects.

Have you an author’s bio box displayed in your WordPress website? What did you use to create it? I’d love to receive your comments.

Slightly modified photo of William Shakespeare from Wikimedia Commons.

Advertisements

Have your Say

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s