WP Manifestindependent plugin directory
manifest / content / easy-h2-navigator

Easy H2 Navigator

The H2 Section Navigator plugin automatically generates a dynamic, clickable table of contents based on <h2> headings found on individual posts or pages. Perfect for long articles or guides, the H2 Section Navigator adds a visually appealing, interactive list at the beginning of the content, guiding readers to key sections effortlessly.

by hassan Ali Askari · github.com/hassan7303/easy-h2-navigator · website

★ 9stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/hassan7303/easy-h2-navigator/archive/refs/heads/master.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/hassan7303/easy-h2-navigator ↗

Contributors Forks Stargazers MIT License LinkedIn Telegram Instagram GitHub Email

H2 Table of Contents Plugin

Overview

The H2 Table of Contents plugin automatically generates a table of contents based on the <h2> tags on a page. The plugin enhances readability and allows users to quickly navigate between sections by clicking on the generated list items, which smoothly scroll to each <h2> header.

Plugin Details

  • Plugin Name: H2 Table of Contents
  • Version: 1.0.0
  • Author: hassan Ali Askari
  • Author URI: Telegram
  • Plugin URI: GitHub
  • License: MIT
  • License URI: MIT License
  • Email: hassanali7303@gmail.com
  • Domain Path: hsnali.ir

Installation

  1. Download the plugin or clone the repository from GitHub.
  2. Upload the plugin folder to the /wp-content/plugins/ directory.
  3. Activate the plugin through the Plugins menu in WordPress.

Features

  • Automatic Table of Contents: The plugin scans for <h2> headers on single pages and creates a list of topics at the beginning of the content.
  • Smooth Scroll: Each item in the table of contents scrolls smoothly to the respective <h2> section when clicked.
  • Icon Support: Each list item is enhanced with a left-pointing arrow icon, giving the TOC a visual appeal.
  • Style Inheritance: The table of contents inherits font weight and line height properties from the first <h2> element on the page.

Code Breakdown

Function: h2_header_list_enqueue_scripts

  • Purpose: This function runs on single pages (is_single() check) and generates the table of contents.
  • Steps:
    • Identifies all <h2> tags on the page.
    • Creates a div element to serve as a container for the TOC.
    • Adds list items (<li>) for each <h2> tag, setting up smooth scroll functionality on click.
    • Appends an icon (fa-angle-double-left) to each list item.

Usage

After activation, navigate to any single post on your WordPress site that includes <h2> tags. A table of contents will appear at the top of the page.