Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: Table of contents widget #5171

Open
MiMoHo opened this issue Jul 23, 2018 · 18 comments
Open

Feature request: Table of contents widget #5171

MiMoHo opened this issue Jul 23, 2018 · 18 comments

Comments

@MiMoHo
Copy link

@MiMoHo MiMoHo commented Jul 23, 2018

Prerequisites

  • I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
  • The feature is still missing in the latest stable version of Elementor ( Elementor Pro. )

What problem is your feature request going to solve? Please describe.
There are a few plugins for WordPress to enable Table of Contents for posts. However, they either lack features, cannot be unsynced from the sidebar or are incompatible with Elementor. Why not create an own Table of Contents widget for Elementor (Pro)? I'm sure this is a feature most bloggers are waiting for to bring an overview and better structure into their long posts.

Describe the solution you'd like
A TOC widget that can be used around the entire blog where I can choose hierarchy for bigger vs. smaller headlines, which headline size to include (i.e. only H1, H3), with or without numeration and the typical options for styling and sizing.

Describe alternatives you've considered
Currently using the third party plugin "Easy Table of Contents" which can only be used in the post or post + sidebar but not just in the sidebar. I can also just make global settings including the TOC when a certain number of headlines is reached. However, I'd like to decide for every single post if, how and where to use Table of Contents.

@bainternet bainternet mentioned this issue Jul 26, 2018
2 of 2 tasks complete
@OCpublishing

This comment has been minimized.

Copy link

@OCpublishing OCpublishing commented Aug 7, 2018

Yes please. Table of content. Did not find any plugin working properly.
I have found some interesting image wich could bring some ideas related to this in the easy toc plugin shazahm1/Easy-Table-of-Contents#27

@parfilov

This comment has been minimized.

Copy link

@parfilov parfilov commented Sep 4, 2018

+1

@itolimp

This comment has been minimized.

Copy link

@itolimp itolimp commented Sep 4, 2018

I also need this widget. Please add like in Thrive Architect. Simple and useful widget. Very needed in posts, articles. https://imgur.com/a/3A437q1
The possibility to select headers in TOC, we can select which headers- h1, h2, h3, h4 or h5

@marciotoledo

This comment has been minimized.

Copy link

@marciotoledo marciotoledo commented Oct 24, 2018

Yes, this widget is really necessary without add-ons.
To build simple tables, price comparison, etc.
+1

@alriksson

This comment has been minimized.

Copy link

@alriksson alriksson commented Nov 20, 2018

I agree, something like this plugin below, but with options to always stay visible as a sidebar and be sticky etc.

https://www.youtube.com/watch?v=cEzD71eA21o
https://preview.codecanyon.net/item/element-pack-addon-for-elementor-page-builder-wordpress-plugin/full_screen_preview/21177318

@iMiek

This comment has been minimized.

Copy link

@iMiek iMiek commented Mar 3, 2019

I need this widget to create table of content.
+1

@dbjpanda

This comment has been minimized.

Copy link

@dbjpanda dbjpanda commented Mar 25, 2019

Did anyone here get a similar plugin ?

@Ultimanubis

This comment has been minimized.

Copy link

@Ultimanubis Ultimanubis commented Apr 29, 2019

Has anyone found a solution or a workaround yet?

@iMiek

This comment has been minimized.

Copy link

@iMiek iMiek commented Apr 30, 2019

I use LuckyWP Table of content in the meanwhile. Works fine with a shortcode that you can use in Elementor. https://wordpress.org/plugins/luckywp-table-of-contents/

@alriksson

This comment has been minimized.

Copy link

@alriksson alriksson commented May 2, 2019

@iMiek Does not work for me? I tried to place it in the pop ups field of navigation I built. Should work but only displays shortcode on the frontend.

So please show me how it works for you and what shortcode you use and place it in text editor?

@iMiek

This comment has been minimized.

Copy link

@iMiek iMiek commented May 2, 2019

@alriksson You must place a shortcode throug the widget "shortcode" from Elementor, see https://docs.elementor.com/article/72-shortcode
The shortcode for Lucky Wp is [lwptoc]. You must use headers (or H1 - H6) in your text, the table of content is generated automaticly. In LuckyWP Table of content you can specify default settings.

Schermafbeelding 2019-05-02 om 19 57 11

@alriksson

This comment has been minimized.

Copy link

@alriksson alriksson commented May 2, 2019

@iMiek Thanks but I've tried this without success. Tried to place both in the single template and my pop up neither works for me.

Thanks, using and following semantic HTML5 with H1-H6. Hoped it was shortcode widget since I forgot that widget but still do not want to work for me.

@elasticeye

This comment has been minimized.

Copy link

@elasticeye elasticeye commented May 5, 2019

+1

@alriksson

This comment has been minimized.

Copy link

@alriksson alriksson commented May 13, 2019

Any Crocoblock users? If so +1 over here and we might get it into jet/crocoblock: Crocoblock/suggestions#20

@dbjpanda

This comment has been minimized.

Copy link

@dbjpanda dbjpanda commented Jun 19, 2019

Well after trying a lot of plugins like TOC+ and some short code widgets I didn't find any of those are suitable in my case. They are not made purely for Elementor. They are just ported from normal WP plugin to Elementor widget. So I had to create one myself. I also found the existing plugins are using tocfy jquery plugin which wasn't been updated since 2013. So I used a modern native js plugin for performance increase and created a plugin KB Elementor . However I have made it open source and seeking for your feedback and contribution. The plugin mainly aims to include widgets those are necessary to create simple wiki like knowledge based site.

Here is the working plugin : https://github.com/dbjpanda/kb-elementor and the demo

Demo

Note I am not self promoting my plugin here, You can see my previous comment in this issue, I was really looking for one a long ago, no one did it. So I had to. :)

@alriksson

This comment has been minimized.

Copy link

@alriksson alriksson commented Jun 19, 2019

@dbjpanda Great job! Even including the scroll motion 🌮🌮🌮🌮🌮 for you! Would it be possible to make it align horizontally and then maybe as a carousel mode to fit everything? This since making it align on a line and carousel to fit all headlines. Then we have the possibility to create a sticky bar. Which we then can stick upon scroll, which would be good for mobile users. That don't have to scroll back to the top to see the overview once again.

Either to options to only enable carousel on tabler and/or mobile or for everything or for none etc.

Update:
Found an issue and it does not work for me neither when creating with an elementor heading widget. But would like support for h1-h6 HTML tags and listen to the HTML code and not specific div classes? ut never the less none of the two worked for me.

@dbjpanda

This comment has been minimized.

Copy link

@dbjpanda dbjpanda commented Jun 19, 2019

@alriksson Thanks for your suggestion. For me it is working perfectly. To grab any headings tag outside of post content you have to provide the class name. That option is in additional settings.
Sticky option is working too. You have to enable that in advanced tab section.

Note: I just released the plugin, so it needs more test case as like yours. So please create issue on the plugin page itself ( https://github.com/dbjpanda/kb-elementor ) instead of mentioning here.
As now I am working on the project actively so I will surely try to figure out what is your use case and why you are facing the problem.

@alriksson

This comment has been minimized.

Copy link

@alriksson alriksson commented Jun 19, 2019

@dbjpanda Thanks noted addressed in the github issues for the plugin.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.