Any views expressed within media held on this service are those of the contributors, should not be taken as approved or endorsed by the University, and do not necessarily reflect the views of the University in respect of any particular issue.

...in which I don't go up mountains

Screenshot of an index box with HTML links

Index links and Info Box HTML template code

Reading Time: 2 minutes

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.


Heading 1

text and stuff

Back to the Top

Heading 2

text and stuff

Back to the Top

Heading 3

text and stuff

Subheading 3.1

text and stuff

Back to the Top

Subheading 3.2

text and stuff

Back to the Top

Heading 4

text and stuff

Back to the Top

Useful Links

Back to the Top


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>

Share

Previous

Day 1 of Microsoft 365 Global Developers’ Bootcamp: Getting Set Up with Teams, SharePoint and other Microsoft Accounts

Next

An Interesting Content Design Meetup

1 Comment

  1. Are you feeling as me ? Too many codes ! Today I make keyword OMG I feel I talk to bots lol

    Thanks for the index.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Powered by WordPress & Theme by Anders Norén

css.php

Report this page

To report inappropriate content on this page, please use the form below. Upon receiving your report, we will be in touch as per the Take Down Policy of the service.

Please note that personal data collected through this form is used and stored for the purposes of processing this report and communication with you.

If you are unable to report a concern about content via this form please contact the Service Owner.

Please enter an email address you wish to be contacted on. Please describe the unacceptable content in sufficient detail to allow us to locate it, and why you consider it to be unacceptable.
By submitting this report, you accept that it is accurate and that fraudulent or nuisance complaints may result in action by the University.

  Cancel