[Resolved] Table of Content on the Side

[Atif]

Greetings,

I want to know if there is a way to add a sticky/floating TOC on the left side of the layout.

I want to do this only for the desktop view.

Any help would be appreciated.

Best Regards
Atif

[David]

Hi there,

for the Table of Contents you would need a plugin like Easy ToC:

https://en-gb.wordpress.org/plugins/easy-table-of-contents/

Which provides a widget for your sidebar as one of its options.
Once you have that in place we can look at the CSS you require to make it sticky.

[Atif]

H David,

Thank you for your response. I already have the Easy TOC installed.

I have added that in the right side bar. My problems are:
1. I want to have this TOC on the left hand side of the article, sticky
2. I only want this TOC widget to show in blog posts, not on blog archives pages and home page.

Currently, the TOC is showing on homepage and blog archives and its registering random headings on these pages.

Any help would be appreciated.

Best Regards

[Ying]

So you don’t want it to show in the actual right sidebar, but left side of the screen?

If so, take a look at this video, is this similar to what you are trying to achieve but with your own content instead of social buttons?
https://youtu.be/q9YyXSBpRR0

Let me know 🙂

[Atif]

Hi Ying,

Yes that is precisely what I am looking for.

[Ying]

So did you try to follow the video and try it with your content?

Let me know how it works 🙂

[Atif]

The video does not indicate how to add the table of contents. It just shows how to add social share buttons. Do you have a similar resource for adding TOC?

[Ying]

Can you try to add the widget to right sidebar? So we can help with some CSS 🙂

[Atif]

If I change the layout to sidebar / content / sidebar, the content area becomes very small and looks ugly. Adding the screenshot below.

[David]

Are you wanting to keep the Right Sidebar and the ToC on the left ?
As its only going to work on large screens

[Atif]

Hi David,

Yes, I would like to keep the right sidebar.

The left sidebar TOC should only work on larger screens.

For the rest TOC on the Right side bar is okay.

[Ying]

I said to add it to the right sidebar, not left sidebar.

And please change it back to content/sidebar.

Can you do that?

[Atif]

Hi its already to the right sidebar. You can find it added to all the posts.

[David]

I noticed you have the ToC in the Content as well.
What we could try is to move that element outside the content when there is room for it and position it where a left sidebar ‘would’ be.

If that sounds like an option then can you add this PHP Snippet to your site:

add_action('ez_toc_before', function() {
  echo '<div class="custom-toc-wrapper">';
});

add_action('ez_toc_after', function() {
  echo '</div>';
});

Once its in place – let me know and ill look at the CSS required to move it the side.

[Atif]

Sure we can try that, but pardon my ignorance, where do I add the PHP snippet? 🙂

[Author]

Posts