Creating Table Of Contents

[Ahsaniqbalkmc 0]

I don't know whether this is the right place for the topic but because it is related to the design of the website, so I thought to put it here. I am trying create the table of contents on every page of my website separately. I use exclusively H2 tags for the important headlines so the table of conents only needs to read the h2 tags. First of all, I don't know how to create it as I am not good at scripting languages. This means that I will have to use a script created by someone else. Secondly, I am having trouble to decide what script to use. Should I use PHP or Javascript. I would personally prefer PHP as I don't need the script to be responsive to user actions or anything like this, but I would still like to hear from experts.

 

I just know the basics of both php and javascript. Only enough to help me gues the structure of my wordpress website and to understand where and how I need to edit the code if I am to remove or add something. I cannot create my own php applications or javascripts. What I need from the function would be:

1. First of all, the script should read all the h2 tags of the page and store them into an array.

2. The script should add a local link (I don't know what it is correctly known as, but I mean the "go to top" type of link) near each h2 tag.

3. The script should convert each element of the h2 tags array to a link that points to the specific local target of the page.

 

So where can I find such script and should I use PHP or Javascript.

By the way, If you need some idea about my website's structure, here's the link: MANanatomy

[tritesh 1]

I think javascript is the best language for this until and unless you do not want to create database for that.

 

And Janko Jovanovic has write a very good article to create Table of Contents using jquery at http://forums.xisto.com/no_longer_exists/ Just give a look at it will help you in this regard.

 

But as if you want more readymade solution that is more easier than it then there is Jquery plugin available can be download from http://forums.xisto.com/no_longer_exists/

 

By this plugin not even you can make TOC based on h2 but on other header tags also, those make you comfortable to create hierarchical toc. There is a well explained example provided with this plugin may help you to create your TOC more easily.

 

So Just give a start with this and if you required any help regarding this just ask here to us. And if you feel my reply is helpfull for you dont forget to press like button.

Edited January 9, 2012 by agyat (see edit history)

[Ahsaniqbalkmc 0]

I might be wrong but I think that using PHP will be better than using Jquery becaue in my opinion jquery will be slower to load. I am not an expert and I might be wrong completely but this is what I think. Please correct me if I am wrong.

[tritesh 1]

I might be wrong but I think that using PHP will be better than using Jquery becaue in my opinion jquery will be slower to load. I am not an expert and I might be wrong completely but this is what I think. Please correct me if I am wrong.

PHP is a Server side solution and javascript (Jquery) is client site solution. Now if you want to use php, have to process the page (which in your case seems be a static) first at server and then create an element dynamically while javascript analyse whole page at browser site. So Jquery seems to be slower in comparison to php.

But still if you want to display content by clicking the link for content you need ajax solution that is more easily implemented by using Jquery.
Edited January 11, 2012 by agyat (see edit history)

[tritesh 1]

Ohh.. i am too much fool your site is based on wordpress. And we have easiest solution in as plugins. There are two wordpress plugins that i personlly preferred you to use for your site and dont required any type of more coding untill wants any customization.

 

1. MD Table of Contents Generator:

It is simple plugin that can automatically create a table of contents from your H1 to H6 headings tags by just inserting the [toc] shortcode into your post or page each time whenever you create new one, which is tedious for me.

By default The table of content has a nice design but it is not possible to modify it through the admin area directly. If want to give new style or look to the table yourself you would need have to modify the plugin file itself.

2. Table Of Contents Plus

Like the MD Table of Contents Generator TOC+ is also Simple plugin for wordpress that can generate table of content but it can also able to generate a Site Map. It is fully customizable through Admin Area settings screen of WP. The width of the TOC can be set as a fixed value or as a percentage/relative. We can also set the table to be wrapped around the text on the left or right hand side of the page. It has auto insert option that is not present in MD. Not even that we have 5 dustom table design options and we can also create our own table design by using custom option. Have smooth scrolling option that sent your site visitor to content smoothly not just by jumping to link.

So, at the last if you ask me what to use; i ask for second one. Hope this detail helps you rather if you need any more help to implement just ask here. And finally if you want it create your own from scratch not any readymade plugin, then give some time to prepare code for that.

if you like this post dont forget to press like this. As it is not possible for me to edit my last post have to create this new one hope moderators will not take it as spam.

Edited January 14, 2012 by velma
First at KS, now at Asta... QUOTE WHAT IT NOT YOURS. Warning issued (see edit history)

[Ahsaniqbalkmc 0]

Thank you agyat. I have already used table of content plus and I must say it did work fine. The problem I had with this plugin was that it appeared to be unnecessarily complex. It had stuff that I was never going to use and I believed that it would be a burden on my website's loading speed so I decided to find some alternate solution. I did check out its code but it was so complex, that I couldn't understand it, let apart editing it. There were some javascripts and other stuff that was of no use to me. That is why I looked for other solutions.I am glad you also told about the other plugin: "MD Table of contents generator". I have just checked it out and you know what! it is just awesome. It is exactly the thing I was looking for. It is simple and does not contain unnecessary stuff in it, so I will have no problem in using it. I cheked out its code and did some modifications to it. I must say it was easier to understand than the code of Table of contents plus. I edited the heading of the div and changed it from h1 to h3 for seo purposes. I like only my main title to be H1. The point is that it is just the type of thing I was looking for. I haven't yet tried to play around with it's css but I don't think it would be a problem.One thing that did concern me was to add the "[toc]" tag in every page where I wanted the table of contents to appear. I don't like going through every page of my website making changes to each and everyone of it. Fortunately, I have thought of a solution. Though I haven't tried it yet, and I am not pretty sure whether it is going to work or not but I hope it works. The plan is to modify the loop of the wordpress and add the tag for table of contents to the appropriate position so that it is automatically added to every page. I will try it and then write a post about how it went.One thing I want to ask here is the security aspect of the plugin. When I downloaded the plugin, I saw that it is version 1. This means that there hasn't been any update to the plugin and it is in it's original form. What does this mean? Does it mean that the plugin is not safe or does it mean that the author has designed is so brilliantly that it doesn't need any update. My website has already been hacked twice and someone left phishy links on it. Many weeks have passed but I am still seeing the effects of it in terms of my SEO. My website lost trust and it is not getting to rankings where it used to be. That is why I am a bit protecive about security now.