How to Customize Layouts in Multiple Authors

The Multiple 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 sidebar of your layout editing screen, Multiple 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, Multiple Authors will automatically show your 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 }}

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 it uses a function. This function accepts a param which specify 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 a 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.


Variables

css_class

The CSS class for the wrapper element.

Some default layouts use a wrapper element for the author box and the plugin set a variable “css_class” with a default class following the format: “multiple-authors-target-[widget|the_content|shortcode|action]”.

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

item_class

CSS class to be added to each author. Default value: author url fn. Using this variable in your custom layout is optional.

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

target

A string which says the target to the Author box: widget, the_content, shortcode, action.

The author box can be added to your site in multiple ways. If you need different styles for the boxes depending on target you can use this variable to create different CSS classes for each situation.

Consider the following example as the code in the beginning of your custom layout:

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

If you add a Multiple Authors widget you can have a specific style adding CSS rules for this class in your theme: “pp-multiple-authors-wrapper-widget”.

If you add the author box using the default option after the content, you could use: “pp-multiple-authors-wrapper-the_content”.

The same happens for shortcode or action.

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

show_title

A boolean value that says if the title should be displayed. The value is set by the widget’s settings, by the shortcode’s params or action’s param. If you kept the option “Show below the content” enabled, the value will be “true”.

Being a boolean variable you can use it in a conditional block:

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

show_email

A boolean value that says if the email should be displayed. The value is set by the global option “Show email link” in the 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

A boolean value that says if the site address/link should be displayed. The value is set by the global option “Show site link” in the 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

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.

Professional publishing plugins for WordPress! Get PublishPress