This tips is for anyone who uses Twenty Fourteen theme in their websites, to remove the author link in the single post page.
By default, under the post title, you will find, the date, the Twenty Fourteen author link and name which is clickable, and the “leave a comment” post meta links.
For some reasons, you might want to hide or remove this WordPress author link from your theme.
I saw many forum posts, and many suggests, putting display:none; in style.css which I don’t recommend for these two reasons; although it is displayed none or basically hidden, but advanced browser user, can always view the source code from your homepage. And if they do that, they can easily find your author name and link.
Second, although I am not a SEO expert, putting “display:none;” attribute too much will have no good effect in your site’s SEO.
Every theme has different code, so I guess, if you use other theme, and not Twenty Fourteen theme, then this tutorial isn’t for you.
What will we achieve?
1.We will display the author name but will not be clickable or without link.
2. We will remove it completely.
So at this point, it’s up to you which one you want to do, but I will show you both in this tutorial.
What do we need to prepare?
1. Create the child theme first.
2. You will need access to your WP files, either by using FTP client or direct access. For this post, I am using FileZilla.
The Whole Process
Basically, we will need to modify the function twentyfourteen_posted_on() which we can find in content.php.
And this function itself is actually a replacable function, which mean we can replace the function with child theme’s function. (Some functions of a theme will load the child theme functions.php first, and then the parent theme’s, not overrided like stylesheet CSS file.)
This function is found inside the parent theme directory twentyfourteen/inc/template-tags.php line 101.
We copy the twentyfourteen_posted_on() function into our child theme’s functions.php and modify the code to remove the author name and link, or just to remove the link, and still show the author name.
Adding Social Media Links to WordPress Menu With CSS Classes
Steps:
1. Create or edit functions.php of your child theme.
2. Add this code to completely remove the author name and the link. Do not forget to delete the <?php and ?> PHP block code if you have any content in your child theme’s functions.php. (I added many code in this child theme, you can check out how to remove the left sidebar and center align 2014 theme tutorial).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <?php if ( ! function_exists( 'twentyfourteen_posted_on' ) ) : /** * Print HTML with meta information for the current post-date/time and author. * * @since Twenty Fourteen 1.0 */ function twentyfourteen_posted_on() { if ( is_sticky() && is_home() && ! is_paged() ) { echo '<span class="featured-post">' . __( 'Sticky', 'twentyfourteen' ) . '</span>'; } // Set up and print post meta information. printf( '<span class="entry-date"><a href="%1$s" rel="bookmark"><time class="entry-date" datetime="%2$s">%3$s</time></a></span>', esc_url( get_permalink() ), esc_attr( get_the_date( 'c' ) ), esc_html( get_the_date() ) ); } endif; ?> |
Or Add this code to just remove the link, and make the author link not clickable.
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 | <?php //Code to remove the author of Twenty Fourteen child if ( ! function_exists( 'twentyfourteen_posted_on' ) ) : /** * Print HTML with meta information for the current post-date/time and author. * * @since Twenty Fourteen 1.0 */ function twentyfourteen_posted_on() { if ( is_sticky() && is_home() && ! is_paged() ) { echo '<span class="featured-post">' . __( 'Sticky', 'twentyfourteen' ) . '</span>'; } // Set up and print post meta information. printf( '<span class="entry-date"><a href="%1$s" rel="bookmark"><time class="entry-date" datetime="%2$s">%3$s</time></a></span> <span class="byline"><span class="author vcard">%5$s</span></span>', esc_url( get_permalink() ), esc_attr( get_the_date( 'c' ) ), esc_html( get_the_date() ), esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ), get_the_author() ); } endif; ?> |
3. Save the new functions.php, and update it to your server. And check the changes.
4. (Thanks to Matt – see comment below for spotting the issue). Now, to display the human icon of the author, you can add following code in your style.css of the child theme, and save it.
1 2 3 4 5 6 7 8 9 | /*Displaying author human icon*/ span.author.vcard:before{ content: "\f304"; -webkit-font-smoothing: antialiased; display: inline-block; font: normal 16px/1 Genericons; text-decoration: inherit; vertical-align: text-bottom; } |
Clean browser’s cache if necessary.
Thank you for this helpful article – you saved me some previous time! I’m investigating using Twenty Fourteen for one of my sites, and wanted to make the author link unclickable – so this was very helpful.
I noticed, however, that following the steps you outline you also lose the little Genericon f304 (outline person) icon immediately before the (newly unlinkable) author name.
Digging in a little further I spotted that the main theme CSS (line 3243) added this character only for span classes. “.site-content” and “.byline” where there is a hypertext link – which is why it wasn’t appearing.
I added an extra span class to your code (between “<span class=”byline”>” and “<span class=”author vcard”>” and then added that class into my child theme’s CSS with the code from the main theme CSS file (lines 3184 – 3188).
Just a minor refinement on your ideas – I would have taken hours to solve this without your post – thank you.
Hello Matt,
Thank you for pointing this out!! I didn’t realize it, and I am so glad that you found this. I will update the post.
Yes, you can add another class, however alternatively, you can just add the current span class, which is span.author.vcard:before and applying the whole css attributes you mentioned.
Sorry for the late approval and reply – not checking the blog for ages 🙂
Kindly Kim.
Wow! Thanks for the video and then clearly typing the instructions out. I started today with another one of your tutorials and created my first childs theme. I have been modifying Twenty Fourteen for weeks now. I started with the custom CSS plugin and after a dozen modifications the site was slowing down. I have been slowly reading and watching your videos several times just to make sure I don’t make a critical errors and shut down my site. Twenty Fourteen is a great template but it has caused me to play with code that I would have never touched. Just wanted to thank you for your help and you sold me on subscribing.
I did remove the date with some custom CSS and put that as a display none in the child’s styles.css folder. Can you share the code for removing the date also or is it OK to do that with the custom CSS code below added to the styles.css folder:
header .entry-date {
display: none;
}
Aaaarg, no way to correct my post… sorry for the crazy link, here is the correction:
Twenty Fifteen: the right way to remove post dates and author
Any chance you could show also how to add the category into the meta line under the title (instead of it preceding the title) in “twentyfourteen”? Thank you!