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:
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.
Showing Author Fields in a Vertical Layout (No Links)
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'.
- 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:
- After your changes, the author fields should now be vertical:
Showing Author Fields in a Vertical Layout (With Links)
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.
- Go to the Author Boxes menu and edit your author box.
- 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};
- 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.