How to Customize Layouts in PublishPress Authors

The PublishPress Authors plugin provides five default ways to display the author profiles on your site:

  • Simple list
  • Boxed
  • Centered
  • Inline
  • Inline with Avatars

You can see full details of each option in this guide.

It is possible to customize these default layouts and create new layouts.

  • Go to Authors > Layouts and you will see all five layouts:
  • Click “Edit” for any layout and you'll see this screen:

Each layout is editable using Twig. You can add many different types of author information to these layouts including custom fields.


Adding basic author details

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 %}

Adding 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.


Adding the author 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>

Adding 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 }}

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. That way, instead of display the tag as a text, it displays the image.


Adding 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]') }}

Variables

current_user

These variables allow you to conditionally show content in the author profile. These are based on who is viewing the author profile, not on the author themselves.

This conditional will display content only to logged-in users:

{% if current_user %}

This conditional will display content only if the user's ID is 32:

{% if current_user.id == 32 %}

This conditional will display content only if the user is in administrator role:

{% if 'administrator' in current_user.roles %}

This conditional will display content only if the user's display name is “the-user”:

{% if current_user.display_name == 'the-user' %}

This conditional will display content only if the user has a specific capability:

{% if current_user_can('the-capability-goes-here') %}

This conditional will display content only if the user has a specific metadata on the profile:

‚Äč{% if get_current_user_meta('the-custom-field') == 1 %}

css_class

This is the CSS class for the wrapper element.

Some PublishPress Authors layouts use a wrapper element for the author box. There is a variable “css_class” with a default class. Using this variable in your custom layout is optional. Here is an example on how to use it:

<div class="pp-multiple-authors-wrapper {{ css_class }}">

You can customize this CSS class for different displays:

For example, this allows you to target the wrapper only in the PublishPress Authors widget:

<div class="pp-multiple-authors-wrapper {{ widget }}">

item_class

This is the CSS class to be added to each author. You can see item_class used in this example below from the inline layout:

<a href="{{ author.link }}" class="{{ item_class }}" rel="author">{{ author.display_name }}</a>

This can be customized using the CSS from your theme. For example, in this code below, I've added the author-title class which is from the default Twenty Twenty theme in WordPress:

<a href="{{ author.link }}" class="{{ author-title }}" rel="author">{{ author.display_name }}</a>

target

The author box can be added to your site in multiple ways including a widget, a shortcode and in the main content. This variable allows you to create different CSS classes for each situation: widget, the_content, shortcode, or action.

This code is the basis for your custom layout:

<div class="pp-multiple-authors-wrapper-{{ target }}">

If you are using the PublishPress Authors widget, this code allows you have a specific style adding CSS only for your widget:

<div class="pp-multiple-authors-wrapper-widget">

If you add the author box using the default option after the content, you can use this code:

<div class="pp-multiple-authors-wrapper-the_content">

Using this format, you can also target CSS to your shortcode and action displays.

layout

This is a string that contains the slug for the custom layout. These are the default slugs:

  • boxed
  • centered
  • inline
  • inline_avatar
  • simple_list

This is useful for adding different CSS rules for each layout:

<div class="pp-multiple-authors-wrapper {{ layout }}">

For example, this code allows you to CSS only to the inline_avatar layout:

<div class="pp-multiple-authors-wrapper {{ inline_avatar }}">

show_title

This part of the PublishPress Authors core and controls whether or not the title of the author box should be displayed. This boolean value can be controlled by the widget's settings, by the shortcode's parameters or action's parameters. If you kept the option “Show below the content” enabled, the value will be “true”.

You can use show_title in a conditional block using this code:

{% if show_title %}
    <h2 class="pp-multiple-authors-layout-{{ layout }} widget-title">{{ title }}</h2>
{% endif %}

show_email

This is boolean value that controls whether the author's email should be displayed. The value is set by the global option “Show email link” in the PublishPress Authors settings:

{% if show_email and author.user_email %}
    <a href="mailto:{{ author.user_email }}" target="_blank" rel="noopener noreferrer"><span class="dashicons dashicons-email"></span></a>
{% endif %}

show_site

This is boolean value that controls if the author's site address/link should be displayed. The value is set by the global option “Show site link” in the PublishPress Authors settings:

{% if show_site and author.user_url %}
    <a href="{{ author.user_url }}" target="_blank" rel="noopener noreferrer"><span class="dashicons dashicons-admin-site"></span></a>
{% endif %}

authors

This is an iterator object containing the list of authors. You should use it for building the loop of authors.

{% for author in authors %}
    <span class="pp-multiple-authors-layout-{{layout}} author_index_{{ loop.index }}">
        <a href="{{ author.link }}" class="{{ item_class }}" rel="author">{{ author.display_name }}</a>{% if loop.index < authors|length %},{% endif %}
    </span>
{% endfor %}

You can use the instruction “for” and set the name of the variable that will receive the author instance on each iteration. Inside the loop you have a special variable “loop.index” which returns the index of the current iteration, but using it is optional.


Body classes

For the author archive page WordPress adds special classes to the body element:

  • author
  • author-<author_slug>
  • author-<author_id>

Our plugin adds some additional classes as following:

  • guest-author (when the current author is not mapped to a user)
  • not-guest-author (when the current author is mapped to a user).

Please, note that when a guest author is displayed the author-<author_id> class will be removed.

Professional publishing plugins for WordPress! Get PublishPress

[i]
[i]