[Support request] Custom ToC

[jm1991]

Hey there,

I could use some help creating a custom ToC. I don’t want to use a plugin and unnecessarily add an additional request to fetch.

So, I’ve already have spent some time trying to create one, but it’s still far from ideal (see example website url).

There are a few issues:

1) The hierarchy in terms of font size doesn’t work the way I’d like. You’ll see that the start of sections have the smallest font and each indentation has a larger font. Ideally, I need this to be the other way around or at least be consistent in terms of the font size.

2) I’d like the table border to align with the rest of the text on the page.

3) I’d like to standardise the space in between the anchor links (the anchor links don’t function yet FYI)

Hopefully, you guys can help!

Edit:

Let me make this easier by providing the existing code:

HTML:

<div id="toc_container">
	<p class="toc_title">Contents</p>
	<ul class="table-of-contents-list">
		<li>
			<a class="smooth-scroll" href="#What-are-the-options-to-delete-pages">What are the options to delete pages?</a>
			<li>
				<blockquote>
					<a class="smooth-scroll" href="#Delete-your-page">Delete your page</a>
					<li>
						<blockquote>
							<a class="smooth-scroll" href="#Should-I-use-a-410-status-code-instead-of-a-404?">Should I use a 410 status code instead of a 404?</a>
						</blockquote>
						<li>
							<a class="smooth-scroll" href="#301-redirect-your-page">301 redirect your page</a>
							<li>
								<a class="smooth-scroll" href="#Add-a-noindex-tag">Add a noindex tag</a>
								<li>
									<a class="smooth-scroll" href="#Refresh-your-content">Refresh your content</a>
									<li>
										<a class="smooth-scroll" href="#Offer-alternatives-to-discontinued-products">Offer alternatives to discontinued products</a>
									</blockquote>
									<li>
										<a class="smooth-scroll" href="#Should-I-delete-old-pages?">Should I delete old pages?</a>
										<blockquote>
											<li>
												<a class="smooth-scroll" href="#Check-if-these-pages-are-receiving-traffic">Check if these pages are receiving traffic</a>
												<li>
													<a class="smooth-scroll" href="#Check-if-these-pages-used-to-get-more-traffic">Check if these pages used to get more traffic</a>
													<li>
														<a class="smooth-scroll" href="#Check-if-other-websites-are-linking-to-these-pages">Check if other websites are linking to these pages</a>
													</blockquote>
													<li>
														<a class="smooth-scroll" href="#The-framework-process">The framework process</a>
														<li>
															<a class="smooth-scroll" href="#Summary">Summary</a>
														</ul>
													</div>

CSS:

#toc_container {
background: #f9f9f9 none repeat scroll 0 0;
border: 1px solid #aaa;
display: table;
font-size: 85%;
margin-bottom: 1em;
padding: 20px;
width: auto;
}
.toc_title {
font-weight: 700;
text-align: left;
}
#toc_container li, #toc_container ul, #toc_container ul li{
list-style: outside none none !important;
}

[Leo]

Hi there,

Unfortunately providing custom support like this is out of the scope of this forum as it’s unrelated to the theme.

I would really recommend a plugin like this:
https://en-ca.wordpress.org/plugins/easy-table-of-contents/

If not you can try asking for help on a general WordPress forum like this one:
https://wordpress.stackexchange.com/

Thanks for your understanding.

[Author]

Posts