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.

k00ni

<p>If you are using a sticky, fixed menu in your WordPress theme, this plugin is the best to deal with the menu overlapping your anchored content. Insert exact menu height to jump before your anchor target. With the PRO version you can also adjust the value for a mobile breakpoint by width.</p>
<blockquote>
<p><strong>Mobile First Feature and Premium Support</strong> <br />
  The Plugins First team provides active one to one email support for everybody who bought <a href="https://plugins-first.io/en/product/fixed-menu-anchor-wordpress-plugin/" rel="nofollow ugc">the PRO-version</a>. The PRO version comes with premium support and the mobile first feature.</p>
<p><strong>General Support and Bug Reports</strong> <br />
  General support is provided within the <a href="https://wordpress.org/support/plugin/fixed-menu-anchor" rel="ugc">Support area</a> of WordPress.org, where you can also report bugs.</p>
</blockquote>
<h4>Highlights</h4>
<ul>
<li>Simple, easy to configure / setup</li>
<li>You can define a standard distance between screen top and anchor target, which will be used whenever maximum viewport does not apply.</li>
<li>Define a certain CSS-class, when it is attached on a link, the click event will be ignored.</li>
<li>Define a maximum viewport width until a certain distance between screen top and anchor target is to be used (relevant for mobile optimized menu – <em>only PRO version</em>).</li>
<li>Browser agnostic – It is fully compatible with all major browsers: Firefox, Chromium/Chrome, Safari, Opera, Edge</li>
<li>Theme agnostic – You can use it in every theme as long as jQuery library is loaded.</li>
<li>Tested up to WordPress 4.5</li>
</ul>
<h3>Setup and Usage</h3>
<ul>
<li>Go to Appearence->Fixed Menu Anchor and choose the distance value.</li>
<li>That value should be a little bit higher than the fixed menu of yours.</li>
<li>After saving the value, you should jump in front of each anchor-target without the concerning about overlayed content anymore.</li>
</ul>


Fixed Menu Anchor

If you are using a sticky, fixed menu in your WP theme, this plugin is the best to deal with it overlapping anchored content.

Custom Anchor Block vs Fixed Menu Anchor