onlinewebgrow

<p>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.</p>
<p>Key Features:<br />
* Create anchor links as text or buttons<br />
* Fully customize button colors (background, text, and border)<br />
* Choose from different button styles (Primary, Secondary, Outline)<br />
* Select button sizes (Small, Normal, Large)<br />
* Multi-language support (English and Spanish available)<br />
* Easy to use interface integrated with the block editor<br />
* No coding knowledge required</p>
<p>Perfect for:<br />
* Long-form content navigation<br />
* FAQ sections<br />
* Table of contents<br />
* Landing pages<br />
* Product documentation<br />
* Course materials</p>
<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>
<p>This plugin is developed using modern JavaScript and build tools. The source code is available in the <code>/src</code> directory.</p>
<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:<br />
   <code>npm install</code></li>
<li>For development with auto-rebuild:<br />
   <code>npm run start</code></li>
<li>For production build:<br />
   <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>
<p>The plugin uses the following development tools:<br />
* @wordpress/scripts: Provides build tools and configurations for WordPress block development<br />
* Package configuration in package.json:<br />
      <code>json<br />
  {<br />
    "scripts": {<br />
      "build": "wp-scripts build",<br />
      "start": "wp-scripts start",<br />
      "format": "wp-scripts format",<br />
      "lint:js": "wp-scripts lint-js"<br />
    },<br />
    "devDependencies": {<br />
      "@wordpress/scripts": "^26.0.0"<br />
    }<br />
  }</code></p>


Custom Anchor Block

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

xnau webdesign

<p><strong>Note: This plugin is not currently compatible with the Block Editor.</strong></p>
<p>This plugin adds a unique ID attribute to healings in your page and post content, and then makes those anchors available in the linking pop-up. This makes it very easy to add “jump” links to headings within the content.</p>
<h4>Using the Plugin</h4>
<p>This plugin doesn’t use any settings or require any setup, just activate it and it’s features are available.</p>
<p>The plugin works by adding a unique “id” to the headings in your content. When you open your content for editing, the plugin adds unique ids to all the h2 and h3 headings. After saving the content, those headings become available as “anchors” which can be linked to.</p>
<p>To create an anchor link, add the desired link text, select it and click the “add link” icon. If you begin typing the heading you want the link to jump to, the anchor link for that heading will appear in the search results. Choose that anchor to place your link.</p>
<p>If you want a link from another page to jump to a heading, you can add the anchor link (begins with a “#”) to the regular page link and when that link is clicked on the user will be taken to that heading on the new page.</p>
<p>For example, let’s say you have a page at <code>https://xnau.com/content-anchor-links/</code> that explains how to make a link list, and on that page is a tutorial with the heading “A Tutorial” If you look at the HTML for that page, you’ll see that the heading has an “id”, like this: <code><h2 id="a-tutorial">A Tutorial</h2></code> You can create a link that goes directly to that heading with a URL like this: <code>https://xnau.com/content-anchor-links/#a-tutorial</code></p>


Content Anchor Links

Easily add content anchors to your pages and posts

Custom Anchor Block vs Content Anchor Links