Using HTML code, create a table of contents for blogs posted on Green House website.
Objective:
To create a table of contents in HTML for a WordPress article to enhance navigation and professionalism.
How-to-Videos:
Video 1/3
Video 2/3Video 3/3
Key Steps:
Step 1. Insert Unique Identifiers into Headers / Subheaders
- Open the WordPress article in edit view.
- Click on the header / subheader to open the header box.
- Click on the three dots and select "Edit as HTML”.
- Insert id="1TOC" (or whatever number header / subheader you are on) after the quotation mark and before the closing bracket. It should look like this:
- Click out of the html box to save the changes.
- Repeat this process for all headers and subheaders in the article, assigning unique IDs in ascending order (e.g., 1TOC, 2TOC, 3TOC, etc.).
Step 2. Use ChatGPT to Create HTML Code
- Outline the article’s headers and subheaders using HTML code from WordPress.
- Go to ChatGPT.
- Paste this prompt:
- I am writing an article in WordPress and am creating a table of contents at the top of the article in HTML. I would like to use this code to create the table of contents, however, I would like to give you my outline so that you can insert the correct headers and subheaders into the code. *Insert the HTML code here, included below*
- ChatGPT will ask for the outline of your article. Provide the outline of your blog or article (see Video 2/3 for an example).
Step 3. Create Table of Contents
- Paste the final prompt into ChatGPT:
- Please make one last change for the code. For all of the subheaders, insert an "a." or "b." or "c." (if applicable) before each subheader, to be included in the text of the Table of Contents.
- Copy the resulting code.
- Open the WordPress article in edit view.
- Create a new box, immediately under the title (type “/”)
- Type “HTML” and select the “Custom HTML” option.
- Paste the copied code.
- Preview the article in a new window. Make sure everything works.
Cautionary Notes:
- Ensure to insert the ID codes correctly to avoid errors.
- Avoid leaving just a number (id =“1”) as the unique identifier to prevent confusion.
- Copy and paste HTML code for each header and subheader into a separate document to outline article for ChatGPT (see Video 2/3).
- Ask ChatGPT to visually represent the table of contents before you paste the code into the blog.
- Give some white space between the table of contents and the first line of text by inserting a quote box (“/Quote”) but leaving it blank.
*HTML Template Code (Step 2)*
<style>
.toc {
max-width: 800px; /* Adjust as needed */
margin: 0; /* Remove centering */
padding: 1em;
text-align: left; /* Align text to the left */
border: 2px solid #000; /* Border around the table, color same as text */
border-radius: 8px; /* Optional: rounded corners */
background-color: #f9f9f9; /* Optional: background color for better contrast */
}
.toc p {
margin-bottom: 1em; /* Space below the heading */
font-weight: bold; /* Optional: Make heading bold */
color: #000; /* Text color */
}
.toc ol {
padding: 0;
list-style-type: none; /* Remove default list styling */
margin: 0; /* Remove default margin */
padding-left: 1em; /* Add some left padding to ensure alignment */
}
.toc li {
position: relative;
padding-left: 2em; /* Space for the dropdown arrow and indentation */
margin-bottom: 0.5em; /* Space between items */
color: #000; /* Text color */
}
.toc .arrow {
position: absolute;
left: 0; /* Position the arrow to the left */
top: 50%;
transform: translateY(-50%);
cursor: pointer;
font-size: 12px;
margin-right: 0.5em; /* Space between arrow and text */
color: #000; /* Arrow color */
}
.toc .dropdown-content {
display: none;
padding-left: 1em; /* Indent sub-items */
}
.toc .dropdown-content a {
display: block;
color: #000; /* Text color for sub-items */
}
.toc li.active .dropdown-content {
display: block;
}
.toc .arrow::after {
content: '▶'; /* Right arrow */
}
.toc .arrow.open::after {
content: '▼'; /* Down arrow */
}
</style>
<div class="toc">
<p>Table of Contents</p>
<ol>
<!-- Add your new headers and subheaders here -->
</ol>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const headers = document.querySelectorAll('.toc > ol > li > .arrow');
headers.forEach(header => {
header.addEventListener('click', function () {
const parentLi = header.parentElement;
const isActive = parentLi.classList.contains('active');
// Close all dropdowns
document.querySelectorAll('.toc > ol > li.active').forEach(li => li.classList.remove('active'));
// Open clicked dropdown if it wasn't already open
if (!isActive) {
parentLi.classList.add('active');
}
// Toggle arrow
document.querySelectorAll('.arrow').forEach(arrow => arrow.classList.remove('open'));
if (!isActive) {
header.classList.add('open');
}
});
});
});
</script>