Responsive Author and Social Media Box

functions.php

// Author Name

function acrylic_author_name() {
	 global $post;
 
	if ( is_single() && isset( $post->post_author ) ) {
 
		$display_name = get_the_author_meta( 'display_name', $post->post_author );
 
		if ( empty( $display_name ) )
			$display_name = get_the_author_meta( 'nickname', $post->post_author );


		if ( ! empty( $display_name ) )

			$author_details = '<p class="author">Written By ' . '<a rel="author" href="'. get_theme_mod('google_icon') .'">' . $display_name . '</a>'.'</p>';
		if ( ! empty( $user_description ) )
			$author_details .= '<p>' . get_avatar( get_the_author_meta('user_email') , 90 ) . nl2br( $user_description ). '</p>';
 
		return $author_details;
 
	}

}



// Post Date

function acrylic_post_date() {
	$time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time>';
	if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {

	}

	$time_string = sprintf( $time_string,
		esc_attr( get_the_date( 'c' ) ),
		esc_html( get_the_date() ),
		esc_attr( get_the_modified_date( 'c' ) ),
		esc_html( get_the_modified_date() )
	);

	printf( __( '<p class="posted-on">Posted on %1$s</p>', 'acrylic' ),
		sprintf( '%2$s',
			esc_url( get_permalink() ),
			$time_string
		),
		sprintf( '<span class="author vcard"><a class="url fn n" href="%1$s">%2$s</a></span>',
			esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
			esc_html( get_the_author() )
		)
	);
}
endif;



// Post Category
function acrylic_post_categories() {
	$return = '';
	$count = 0;
	$categories	=	get_the_category($post_id);
	$num_cats = count($categories);
	if (!empty($categories)) {
		$return .= "<p class='post-cat'><span>Category</span>:&nbsp;";
		foreach ($categories as $category) {
			$count++;
			$return .= "<a class='p-category' href='" . get_category_link($category->term_id) . "'>" . $category->category_nicename . "</a>";
			if($count<$num_cats)
				$return .= ', ';
		}
		$return .= '</p>';
	}

	return $return;
}


// Post Tags
function acrylic_post_tags() {
	$return = '';
	$count = 0;
	if (get_the_tags()) {
		$return .= '<p class="post-tags"><span>Tags</span>:&nbsp;';
		$num_tags = count(get_the_tags());
		foreach(get_the_tags() as $tag) {
			$count++;			
			$return .= "<a title='Tag: $tag->name' href='" . get_tag_link($tag->term_id) . "'>$tag->name</a>";
			if($count>6) break;
				$return .= ', ';
		}

		$return .= '</p>';
	}
	return $return;
}

page.php

<div >
  <ul class="post-meta">
    <?php echo acrylic_author_name() ?>
    <?php echo acrylic_post_date(); ?>
    <?php echo acrylic_post_categories(); ?>
    <?php echo acrylic_post_tags(); ?>
  </ul>
  <ul class="social clear">
    <li><a href="https://plus.google.com/share?url=<?php echo get_permalink(); ?>" class="google-share" target="_blank">Google+</a></li>
    <li><a href="http://www.facebook.com/share.php?u=<?php echo get_permalink(); ?>&title=<?php print(urlencode(the_title())); ?>" class="facebook-share" target="_blank">Facebook</a></li>
    <li><a href="http://twitter.com/home?status=<?php print(urlencode(the_title())); ?>+<?php echo get_permalink(); ?>+@yourusername" class="twitter-share" target="_blank">Twitter</a></li>
  </ul>
</div>

style.css

* {
  box-sizing:border-box;
  font-family:'open sans',sans;
}
ul {
  list-style:none;
  padding:0;
  margin:0;
}
footer {
  background:#f1f1f1;
  width:100%;
  max-width:700px;
  overflow: hidden;
  margin:80px auto 0;
}
.post-meta {
  float:left;
  margin:0;
  padding:20px;
  width:80%;
}
.post-meta p {
  position: relative;
  padding-left:25px;
  line-height:1.7;
  margin:0
}
.post-meta p:before {
  font-family:fontawesome;
  position: absolute;
  left:0;
  color:#777;
}
.post-meta p:nth-of-type(1):before {
  content:'\f040'
}
.post-meta p:nth-of-type(2):before {
  content:'\f017'
}
.post-meta p:nth-of-type(3):before {
  content:'\f114'
}
.post-meta p:nth-of-type(4):before {
  content:'\f02b'
}
/* SOCIAL BUTTONS */
.social li a {
  float:right;
  margin:0;
  width:20%;
  display: inline-block;
  padding:14px 0;
  color:#fff;
  text-decoration:none;
} */
.social li a:before {
  
}
.social li {
  text-align:center;
}
.fb {
  background: #3b5998;
}
.fb:hover {
  background: #233f77;
}
.gp {
  background: #dd4b39;
}
.gp:hover {
  background: #c43a2b;
}
.tw {
  background: #00aced;
}
.tw:hover {
  background: #008fc4;
}

/* CLEARFIX */

.clear:before,
.clear:after{
  display:table;
  content:"";
} */
.clear:after {
  clear:both;
}

@media only screen and (max-width : 600px) {
  .social li a{
    width:33.33%;
  }
  .post-meta {
    width:100%;
  }
}

Custom Author Box with Social Media Share Icons for WordPress.

CodePen visual example CSS: http://codepen.io/kieranfivestars/pen/daDCw

Just add these codes to the pages they are named after. So for example the top part of the code goes anywhere inside functions.php.

Note* For the Facebook share icon to work you will need to implement the Facebook Open Graph, otherwise you will just see lots of random code when sharing the page. The Facebook Open Graph grabs the correct content from the page such as featured image, title and description.

I use the Yoast SEO plugin for the Facebook Open Graph, as it's built in and does it all automatically.