onlinewebgrow

Custom Anchor Block enhances your WordPress editor by adding a versatile anchor link block. Create smooth-scrolling anchor links that can be styled as either text or buttons with fully customizable colors and styles.
Key Features: 
* Create anchor links as text or buttons 
* Fully customize button colors (background, text, and border) 
* Choose from different button styles (Primary, Secondary, Outline) 
* Select button sizes (Small, Normal, Large) 
* Multi-language support (English and Spanish available) 
* Easy to use interface integrated with the block editor 
* No coding knowledge required
Perfect for: 
* Long-form content navigation 
* FAQ sections 
* Table of contents 
* Landing pages 
* Product documentation 
* Course materials
<h3>Usage</h3>
<ol>
<li>Add a heading or paragraph where you want users to scroll to</li>
<li>Set an HTML anchor ID in the block’s Advanced settings (e.g., “section1”)</li>
<li>Add the Custom Anchor Block where you want the link to appear</li>
<li>Enter the same anchor ID</li>
<li>Choose between text or button style</li>
<li>Customize colors and appearance as needed</li>
</ol>
<h3>Development</h3>
This plugin is developed using modern JavaScript and build tools. The source code is available in the <code>/src</code> directory.
<h4>Build Tools</h4>
<ul>
<li>Node.js and npm are required for development</li>
<li>The plugin uses @wordpress/scripts for building</li>
</ul>
<h4>Development Setup</h4>
<ol>
<li>Clone the repository</li>
<li>Install dependencies: 
 <code>npm install</code></li>
<li>For development with auto-rebuild: 
 <code>npm run start</code></li>
<li>For production build: 
 <code>npm run build</code></li>
</ol>
<h4>Source Files</h4>
<ul>
<li><code>/src/index.js</code> – Main JavaScript source code for the block editor containing React components and block registration</li>
<li><code>/src/style.css</code> – Original CSS styles for both editor and frontend display</li>
</ul>
<h4>Build Output</h4>
<ul>
<li><code>/build/index.js</code> – Compiled and minified JavaScript</li>
<li><code>/build/index.asset.php</code> – WordPress dependencies and version information</li>
<li><code>/build/style-index.css</code> – Compiled and optimized CSS</li>
</ul>
<h4>Development Dependencies</h4>
The plugin uses the following development tools: 
* @wordpress/scripts: Provides build tools and configurations for WordPress block development 
* Package configuration in package.json: 
 <code>json 
 { 
 "scripts": { 
 "build": "wp-scripts build", 
 "start": "wp-scripts start", 
 "format": "wp-scripts format", 
 "lint:js": "wp-scripts lint-js" 
 }, 
 "devDependencies": { 
 "@wordpress/scripts": "^26.0.0" 
 } 
 }</code>

Custom Anchor Block

Add customizable anchor links as text or buttons with custom colors to create smooth in-page navigation in WordPress.

anchormenu

Anchor Menu is a WordPress plugin designed for showcase websites, blogs, and long-form content pages.
It provides an accessible anchor menu that highlights the current section and improves navigation on both desktop and mobile devices.
Current limitation: Anchor Menu is not designed for WooCommerce. Dynamic product pages are not supported.
<h4>Video Tutorials & Overview</h4>
Anchor Menu comes with video resources to help you get started quickly.
<ul>
<li>Plugin overview and features presentation</li>
<li>Step-by-step tutorials (English & French)</li>
</ul>
You can find all videos on the official YouTube channel: 
https://www.youtube.com/channel/UClZTid0uXs6FxgFp5BaEryQ
<h4>Key Benefits</h4>
<ul>
<li>
Automatic and intelligent: generates an anchor menu from defined sections.
</li>
<li>
Fully responsive:
<ul>
<li>Floating vertical menu on desktop (draggable or collapsible to show only its toggle button).</li>
<li>Collapsible horizontal bar at the bottom of the screen on mobile.</li>
</ul>
</li>
<li>
Display control: enable or hide the desktop menu and the mobile bar separately from the admin settings.
</li>
<li>
Visual customization: clean and readable by default, with an admin interface to customize colors, styles, and sizes.
</li>
<li>
Enhanced accessibility: keyboard navigation, screen reader support, optimized contrast, and built-in ARIA attributes.
</li>
<li>
Per-page customization: each page can have its own anchor menu tailored to its content.
</li>
<li>
Clarifies page structure: helps modern search engines and intelligent analysis tools better interpret your content through coherent section-based navigation.
</li>
<li>
SEO friendly: improves structure, internal linking, and readability for search engines.
</li>
<li>
Intuitive interface: fully managed from the WordPress admin, no coding required.
</li>
<li>
Non-intrusive: the mobile menu stays discreet and never blocks the main content.
</li>
</ul>

Anchor Menu

An accessible anchor menu that highlights the active section and improves navigation on desktop and mobile devices.

Custom Anchor Block vs Anchor Menu