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

Previous this 12 months, we confirmed you the way to use Claude Code with WordPress Studio to construct your subsequent plugin thought. Whilst Claude Code is a brilliant possibility, when you’re now not relaxed the usage of the terminal, putting in and the usage of it can be somewhat daunting. 

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

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 gear mean you can describe a plugin in simple language and feature a operating model generated in mins — no want to write PHP from scratch or be informed the WordPress plugin API first. 

Paired with a loose native WordPress surroundings, you’ll be able to construct, take a look at, and refine a plugin fully by yourself gadget prior to it ever touches a reside web site. This information makes use of Cursor, a well-liked AI code editor, along WordPress Studio.

What you’ll want

• Cursor (loose Interest plan)
• WordPress Studio (loose, open supply)
• About quarter-hour
• No prior coding revel in required

1. Set up Cursor

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

The primary time you open Cursor, you’ll be requested to enroll in a Cursor account to get entry to the AI Agent options. Cursor gives a loose Interest plan which you’ll be able to use to take a look at it out on your first construct. 

After you’ve signed up for an account, you’ll be redirected again to the Cursor utility. Cursor may recommend some plugins to put in, in keeping with commonplace necessities. You’ll be able to skip this step and also you’ll be taken to the display the place you’ll be able to open your first challenge.

2. Set up WordPress Studio

Subsequent, you’ll desire 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 observe the on-screen directions.

With Studio working, you’ll be able to create a brand new native WordPress web site through clicking at the “Upload web site” button. Make a choice “Construct a brand new web site” after which “Empty web site”. Within the Upload a web site display, you’ll be able to give it a customized title, however the default “My WordPress Web page” is ok on your first web site.

After the web site is created, click on the Settings tab and word the Native Trail worth. That is the positioning of the WordPress information in your pc that you simply’ll want to open in Cursor.

3. Open the native WordPress Studio in Cursor

In Cursor, click on at the “Open challenge” 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’ve got VS Code put in, it’s possible you’ll in finding the Cursor structure inherits any explicit structure settings from VS Code. 

4. Construct your plugin with the Cursor agent

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

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

Hit Input or click on the Post button, and Cursor will test the surroundings, create the desired plugin folder, and generate the whole plugin report. 

To check the generated code, click on Assessment, or to simply 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, in finding 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 when you favor.

6. Construct your subsequent large plugin thought

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

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

Replace the Make a choice Welcome Dashboard Widget plugin in order that it shows a welcome message to the person in keeping with their person position. Describe what actions the person can do at the web site. 

As with every AI software, experimenting with prompting will let you succeed in higher effects.

Attach Cursor to the WordPress.com MCP server

You could be development this Welcome widget to put in in your WordPress.com hosted websites. Whilst each and every of those websites can have the default WordPress person roles (administrator, editor, creator, contributor, and subscriber), you will have websites that experience other roles. As an example, a WooCommerce retailer will even have a Buyer and Store Supervisor position.

Thankfully, you’ll be able to 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 on your WordPress.com account.

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

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

This may occasionally open the Cursor Settings display with a advised 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 be able to ask your agent to have interaction along with your WordPress.com account.

As an example:

Test my WordPress.com websites and notice if there are any customized roles that I can want to believe 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’ll ask clarifying questions like which web site environments must be integrated or which possession sorts. 

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

Best manufacturing websites and simplest websites I personal

Cursor will then use the relationship to question all of your websites, resolve 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 aggregate of gear for development your subsequent plugin thought. 

Listed below are some pointers when the usage of AI to construct plugins:

• It’s at all times higher to check the plugin out on a neighborhood WordPress set up first.
• Give the agent explicit context about what you wish to have and what options you wish to have to paintings on
• Ruin advanced options into smaller steps with explicit activates
• For those who’re now not positive of one thing, you’ll be able to ask the agent to provide an explanation for it to you.
• Learn how to use code high quality gear and linters to lend a hand the agent test for coding mistakes.
• Get started easy, then take on extra advanced initiatives as you get relaxed.

For those who construct one thing amusing, percentage it with us within the feedback!