How to Show PublishPress Author Fields in a Vertical Layout

One of our PublishPress Authors users wanted to show their Author Fields in a vertical layout, but they were having difficulty in achieving that kind of layout.

In this article, we will show you how to display the Author Fields in a stacked / vertical layout. This image below shows the layout we are aiming to create:

Author Fields stacked vertically

Previously, we talked about multiple ways to show author fields. That guide is worth reading before diving into this tutorial.

There are two ways to display the stacked author fields: either as a hyperlink or as plain text (non-hyperlink). We will show you how to achieve both.

If you want the author fields in a stacked layout as plain text, here is how to do it:

  • Go to Authors > Author Boxes menu.
  • Edit your Author Box.
  • Go to Author Fields, and select the author field. In this example, I selected the ‘Website' author field.
  • Change the HTML tag to ‘div'.
PublishPress Authors choosing the DIV format.
  • Repeat the step for each of the author fields. I have 4 author fields (Website, Facebook, Twitter, LinkedIn) so I'll repeat it 4 times.
  • After doing this for all of your author fields, your author fields' layout should appear differently. In the original view shown below, the fields were horizontal:
PublishPress Authors author field shown horizontally
  • After your changes, the author fields should now be vertical:
PublishPress Authors author field stacked vertically

The above guide is for plain text. To make the fields into hyperlinks, follow these steps:

  • Go to Author > Author Fields
  • Make sure your author fields have the ‘Link' field type.
Using the Link format for Authors fields
  • Go to the Author Boxes menu and edit your author box.
link html tag website
  • Change all your author fields into ‘link' HTML tags.
  • Next, go to Custom CSS, and add this code:
a.ppma-author-field-meta {display: block !important};
custom css author fields stacked
  • That's it. Now you should have your author fields in a stacked layout with links for the text.

More About Authors Pro

Please note that custom Author Fields is a feature for PublishPress Authors Pro. When using the free version, you will not be able to add new custom author fields.

  • Riza Maulana Ardiyanto

    Riza Maulana Ardiyanto, based in Kudus, Indonesia, is a dedicated support specialist at PublishPress. Outside of work, he’s an enthusiastic mobile gamer, always eager to explore new gaming experiences and challenges.

    View all posts

Leave a Reply

Your email address will not be published. Required fields are marked *