A hands-on exploration of how Three.js, shaders, and codec-inspired techniques can turn a scene transition into a convincing real-time datamosh effect.
A step-by-step tutorial on using Three.js and GLSL to create a mouse-following square lens effect with image distortion, RGB shifting, and animated shader effects.
Explore how depth maps, TSL, and WebGPU can be combined to turn flat 2D images into dynamic surfaces with realistic lighting, surface detail, and self-shadowing.
A step-by-step tutorial on turning a simple icosahedron into a dynamic, interactive 3D cluster using Three.js, TSL, WebGPU, noise, interaction, and post-processing.
A deep dive into building a flexible Three.js Geometry Painter with WebGPU and TSL, from surface picking and procedural geometry to live controls, custom shaders, lighting, and post-processing.
A scrolling helix of frosted glass bars that ring as you sweep across them, built in Three.js with instancing, a fluid simulation, and glass faked entirely in the shader.
A behind-the-scenes look at the engineering behind Ridgeline, covering the architectural decisions, Webflow integration, real-time terrain rendering, animation techniques, and performance optimizations that brought a cinematic 3D experience to life.
A step-by-step tutorial showing how to build seamless GPU-powered page transitions by combining a persistent WebGPU scene, DOM tracking, and a lightweight vanilla JavaScript router.
Experimenting with AI can be a great way to learn about its capabilities. And yes, it’s also a lot of fun. A few prompts can take you in any direction you want to go – or to places you never expected.
WordPress is the ideal testing ground for AI tools. You can work with code, generate content, or discover new ways to manage your website. It could do wonders for your workflow.
However, you probably don’t want to experiment in a production environment. There’s always a chance that something will go wrong and affect users. It’s not a risk worth taking!
Thankfully, there’s a new option worth getting excited about. The recently released my.WordPress.net installs a copy of the content management system (CMS) directly in your browser. It’s completely private, but can connect with various AI providers. It’s the perfect place to get a feel for what you can do with AI inside WordPress.
Let’s take a quick tour of my.WordPress.net. We’ll install it (super easy), connect it to AI, and start experimenting.
Sample Project: Integrate AI Into a Local WordPress Install
Today’s project is dead simple. First, we’ll install WordPress in our browser. Then, we’ll add our ChatGPT API key to integrate with the AI model. Finally, we’ll run a few test prompts to explore AI-based site management. Oh, and we’re sure to have a few adventures along the way.
Here we go!
Step 1: Install WordPress in Your Browser
We don’t want to spoil any surprises, but you might be amazed at how easy it is to install WordPress in your web browser.
That’s all there is to it! You could optionally import content from another WordPress site. But we’re starting from scratch.
Once installed, you’ll see a welcome screen.
Step 2: Install the AI Assistant App
Those familiar with WordPress might be confused by the use of the term “apps”. After all, the CMS is famous for its plugin ecosystem. Not to worry. This offshoot decided that “apps” was a more user-friendly word for beginners. Consider plugins and apps as interchangeable.
Regardless, our next task is to install the AI Assistant app. Once again, it will be quick and easy.
Click on the Apps menu (an icon with four squares) on the upper right of the screen.
Find “AI Assistant” on the list and click on it.
The AI Assistant will automatically be installed on your local site. You’ll be returned to the welcome screen after it’s finished.
Step 3: Connect With an AI Model
We have everything we need to connect WordPress with an AI model. Now, it’s time to choose a provider.
At the time of this writing, AI Assistant works with Anthropic (Claude), OpenAI (ChatGPT), or a local AI model via Ollama. More providers may be added in the future.
Click on the command menu at the top of the screen (the long bar with a “/” inside) and select Dashboard.
Navigate to Settings > AI Assistant inside the dashboard.
Choose an AI provider and enter your API key.
Choose a model from your AI provider (we used gpt-4o-2024-08-06).
Save the revised settings.
In our case, we grabbed a ChatGPT API key and entered it into the settings. For reference, this method requires purchasing API credits from OpenAI. This is separate from your regular ChatGPT account.
The AI Assistant app also provides some information on what various WordPress user roles can access. You can also choose to add an AI Assistant button on the front-end of your site, which is displayed to logged-in users.
Step 4: Experiment!
The only thing left to do is have some fun with AI inside WordPress. You’ll find the AI Assistant throughout the dashboard and, optionally, the front-end of your website.
Click the AI Assistant button at the top right of the dashboard.
Enter a prompt in the chat window and start working with AI.
Here are a few sample prompts to get you started:
Create the following new pages on my website: About Us, Services, Contact Us
What time zone is my website using?
Activate the Hello Dolly plugin.
ChatGPT handled each of these requests without hassle. However, it did install a second copy of the Hello Dolly plugin. We’ll chalk it up to an early bug.
Note that you may be asked to approve certain actions, like creating pages or installing plugins. It’s a safety measure and is worth reviewing before allowing AI to make changes.
An Easy Way To Try AI Inside WordPress
Perhaps our experiments weren’t earth-shattering, but that’s not the point. The idea is that AI can tell you a lot about your website and perform routine tasks. And my.WordPress.net provides a safe space to learn and play.
Even better, the process for installing WordPress and integrating an AI model couldn’t be easier. You can be up and running within a few minutes. Just note the potential cost of using Anthropic or OpenAI for this purpose. Be sure to check your spending limits so you don’t lose a small fortune.
All told, it’s a great way to discover how AI can help your workflow inside of WordPress. So, take some time and find what works for you!
Publishing dynamic content is one of the key selling points of content management systems (CMS) like WordPress. Content can change based on user input or other conditions. This is useful for everything from e-commerce sites to online publications. There are also simple use cases – even for brochure websites.
But what happens if some of your critical data lives elsewhere? There may be a plugin that integrates with the third-party service you’re using. Or, you might build a custom solution from scratch.
The Remote Data Blocks plugin aims to make fetching data from outside sources easy. It integrates with services like Airtable, Google Sheets, and Shopify out of the box. There’s also a framework for connecting to other services via HTTP. Once connected, you can display your data via a WordPress block and customize it with a pattern.
How does it work? Let’s put the plugin to the test with a sample project. We’ll guide you through each step and see what we can accomplish together. Here we go!
Sample Project: Display a Google Sheet in WordPress
To test Remote Data Blocks’ capabilities, we’ll use the plugin to fetch data from a Google Sheet. The file contains contact information for an employee directory.
The process includes installing the plugin, connecting to Google Cloud Platform (the most time-consuming part), and displaying the data on our website using the included block. We’ll also need to create a block pattern to style our data.
Step 1: Install the Remote Data Blocks Plugin
The first step is to install the latest version of Remote Data Blocks on your WordPress website:
Log in to your WordPress website and navigate to Plugins > Add Plugin.
Search for “Remote Data Blocks” and find the plugin in the provided list.
Install and activate the plugin.
We’ll come back to the plugin settings later in our tutorial.
Step 2: Configure Google Cloud Platform
We have some work to do before we can connect a Google Sheet to WordPress. We’ll show you the steps below. The Remote Data Blocks team has also put together a helpful guide for this process.
Hint: If you need help, Google has a project creation guide you can use as a reference. Google will ask for a project name and a parent resource. We’ll call our project Remote Data Blocks Test and leave the parent resource blank.
2.2 Connect to the Google Sheets and Google Drive APIs
Once the project is created, we’ll need to enable both the Google Sheets and Google Drive APIs. Here’s how:
Using the left-hand menu, navigate to the Enabled APIs & Services page.
Click on the Enable APIs and Services button.
One at a time, search for and add the Google Sheets and Google Drive APIs.
2.3 Enable the IAM API
Our project will also need access to the IAM API, as this handles authentication. Click the Enable the API button.
2.4 Create a Google Cloud Platform Service Account
After that, we’ll create a service account for the project. Head to the Google Cloud console website.
Using the left-hand menu, navigate to the Service Accounts page.
Click on the Create Service Account button.
Give your service account a name and click Continue.
On the Permissions screen, choose Owner and click the Continue button.
The Principals screen can be left blank. Click Done.
When finished, you’ll be redirected to the Service Accounts page, where your new account will be listed.
2.5 Generate JSON Credentials
Within your service account, click the options button (⋮) and select Manage Keys.
On the Keys page, click the Add Key button and select JSON as the format. Click the Create button.
Google Cloud platform will generate a JSON that you can download to your device.
Important: Note the generated email address associated with your service account – you’ll need it!
Step 3: Share Your Spreadsheet With Your Google Service Account Email
Remember the email address associated with your Google Service Account that we generated above? We’ll need it here.
We’ll head over to the Google Sheet we want to connect to our website and share it with the email address.
Step 4: Copy the Google Sheet ID
Next, we’ll locate the ID of our Google Sheet. We’ll need this detail to connect it to our website. The ID is located in the Sheet’s URL, like so:
We’re looking at the bolded area above (test_spreadsheet_id). We’ll copy our ID and keep it handy for the next step.
Step 5: Create a Data Source in Remote Data Blocks
We’re done with Google and on to our website. Navigate to Settings > Remote Data Blocks to connect our Google Sheet.
On the settings page, click the Connect New button.
Select Google Sheets from the menu.
Give your data source a name (we chose Employee Directory).
Paste the contents of the JSON file generated in Step 2.
Click the Continue button.
On the Scope screen, we’re asked to choose a spreadsheet from the menu. Ours is on the list. We’ll select it and the sheet we want to use (Sheet1), then click the Continue button.
On the Blocks screen, we’ll choose the Auto-register blocks option and click the Save button.
Step 6: Insert the Remote Data Block Into a Page
Now, it’s time to add the remote data block to our page.
Remote Data Blocks uses the data source name we provided in the last step. So, we’ll search for “employee directory” and add the block to the page. There are a couple of options, but we’ll choose Employee Directory/Sheet1 Loop. This option will automatically update the data when we edit our Google Sheet.
The next step is to place our remote data into a block pattern. So, we’ll select Choose a Pattern and click the only available option.
Note that the included pattern does not format the data into a table or anything resembling a spreadsheet. That’s OK, because we created a set of columns to house our data.
Dragging the various data points (First Name, Last Name, Title, Extension) into the Columns Block gave us a better layout. We can also use the Block Editor to make further improvements.
All Data Points Lead to WordPress
Fetching data from third-party sources is challenging. It’s also necessary, as we store our stuff all over the place. Remote Data Blocks helps by providing a framework we can build from.
There’s a lot of potential here, and we can imagine the plugin expanding in the future. Perhaps it works with more services out of the box. It might also include a few more block patterns to style common data types with ease.
The plugin could also empower non-technical site owners. For example, imagine updating a restaurant’s menu page by editing a Google Doc or another cloud-based file. They wouldn’t have to touch WordPress at all. It would eliminate their learning curve and ease our support requirements.
However, this is just the beginning. There are already plenty of niche uses for Remote Data Blocks and more to come. So, download the plugin and experiment!
Login
