Creating an Author Page

beyondthelastman · Member · Mar 19, 2018 at 4:02 pm
Copy link

Add topic to favorites
Hello,

On my site I have articles contributed by around a dozen people apart from myself and I wanted to create an Authors or Our Writers page so that visitors can access all the contributions from a particular writer from my main menu.

In terms of the information I want to include on this page, well, nothing especially complex: the writer’s name and a flag icon to represent his nationality basically.

It would be easy to insert these individually but I reckon that without decent formatting they will look untidy, so I suppose I am looking for help with some suggestions for a simple table format that would allow the page to look formatted, or, even better, any good examples of sites that have addressed this sort of thing in an elegant and creative way beyond my thinking here.

Thanks,

Craig

The blog I need help with is: (visible only to logged in users)
gemmacevans · Member · Mar 19, 2018 at 5:24 pm
Copy link
Hi Craig,

I wanted to create an Authors or Our Writers page so that visitors can access all the contributions from a particular writer from my main menu.

I’d be happy to look this with you. Is the menu structure you had in mind?

Top level page: Our Writers (an overview of all writers)
> Sub page: Craig (links to a page listing all posts you have published)
> Sub page: Name
> Sub page: Name

Just let me know if that is correct and I’ll look at a way to format this information.

Thanks!
beyondthelastman · Member · Mar 19, 2018 at 8:45 pm
Copy link
Hi Gemma,

Yes, that’s pretty much as I imagined it really.

Thanks,

Craig
gemmacevans · Member · Mar 20, 2018 at 11:04 am
Copy link
Hi Craig,

Great! You mentioned using a table on the “Our Writers” page so I’ve started one that can be pasted into the HTML tab on the editor:
```
<table>
<tbody>
<tr>
<td>Flag image 1</td>
<td>Name 1</td>
<td>All posts link</td>
</tr>
<tr>
<td>Flag image 2</td>
<td>Name 2</td>
<td>All posts link</td>
</tr>
</tbody>
</table>
```
This URL can be used to create a link to all posts by a particular author:
```
https://beyondthelastman.com/author/USERNAME/
```
So your URL would be:
```
https://beyondthelastman.com/author/beyondthelastman/
```
This page can be added to the menu in My Sites > Customise > Menus > Craig.

Sub pages for individual names can also be added from the menu editor:
1. Click “Add Items”
2. Select “Custom Links”
3. Enter a URL: https://beyondthelastman.com/author/USERNAME/
4. Add a name to the “Link Text” field
5. Then drag that page underneath “Our Writers” in the menu editor
6. Click “Publish”
Anyone clicking on these links will be taken to a page listing all posts by that particular author.

Just let me know if you need any help adding flags or want to change the layout of the table.
beyondthelastman · Member · Mar 20, 2018 at 7:41 pm
Copy link
Thanks Gemma. I’ll have a fiddle with that and get back to you in a few days about how it goes.
gemmacevans · Member · Mar 21, 2018 at 8:37 am
Copy link
Sure, hopefully this will do what you need but I’ll be here if you need any further help.
beyondthelastman · Member · Mar 21, 2018 at 7:24 pm
Copy link
Hi again Gemma,

So I took out the third column as I am going to simply hyperlink the names to the page listing their posts (have still to insert these). Extending down the table to accommodate the 13 names caused a few problems however: my tables are all slightly different sizes and when I try and change the parameters in the HTML nothing seems to happen.

Here’s the page how it looks just now and I can post the HTMl code if that’s helpful?

Thanks,

Craig

Our Writers
gemmacevans · Member · Mar 22, 2018 at 9:54 am
Copy link
Hi Craig,

I’ve checked the code and looks like you’ve added several tables, rather than multiple table rows. Different widths are also specific for a number of the tables which is causing some to look wider than others. For example:
```
<table style="height: 186px;" width="288">

<table style="height: 174px;" width="293">
```
You could try creating a table using this online tool:

http://divtable.com/generator/

Then add the flags once the table code has been pasted in the HTML editor on your site.

Width and height values aren’t needed in the HTML — the tool I linked to above provides the option to add space around each table cell. Not having a set width and height will also mean the table displays better across a range of devices.
beyondthelastman · Member · Mar 22, 2018 at 11:10 am
Copy link
Thanks Gemma. So I’ve used this tool to try and get some commonality and I’m getting somewhat uneven results with the positioning of the flags within boxes and the name text.

Our Writers
gemmacevans · Member · Mar 22, 2018 at 11:36 am
Copy link
Hi Craig,

There were a couple of additional characters in your table which were pushing some of the text and images out of line. I’ve now removed them for you and written some CSS to vertically align names in the centre of each table cell — this saves manually adding alignment classes to every row:
```
#writers tr {
	vertical-align: center;
}
```
Paste the CSS into My Sites > Customise > CSS and publish the change. Does that do what you were looking for?
beyondthelastman · Member · Mar 22, 2018 at 8:12 pm
Copy link
Ah lovely Gemma, that works just fine and the table is nice and symmetrical now. Thanks for your time and patience.

Regards,

Craig
gemmacevans · Member · Mar 22, 2018 at 8:31 pm
Copy link
Hi Craig,

My pleasure, I’m glad to hear that did the trick :) If you need any further help, you are welcome to reply here or use the email and Live Chat support included in your plan:

https://wordpress.com/help/contact/

No items found.