Learn how to construct a WordPress plugin with AI (Cursor + WordPress Studio)

Previous this yr, we confirmed you how one can use Claude Code with WordPress Studio to construct your subsequent plugin concept. Whilst Claude Code is a brilliant choice, if you happen to’re no longer comfy the use of the terminal, putting in and the use of it can be a bit of daunting. 

Thankfully, there’s a well-liked AI coding editor referred to as Cursor that provides a loose tier you’ll check out. It’s been round since 2023, was once pivotal within the explosion of the “vibe-coding” motion, and continues to be some of the fashionable AI coding equipment.

This information will stroll you via putting in Cursor and WordPress Studio to construct your first AI-generated plugin.

Why construct WordPress plugins with AI

AI coding equipment mean you can describe a plugin in undeniable language and feature a running model generated in mins — no wish to write PHP from scratch or be told the WordPress plugin API first. 

Paired with a loose native WordPress atmosphere, you’ll construct, take a look at, and refine a plugin totally by yourself system earlier than it ever touches a are living website. This information makes use of Cursor, a well-liked AI code editor, along WordPress Studio.

What you’ll want

• Cursor (loose Passion plan)
• WordPress Studio (loose, open supply)
• About quarter-hour
• No prior coding enjoy required

1. Set up Cursor

Putting in Cursor calls for navigating to the downloads web page and downloading the suitable installer to your working machine. As soon as downloaded, run the installer and practice the set up directions.

The primary time you open Cursor, you’ll be requested to join a Cursor account to get entry to the AI Agent options. Cursor provides a loose Passion plan which you’ll use to take a look at it out to your first construct. 

After you’ve signed up for an account, you’ll be redirected again to the Cursor utility. Cursor may counsel some plugins to put in, according to not unusual necessities. You’ll be able to skip this step and also you’ll be taken to the display the place you’ll open your first mission.

2. Set up WordPress Studio

Subsequent, you’ll want a native WordPress set up. You’ll be able to obtain WordPress Studio, which is totally loose and open supply, and it runs on macOS, Home windows, and Linux.

As with Cursor, obtain the WordPress Studio installer, run it, and practice the on-screen directions.

With Studio operating, you’ll create a brand new native WordPress website by way of clicking at the “Upload website” button. Make a selection “Construct a brand new website” after which “Empty website”. Within the Upload a website display, you’ll give it a customized identify, however the default “My WordPress Website online” is ok to your first website.

After the website is created, click on the Settings tab and notice the Native Trail worth. That is the positioning of the WordPress information for your laptop that you just’ll wish to open in Cursor.

3. Open the native WordPress Studio in Cursor

In Cursor, click on at the “Open mission” button, and navigate to the positioning of the WordPress information from the above step.

You’ll finally end up with the WordPress information in a single pane, and the Agent chat within the different. 

Since Cursor is a fork of the VS Code editor, when you have VS Code put in, chances are you’ll to find the Cursor structure inherits any particular structure settings from VS Code. 

4. Construct your plugin with the Cursor agent

Within the Agent chat window, steered your Cursor agent to construct your first plugin. Give it some context and what you wish to have:

We’re within the root of the WordPress website folder. Create a plugin that provides a Welcome dashboard widget. The widget must most effective display the heading “Welcome!”.

Hit Input or click on the Publish button, and Cursor will take a look at the surroundings, create the desired plugin folder, and generate all the plugin document. 

To study the generated code, click on Evaluation, or to just accept the brand new plugin information, click on Stay all.

5. Turn on the plugin and take a look at it

Return to WordPress Studio and click on WP Admin to open your WordPress admin. Navigate to Plugins, to find your new plugin, and turn on it.

As soon as activated, navigate to the dashboard, and also you’ll see the clean widget with the “Welcome!” heading. You’ll be able to transfer it to another placeholder if you happen to desire.

6. Construct your subsequent giant plugin concept

From right here, you’ll upload extra options. For this widget, you must show a special welcome message to each and every consumer, relying on their consumer position.

Return to Cursor, and ask it to create this for you.

Replace the Make a selection Welcome Dashboard Widget plugin in order that it shows a welcome message to the consumer according to their consumer position. Describe what actions the consumer can do at the website. 

As with every AI software, experimenting with prompting will permit you to reach higher effects.

Attach Cursor to the WordPress.com MCP server

You could be development this Welcome widget to put in for your WordPress.com hosted websites. Whilst each and every of those websites could have the default WordPress consumer roles (administrator, editor, writer, contributor, and subscriber), you will have websites that experience other roles. For instance, a WooCommerce retailer will actually have a Buyer and Store Supervisor position.

Thankfully, you’ll use the WordPress.com MCP server to attach your Cursor agent to WordPress.com, and ask it to test which roles it wishes to pay attention to.

For those who haven’t already, allow MCP get entry to to your WordPress.com account.

You’ll be able to attach your Cursor agent to WordPress.com by way of navigating to the Cursor plugin listing and in search of “WordPress.com”. 

If you to find the connector, click on it, then click on the “Upload to Cursor” button. 

This may occasionally open the Cursor Settings display with a steered to put in the MCP Server. Click on Set up, and the connector will likely be put in and configured.

A brand new browser window will open to invite you to authorize the relationship. If you settle for, the MCP server connection will likely be enabled.

Now, you’ll ask your agent to have interaction along with your WordPress.com account.

For instance:

Test my WordPress.com websites and spot if there are any customized roles that I will be able to wish to imagine to replace this plugin in order that it really works on any of my WordPress.com websites.

The Cursor agent will use the WordPress.com MCP connection to test your websites. It is going to ask clarifying questions like which website environments must be integrated or which possession sorts. 

You’ll be able to reply to the agent to present it extra knowledge:

Handiest manufacturing websites and most effective websites I personal

Cursor will then use the relationship to question all of your websites, decide if any customized roles are in position, and replace the plugin as wanted.

What plugin will you construct subsequent?

Cursor + WordPress Studio + WordPress MCP is a formidable mixture of equipment for development your subsequent plugin concept. 

Listed here are some guidelines when the use of AI to construct plugins:

• It’s at all times higher to check the plugin out on an area WordPress set up first.
• Give the agent particular context about what you need and what options you need to paintings on
• Ruin complicated options into smaller steps with particular activates
• For those who’re no longer positive of one thing, you’ll ask the agent to give an explanation for it to you.
• Learn how to use code high quality equipment and linters to assist the agent take a look at for coding mistakes.
• Get started easy, then take on extra complicated initiatives as you get comfy.

For those who construct one thing a laugh, proportion it with us within the feedback!