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
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/hassan7303/easy-h2-navigator/archive/refs/heads/master.zip

Readme

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.

Read the full README on GitHub →