How one can construct a WordPress plugin with AI (Cursor + WordPress Studio)

Previous this 12 months, we confirmed you the best way to use Claude Code with WordPress Studio to construct your subsequent plugin concept. Whilst Claude Code is a smart possibility, in case you’re no longer relaxed the usage of the terminal, putting in and the usage of it can be just a little daunting. 

Thankfully, there’s a well-liked AI coding editor referred to as Cursor that gives 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 probably the most well-liked AI coding gear.

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

Why construct WordPress plugins with AI

AI coding gear can help you describe a plugin in simple language and feature a running model generated in mins — no wish to write PHP from scratch or be informed the WordPress plugin API first. 

Paired with a loose native WordPress surroundings, you’ll construct, check, and refine a plugin solely by yourself gadget sooner than it ever touches a reside web page. 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 proper installer on your running device. As soon as downloaded, run the installer and observe 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 gives a loose Passion plan which you’ll use to check out 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 counsel some plugins to put in, according to not unusual necessities. You’ll skip this step and also you’ll be taken to the display screen the place you’ll open your first undertaking.

2. Set up WordPress Studio

Subsequent, you’ll want a native WordPress set up. You’ll 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 create a brand new native WordPress web page through clicking at the “Upload web page” button. Make a selection “Construct a brand new web page” after which “Empty web page”. Within the Upload a web page display screen, you’ll give it a customized title, however the default “My WordPress Web site” is ok on your first web page.

After the web page is created, click on the Settings tab and observe the Native Trail price. That is the site of the WordPress information in your pc that you simply’ll wish to open in Cursor.

3. Open the native WordPress Studio in Cursor

In Cursor, click on at the “Open undertaking” button, and navigate to the site 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, you probably have VS Code put in, it’s possible you’ll in finding the Cursor structure inherits any particular structure settings from VS Code. 

4. Construct your plugin with the Cursor agent

Within the Agent chat window, urged 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 web page folder. Create a plugin that provides a Welcome dashboard widget. The widget must handiest display the heading “Welcome!”.

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

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

5. Turn on the plugin and check 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 transfer it to another placeholder in case you want.

6. Construct your subsequent large plugin concept

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

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

Replace the Make a selection Welcome Dashboard Widget plugin in order that it presentations a welcome message to the consumer according to their consumer function. Describe what actions the consumer can do at the web page. 

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

Attach Cursor to the WordPress.com MCP server

You could be construction this Welcome widget to put in in your WordPress.com hosted websites. Whilst every of those websites can have the default WordPress consumer roles (administrator, editor, creator, contributor, and subscriber), you may have websites that experience other roles. For instance, a WooCommerce retailer will even have a Buyer and Store Supervisor function.

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 concentrate on.

Should you haven’t already, allow MCP get entry to on your WordPress.com account.

You’ll attach your Cursor agent to WordPress.com through navigating to the Cursor plugin listing and on the lookout for “WordPress.com”. 

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

This may increasingly open the Cursor Settings display screen with a urged to put in the MCP Server. Click on Set up, and the connector will probably 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 probably be enabled.

Now, you’ll ask your agent to engage together with your WordPress.com account.

For instance:

Test my WordPress.com websites and notice if there are any customized roles that I can 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 web page environments must be incorporated or which possession sorts. 

You’ll reply to the agent to provide it extra information:

Most effective manufacturing websites and handiest 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 an impressive aggregate of gear for construction your subsequent plugin concept. 

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

• It’s all the time higher to check the plugin out on a neighborhood WordPress set up first.
• Give the agent particular context about what you need and what options you need to paintings on
• Wreck advanced options into smaller steps with particular activates
• Should you’re no longer positive of one thing, you’ll ask the agent to provide an explanation for it to you.
• Discover ways to use code high quality gear and linters to assist the agent take a look at for coding mistakes.
• Get started easy, then take on extra advanced tasks as you get relaxed.

Should you construct one thing a laugh, percentage it with us within the feedback!