Over the summer I helped out with setting up information blogs about Digital Education for the staff and students in GeoSciences.

One pattern that we needed to use several times was an index box linked to headings in sections with ‘back to top’ links, so I created a basic template that can be pasted into WordPress.

Anyone is welcome to adapt and use this: either copy and paste the top section into the Visual editor, or copy and paste the HTML section into the Text editor.

If your theme allows you to use Custom CSS (some but not all of ours do), you can use the id and class names for visually styling the elements.

Note: I have linked to line breaks above the headings rather than the headings themselves due to the variation in how the different themes we were using treat anchor links.

Here is the sample Info Box / Index links structure:

Main picture.
Introduction paragraph text.

And here is the HTML template for that:

<p>Main picture.</p>
<p>Introduction paragraph text.</p>
<!--more-->
<br id="sectionlinks" />
<div id="sectionlinks-box" style="border: 1px solid black;border-radius: 5px;background: #fcfcfc;padding: 0 1.5em 1.5em 1.5em">
<h3>Quick Links</h3>
<ul>
<li><a href="#heading-1">Heading 1</a></li>
<li><a href="#heading-2">Heading 2</a></li>
<li><a href="#heading-3">Heading 3:</a>
<ul>
<li><a href="#subheading-3-1">Subheading 3.1</a></li>
<li><a href="#subheading-3-2">Subheading 3.2</a></li>
</ul>
</li>
<li><a href="#heading-4">Heading 4</a></li>
<li><a href="#useful-links">Useful Links</a></li>
</ul>
</div>
<div id="info-sections" style="clear: both">
<br id="heading-1" />
<h3>Heading 1</h3>
text and stuff

<a href="#sectionlinks">Back to the Top</a>
<br id="heading-2" />
<h3>Heading 2</h3>
text and stuff

<a href="#sectionlinks">Back to the Top</a>
<br id="heading-3" />
<h3>Heading 3</h3>
text and stuff
<br id="subheading-3-1" />
<h4>Subheading 3.1</h4>
text and stuff

<a href="#sectionlinks">Back to the Top</a>
<br id="subheading-3-2" />
<h4>Subheading 3.2</h4>
text and stuff

<a href="#sectionlinks">Back to the Top</a>
<br id="heading-4" />
<h3>Heading 4</h3>
text and stuff

<a href="#sectionlinks">Back to the Top</a>
<br id="useful-links" />
<h3>Useful Links</h3>
<ul>
<li><a href="http://www.google.co.uk/">Link 1</a></li>
<li><a href="http://www.google.co.uk/">Link 2</a></li>
</ul>
<a href="#sectionlinks">Back to the Top</a>
</div>

Index links and Info Box HTML template code / Annabel Treshansky's Blog by blogadmin is licensed under a Creative Commons Attribution CC BY 3.0

Share