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.

1. Visit my.WordPress.net.
2. Enter a name for your website when prompted.

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.

1. Click on the Apps menu (an icon with four squares) on the upper right of the screen.
2. 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.

1. Click on the command menu at the top of the screen (the long bar with a “/” inside) and select Dashboard.
2. Navigate to Settings > AI Assistant inside the dashboard.
3. Choose an AI provider and enter your API key.
4. Choose a model from your AI provider (we used gpt-4o-2024-08-06).
5. 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.

1. Click the AI Assistant button at the top right of the dashboard.
2. 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!

The post Using my.WordPress.net to Experiment With AI appeared first on Speckyboy Design Magazine.

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:

1. Log in to your WordPress website and navigate to Plugins > Add Plugin.
2. Search for “Remote Data Blocks” and find the plugin in the provided list.
3. 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.

2.1 Create a Project in Google Cloud Platform

To start, visit Google Cloud Platform to create a new project.

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:

1. Using the left-hand menu, navigate to the Enabled APIs & Services page.
2. Click on the Enable APIs and Services button.
3. 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.

1. Using the left-hand menu, navigate to the Service Accounts page.
2. Click on the Create Service Account button.
3. Give your service account a name and click Continue.
4. On the Permissions screen, choose Owner and click the Continue button.
5. The Principals screen can be left blank. Click Done.
6. When finished, you’ll be redirected to the Service Accounts page, where your new account will be listed.

2.5 Generate JSON Credentials

1. Within your service account, click the options button (⋮) and select Manage Keys.
2. On the Keys page, click the Add Key button and select JSON as the format. Click the Create button.
3. 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:

https://docs.google.com/spreadsheets/d/test_spreadsheet_id/edit?gid=0#gid=0

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.

1. On the settings page, click the Connect New button.
2. Select Google Sheets from the menu.
3. Give your data source a name (we chose Employee Directory).
4. Paste the contents of the JSON file generated in Step 2.
5. 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.

1. 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.
2. 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!

The post How to Use Remote Data Blocks to Display Google Sheets Data in WordPress appeared first on Speckyboy Design Magazine.

Artificial intelligence (AI) technology can make life easier for WordPress developers. We can use it to increase our efficiency and coding capabilities. AI takes the pain out of tasks like troubleshooting a buggy code snippet or querying data.

Some of us are using AI to build custom plugins, but it doesn’t have to end there. We can also extend existing ones. This skill comes in handy when a free or commercial plugin doesn’t quite do everything you need. Everything from minor tweaks to complex features is possible.

For instance, we’ve used AI to generate a custom WooCommerce email when a specific product is ordered. Perhaps that doesn’t sound like an earth-shattering use case. But building such functionality without hours of research is a win in our book. About 30 minutes is all we needed to go from concept to finished product.

Let’s face it: Every WordPress project is nuanced. There are always things our clients would like to change – regardless of size or difficulty. AI can help us go from “Oh, no!” to “That was easy!”

With that in mind, here are some tips for using your favorite large language model (LLM) to extend an existing WordPress plugin.

Is This the Right Plugin for the Job?

Wouldn’t it be nice if the plugin you installed also did x, y, and z? It’s a common refrain when building a website. After all, the little details often separate the good from the great.

Perhaps a client requested a feature that differs from the plugin’s default behavior. Or maybe you had an idea for leveling up the user interface. It’s a great way to spark creativity and go the extra mile.

However, not every plugin is the right one for the job. Some extensions may be too complex and difficult to maintain, while others could take the plugin in a completely different direction. The result is an inefficient path to achieve your goals. In short, it’s an easy way to go down the old rabbit hole.

The WordPress plugin ecosystem is vast, and there are often multiple options for every need. As such, you may find that a different product is a better fit for your project. Look for a plugin that already does most of what you need. From there, extending will be easier.

It’s great that we can extend plugins using AI. Yet, that doesn’t mean we should extend every plugin. So, consider the pros and cons of a product before you dive in headfirst.

A Well-Documented Plugin Often Yields the Best Results

WordPress plugins come from all corners of the ecosystem. Thus, you’ll notice that some authors provide more thorough documentation than others.

Well-documented plugins tend to be better candidates for an AI-generated extension. AI models will have ready access to that information, and it will likely improve your odds of a successful outcome.

Another side effect is that other developers have probably built extensions as well. AI can research forums and blog posts to understand how things work. Plugins often have custom functions, hooks, and filters that developers can tap into. The more information that’s available, the better.

Hint: Feel free to include any relevant documentation or demo links in your AI prompts. This ensures that the AI model is looking in the right place. It could save you from some trial-and-error when building an extension.

What if a plugin has little or no documentation? You may still have a chance to build on top of it. Upload the plugin or share a relevant snippet with AI. The model should be able to determine how things work and move forward from there.

Think About Structure and Future Maintenance

Let’s say that you’ve found the perfect plugin to extend with AI. Now what? You’ll want to think about the best way to structure your extension and how you’ll maintain it.

It’s always tempting to paste a few code snippets into your theme’s functions.php file. That may work in the short term. But what happens when it’s time to change to a new theme? You’ll have to do another copy-and-paste, or risk losing your custom functionality.

Placing your code into a custom plugin is usually the best option. This ensures that your functionality stays intact throughout your website’s lifespan. Better still, most AI apps can help you build a plugin structure that’s easy to maintain. A simple plugin might require a single file, while a more robust one could benefit from a tree structure.

Speaking of maintenance, that places another responsibility on your shoulders. It’s possible to build a custom extension that you won’t need to edit for years. However, it’s important to keep track of changes to the plugin you’re extending. For instance, a major change to Elementor or Gravity Forms could mean refactoring your code.

Building plugins that depend on other plugins is great – just be sure to understand what you’re getting into.

Make Your Existing WordPress Plugins Do More

AI is a great asset when extending an existing WordPress plugin. Explain what you want to achieve, share code and/or documentation, and let the app do the dirty work for you. It’s possible to have a working prototype within minutes.

That’s not to say the entire process is seamless. AI can make mistakes or misinterpret your instructions. As such, your generated code may require a few rounds of revisions. Not to worry! That’s still faster than writing something from scratch.

A word of advice: Ensure that your generated code uses security best practices. We have a handy guide to help you test. Taking a few extra minutes here will give you peace of mind.

Do you have an idea that makes an existing plugin even better? Now is a great time to experiment with a little help from AI.

The post How to Use AI To Extend the Functionality of WordPress Plugins appeared first on Speckyboy Design Magazine.

WordPress is known for its flexibility. The ability to build custom blocks keeps with that tradition. There are so many potential use cases. It feels like the sky is the limit.

However, building a custom block hasn’t always been easy. Even seasoned WordPress developers can struggle to learn the process. Blocks are based on React, rather than PHP. As such, there’s a serious learning curve. That has left many to look at alternative methods or use third-party block suites.

There’s a new tool looking to change the narrative. Telex is Automattic’s AI-powered block builder. Tell the app what you want, and Telex goes to work. It generates code and, once you’re satisfied with the result, creates a custom plugin to install on your website.

Telex is ripe for experimentation. Let’s take it for a spin and see what it can do.

Getting Started With Telex

First things first, you’ll need a free WordPress.com account to use Telex and save your projects. Click the Login button on the upper right of the screen to get started.

Once that’s taken care of, it’s time to tell Telex about your project. The interface should be familiar to anyone who has used ChatGPT, Gemini, or other popular AI models.

Enter your idea into the text field, and the tool takes care of the rest. It generates your custom block’s code and even lets you test it in a real WordPress installation (thanks to WordPress Playground).

Doesn’t that sound otherworldly? Follow along as we create a demo block.

Creating a Custom Timeline Block

From the looks of things, there’s no idea that’s too far-flung for Telex. There is a plethora of creative examples popping up on the web.

For our purposes, we’ll try to keep things practical. We’ll create a Timeline block that allows us to highlight important dates with style.

Here’s the prompt we used:

Create a Timeline block that allows me to highlight important dates in a vertical format. It should have fields for the following:

1. Year
2. Content

The design should feature the Year on the left and the Content on the right. A vertical line should be displayed between the Year and the Content. The Year should be bold text and stand out.

Hint: Telex has an “Enhance Prompt” feature that will that will rewrite your prompt using AI. Give it a try if you’re having trouble describing what you want. We tried the feature, and it added a few elements we hadn’t thought of, including responsive styling.

Click the Build button once you’re satisfied with your prompt.

Generating & Testing Our Custom Block

Telex will start building your block in plain view. The UI shows your prompt at the top of the screen, while the app’s internal dialog scrolls by below.

In our case, the process took about two minutes to complete. Once finished, we were redirected to a WordPress install and placed into the Block Editor.

This is where the fun begins! Telex provides an opportunity to test our new block and see how it works. We can use the chat panel on the right side of the screen to ask questions or make edits.

Judging the Initial Result

At first glance, our Timeline block looks similar to what we envisioned. Telex followed our instructions with the help of its AI enhancement feature. It also added a few details we didn’t think of, such as the ability to style the block’s colors and spacing.

There’s even a handy plus (+) icon for adding additional milestones to our block. As promised, the block is also responsive. The Year and Content blocks are stacked on small screens for easier reading.

It’s a strong start. However, we think there’s room for improvement. Can Telex help?

Improving Our Timeline Block

Perhaps the biggest thing missing from our block is the ability to customize the typography. We’d love to change the font sizing and spacing. Let’s ask Telex for some help:

Can you add font size and spacing settings to the Year and Content fields?

Telex receives our prompt and immediately begins revising the block. Once finished, the Block Editor is refreshed, and it’s time to inspect the changes.

Sure enough, our block now features typography settings for the Year and Content fields. Nice!

We’re one step closer to completion. However, there are a few other small tweaks we’d like to make:

I notice the line between entries isn't connected. Can we change that?

Also, I'd love the ability to horizontally align each entry to the Top, Middle, or Bottom.

Telex got both requests correct, to a point. We can now align our milestones horizontally. However, the connecting line has now moved to the left side, which is not what we wanted. Recall that the line had been in the middle.

Can you move the connecting line back to the middle? It should be connected to the icon between the Year and Content fields.

It took a few tries and a recovery from a PHP crash inside WordPress Playground. Telex eventually moved the line to the middle and adjusted the styling so the milestones are connected on the front end (there was still a bit of space in the editor).

Things are looking good, so we’ll click the Download button on the upper right of the screen. Telex provides a ZIP file containing a plugin for our custom block.

Now, we can install the plugin on any WordPress website!

Making Custom Blocks a Prompt Away

Our experience with Telex was a pleasant one. Within 30 minutes, we had a working prototype of our custom Timeline block. Even the most talented of React developers would have difficulty matching that pace.

Sure, there were a few glitches along the way. That’s to be expected from any AI tool. However, Telex produced the result we were hoping for.

What about security? We ran the plugin through Plugin Check, which gave us a thumbs-up. We recommend using the tool for every custom block you generate. Also, review the code manually. Don’t take security for granted.

Telex is still in its “experimental” phase as of this writing. However, it’s safe to say that the future looks very bright.

The post How to Build a Custom WordPress Block With Telex appeared first on Speckyboy Design Magazine.