How to Add a Custom Author Profile Page to Your WordPress Site

If you are looking to add a custom author profile page to your WordPress site then you’ve come to the right place. In this tutorial, we will show you how to create a custom author profile page with and without the use of a plugin.

As always, we will show you how to add this without a plugin and then provide the plugin alternative method.

1. How to Manually Add a Custom Author Profile Page to Your Theme

The first step is to create the author.php file, this will go within your theme/child theme folder. Now we can simply copy and paste the contents of the archive.php file and paste it within the author.php file.

If your theme already has an author.php file, then you can edit that as well.

Our main goal here is to get the author’s profile information and then display it. You will need to decide where you want to start editing. As a general rule of thumb, you can usually edit anything between the get_header(); and get_sidebar() lines.


<?php
	$theauthor = (isset($_GET['author_name'])) ? get_user_by('slug', $author_name) : get_userdata(intval($author));
?>
     
<div class="author-profile-card">
    <h2>About: <?php echo $theauthor->nickname; ?></h2>
    <div class="author-photo">
    <?php echo get_avatar( $theauthor->user_email , '90 '); ?>
    </div>
    <p><strong>Website:</strong> <a href="<?php echo $curauth->user_url; ?>"><?php echo $theauthor->user_url; ?></a><br />
    <strong>Bio:</strong> <?php echo $theauthor->user_description; ?></p>
</div>
     
<h2>Posts by <?php echo $theauthor->nickname; ?>:</h2>
 
 
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<h3>
		<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a>
	</h3>
	<p class="posted-on">Posted on: <?php the_time('d M Y'); ?></p>
	 
	<?php the_excerpt(); ?>
	 
	<?php endwhile; 

	the_posts_pagination();
	 
	else: ?>
	
	<p><?php _e('This author hasn\'t posted yet.'); ?></p>
 
<?php endif; ?>

The above code will add the author’s profile details at the top of the page and then it will display their recent posts below.

This code can be customised to your needs, for example, you could add social links, display featured images for the post, customise the posts to look like your blog archive page, and so on.

To get you started, here is some CSS code that you can add to make your author profile look more presentable. Feel free to make changes and further improve to match the theme of your website.


.author-profile-card {
    background: #eee;
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
}

.author-photo {
    float: left;
    text-align: left;
    padding: 5px;
    margin-right: 10px;
}

img.avatar {
    border-radius: 50%;
}

You will end up with a page that looks something along the following lines:

2. How to Add a Custom Author Profile Page in WordPress with a Plugin

For this method, we are going to install and active the WP User Manager plugin.

Once activated, you need to go to Users » WPUM Settings page to configure the plugin to your requirements.

This plugin will automatically create pages for a custom login, user registration, forgot password, account and profile pages.

WP User Manager comes fully packed with a lot of options and customisation. You will have to go through the settings and enable/disable the features that you require for your site.

Once completed, we can click on the Profiles tab to setup the user profile settings.

In this tab, we can enable the profile page option for guest which allows anyone to view the user’s profile. You can also allow members to view one another profile. If unchecked, you will only be able to see your own profile page.

You can also allow users to upload a custom profile image and display their recent posts as well as comments on their profile page. Once you’ve configured it to your liking click the Save Changes button.

Now, we will need to select SEO friendly URLs on permalinks for the author profile pages. This can be done by going to Settings » Permalinks page. Scroll down to the ‘User profile permalink base’ section.

This plugin allows you to use the user ID, username, or nickname in the URL. Both nickname and username are more SEO friendly options than user ID. Click to select either one of them and then click on the save changes button to store your permalink settings.

For the next step, we need to let users easily find their profile pages on your website. What you can do here is go to Appearance » Widgets and add the WPUM Login Form widget to one of your sidebars

Once done, you can now view your new author’s profile page. If you are logged in, you will see your own account details in the sidebar widget. Click on the username and this will take you to the author profile page.

The sidebar widget will show a login form for users who are logged out. If you wish users to register on your website, the form will also include a link to sign up. This plugin will also change author links on your website and point them to the author profile page as opposed to the default author’s archive page.

If you want to customise the plugin you can add some CSS to match it with your WordPress theme. However, if you want to take it one step further and adjust the layout, you will need to edit the plugin’s template files. The plugin comes with custom templates support which means you can create your own templates within your theme folder.

To do this, head over to the /wp-content/plugins/wp-user-manager/templates/ directory and download all the files. Next, head over to your theme/child theme folder and create a new folder called wpum. Now, we can add the files you downloaded previously within this folder.

Now you can edit these files to customise the appearance of your profile page as you wish.

Conclusion

And that’s it! We have now learned how to add a custom author profile page in WordPress with and without the use of a plugin.

We hope you found this tutorial useful. If you need any help with anything, feel free to drop a comment below.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to add Pagination on an Advanced Custom Fields Repeater

Edit: It seems the code stopped working either from the latest version of PHP or one of the most recent WordPress versions. We have updated the below code which works with the latest versions of both PHP (7.4) and WordPress (5.5)


Okay, so it goes without saying that the Advanced Custom Fields plugin is an amazing plugin, one in which we pretty much use on every website we build. It becomes even more powerful with the Repeater Field add-on. If you’re like us, then you probably already have the Advanced Customer Fields Pro version which we would highly recommend if you don’t own it already.

One request that we had was to add pagination since the repeater values grew much larger than expected. Today, we will show you a method to add pagination to the results when you display them to the user.

In the example below, we will paginate a Repeater image gallery which is mapped to a custom field name image_gallery which contains a subfield called image which is an image object. Our repeater will be displayed on a custom page template with the URL of /gallery.

In our example, ten images will be displayed per page, and pagination links will allow the user to navigate between the gallery’s pages at pretty URLs such as /gallery/2/, /gallery/3/ and so on. Right, so let’s get cracking!

In your page template:

PHP



<?php
/* 
 * Paginatation on Advanced Custom Fields Repeater
 */

if( get_query_var('page') ) {
    $page = get_query_var( 'page' );
} else {
    $page = 1;
}

// Variables
$row              = 0;
$images_per_page  = 10; // How many images to display on each page
$images           = get_field( 'image_gallery' );
$total            = count( $images );
$pages            = ceil( $total / $images_per_page );
$min              = ( ( $page * $images_per_page ) - $images_per_page ) + 1;
$max              = ( $min + $images_per_page ) - 1;

// ACF Loop
if( have_rows( 'image_gallery' ) ) : ?>

<?php while( have_rows( 'image_gallery' ) ): the_row();

    $row++;

    // Ignore this image if $row is lower than $min
    if($row < $min) { continue; }

    // Stop loop completely if $row is higher than $max
    if($row > $max) { break; } ?>

<?php $img_obj = get_sub_field( 'image' ); ?> <a href="<?php echo $img_obj['sizes']['large']; ?>">
    <img src = "<?php echo $img_obj['sizes']['thumbnail']; ?>"
alt = "" >
    </a>

<?php endwhile;

  // Pagination
  echo paginate_links( array(
    'base' => get_permalink() . '%#%' . '/',
    'format' => '?page=%#%',
    'current' => $page,
    'total' => $pages
  ) );
  ?>

<?php else: ?>

No images found

    <?php endif; ?>

And there we have it, pretty simple huh? This technique will also work on Custom Post Type single templates. Your pagination permalinks will have the format /post-type/post-slug/2/.

Along with this, you will need to add some styling but we’ll assume your pretty capable with that part.

Did this help? Do you need any assistance getting this to work? Drop a comment below and we’ll be in touch!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to style Checkboxes and Radio Buttons using CSS

So you want to style checkboxes and radio buttons to look more awesome than the default styling? Well, you are in the right place. These input values are a bit of a pain, and the default options tend to look a lot different depending on which browser you are using. There are several ways to do this, but today we will show you a great solution that focuses on accessibility.

Let’s get cracking! In this tutorial we will be using the following:

  • ::before and ::after pseudo-elements
  • :checked CSS pseudo-class selector
  • + adjacent sibling selector

The great thing about using these techniques is that almost all browsers (IE 10 and above) have great support for this.

We are going to demonstrate how to do these using checkboxes, radio buttons use the same approach, just with slightly different styles; nail one, you got them both!

So firstly, let’s make your HTML markup like below:


<div class="checkbox">
    <input type="checkbox" id="my-checkbox">
    <label for="my-checkbox">CSS Only Checkbox</label>
</div>

What we have done here is wrap the input and label elements with a div called checkbox so that we know this part of code represents a checkbox.

For this to work in the way we will be demonstrating, the following things are required: (otherwise tweaks will be required based on your HTML markup)

  • The label must appear after the <input type="checkbox">
  • The id attribute is required on the <input type="checkbox">
  • The for attribute is required on the label

Now for the CSS, we are going to show this in steps, if you just want the full code; click here.

Step 1.

Since we can’t style the default checkbox using CSS, we are going to hide it. There are several ways to do this but we are going to hide it using opacity: 0 as follows:


.checkbox input[type="checkbox"] {
    opacity: 0;
}

Step 2.

Now we are going to create a ‘fake’ checkbox using pseudo-elements, this will be done by using the ::before and ::after pseudo elements.

We will use the ::before to create the outer box and ::after to create the checkmark.

Both of these elements will be positioned before the text in the label.

Let’s start by creating the outer box. What we will do here is make the ::before pseudo-element and inline-block and assign an equal width and height. We will add a border to make it visible. Depending on the way you wish to style it, this will look like this:


.checkbox label::before{
    content: ' ';
    display: inline-block;    
    height: 16px;
    width: 16px;
    border: 1px solid #000;   
}

Now, let’s create the checkmark using the ::after pseudo-element. We are going to set this as an inline-block element and assign it height and width. We’ll also add custom styles to its left and bottom borders and rotate it by 45 degrees to make it appear like a checkmark.


.checkbox label::after {
    content: ' ';
    display: inline-block;
    height: 6px;
    width: 9px;
    border-left: 2px solid;
    border-bottom: 2px solid;
    transform: rotate(-45deg);
}

In this next part, we will be aligning the outer box and checkmark. We will be using absolute positioning to position both pseudo-elements relative to the text in the label like so:


.checkbox label {
    position: relative;
}

.checkbox label::before,
.checkbox label::after {
    position: absolute;
}

.checkbox label::before {
    top: 3px;
}

.checkbox label::after {
    left: 4px;
    top: 7px;
}

Step 3.

Now, we are getting very close. We just need to create a way for the checkmark to appear/disappear based on the state of the checkbox.

You may have noticed that there is an ID for the <input type="checkbox"> and also for the attribute on the label. It’s possible to toggle the state of the default checkbox by clicking the label. The reason we placed the label after the <input type="checkbox"> is so that we can change the state using the adjacent (+) sibling selector as shown below:


/* Hide Checkmark */
.checkbox input[type="checkbox"] + label::after {
    content: none;
}

/* Show Checkmark on Checked State */
.checkbox input[type="checkbox"]:checked + label::after {
    content: "";
}

Step 4.

Now we have a working, custom styled checkbox. If you want to take this one step further and make it accessible, then keep reading!

We will use the :focus selector on the <input type="checkbox">, we can again use the adjacent (+) sibling selector to give the ::before pseudo-element (outer box) of the label a focus style. To do this, we can add the following code:


.checkbox input[type="checkbox"]:focus + label::before {
    outline: rgb(59, 153, 252) auto 5px;
}

And there we have it, folks, we now have a fully accessible, customisable and functional checkbox in just four simple steps.

Awesome right?

To Conclude

To create a custom checkbox using pure CSS your code will look as follows:

HTML


<div class="checkbox">
    <input type="checkbox" id="my-checkbox">
    <label for="my-checkbox">CSS Only Checkbox</label>
</div>

CSS


body {
    font-size: 20px;
    line-height: 24px;
}

.checkbox input[type="checkbox"] {
    opacity: 0;    
}

.checkbox label {
    position: relative;
    display: inline-block;
    padding-left: 30px;  
}

.checkbox label::before,
.checkbox label::after {
    position: absolute;
    content: ' ';
    display: inline-block;
}

.checkbox label::before {
    height: 16px;
    width: 16px;
    border: 1px solid #000;
    left: 0px;
    top: 3px;
}

.checkbox label::after {
    height: 5px;
    width: 9px;
    border-left: 2px solid;
    border-bottom: 2px solid;
    transform: rotate(-45deg);
    left: 4px;
    top: 7px;
}

.checkbox input[type="checkbox"] + label::after {
    content: none;
}

.checkbox input[type="checkbox"]:checked + label::after {
    content: ' ';
}

.checkbox input[type="checkbox"]:focus + label::before {
    outline: rgb(59, 153, 252) auto 5px;
}

You can view a demo of this here on CodePen.

We hope you loved this tutorial, if it has helped you or if you require any assistance with anything, feel free to drop us a comment below.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Advantages of developing bespoke WordPress Themes over Templates

Here are some advantages of building a custom WordPress website as opposed to using an off the shelf WordPress Template.

1.Theme Consistency

Pre-built templates are developed by several different developers so there will be very low consistency with how themes are structured and coded. Everything from HTML, CSS, and naming conventions to functions will vary massively which can often make even simple tasks such as tweaking a column width an overly timing process. This alone is a reason to develop a bespoke theme as it will save you plenty of time in the long run.

2. Creating something unique

With a template you could end up with a great looking website, however, if it looks like a clone of thousands of other websites out there, it will most certainly get lost amongst the noise. WordPress drives nearly 20% of the web, and if you have a website that looks no different to several others; people will be less impressed and also less likely to come back to you. Creating a bespoke theme gives you the opportunity to create something different that looks exactly how you want it.

3. Faster Development

Building a bespoke website will allow you to develop a website with SEO in mind. The website will be developed in a very consistent way, in terms of HTML, CSS, naming conventions. It will definitely save you time in the long run as any updates or additions to your WordPress theme would be much easier as we would already know which CSS styles to modify or function that needs to be modified before making the change.

4. Only using features your project needs

With the majority of the theme templates on the market, they come packed with options to customise your WordPress site. Most of them will not be used, adding unnecessary files, styles and bloat potential processing. Developing a theme from scratch means that you will only have functions, styles, files and structure the website needs. This will keep the website clearer and cleaner.

5. Increased speed

Website speed is incredibly important. Search engines are beginning to penalise slow websites. An off the shelf theme is packed with unnecessary code and functions. A lot of themes have several different theme templates built into one Theme so you can only imagine how this is going to affect the performance.

6. Less reliance on plugins

A great feature of WordPress is the availability of plugins, however this makes it too easy for users to use a plugin for even the most basic of tasks. Theme templates come overloaded with plugins and overtime you will end up spending a lot of time wondering why plugin A is not working with plugin B. In a custom built theme, very few WordPress plugins are used as these are hand coded and built for your website. So not only is maintaining the code a lot easier, but the website will only be using functions that are needed for the website.

7. Updating the website

With a bespoke website, the backend of the website will be a lot clearer and easier to update. Each page of the website will have custom editing tools for specific pages. A template would have a very generic editing tools where the user would still need to know some HTML and CSS to be able to change a page or even more importantly, update a page without breaking the themes structure.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share