IPFS for WordPress

When IPFS solutions meet WordPress | Inspiration

💡 What if everyone can now easily implement IPFS solutions on their websites? Especially on the world's largest WordPress CMS which powers 34% of all websites on the Internet. This will absolutely change the game!

During the summer break of my CS freshman year, I decided to work as a WordPress developer. WordPress CMS has two major benefits for me and is the go-to choice for people most of the time. First, in many cases, people choose WordPress because it’s an easy platform to use and manage if you’re a total beginner in web development. Second, WordPress also has a lot to offer if you have experience building websites. It’s entirely customizable, and its plugin and theme systems can enable you to build almost any type of site you’d like (blogs, e-commerce, ticketing system, event, personal portfolio, etc). The experience and knowledge of WordPress sowed a seed for the successful development of this project.

The NFT boom that happened last year (2021) had created a huge history in the blockchain space. That was the first time I came across IPFS (a protocol and peer-to-peer network for storing and sharing data in a distributed file system) as it was the most used technology for storing and addressing NFTs data. At that time, I was also introduced to the IPFS storage and pinning tools which build on this large network, such as Pinata, Web3.Storage, Nft.Storage etc. However, the status quo is that the utilization of IPFS is still limited. I started to dive deeper and spend lots of time learning them. Throughout this journey, the term "Web3.0" grew famous in the blockchain realm, and a lot of resources were flooding into this sector, hoping for a paradigm shift to the Web3 era.

Focusing on producing Web3 products, in my opinion, is not the best strategy to change the way the Internet operates as a whole. Instead, we must devote greater resources to building and integrating Web3 features and technologies into the present Web2 environment.

🔻 The Solution

Hence, I designed and built the first most powerful and comprehensive IPFS plugin for the WordPress CMS, which provides various IPFS solutions for WordPress site. Everyone can now install it on their WordPress site and start to integrate IPFS features easily, as well as manage everything just by using one admin panel. I believe that if a technological product has a low barrier to entry, it may have a significant influence in its domain. This is exactly what this plugin, "IPFS for WordPress" is currently doing - making a huge impact by providing IPFS solutions (Web3.0) on WordPress CMS (Web2.0) in a user-friendly way, accelerating the shift to the Web3.0 era.

How powerful is the plugin? | Features Overview

Here is a features overview (TL;DR) of the "IPFS for WordPress" plugin:

APIs support for IPFS storage tools
Media libraries for IPFS storage tools
On-the-spot upload & retrieve for IPFS storage tools
Lottie animation support for IPFS
Elementor addons for IPFS integrations
IPFS integration for WooCommerce
IPFS image generation system
IPFS Content Delivery Network (ICDN) for WordPress

⭐ Details of the features 👇:

✔️ APIs support for IPFS storage tools

API support

Users can choose which IPFS storage tools to use by enabling them in the configuration tab of their plugin admin panel, and easily connect their IPFS storage tools with the help of APIs keys and secrets created from their storage tools account. The dashboard of the plugin will also display the APIs connection status of their IPFS storage tools. Users can now easily set up the plugin and are ready to use all the IPFS features just with a few simple configuration steps. With the APIs support, media assets and files can be seamlessly retrieved from users' IPFS storage tools (IPFS network) and also able to upload anything with one click. Every feature of the plugin will be hassle-free with the APIs support, and users can just focus on their integration, site-building as well as all the IPFS tasks in one place, which is WordPress.

✔️ Media libraries for IPFS storage tools

media libraries

Every IPFS storage tool (Pinata, Web3.Storage, Nft.Storage) will have its own individual media library and be able to access all of them in the plugin admin panel. In other words, when users retrieve images from IPFS storage tools, the images will be added to the respective media library and can be easily managed. Worth mentioning that the media retrieving process is just a few simple clicks and your IPFS-retrieved images are ready to use on your WP site. Not only displaying the images retrieved from the IPFS storage tools, but users can also edit the image details with our image lightbox editor, and apply SEO to the IPFS-retrieved image assets. Furthermore, by toggling on the IPFS image block (Elementor addons) at the dashboard, users can now easily use their IPFS-retrieved images on their WP site with the help of the popular WordPress website builder, Elementor.

✔️On-the-spot upload & retrieve for IPFS storage tools

On-the-spot upload & retrieve

Remember that, one of the aims of this plugin is to help WordPress sites (Web2.0) to implement IPFS solutions (Web3.0) with ease. Hence, the plugin has built-in a feature to let users directly transfer media assets that are originally stored on the server storage to the IPFS network (via IPFS storage tools: Pinata, Web3.Storage, Nft.Storage) with just a few simple clicks. The whole process looks like this:

Choose an image in media > Click "Upload Image to IPFS" > Choose a IPFS storage tools > Hit the upload button and we are done!

The image stored on the local media library will be uploaded to the IPFS network, and the IPFS storage tool chosen will return the image CID to the plugin. The image will be then retrieved and stored on the respective IPFS media library of the plugin, and the image (which is now retrieved from IPFS) is now ready to use on the WordPress site. So, we can see how the image in traditional server storage is stored on the IPFS network and act as the source of the image on the WordPress site, with just a few simple steps.The image in the local media storage can be deleted or leave it as a future reference, however, user can now have an extra choice to let IPFS as the image source during the site building.

✔️ Lottie animation support for IPFS

lottie

Lottie is an open-source animation file format that’s tiny, high quality, interactive, and can be manipulated at runtime. 600% smaller when compared to GIF and 10 times faster to ship. It is definitely the go-to choice when implementing animation on your website. Plus, we can now manage our Lottie animation with IPFS!

User can upload their Lottie JSON file onto IPFS storage tools (Pinata, Web3.Storage, Nft.Storage), and later retrieve it to store it in the specially built Lottie JSON library of the plugin. Similar to media assets, users can also edit the JSON files with the lightbox editor, making SEO possible to apply to the Lottie animations. Together with this plugin, users can toggle on the Lottie animation addon for Elementor and use their Lottie JSON asset retrieved from IPFS for their WP site-building. The IPFS Lottie animation block on Elementor will process and render the animation of the IPFS-retrieved Lottie JSON files, as well as provide advanced customization to let users have full control of their Lottie animation.

✔️ Elementor addons for IPFS integrations

addons

Elementor is a popular WordPress website builder which is suitable for beginners as well as advanced developers. When IPFS integration meets Elementor, there are endless possibilities and make everything of site building so simple. We had built in several IPFS Elementor addons for this plugin and users just have to toggle it on at the dashboard, and they will be able to use it in the Elementor website builder. There are six IPFS Elementor addons in this plugin:

Image for Pinata
Image for Web3.Storage
Image for Nft.Storage
Lottie Animation for Pinata
Lottie Animation for Web3.Storage
Lottie Animation for Nft.Storage

advanced setting

Furthermore, all the addons (IPFS Elementor blocks) were built-in with various advanced CSS settings and customizations, which can be accessed from the individual block settings. Styling of IPFS-retrieved images on the WordPress site is possible and much more user-friendly with the help of the IPFS Elementor addons.

✔️ IPFS integration for WooCommerce

woocommerce

If you are running an eCommerce store with thousands of products, product images will probably occupy a large amount of space in your hosting server, and it is costly to upgrade your server storage and maintain it in the long run. Now, with the power of IPFS, you can run a big eCommerce store with just a small hosting server.

WooCommerce is the most popular open-source eCommerce solution on WordPress and we had built an integration with IPFS. Users can now upload all of their product images onto IPFS storage tools (Pinata, Web3.Storage, Nft.Storage) and use them on their online store by retrieving them to the specially-built WooCommerce library of the plugin. The WooCommerce library of the plugin has a specially developed IPFS image generation system built in which supports the optimization process of the IPFS-retrieved product image (will talk more in the next section). When users wanted to add a new product to their WooCommerce online store, they can choose the IPFS-retrieved product image from the plugin's WooCommerce library. Hooray! Running your WooCommerce (eCommerce) online store with IPFS is not a dream anymore.

✔️ IPFS image generation system

system

By default, whenever we upload an image to WordPress, WordPress will automatically create a few different sizes of the same image. Users don’t have to keep resizing images manually to ensure the best image size is selected for different locations on your website. However, images retrieved from IPFS storage tools (Pinata, Web3.Storage, Nft.Storage) will not have this image generation process. Hence, a specially-designed image generation system is built into the plugin to process all the images retrieved from the IPFS network and added to the libraries of the plugin.

When an image is retrieved from the IPFS network, the IPFS image generation system will generate different resolutions (size) of that image and pack them into a folder, and then upload it back to the IPFS network. The CID of that folder containing different size variants of that image will be stored in the local site database to keep track of the folder. When the site needs to render a specific size of that image, the system will locate the image folder (via CID) and retrieve the image size needed from the folder. The IPFS image generation system supports the product image size optimization of WooCommerce (when integrating with IPFS), allows users to manually select image sizes for their WP site in Elementor, and also powers the thumbnail system of the IPFS libraries itself.

Here is a simple diagram showing how the image generation process works, as well as the communication between the WordPress backend and IPFS storage tools: Loading... diagram fetching from IPFS network

✔️ IPFS Content Delivery Network (ICDN) for WordPress

cdn

One of the must-haves when it comes to WordPress website speed is a content delivery network (CDN). A CDN takes the load off your web server and speeds up content delivery to all site visitors. As a result, everything from your user experience to search engine potential improves! However, running a CDN (Cloudflare, RocketCDN, etc.) for your WordPress website might be costly in the long run. Hence, the first IPFS Content Delivery Network (ICDN) for WordPress comes to the rescue, giving everyone the chance to run a CDN solution for their WP website, but in a cheaper (or even FOC) and efficient way. All thanks to the power of IPFS technology! IPFS nodes will play the role of "POP" (point of presence) in an ICDN network, replacing the traditional CDN server.

Users just need to enable the ICDN and choose the preferred IPFS storage tools (act as the ICDN provider), that's it! Simple and fast activation, and no more wasting time on complicated CDN settings. For ICDN, everything is simplified and even a newbie can implement a CDN solution for their website. The plugin will automatically rebuild the ICDN cache (based on the lifespan) and update it on the IPFS storage tools. Fully automated and hassle-free for users! In addition, the plugin provides a "one-click instant rebuild" for users who like to rebuild and upload their CDN cache manually at some time.

ICDN also provides an extra feature - Automated File Minification. CSS dan JS minification is a way to optimize your site performance by reducing whitespaces and comments to reduce file size. When users enable it, ICDN will automatically store minified variants on the IPFS network, while keeping the uncompressed JS and CSS files on your main server.

Here is a simple diagram to illustrate how the ICDN works:

Loading... diagram2 fetching from IPFS network

How I built it

Here's a quick overview of the whole journey of building the "IPFS for WordPress" plugin:

Brainstorming and research on IPFS and WordPress-related topics
Planning and writing of blueprint
UI/UX wireframing and designing
Phase 1: admin panel, APIs connections, media libraries, image blocks (Elementor addons)
Phase 2: Lottie animation support and Woocommerce
Phase 3: IPFS Content Delivery Network
Testing and bug fixing
Final testing & upload on GitHub

Challenges I ran into

The greatest challenge is when the IPFS-retrieved images can't be processed by the WordPress built-in image generation system and were having trouble generating different sizes of images to use on different locations on the website. This had heavily affected the integration of IPFS and WooCommerce, as well as some of the other features in the plugin.

However, when God closes a door, he opens a window to explore. We had successfully built our IPFS image generation system to replace the default WordPress image generation system. Now, when users retrieve images from the IPFS storage tools, the IPFS image generation system will automatically generate different sizes of images, pack them into a folder, and upload them back to the IPFS network. The WordPress database will also store the generated images' CIDs and keep track of them for future use. Furthermore, because of the IPFS image generation system, users can now choose the image size displayed for the IPFS image block in Elementor. The thumbnail system for all of the IPFS media libraries in the plugin also benefited from the IPFS image generation system (in the aspect of rendering speed).

Accomplishments that I'm proud of

Throughout the hackathon, I discovered numerous possible IPFS use cases on the WordPress CMS and successfully introduced it to the community in a fully functional plugin that is now available for anyone to install and integrate on their WordPress site. The plugin had made a huge contribution and impact in the IPFS space and brought great benefits to the WordPress CMS user as well. Here are some accomplishments that I'm proud of:

Images stored on IPFS storage tools can be directly imported (retrieved) into the WordPress CMS for site-building, and even have respective media libraries to manage these media assets.
Switching image assets from traditional WordPress media storage to the IPFS network (via IPFS storage tools) is now hassle-free, user-friendly, and less time-consuming. Just a few simple clicks!
One of the most popular WP website builders, Elementor has a library of IPFS building blocks to easily integrate IPFS solutions in a less-code/no-code site-building environment
WooCommerce can now integrate with IPFS to support and power an eCommerce store with many products while just needing small server storage.
IPFS Content Delivery Network (ICDN) for WordPress become a powerful and cost-friendly alternative solution for WordPress sites to implement CDN features.

What I learned

While designing and brainstorming for the project during the hackathon period, I really had a deeper understanding of the backend structure and working process of the whole WordPress CMS. As a result, this really broadens my horizon in the IPFS space, and I had slowly discovered more potential IPFS integrations with the WordPress CMS which can bring much value to the community. I learned a lot in this process and those bits of knowledge and experiences will definitely support me further in this project development. "IPFS for WordPress" plugin will not just stop here, it is going to grow stronger and more powerful! Look at my upcoming plans for this project 👇 :

What's next for IPFS for WordPress

As a university student (sophomore), hackathons and grant programs are always my funding source as well as support to keep building and upgrading this potential project. It is also a chance to introduce this interesting and powerful plugin to the community, as well as encourage more people to integrate IPFS solutions on their websites.

After this hackathon, I had a few major milestones (roadmap) in my mind for this project:

✔️ IPFS Blog System for WordPress

💡 If everyone can easily run their Web3.0 blog site, isn't that cool? Especially building with a user-friendly CMS, WordPress.

After getting some inspiration from the Mirror app (a web3.0 blogging platform), I designed and built an IPFS blog engine for the L2 Rollathon Hackathon this year May, at the same time having an excellent result in this hackathon. This motivates and inspires me further. Why don't I build an IPFS Blog System for WordPress, and by using this feature, everyone can now easily set up, build, run and manage their own decentralized Web3.0 blog site? In other words, everyone now has their own-managed "Mirror"!

The IPFS blog system will have visual editors, building blocks, elements library, full integration support with IPFS storage tools (Pinata, Web3.Storage, Nft.Storage), etc. This will definitely be an exciting upgrade for this "IPFS for WordPress" plugin!

✔️ IPFS Event and Ticketing System for WordPress

💡 What if everyone can easily create and deploy their NFT tickets for events (without the need of knowing handle IPFS storage tools as well as smart contract deployment), and sold them on a WooCommerce site?

I will like to design and develop an NFT tickets collection building panel in the plugin. Users can just focus on creating the NFT tickets collection in the building panel. All the smart contract deployment and IPFS storing tasks will be automatically completed by the plugin. Furthermore, the ticket selling system will be also designed to integrate with the IPFS network and Chainlink technologies, adding the possibility to make the whole process decentralized and fully automated.

✔️ IPFS Element Library (Addons) for Elementor

I plan to come out with a library of elements (addons/building blocks) for Elementor which focus on building up a Web3.0 site and easily integrating all the IPFS solutions. When users install this plugin, they will automatically access all the addons on their Elementor website builder.

The most exciting plan is that IPFS element libraries for other WordPress website builders (such as WP Bakery, Divi, Oxygen, etc. ) will be coming soon!

✔️ Upgraded version of IPFS CDN

I will introduce more advanced and comprehensive features for the ICDN (IPFS Content Delivery Network) in the future. For instance, files preload function, advanced ICDN caching rules, ICDN cache rollback, security improvements, speed optimization, etc. ICDN will become more powerful in the upcoming upgraded version!

✔️ Available on WordPress Plugin Directory!

In the next release (with all the new features ready), I will submit and publish the "IPFS for WordPress" plugin to the WordPress Plugin Directory. At that time, users can just search for this plugin in the WordPress Plugin Directory and directly install it for their WordPress site, much more faster and convenient! Plus, for future updates on the plugin, users will receive an update notification and can choose to manually update or enable auto-update for the plugin. However, for now, we need to manually download and install this plugin. Refer to the next section for the download and installation guide 👇:

⭐ Download and installation guide

The "IPFS for WordPress" plugin is ready to download and install on your WordPress site, here's how:

Visit the GitHub repo of this plugin. You can access the link at the "Try it out" section or just click here
Click on a zip file, which has a file name of ipfs-for-wp.zip. This is the WordPress plugin zip file you are looking for. The ipfs-for-wp folder is just an extract version of the plugin zip file for convenient code reading, hence, please download the zip version.
Download it onto your local computer.
Go to your WordPress admin panel > "Plugins" tab > Click "Add New" > Click "Upload Plugin"
Upload the ipfs-for-wp.zip plugin file, wait for the install, and you are ready to go!