How to place outline links at top of page

bydmullis1

290 followers

11 years ago

I guess you can call me Captain Obvious, but since I came to this site with little knowledge of website building, I thought I would post the simple things I learn as I go along. Because my way may not be the best way, I invite anyone with a better suggestion to help out here.

Today, I learned how to put outline links at the top of the post in wordpress code. I had a page broken into several segments. I clicked on the text link in my wordpress page editor for a selected page and it revealed the text with existing coding. Before each title, I placed my cursor. Then I looked in the bar above and saw a link called "code". I found that if I click it once it placed code brackets (the brackets are the greater than and less than arrows if you remember anything about math and I will use [ and ] here because I don't know how to find the correct symbol to type here) and if I click it again it placed close code brackets. The word code is listed within each bracket which you will need to delete.

You are using these particular code brackets to name the anchor point where the link will take the viewer from the reference link that will be set at the top of the page, which I will explain in a minute. Within the first set of brackets, you will type the following: [a name=" "]. You will name your anchor whatever you wish as long as it matches your reference link at the top of the page and you will place this name within the quotation marks. For example, [a name="types"].

Within the second set of brackets you will type the letter a after the / that already exists. Therefore, within the brackets will look like[ /a]. This will close the anchor code. Then update your page.

Then return to the top of the page and click the code button twice to set the open and close brackets. Delete the word code within each bracket. Then within the first bracket type the following: [a href="# "] with the anchor name between the # and the closed quotes. For my example, [a href="#types"]. Then type a after the / in the closing brackets as follows: [ /a].

Next scroll down to the title you are linking to and copy the text of the title (do not copy any coding already around the title). Scroll back up the the reference link you are working on and paste the text between the opening bracket and the closing bracket so that it will look like this: [a href="#types"]The Best Types of Purifiers[/a]. Then hit update.

You have to repeat this process for each link that you want on the page. Also, if you have a fixed navigation bar at the top of each page, it can hide the first couple of lines of the point where you are linking to. This happened on my site and I was able to turn off the fixed navigation bar at the top which was unnecessary to have since the main menu bar already existed on the page and caused no problems. I did seek advice from the theme maker and was given a positive and negative positioning code, but that did not work. I also played around with where I placed the anchors to get a workable link without much text above the title, but that was not a good solution as the effect varied depending upon whether you were using chrome, IE or Firefox. I found it best just to turn off the fixed menu that showed at the top of each page.

I hope this helps someone and let me know your comments.