WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Best Practice for Adding Jump Anchors (9 posts)

  1. Patrick Rauland
    Member
    Posted 3 years ago #

    Hello There,

    I am looking for some best practices when it comes to clients (almost always people with zero technical skill) wanting to have jump anchors scroll to the appropriate content on the page. What is the best way of doing this?

    In this case the client wants their page to look like this:
    -title
    -jump links
    -content with anchor tags

    I was figuring I could have then enter the titles of the jump links as a custom field, and then use a bit of Javascript to determine which link they clicked on and then go to the appropriate header tag. So a user would click on the second link, Javascript would figure that out and then scroll down to the second h3 tag in the content area.

    Are there better ways of doing this?

  2. vtxyzzy
    Member
    Posted 3 years ago #

    Don't know if it will actually work, but you might look into using 'the_content' filter to scan the content, look for the h3 tags, insert anchors, and build a nav menu.

  3. Patrick Rauland
    Member
    Posted 3 years ago #

    @vtzyzzy - wow that is a great idea to put the anchors in, but how do I connect the jump links (entered as a custom field right now so they are just text) to the anchors?

  4. Curtiss Grymala
    Member
    Posted 3 years ago #

    I'm doing something similar on a new site I'm building. I've installed the WP Super Edit plugin to allow me to expand the Visual Editor. I then enabled the XHTML Attributes toolbar button, so editors can add an ID to items within the page.

    Next, I've included the Simple HTML Dom parser (an external PHP library) in my theme folder, and am using that to parse the content of the post. In my case, I look for any h2 elements that have an ID attribute, then build an anchor link to each of those.

    Of course, if you were certain that you wanted all h2 (or h3 or whatever you plan on linking to) elements to be anchor links, you could skip the part about adding and using WP Super Edit.

    This is probably not the most efficient way to do this (I honestly don't know yet what kind of overhead the Simple HTML Dom parser is going to add), but it's effective.

    If you try this type of solution, let me know if you notice any kind of performance issues with it. I'm curious to see how well it works in other situations (so far, it seems to be working pretty well in the one instance I've used it).

  5. vtxyzzy
    Member
    Posted 3 years ago #

    You will need to retrieve the Custom Field and parse it. Then assign the elements to successive links.

  6. Patrick Rauland
    Member
    Posted 3 years ago #

    thanks vtxyzzy,

    I came up with a (non semantic) solution and I think without Javascript this is as good as it is going to get.

    I will use your method to filter the content and add anchors just before the appropriate headings. Then when looping through the jump links I will just point them to foo.php#link1, #link2, #link3, etc.

    It would be nice if I could some how have semantic anchor tags like foo.php#mission-statement, but I can't think of a way to do that without using JS.

  7. vtxyzzy
    Member
    Posted 3 years ago #

    Did you decide not to use the Custom Field? You should be able to get its contents and assign to links.

  8. Patrick Rauland
    Member
    Posted 3 years ago #

    The custom field has a name of "link" and the value is the title of the jump link. So I don't have a spot for the url. I could use a plugin to increase the number of fields I can enter in text but that seems like a workaround.

    Also I don't know how I could tell the non-technical user how to get the hash tag and put it in that specific spot, they would never be able to handle it.

  9. vtxyzzy
    Member
    Posted 3 years ago #

    I think you missed the point.

    I was suggestion that you retreive the CF's to get the labels/titles of the links, then use the filter to place the titles in the post content.

    The user fills in the labels in the CF. The filter gets those labels, looks for h3 tags, and puts in the anchors. Once all the anchors have been placed, a menu can be built at the front of the content.

    The user just has to remember to use h3 tags and fill in the labels.

Topic Closed

This topic has been closed to new replies.

About this Topic