Display NFTs in WordPress

Hey hitch hikers! Here’s another heads up about this tutorial video about minting and displaying OpenSea NFTs (singles and collections) on your WordPress website. Next time I’ll go over using Metamask wallet to pay for the initial transaction, after which, minting is free. I claimed and listed an Unstoppable Domain which can be used as a catch-all crypto wallet address (bitpunk.crypto) and minted an animated GIF made from a picture. Then embed both of those NFTs here on non-fungi.com and on this blog post. Enjoy the video, and hit me up on the contact page or youtube comments if you have any questions! Pummel the like button and smash subscribe if you will!! Also check out the HTML tutorial just posted, if you’re looking for how to display an OpenSea collection in an HTML iframe not using WordPress.

NFT Gallery Displayed in WordPress
How to mint, and embed NFTs

Article Updates 10/24/22

Back when the iframe worked for embedding an OpenSea collection page, we embedded NFTs from there or other various platforms just using a iframe with the iframe shortcode plugin in the case we wanted to make it fit a full screen. As this article ages, we’ve revisited and added a couple more methods including embedding the OpenSea code with the code from the tab on the NFT page. We’re back delving into exploration of up to date ways on which NFTs can be embedded or shared and displayed in a WordPress frontend with use of the custom HTML block.

1. OpenSea Embed Code

Here’s the OpenSea embed code:


    <nft-card
    contractAddress="0xea2dc6f116a4c3d6a15f06b4e8ad582a07c3dd9c"
    tokenId="2850">
    </nft-card>
    <script src="https://unpkg.com/embeddable-nfts/dist/nft-card.min.js"></script>

Here’s the same code used in a custom HTML Gutenburg block, but this time we’ve cut the <script> tags and instead placed it to between the <head> tags using the handy-dandy, super-simple Custom CSS & JSS plugin, which means we can add more of these NFT cards around the site but don’t need the script tag in every instance as it’s already in the <head>, so now the code just looks like this:

<nft-card contractaddress="0xea2dc6f116a4c3d6a15f06b4e8ad582a07c3dd9c" tokenid="2850">
    </nft-card>

Here’s how it looks when that piece of code is placed in a custom HTML block BOOM: 💥

Another one BOOM: 💥

This method seems to work ok, but I’ve run into issues when adding multiple embeds where it stops working, and also I’ve seen extra tags showing up above the WordPress admin dashboard menu. Which to me looks like some closing tags are not being correctly displayed or dealt with the right way causing some kind of conflict. Here’s what I saw when viewing this very page in Firefox

"< />" < />

Basically as seen above. But now mysteriously it has gone after closing the browser window and refreshing. If you read instruction on this embed though. OpenSea does suggest to add the script into the <head> tags. So using a plugin like the Custom CSS & JS plugin or editing the theme. You can cut that part of the code and use it in the head, so you don’t have to add it to every NFT card you want to display around the whole WordPress site. Read more about embedding and customizing from OpenSea in this github repo

2. Easy HyperLinked NFT Image

Another surefire way to display your NFT inside WordPress is just by uploading the NFT image into your WordPress media. Now place the image in any page or post and copy the URL to your NFT on whichever marketplace you would like to point to. In this example we surfed over to Gem.xyz and connected out wallet. Then towards the top right of any of the NFTs in your wallet that display in your profile, you will see a little share icon that copies the URL to your clipboard. Here’s an example of the URL for this one:

https://www.gem.xyz/asset/0x343b68141129ec115c1fc523c5ae90586fe95b77/1730

So, here’s the NFT image saved and uploaded to our media. Now simply place it anywhere and use the above link on the image, and boom, visitors can click the image to visit the marketplace, in this case Gem.xyz but you can use the URL to any of the marketplaces it’s listed on!