|
Fortunately, there’s a popular AI coding editor called Cursor that offers a free tier you can try out. It’s been around since 2023, was pivotal in the explosion of the “vibe-coding” movement, and is still one of the most popular AI coding tools. |
This guide will walk you through installing Cursor and WordPress Studio to build your first AI-generated plugin. |
Why build WordPress plugins with AI |
AI coding tools let you describe a plugin in plain language and have a working version generated in minutes — no need to write PHP from scratch or learn the WordPress plugin API first. |
Paired with a free local WordPress environment, you can build, test, and refine a plugin entirely on your own machine before it ever touches a live site. This guide uses Cursor, a popular AI code editor, alongside WordPress Studio. |
- Cursor (free Hobby plan)
- WordPress Studio (free, open source)
- About 15 minutes
- No prior coding experience required
Installing Cursor requires navigating to the downloads page and downloading the right installer for your operating system. Once downloaded, run the installer and follow the installation instructions. |
The first time you open Cursor, you’ll be asked to sign up for a Cursor account to access the AI Agent features. Cursor offers a free Hobby plan which you can use to try it out for your first build. |
After you’ve signed up for an account, you’ll be redirected back to the Cursor application. Cursor might suggest some plugins to install, based on common requirements. You can skip this step and you’ll be taken to the screen where you can open your first project. |
2. Install WordPress Studio |
Next, you’ll need a local WordPress installation. You can download WordPress Studio, which is completely free and open source, and it runs on macOS, Windows, and Linux. |
As with Cursor, download the WordPress Studio installer, run it, and follow the on-screen instructions. |
With Studio running, you can create a new local WordPress site by clicking on the “Add site” button. Select “Build a new site” and then “Empty site”. In the Add a site screen, you can give it a custom name, but the default “My WordPress Website” is fine for your first site. |
After the site is created, click the Settings tab and note the Local Path value. This is the location of the WordPress files on your computer that you’ll need to open in Cursor. |
3. Open the local WordPress Studio in Cursor |
In Cursor, click on the “Open project” button, and navigate to the location of the WordPress files from the above step. |
You’ll end up with the WordPress files in one pane, and the Agent chat in the other. |
Since Cursor is a fork of the VS Code editor, if you have VS Code installed, you might find the Cursor layout inherits any specific layout settings from VS Code. |
4. Build your plugin with the Cursor agent |
In the Agent chat window, prompt your Cursor agent to build your first plugin. Give it some context and what you need: |
We are in the root of the WordPress site folder. Create a plugin that adds a Welcome dashboard widget. The widget should only show the heading “Welcome!”. |
Hit Enter or click the Submit button, and Cursor will check the environment, create the required plugin folder, and generate the complete plugin file. |
To review the generated code, click Review, or to accept the new plugin files, click Keep all. |
5. Activate the plugin and test it |
Go back to WordPress Studio and click WP Admin to open your WordPress admin. Navigate to Plugins, find your new plugin, and activate it. |
Once activated, navigate to the dashboard, and you’ll see the blank widget with the “Welcome!” heading. You can move it to a different placeholder if you prefer. |
6. Build your next big plugin idea |
From here, you can add more features. For this widget, you should display a different welcome message to each user, depending on their user role. |
Go back to Cursor, and ask it to create this for you. |
Update the Select Welcome Dashboard Widget plugin so that it displays a welcome message to the user based on their user role. Describe what activities the user can do on the site. |
As with any AI tool, experimenting with prompting will help you achieve better results. |
Connect Cursor to the WordPress.com MCP server |
You might be building this Welcome widget to install on your WordPress.com hosted sites. While each of these sites will have the default WordPress user roles (administrator, editor, author, contributor, and subscriber), you might have sites that have different roles. For example, a WooCommerce store will also have a Customer and Shop Manager role. |
You can connect your Cursor agent to WordPress.com by navigating to the Cursor plugin directory and searching for “WordPress.com”. |
Once you find the connector, click it, then click the “Add to Cursor” button. |
This will open the Cursor Settings screen with a prompt to install the MCP Server. Click Install, and the connector will be installed and configured. |
A new browser window will open to ask you to authorize the connection. Once you accept, the MCP server connection will be enabled. |
Now, you can ask your agent to interact with your WordPress.com account. |
Check my WordPress.com sites and see if there are any custom roles that I will need to consider to update this plugin so that it works on any of my WordPress.com sites. |
The Cursor agent will use the WordPress.com MCP connection to check your sites. It may ask clarifying questions like which site environments should be included or which ownership types. |
You can respond to the agent to give it more data: |
Only production sites and only sites I own |
Cursor will then use the connection to query all your sites, determine if any custom roles are in place, and update the plugin as needed. |
What plugin will you build next? |
Cursor + WordPress Studio + WordPress MCP is a powerful combination of tools for building your next plugin idea. |
Here are some tips when using AI to build plugins: |
- It’s always better to test the plugin out on a local WordPress installation first.
- Give the agent specific context about what you want and what features you want to work on
- Break complex features into smaller steps with specific prompts
- If you’re not sure of something, you can ask the agent to explain it to you.
- Learn to use code quality tools and linters to help the agent check for coding errors.
- Start simple, then tackle more complex projects as you get comfortable.
If you build something fun, share it with us in the comments! |
|
|
|
|
0 komentar:
Posting Komentar