Grow your CSS skills. Land your dream job.

[WordPress] Anchored Links in Sidebar

  • med
    # December 30, 2008 at 4:29 pm

    Hi,

    sorry this isn’t css related, but if anyone can help that would be great.

    The content on some of my pages will be split into sections such as;

    Abstract
    Introduction
    Method
    …and so on.

    I would like the sidebar to contain links to these sections, anchored links to be precise. I can visualise how it’s going to work, but I’ve never really delved into php, only edited it here and there.

    So does anyone know how I can achieve this? This needs to be something generic of course so that it would work on any page.

    Actually while typing I’ve realised something, not all the content may have those precise headings, some may not have an introduction for example, so is there any way for the sidebar to pull these section headings from the page dynamically when it loads and generate a list of links based on the headings present?

    # December 30, 2008 at 5:00 pm

    I just leaned over and asked one of the programmers on staff. Like you, I don’t do much server-side developing, so his answer was convoluted and complicated.

    I’m not sure it’s an easy of a solution as it may seem logically to be.

    Rob
    # December 30, 2008 at 5:56 pm

    Do you mean you are going to include in a php file that contains all your sidebar info, so that when you need to make an edit you only have to do it once instead of for each page?

    # December 30, 2008 at 6:49 pm

    I think he’s talking about dynamically generating a sidebar based on the html content of a page.

    Rob
    # December 30, 2008 at 6:59 pm
    "TheDoc" wrote:
    I think he’s talking about dynamically generating a sidebar based on the html content of a page.

    If hes going THAT far, im out! :D

    …something I would like to learn though… after I have learnt how to design LOL

    # December 31, 2008 at 7:03 am
    "med" wrote:
    Hi,

    sorry this isn’t css related, but if anyone can help that would be great.

    The content on some of my pages will be split into sections such as;

    Abstract
    Introduction
    Method
    …and so on.

    I would like the sidebar to contain links to these sections, anchored links to be precise. I can visualise how it’s going to work, but I’ve never really delved into php, only edited it here and there.

    So does anyone know how I can achieve this? This needs to be something generic of course so that it would work on any page.

    Actually while typing I’ve realised something, not all the content may have those precise headings, some may not have an introduction for example, so is there any way for the sidebar to pull these section headings from the page dynamically when it loads and generate a list of links based on the headings present?

    do you mean categories?

    can you give us a link to a page, to see what you mean?
    can you show us your page for us to see to get what your talking about?

    you can put in your sidebar the top 5 or 10 posts with the permalink, you can do this with categories as well.

    also if these pages are static pages, why not just add in the link to that static page

    ik

    med
    # December 31, 2008 at 7:59 am

    Hey,

    thanks for all the replys!

    Quote:
    I just leaned over and asked one of the programmers on staff. Like you, I don’t do much server-side developing, so his answer was convoluted and complicated.

    Lol, doesn’t sound promising!

    Quote:
    I think he’s talking about dynamically generating a sidebar based on the html content of a page.

    Yep, that’s what I’m after.

    Quote:
    can you show us your page for us to see to get what your talking about?

    Here’s a diagramatic representation of what I mean (attachments aren’t uploading on the forum for some reason):

    [img]http://img213.imageshack.us/img213/9450/sidebar1sk3.png[/img]

    So essentially I want the sidebar to be able to pull the content headings from within the content and display them as a list, but also link to those headings. They’re normally called anchored links and are fairly straightforward, but integrating this into the sidebar is a little tricky.

    If all the content was uniform it wouldn’t be a problem. However, the content that the site is going to display will not follow one template, so the headings are bound to be different.

    I hope that explains it!

    # December 31, 2008 at 9:05 am

    they are the permalinks of the posts,

    this is essentially in your wordpress; is your wordpress using a dynamic widget sidebar?

    I need to know so I can point you in the right direction.

    if you have a widget and it has recent posts, add this to your sidebar.
    [img]http://www.honeycomb-web.co.uk/images/pfsblog.jpg[/img]

    med
    # December 31, 2008 at 9:58 am

    Hi,

    I have a dynamic widget sidebar on the right hand side, and as you mentioned it’s displaying recent content. The post is showing up as you indicated in the screenshot.

    # December 31, 2008 at 10:10 am
    "med" wrote:
    Hi,

    I have a dynamic widget sidebar on the right hand side, and as you mentioned it’s displaying recent content. The post is showing up as you indicated in the screenshot.

    so is that what you were after then?

    med
    # December 31, 2008 at 10:19 am

    Instead of having recent content showing – these are individual posts, I’d like the sidebar to link to different paragraphs in one post only.

    If for instance I write a post about 3000 words long and it’s divided by subheadings like introduction, background, conclusion etc. I want the sidebar to be able to pick those subheadings from within that one post and display them as links. With so many words it becomes more convenient to be able to directly skip/jump to a specific part of the post rather than scrolling up and down.

    Is there any way I could define or class these headings so that they can be recognised and listed in the sidebar?

    # December 31, 2008 at 10:35 am

    Sorry dude, that one is a bit beyond me, did you try at wordpress?

    why not look at the php for the index.php and see if that gives you any clues as to make the php see the title as a link

    med
    # December 31, 2008 at 10:44 am

    No problem, I tried posting there but nobody has replied yet. I’ll probably bump the topic. I’m thinking that assigning a class to the text might make it unique enough to pull out. I’ll see what I can do.

    But if anyone has any suggestions please let me know.

    # December 31, 2008 at 11:36 am

    wordpress as I can remember as a forum or place of help is not the best, I find them slightly elistest.

    but google is your friend, you just need to search it properly.

    what if you add a unique id to the title, and link to that, but you might have to do the manual adding of links to the sidebar.

    your title having: a href="#unique1"
    and your sidebar having: a href="the full post link#unique1"
    example: http://homepage.ntlworld.com/j.kelly627 … ise.html#6

    med
    # December 31, 2008 at 12:38 pm

    Cool thanks for the advice. I can totally see how that will work, if everything else fails that’s what I’ll have to do. I’ve been looking at the documentation and wordpress call this ‘page jump‘.

    I’m going to try and delve into php over the next few weeks and see if I can get it to work. Here’s what I see in my head:

    Step 1. Locate/Find instance of <a name= within the html code. e.g. <a name=”unique-identifier”>Introduction</a>

    Step 2. Copy text within "" e.g. <a name=”unique-identifier”> and add to: <a href=”#add UI”>add UI</a> (Because the UI also = the subheading so can use it for both).

    Step 3. Repeat for all instances of <a name= within the html code.

    I just hope that particular instance isn’t used elsewhere in my pages or else I’m going to have a funny looking contents list.

    So anyway, that’s what I’m going to work around. I’m going to have to start from scratch because I don’t even know the php function to locate a word! Let alone add to the list…

    I’ll use google and the php site of course, but if anyone uses php and knows the functions that I should use please post here! Unfortunately this is only the beginning, I need to do add a few extra features to the sidebar, again specific to each post.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".