Legacy: Add Data in Custom Author Layouts

This version of the Layouts feature has been retired. PublishPress Authors is now using a new approach called “Author Boxes“.

The PublishPress Authors plugin allows you to create custom author layouts. In this guide, we'll show you how to include data in your custom layouts.

How to add PublishPress Author details

You can place any details from PublishPress Authors profiles in your layouts. In the sidebar of your layout editing screen, PublishPress Authors will automatically show your author details in the “Author's properties” area.

For example, here is how to show the author's display name:

{{ author.display_name }}

Here is how to show the URL for the Author's page:

{{ author.link }}

You can adjust your layout based on whether there is one or multiple Authors. This code will display “Author” is there is one, or “Authors” if there is more than one:

{% if authors|length > 1 %}
    <h2 class="widget-title">{{ __('Authors') }}</h2>
{% else %}
    <h2 class="widget-title">{{ __('Author') }}</h2>
{% endif %}

How to add PublishPress Authors custom fields

In sidebar of your site, PublishPress Authors will automatically show your author custom fields. In the image below, the last four items are fields:

If you have a field with the slug travel, you can add that field to your layouts using this syntax:

{{ author.travel }}

For custom fields of type WYSIWYG the value is stored as embed HTML code which requires a special filter “raw” for displaying it correctly. For example, if you have a field of this type and the slug description, the correct syntax would be:

{{ author.description|raw }}

For any variable or field that contains HTML embed code, the raw filter is required. Otherwise the code is not parsed, but displayed in the output.

How to add the PublishPress Authors box title

Here is how to show the title of the author box:

{{ title }}

The output is a string without any HTML markup. Here is an example of using it in a Header tag:

<h2>{{ title }}</h2>

How to add the author avatar

Avatars can have different sizes, so instead of using a simple variable, PublishPress Authors uses a function. This function accepts a parameter which specifies the size of the image in pixels. Here is an example for displaying the avatar with 160px for width and height:

{{ author.get_avatar(160)|raw }}

If you change 160 in this code, you change the size of the avatar.

The function get_avatar returns HTML markup, and Twig escapes any value coming from variables or functions by default, for security reasons. So in order to make the <img> tag work we need to add the filter raw right after the function's call. If we add raw, it will display the image instead of the HTML.

PublishPress Authors will automatically recognize if the BuddyPress plugin is installed on your site. It will find the link to the BuddyPress profile of any mapped user and make it available for your layouts.

{{ author.buddypress_profile_link }}

How to add WordPress shortcodes

Any WordPress shortcode can be included in your author layouts.

This code below shows how to include shortcodes. Replace [the_shortcode] with your own shortcode.

{{ do_shortcode('[the_shortcode]') }}

How to use WordPress user data

You can show information from a user's main account (under the “Users” menu in your WordPress site). This data is stored in the _users and the _usermeta tables in the database.

This will show the “First Name” field:

{{ author.get_user_object().first_name }}

This will show the “Last Name” field:

{{ author.get_user_object().first_name }}

This will show the “Website” field:

{{ author.get_user_object().user_url }}

This will show the “Biographical Info” field:

{{ author.get_user_object().description }}

You can show almost any data from the _users and _usermeta tables so long as its is not stored in an array.

How to make sure your HTML code displays correctly

The author description (or author bio text) can contain basic HTML code and HTML entities.

However, sometimes you may see the “raw” HTML code in the frontend, instead of the parsed text. You can fix this using the filter “|raw” on the variable in your layout.

In this example, I have the following content in an author's description field. Note that I've added a space after the “&” to stop the browser converting it in this guide:

Author of the <b>best-seller</b>: A& amp;B

In this example, I am also using the following code in the layout:

{{ author.description }}

Now, I may see exactly the same problem in the output:

Author of the <b>best-seller</b>: A& amp;B

However, after adding the “|raw” filter:

{{ author.description|raw }}

I am now able to see the correct output:

Author of the best-seller: A&B

Professional publishing plugins for WordPress! Get PublishPress