Add a single page alphabet bar

You did it right, almost. The problem now is incorrect HTML, this makes your ABC list not working properly.

This is what in the source right now

<span style="color: #00ff00;">A<a href="https://<div id=&quot;A&quot;></div>">&nbsp;</a>&nbsp;<a href="https://www.aberdeengardening.co.uk/diary/our-plant-list-a-to-z/<a href=&quot;#A&quot;>A</a>">B</a> C</span>

When writing HTML directly into post/page content, always use Text mode (do not use Visual mode). And also as a common practice, use plain text editor to write HTML first and then copy-all to paste into the post/page content.

The code should look something like this

<div class="mylist">
	<ul>
		<li><a href="#A">A</a></li>
		<li><a href="#B">B</a></li>
		<li><a href="#C">C</a></li>
	</ul>
</div>

and put this into Additional CSS section of WP

.mylist ul li {display: inline; padding: 0 5px;}

in the post content, make sure to have those associated id title as this

<div id="A">A</div>

Thanks I will work with this and see how I get on, I will get back in touch. Alistair

Hi Paul, I guess you are used to working with people savvier than myself. Please let me take you step by step how I am going about this.
1 – Initially I am starting with A B C which I have entered in visual mode, obviously if I master it with your help I will be completing the alphabet. It is my understanding that each letter at the top of the page will have to be individually linked with the code you have supplied.
2 – This content code <div class=”mylist”>

• A
• B
• C

</div> This content code which I can add in text – Where on the page do I place it bearing in mind it will be the full alphabet
3 – I have linked the letter B with this <div id=”A”>A</div>
Should the alphabet running horizontally at the top of the page be done in text mode. Already you are thinking now I know why Steve lost his patience. Give me one more chance with a step by step for dummies before giving up. I entered the css code.

Hello Paul, thank you for the information, I am sure it is accurate, I simply do not have the knowledge to implement it. I will mark it as resolved.

@acruickshank I like the content of your site and would like to help accomplish this, but this is a volunteer forum so everyone here helps out the community when they can, so we can’t always expect the reply shortly in time.

To answer your questions:

RE: #1 Yes, keep repleating the linked alphabet list following the code sample of A, B, C there (you just need to add 23 more lines like that and change the letter to D, E, F until X,Y,Z)

RE: #2 That part will be placed at the beginning of each alphabet, so you get one for A following by all the content under A and then you get one for B following by all the content under B and so on. So this part is like a Title or Header for each alphabet. This part is where the browser will scroll to and stop once the linked alplabet is clicked.

Re: #3 All the custom HTML code should be done in Text Mode.

On a sidenote, there is a better way (no coding required) to construct the page to achieve better result for users to navigate the content like your site, if you are interested please keep checking on this thread, I will put it here when I have time.

Thanks very much Paul, I am keen to wait for your other option (there is a better way (no coding required) to construct the page) If I end up getting completely stuck perhaps you could direct me to a technician who would do it for me at a reasonable cost.

Hi Paul, ignore the above message, finally, I have got it. Working on it now, take a look. https://www.aberdeengardening.co.uk/diary/our-plant-list-a-to-z/

Thank you for your patience. Alistair

Hi, The Alphabet is working perfectly. Left with one problem, when adding new pictures or text to the page I no longer have the ability to centralise, I can place left or right but not centre. I must have caused this to happen when I was in text. all other pages and posts dont have this issue.