{"id":13657,"date":"2020-10-04T15:00:18","date_gmt":"2020-10-04T13:00:18","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=13657"},"modified":"2020-10-02T13:12:25","modified_gmt":"2020-10-02T11:12:25","slug":"wordpress-custom-author-page","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/wordpress-custom-author-page\/","title":{"rendered":"How to Add a Custom Author Profile Page in WordPress"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]There is no doubt that blogging has always been one of the main purposes of WordPress websites. And it drives bloggers and website owners to constantly search for ways to increase their reader base and add authenticity to their blogs. Besides the essential, like producing engaging content, another way to give your blog an extra edge is by creating customized author profile pages.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]New readers are far more likely to engage and read more articles on your website if they can relate to the author behind them. The easiest and most effective way to accomplish this is to add short author bios that will introduce and humanize each author.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Even though WordPress offers its users the means to enter author information, it often requires additional work to fine-tune the frontend display or to insert new fields. Therefore, in this article, we will take you through several methods for customizing your author\u2019s information and making it more attractive to readers.
\n[\/vc_column_text][vc_empty_space height=”80px”][vc_widget_sidebar sidebar_id=”blog-magazine-banner”][vc_empty_space height=”81px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to add a custom author profile page<\/h2>\n

[\/vc_column_text][vc_column_text]Generally speaking, there are two possible ways of changing the author profile page in WordPress. They involve either using a suitable plugin or adding custom code to make a custom author template file. We will cover both methods in detail.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]You should first investigate whether an author page already exists on your website. If you find one, you need to decide whether you like its design and what you would like to change. At this point, the simplest choice is to examine the options of your current theme. This investigation is worth the time investment since some themes include settings that directly affect the display of the author\u2019s page. In that case, you can adjust the author profile page quickly and easily using the theme options.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]However, if you find you don\u2019t like the look of your author profile page and your theme doesn\u2019t offer the options to customize it, you can proceed to the other approaches described below.
\n[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to add a custom profile page using plugins<\/h3>\n

[\/vc_column_text][vc_column_text]Using plugins as opposed to custom code is the more beginner-friendly method. Due to the multitude of WordPress plugins, you are bound to find a plugin that fits your needs. And, you can explore and test the plugins from the WordPress plugin repository<\/a> until you pin down the one that suits you best.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]One way of customizing your author archive page is by adding a widget inside the sidebar on the author pages. The widget will show a short bio for your authors. You can accomplish this using a plugin such as the Author Avatars List\/Block<\/a>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Install the plugin<\/a>, then navigate to Appearance > Widgets<\/strong>, and locate the Author Avatars widget<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Author <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Before we can proceed, your author\u2019s user data must be filled out. If it isn\u2019t, make sure to navigate to Users > Your Profile<\/strong> in a new tab and fill it out<\/strong>. if you are adding information for a third-party author, navigate to Users > All Users and, as admin, edit the appropriate user account.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"User <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]This plugin only displays the user data that\u2019s already entered, which is why you needed to fill in the user profile beforehand. However, it has a drawback\u2014it doesn\u2019t allow you to change the default user avatar with a custom user image.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]To add a custom user image as the avatar, you need to install a plugin for user avatars. We will show you the steps using the WP User Avatar plugin<\/a> as an example. After installing it, navigate to the newly-created Avatar section<\/strong> within Users > Your Profile and add an image by pressing the Choose Image<\/em> button<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"User <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]After you\u2019ve filled out all the author information you want, you can insert the widget that would display it in the appropriate widget area<\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]In our example, the goal is to show it on both our posts and post archives, such as the author page. Therefore, the widget area you need is most likely one of your theme\u2019s default widget areas. But, as widget areas differ based on the theme you are using, you will need to figure what yours is called. For example, in the Behold theme, which we used for making the article, the widget area is called Main Sidebar.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Widgets <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]After you insert the widget, you will need to edit its options<\/strong>. As the options are quite straightforward, there\u2019s no need to go through them all. The most important one to mention is that you can use the widget to show information about a single author or multiple authors. Either has its merits and which one you pick depends on individual needs. Another option worth noting is the Link users<\/em> to field that determines if the user\u2019s name will contain a link and where that link will lead.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Authors <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If you only have a single author on your WordPress website, then it can be useful to show information about them on all posts as well as on the post archive pages (categories, tags, and the author archive page). [\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Single <\/div>\n<\/div>[vc_empty_space height=”60px”]
\n
\n \"Single <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]And, if your blog has several authors, showing their information together can be helpful. That way, readers can get familiar with all the authors on the site and follow the one they like. Additionally, the widget allows you to show how many published texts an author has next to their name. And you can link the authors\u2019 names to the appropriate author pages, which will make it easy for readers to access the articles they\u2019re interested in.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Authors <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]However, showing the biographies of multiple authors on all posts could be undesirable. If you worry that it will seem misleading as it can imply that the posts are a collaborative work of several authors.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]If you want to hide the widget on blog posts, we have included a description of how to do it below. You need to add the following CSS code to Appearance > Customize > Additional CSS<\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
.single-post .widget_author_avatars{\r\ndisplay: none;\r\n}<\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]This is an example code, so you might need to adjust it for your site. We will briefly explain how to find the CSS class you need so the code can work as you want it to.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]First, you need to right-click the widget<\/strong> within the sidebar. Press the Inspect<\/em> option<\/strong> from the menu that opens to access the developer tools of your browser.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Inspect                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]This will open the Elements panel, and you will be positioned on the element that you right-clicked. Navigate upward through the widget\u2019s HTML code to find the element that wraps the whole widget content<\/strong>. As you navigate through the HTML, the corresponding frontend part of the widget will be highlighted on the page.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Once you find the element, you will also find its CSS class. You can use the CSS class (in this case widget_author_avatars<\/strong>) along with the CSS hiding rule (display: none;) to hide the widget.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Inspect                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Please note that if you only use the code below, it will hide the widget from all pages.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
.widget_author_avatars{\r\ndisplay: none;\r\n}<\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Since this isn\u2019t what we intend, we need to specify that this CSS should only apply to blog posts. To do so, navigate to the top of the HTML code<\/strong> using the side scroller and find the CSS class of the body element for single posts<\/strong>. As you can see in the image below, that class is named single-post<\/strong>. And you can use it in your CSS code to ensure that the custom author information won\u2019t be shown on single blog posts.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Inspect                        <\/div>\n<\/div>[vc_empty_space height=”60px”]
\n    
\n                                    \"Inspect                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]While the WP User Avatar plugin is very useful for customizing your author profile display, there is a downside to it. Namely, there is no option for adding social media icons. A social media presence is imperative in this day and age, so you should try to supplement this feature. Check if your theme has built-in social sharing options which you can use to add social icons to the author profiles.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Another addition you can consider for your site is the author box that would be included with every post. Author boxes have become standard practice nowadays. The term author box refers to a page section, often placed at the bottom of every blog post, that contains the author\u2019s bio and social media accounts.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Even though author boxes don\u2019t directly affect the author profile page, they aim to do the same\u2014add credibility to your blog and provide a way for readers to easily connect to their favorite author via social media. Additionally, readers can use them to navigate your site. Simply link an author\u2019s name to their profile page, and the readers will have easy access to all articles by that author.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Because of their usefulness, we will also cover how to add author boxes to your WordPress website<\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Firstly, investigate if you have an option or a set of options for storing a user\u2019s social media information<\/strong>. Start by checking the Users section<\/strong> in your dashboard menu.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Unfortunately, this isn\u2019t a default WordPress functionality. So, whether you have these options and how they\u2019re called depends on the theme you\u2019re using. Our example theme for this article, Behold<\/a>, offers these options in a section called Social Networks.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Social                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If your theme includes social sharing options, check if those include showing the author info box on blog posts<\/strong>. All of our premium WordPress themes<\/a>, for example, include this option. With the Behold theme, you can find the settings for it under Theme Options > Blog > Blog Single > Enable Author Info.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]However, your theme might not include social sharing options or the available options don\u2019t include all the social networks you want. In that case, you should look for a suitable author box plugin<\/strong>. As there are quite a few good author box plugins, you should try a couple until you find the most suitable one for you. For this article, we picked the Simple Author Box<\/a> plugin as an example.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]After installing the plugin<\/a>, navigate to the Simple Author option<\/strong> found in the admin dashboard menu. The plugin options you\u2019re most likely to need for work are sorted into five tabs: Settings, Appearance, Colors, Typography, and Misc. The plugin includes an action box above the options so you can preview any changes you make.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Simple                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Additionally, you can use the three buttons above the preview to directly access the Author Profile, Author Avatar, and Add\/Edit Social Media sections<\/strong>. The options accessed by the buttons will open in a new tab, so you won\u2019t lose your place and navigation will be much easier.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Using the Simple Author Box plugin you can add images as author avatars and insert social media information for the author(s)<\/strong>. Images are added in the Custom User Profile Image<\/em> section and social networks in the Social Media Links<\/em> section. You also have the option of adding a new social media platform if the existing options don\u2019t cover your needs.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"User                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]When you are done making changes in the Users section of your admin dashboard, press the Update Profile<\/em> button at the bottom of the page<\/strong>. Then, switch back to the tab with the settings for the Simple Author Box<\/strong> plugin. Once you are sure all options are set as you want them to be, press the Save Settings<\/em> button<\/strong>. Depending on your design, your author box could look like this:[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Simple                        <\/div>\n<\/div>[vc_empty_space height=”82px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n
How to add a custom profile page using code<\/h3>\n
[\/vc_column_text][vc_column_text]If you are a more advanced WordPress user then you can try your hand at creating a custom author template. This method is more suitable for developers, as it requires the use of FTP<\/a> and familiarity with coding. However, it offers the freedom of making a custom template that would fit your needs precisely.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Before you proceed, we strongly suggest making a backup of your website<\/a>, as a coding mistake could break it. Once you\u2019ve done so, we can start making a custom author template.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]First, connect to your server using your FTP credentials and open your root WordPress directory<\/strong>, often called public_html.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"FTP                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Then, navigate to \/wp-content\/themes<\/strong> and open the directory of the theme<\/strong> you are currently using.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"FTP                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]In the theme\u2019s directory, look for the author.php file<\/strong>. When you find it, right-click on it and select the View\/Edit<\/em> option to edit it. In case your theme doesn\u2019t include an author.php file, right-click anywhere within your theme directory (that\u2019s the bottom right panel in your FTP client) and select the Create new file<\/em> option. Make sure not to accidentally click on any existing files and folders.<\/strong>[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"FTP                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Then, type in author.php<\/em> as the file name<\/strong> and press OK<\/em><\/strong>. This will create an empty author.php file that you will need to edit.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"FTP                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Right-click on the author.php file<\/strong> and press the View\/Edit<\/em> option<\/strong> to edit it in your preferred text editor.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"FTP                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If you created an empty author.php file as opposed to editing an existing one, you now need to add the appropriate template code. This can be done by copying the code from the archive.php file within your current theme and editing it according to your needs. If your theme doesn\u2019t have that file, you can try the same using the index.php file. Alternatively, you can create the code from scratch, which we\u2019ve done. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]You can see the code we made below. We will explain it in the following sections.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
<?php\r\nget_header();\r\n\/\/ Set the Current Author Variable $current_author\r\n$current_author = ( isset( $_GET['author_name'] ) ) ? get_user_by( 'slug', $author_name ) : get_userdata( intval( $author ) );\r\n?>\r\n<div class=\"main-content-holder\"> \r\n<div class=\"author-card-holder\">\r\n<h2>About <?php echo $current_author->display_name; ?><\/h2>\r\n<div class=\"author-photo\">\r\n<?php echo get_avatar( $current_author->user_email , '100 '); ?>\r\n<\/div>\r\n<div class=\"author-info\">\r\n<p>\r\n<strong>URL:<\/strong>\r\n<a href=\"<?php echo $current_author->user_url; ?>\"><?php echo $current_author->user_url; ?><\/a><br \/>\r\n<strong>Bio:<\/strong> <?php echo $current_author->user_description; ?>\r\n<\/p>\r\n<p>\r\n<strong>Follow me on social media:<\/strong><\/br>\r\n<a href=\"<?php echo $current_author->qodef_user_facebook; ?>\">Facebook<\/a>\r\n<a href=\"<?php echo $current_author->qodef_user_instagram; ?>\">Instagram<\/a> \r\n<a href=\"<?php echo $current_author->qodef_user_twitter; ?>\">Twitter<\/a>\r\n<a href=\"<?php echo $current_author->qodef_user_linkedin; ?>\">Linkedin<\/a>\r\n<\/p>\r\n<\/div> \r\n<\/div>\r\n<div class=\"author-articles-holder\">\r\n<h2 class=\"articles-title\">All posts by <?php echo $current_author->first_name; ?><\/h2>\r\n<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>\r\n<article class=\"post\">\r\n<h3>\r\n<a href=\"<?php the_permalink() ?>\" rel=\"bookmark\" title=\"Article link: <?php the_title(); ?>\">\r\n<?php the_title(); ?> \r\n<\/a>\r\n<\/h3>\r\n<p class=\"publish-date\">Published on: <?php the_time('d m Y'); ?><\/p>\r\n<div class=\"post-category\">\r\n<?php the_category ( ', ' ); ?>\r\n<\/div>\r\n<?php the_excerpt(); ?>\r\n<\/article>\r\n<?php endwhile; \r\n\/\/ Previous\/next page navigation.\r\nthe_posts_pagination(); \r\nelse: ?>\r\n<p><?php esc_html_e('The author has no published posts.', 'textdomain'); ?><\/p> \r\n<?php endif; ?>\r\n<\/div>\r\n<\/div>\r\n<?php get_sidebar();\r\nget_footer();<\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]After adding your code into the author.php file, save the changes you made, and upload the file to your server<\/strong>. This will override the file that was previously there.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Now we can take a look at the code in detail. First, our template is on par with the smaller code block given below.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
<?php\r\nget_header();\r\n\/\/ Set the Current Author Variable $current_author\r\n$current_author = ( isset( $_GET['author_name'] ) ) ? get_user_by( 'slug', $author_name ) : get_userdata( intval( $author ) );\r\n?>\r\n<div class=\"main-content-holder\"> \r\n<div class=\"author-card-holder\">\r\n<!-- some code here -->\r\n<\/div>\r\n<div class=\"author-articles-holder\">\r\n<!-- some code here -->\r\n<\/div>\r\n<\/div>\r\n<?php get_sidebar();\r\nget_footer();<\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]In this block, we are using the functions get_header()<\/a>, get_sidebar()<\/a>, and get_footer()<\/a>, to include the default theme templates for the header, sidebar, and footer sections. And we\u2019re storing the information about the current author, within $current_author<\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Regarding the HTML structure, you can see that we created a section with the custom class called main-content. This section contains two subsections intended to hold the author card\/box and author articles<\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Let us take a closer look at the first subsection. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
<h2>About <?php echo $current_author->display_name; ?><\/h2>\r\n<div class=\"author-photo\">\r\n<?php echo get_avatar( $current_author->user_email , '100 '); ?>\r\n<\/div>\r\n<div class=\"author-info\">\r\n<!-- some code here -->\r\n<\/div><\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]It uses the get_avatar function<\/a> to show the author title, which has the h2 tag, and the author avatar image, which has the display dimensions set to 100×100. This function can accept user email as one of the valid arguments.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]This code subsection contains an additional subsection that shows user-related information. That information includes the author website URL, the author description\/bio, and links to their social media accounts.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
<p>\r\n<strong>URL:<\/strong>\r\n<a href=\"<?php echo $current_author->user_url; ?>\"><?php echo $current_author->user_url; ?><\/a><br \/>\r\n<strong>Bio:<\/strong> <?php echo $current_author->user_description; ?>\r\n<\/p>\r\n<p>\r\n<strong>Follow me on social media:<\/strong><\/br>\r\n<a href=\"<?php echo $current_author->qodef_user_facebook; ?>\">Facebook<\/a>\r\n<a href=\"<?php echo $current_author->qodef_user_instagram; ?>\">Instagram<\/a> \r\n<a href=\"<?php echo $current_author->qodef_user_twitter; ?>\">Twitter<\/a>\r\n<a href=\"<?php echo $current_author->qodef_user_linkedin; ?>\">Linkedin<\/a>\r\n<\/p><\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]If you choose to use this code for your own author.php file, please note that the whole code can be directly copy-pasted except the social media links section<\/strong>. This is because the code takes advantage of theme-specific social media fields for users (such as qodef_user_instagram<\/em>).[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"User                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Therefore, if you aren\u2019t using the Behold theme, the social media links won\u2019t work as they will be missing a valid href attribute. As such, you will need to find an alternative for the code snippet dealing with social media. If you aren\u2019t sure how to accomplish that on your theme, you can simply delete that part of the code<\/strong>. To avoid any confusion, this is the code snippet in question:[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
<p>\r\n<strong>Follow me on social media:<\/strong><\/br>\r\n<a href=\"<?php echo $current_author->qodef_user_facebook; ?>\">Facebook<\/a>\r\n<a href=\"<?php echo $current_author->qodef_user_instagram; ?>\">Instagram<\/a> \r\n<a href=\"<?php echo $current_author->qodef_user_twitter; ?>\">Twitter<\/a>\r\n<a href=\"<?php echo $current_author->qodef_user_linkedin; ?>\">Linkedin<\/a>\r\n<\/p><\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Alternatively, you can try to add user-related custom fields for social media accounts. Then replace our code with the one that \u201ccalls\u201d the added custom fields.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Now that we\u2019ve covered that, we can explain the second code subsection. It is the one with the custom class author-articles-holder<\/strong>. Its structure can be simplified as seen below.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
<h2 class=\"articles-title\">All posts by <?php echo $current_author->first_name; ?><\/h2>\r\n<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>\r\n<!-- some code here -->\r\n<?php endwhile; \r\n\/\/ Previous\/next page navigation.\r\nthe_posts_pagination(); \r\nelse: ?>\r\n<p><?php esc_html_e('The author has no published posts.', 'textdomain'); ?><\/p> \r\n<?php endif; ?><\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The code contains a title followed by a WordPress Loop<\/a>. Thanks to the loop, if an author has published posts, then a certain code block will be executed. But if an author has no posts, then the label \u201cThe author has no published posts\u201d will be shown.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]There is also a pagination feature, added using the_posts_pagination() function<\/a>. And the innermost section, contained within the WordPress Loop, shows the relevant post data, stored in an article element.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
<article class=\"post\">\r\n<h3>\r\n<a href=\"<?php the_permalink() ?>\" rel=\"bookmark\" title=\"Article link: <?php the_title(); ?>\">\r\n<?php the_title(); ?> \r\n<\/a>\r\n<\/h3>\r\n<p class=\"publish-date\">Published on: <?php the_time('d m Y'); ?><\/p>\r\n<div class=\"post-category\">\r\n<?php the_category ( ', ' ); ?>\r\n<\/div>\r\n<?php the_excerpt(); ?>\r\n<\/article><\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The article elements show a post\u2019s title, publish date, categories, and excerpt. The post title links to the post, the date is given in the DD MM YYYY format, and the categories are separated with a comma and a blank space as delimiters.<\/strong>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]This covers the composition of the code for the author template that we put together for this article.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]After you create your custom author template file, the only thing that remains is to stylize it with some CSS. How you stylize it depends entirely on the desired look for your author page.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]To help you along, we will share the CSS we used for the author page in this article below. However, if you want to achieve a different look, you will need to create the appropriate CSS code on your own. Keep in mind that any CSS you create to stylize the author page should be inserted in Appearance > Customize > Additional CSS<\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
#qodef-page-inner{\r\ndisplay: -webkit-box;\r\ndisplay: -ms-flexbox;\r\ndisplay: flex;\r\n-webkit-box-orient: horizontal;\r\n-webkit-box-direction: normal;\r\n-ms-flex-direction: row;\r\nflex-direction: row;\r\n-ms-flex-wrap: wrap;\r\nflex-wrap: wrap;\r\n}\r\naside{\r\n-webkit-box-flex: 1;\r\n-ms-flex: 1 0 0px;\r\nflex: 1 0 0;\r\n}\r\n.author-card-holder, .author-articles-holder{\r\ntext-align: center;\r\n}\r\n.author-card-holder {\r\nbackground: #f6f7f2;\r\nborder: 1px solid #79a2ac;\r\npadding: 20px;\r\ncolor: #79a2ac;\r\n}\r\n.author-photo {\r\ndisplay: inline-block;\r\nborder-radius: 50px;\r\n}\r\n.author-photo img{\r\nborder-radius: 50px;\r\n}\r\n.articles-title{\r\nmargin: 45px 0;\r\n}\r\n.nav-links{\r\nletter-spacing: 5px;\r\nmargin: 20px 0;\r\n}\r\n@media only screen and (min-width: 680px){\r\n.main-content-holder{\r\n-webkit-box-flex: 2;\r\n-ms-flex: 2 0 0px;\r\nflex: 2 0 0;\r\nmargin: 0 1.5rem 0 0;\r\n}\r\n}<\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Here\u2019s how the corresponding author profile page would look. This is the result of our custom author template and the CSS code we used to stylize it.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Custom                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Ultimately, the code we included in this article is meant predominantly as a guideline. It is not set in stone, and you are more than welcome to modify and improve it.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Try out the different methods we suggest in this article and see what suits you best. If you like, you can even combine them. Add some author-related features using a WordPress plugin and add others using code, be it PHP or CSS.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n
Final thoughts<\/h2>\n
[\/vc_column_text][vc_column_text]Having a custom author page or an author box on your posts can help boost your blog popularity and bring readers and authors closer together. In this article, we tried to show you that there are several approaches you can take to make that happen. We touched on some helpful plugins and shared our coding advice and explanations as a guideline. Hopefully, you will find creating custom author templates much easier using this tutorial.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"
Want to give your blog that extra oomph? Make a WordPress custom author profile page and create a personalized introduction to readers.<\/p>\n","protected":false},"author":11229,"featured_media":13767,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[21,15,4,13],"class_list":["post-13657","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-php","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/13657","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=13657"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/13657\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/13767"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=13657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=13657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=13657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}