View Categories

Block Editor – Add to Button

< 1 min read

Unfortunately the Block Editor does not expose the ID of the element. Once you add a button to the page, you will need to switch to code editor mode. Look for the code <div class="wp-block-button"> (Watch out for the one just before it, wp-block-buttons, the plural version!).

Just after the <div tag, add the following text. id=”insert unique id here”, use your own id name, so it looks like
<div id="free_download" class="wp-block-button">

Image showing the code editor and what the button looks like as html code.

So now that code will look something like this.

Image showing the code needed to add the id.

Now, in the URL/Hyperlink setting for the block, add #free_download as the link. This will keep the existing page and also avoid jumping back to the top. Make sure the link does not exist as an anchor.

Final set. Add the Shortcut block and then add the shortcode using the Download Magnet id as well as the button id. This will look something similar to below.

Image showing Shortcode block added and setup.

Here is a short video to show the process for adding Download Magnet to your own elements in Block Editor.

WORDCAMP 2024 SPECIAL OFFER

Save 25% off
ALL PLUGINS

Use promo code WCUS2024 at checkout

(includes renewals where appropriate)
good through September 30th 2024

Peachy Software Logo (Orange Peach)

This website uses cookies to ensure you get the best experience on our website.