Add CSS in Custom Author Layouts

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

Our recommendation is that you put the actual CSS rules into your theme's CSS files. This guide shows how to add CSS classes to your layouts that can then be used by your theme.

CSS for the wrapper

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:

• widget
• the_content
• shortcode
• action (this is the code written directly into your theme's files)

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

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

CSS for individual authors

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>

CSS for different output methods

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 way of displaying authors:

• widget
• the_content
• shortcode
• 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.

CSS for different layouts

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

CSS for the author archive page

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.