WordPress News and Tips
best wordpress website design examples, award winning websites reviews
How to build a WordPress plugin with AI (Cursor + WordPress Studio)
Earlier this year, we showed you how to use Claude Code with WordPress Studio to build your next plugin idea. While Claude Code is a great option, if you’re not comfortable using the terminal, installing and using it may be a bit daunting.
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.
What you’ll need
Cursor (free Hobby plan)
WordPress Studio (free, open source)
About 15 minutes
No prior coding experience required
1. Install Cursor
Installing Cursor requires navigating to the downloads page and downloading the right installer for your operating system. Once downloaded,...
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.
What you’ll need
Cursor (free Hobby plan)
WordPress Studio (free, open source)
About 15 minutes
No prior coding experience required
1. Install Cursor
Installing Cursor requires navigating to the downloads page and downloading the right installer for your operating system. Once downloaded,...
https://wordpress.com/blog/2026/07/03/
Part 2 Of Mastering Flexbox: Creating Equal-Height Cards With Aligned Buttons
In Part 1 of our Mastering Flexbox in Divi 5 series, we explored the core settings in the Layout option group when using Flex as the Layout Style. Now it’s time to put those controls to work on one of the most common layout challenges in web design: building card sections where cards share a consistent height and buttons stay aligned, even when content lengths vary.
This hands-on guide will show you how to create balanced card layouts using native Divi 5 Flexbox controls. By the end, you’ll understand how to combine parent-level stretching, internal card spacing, and Grow to Fill sizing to build feature cards, testimonials, pricing tables, blog cards, gallery cards, and more.
Let’s dive in.
Why Equal Height Cards Matter
Cards are one of the most common design patterns on modern websites. You’ll find them in feature sections, testimonial rows, pricing tables, blog grids, product showcases, service lists, and many other layouts.
The challenge starts when content lengths vary. One card may have a short headline and two lines of text, while another has a longer heading, a longer description, or a larger feature list. Without the right layout structure, some cards become taller than others, buttons sit at different heights, and the whole section feels uneven.
Key Benefits Of Equal Height Cards
Visual Harmony: Cards feel polished, intentional, and easier to...
This hands-on guide will show you how to create balanced card layouts using native Divi 5 Flexbox controls. By the end, you’ll understand how to combine parent-level stretching, internal card spacing, and Grow to Fill sizing to build feature cards, testimonials, pricing tables, blog cards, gallery cards, and more.
Let’s dive in.
Why Equal Height Cards Matter
Cards are one of the most common design patterns on modern websites. You’ll find them in feature sections, testimonial rows, pricing tables, blog grids, product showcases, service lists, and many other layouts.
The challenge starts when content lengths vary. One card may have a short headline and two lines of text, while another has a longer heading, a longer description, or a larger feature list. Without the right layout structure, some cards become taller than others, buttons sit at different heights, and the whole section feels uneven.
Key Benefits Of Equal Height Cards
Visual Harmony: Cards feel polished, intentional, and easier to...
https://www.elegantthemes.com/blog/div
Part 1 Of Mastering Flexbox: Understanding The Core Controls In Divi 5
One of the most valuable improvements in Divi 5 is its native Flexbox support. It gives you clean, visual control over layout structure directly inside the Visual Builder, reducing the need for custom CSS, duplicated sections, or manual spacing workarounds.
This is the first part of our Mastering Flexbox series. Throughout the series, we’ll introduce Flexbox in Divi 5, explore its settings in detail, and show how different controls work together to create functional, responsive designs. In Part 2, we’ll show you how to create equal-height cards with aligned buttons.
In this first part, we’ll focus on the settings available in the Layout option group when Flex is selected. These controls affect how child elements flow, wrap, align, and distribute space inside a parent container, making them some of the most important layout tools you’ll use in Divi 5.
Let’s dive in.
What Is Flexbox In Divi 5?
Flexbox (Flexible Box Layout) is a CSS layout model designed to arrange, align, and distribute space between items inside a container, even when those items have different or dynamic sizes.
Before Divi 5, creating balanced layouts in Divi often meant relying on the traditional section > row > column structure, then fine-tuning spacing with margin, padding, or custom CSS. That approach worked, but it could make responsive alignment harder to manage across...
This is the first part of our Mastering Flexbox series. Throughout the series, we’ll introduce Flexbox in Divi 5, explore its settings in detail, and show how different controls work together to create functional, responsive designs. In Part 2, we’ll show you how to create equal-height cards with aligned buttons.
In this first part, we’ll focus on the settings available in the Layout option group when Flex is selected. These controls affect how child elements flow, wrap, align, and distribute space inside a parent container, making them some of the most important layout tools you’ll use in Divi 5.
Let’s dive in.
What Is Flexbox In Divi 5?
Flexbox (Flexible Box Layout) is a CSS layout model designed to arrange, align, and distribute space between items inside a container, even when those items have different or dynamic sizes.
Before Divi 5, creating balanced layouts in Divi often meant relying on the traditional section > row > column structure, then fine-tuning spacing with margin, padding, or custom CSS. That approach worked, but it could make responsive alignment harder to manage across...
https://www.elegantthemes.com/blog/div
Global Typography System For Divi 5 (Free Download!)
Divi 5 gives you more control over reusable design systems, especially when you pair global variables with presets and consistent typography rules. In this free pack, you’ll get a complete Global Typography System for Divi 5 with two setup options: a Fixed Scale system and a Fluid Scale system.
Both are based on Divi 5’s Variable Generator and use Option Group Presets for headings, text, buttons, and fields, making it easier to create consistent typography across an entire website.
Preview
Here’s a quick look at the Global Typography System included in the pack. The download is further down the post.
Download The Global Typography System For Divi 5
Get the Fixed Scale and Fluid Scale typography systems for free. Import the files into Divi 5, apply the variables and presets, and use the included layouts as typography references for your next project.
Download the Files
.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left ....
Both are based on Divi 5’s Variable Generator and use Option Group Presets for headings, text, buttons, and fields, making it easier to create consistent typography across an entire website.
Preview
Here’s a quick look at the Global Typography System included in the pack. The download is further down the post.
Download The Global Typography System For Divi 5
Get the Fixed Scale and Fluid Scale typography systems for free. Import the files into Divi 5, apply the variables and presets, and use the included layouts as typography references for your next project.
Download the Files
.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left ....
https://www.elegantthemes.com/blog/div
Exploring Divi 5’s New Contact Form 7 Module
Contact Form 7 is one of the most widely used form plugins in WordPress, but styling those forms inside a Divi layout has not always been straightforward. The form logic lives in Contact Form 7, while the design usually depends on theme styles or custom CSS.
Divi 5 closes that gap with the new Contact Form 7 Styler module. You can keep building and managing forms in Contact Form 7, then display and style those forms visually inside the Divi Builder.
That means your existing CF7 forms can use Divi’s design system: field styling, labels, placeholders, buttons, messages, focus states, checked states, Design Variables, and Presets.
What Is Contact Form 7?
Contact Form 7 is a long-running WordPress form plugin with more than 10 million active installations. It gives site owners a lightweight way to create contact forms, place them with a block or shortcode, and manage submission behavior from the WordPress dashboard.
You create the form structure inside Contact Form 7. That includes fields, labels, mail settings, validation messages, and integrations such as spam protection or third-party services when configured.
The plugin is popular because it is flexible, familiar, and widely supported. Many WordPress sites already use it, which makes rebuilding every form in another form module unnecessary for many redesign projects.
Why Contact Form 7 Styling Can Be Difficult In Divi...
Divi 5 closes that gap with the new Contact Form 7 Styler module. You can keep building and managing forms in Contact Form 7, then display and style those forms visually inside the Divi Builder.
That means your existing CF7 forms can use Divi’s design system: field styling, labels, placeholders, buttons, messages, focus states, checked states, Design Variables, and Presets.
What Is Contact Form 7?
Contact Form 7 is a long-running WordPress form plugin with more than 10 million active installations. It gives site owners a lightweight way to create contact forms, place them with a block or shortcode, and manage submission behavior from the WordPress dashboard.
You create the form structure inside Contact Form 7. That includes fields, labels, mail settings, validation messages, and integrations such as spam protection or third-party services when configured.
The plugin is popular because it is flexible, familiar, and widely supported. Many WordPress sites already use it, which makes rebuilding every form in another form module unnecessary for many redesign projects.
Why Contact Form 7 Styling Can Be Difficult In Divi...
https://www.elegantthemes.com/blog/div
How To Style Forms In Divi 5 (New Field Options)
A well-designed form needs more than a background color and a font size. The field text, labels, placeholders, buttons, checkboxes, radio buttons, focus states, and checked states all need to feel like part of the same design system.
Divi 5 makes that easier with new form styling options. Instead of relying on one broad field style, you now get dedicated controls for different field types, along with Focus and Checked editing modes and preset support.
In this post, we’ll walk through the new form field options, show how to style inputs, checkboxes, and radio buttons, and explain how to save those styles as presets so you can reuse them across your site.
What Changed With Form Fields In Divi 5
Divi’s older form styling workflow relied on one broader Field group for many form controls. That made it harder to style each field type on its own terms. Label controls were not always consistent, background options were more limited, and styling one form module did not always feel the same as styling another.
Divi 5 improves that structure by splitting form design into dedicated Input, Checkbox, and Radio option groups. Those groups are shared across Divi’s form-based modules, including Contact Forms, Email Optins, Login forms, Comments, WooCommerce forms, and the new Contact Form 7 module.
That consistency is what makes the new state editing modes more useful. Focus and Checked work...
Divi 5 makes that easier with new form styling options. Instead of relying on one broad field style, you now get dedicated controls for different field types, along with Focus and Checked editing modes and preset support.
In this post, we’ll walk through the new form field options, show how to style inputs, checkboxes, and radio buttons, and explain how to save those styles as presets so you can reuse them across your site.
What Changed With Form Fields In Divi 5
Divi’s older form styling workflow relied on one broader Field group for many form controls. That made it harder to style each field type on its own terms. Label controls were not always consistent, background options were more limited, and styling one form module did not always feel the same as styling another.
Divi 5 improves that structure by splitting form design into dedicated Input, Checkbox, and Radio option groups. Those groups are shared across Divi’s form-based modules, including Contact Forms, Email Optins, Login forms, Comments, WooCommerce forms, and the new Contact Form 7 module.
That consistency is what makes the new state editing modes more useful. Focus and Checked work...
https://www.elegantthemes.com/blog/div
Introducing Feature Clips: Turn Posts Into Social-ready Video
Your words deserve more than one place to land.
A great post can reach readers on your site and viewers on the platforms where short-form video thrives, including Instagram Reels, TikTok, and YouTube Shorts. Until now, doing both usually meant opening another tool, learning video editing, or getting in front of a camera.
Feature Clips is an experimental preview that helps you create a short vertical video from a post or page directly in the WordPress editor.
Your post remains the full story. A Feature Clip gives you a simple way to introduce that story to people scrolling through social feeds, without adding another production workflow to your day.
From post to video, right in the editor
Feature Clips creates vertical 9:16 videos designed for Reels, Shorts, and TikTok.
Here’s how it works:
Write your post or page as usual. Feature Clips uses your content to understand what the video should be about. If you have set content guidelines for your site, they are incorporated into the generation too.
Open the Feature Clip panel. In the editor sidebar, select “Generate clip” to open the prompt window.
Choose a direction. Select one of the suggested prompts or write your own to guide the look and feel of the clip.
Choose between two styles: Cinematic creates an eight-second mood clip from a prompt, while Highlights builds a 20-second recap using your...
A great post can reach readers on your site and viewers on the platforms where short-form video thrives, including Instagram Reels, TikTok, and YouTube Shorts. Until now, doing both usually meant opening another tool, learning video editing, or getting in front of a camera.
Feature Clips is an experimental preview that helps you create a short vertical video from a post or page directly in the WordPress editor.
Your post remains the full story. A Feature Clip gives you a simple way to introduce that story to people scrolling through social feeds, without adding another production workflow to your day.
From post to video, right in the editor
Feature Clips creates vertical 9:16 videos designed for Reels, Shorts, and TikTok.
Here’s how it works:
Write your post or page as usual. Feature Clips uses your content to understand what the video should be about. If you have set content guidelines for your site, they are incorporated into the generation too.
Open the Feature Clip panel. In the editor sidebar, select “Generate clip” to open the prompt window.
Choose a direction. Select one of the suggested prompts or write your own to guide the look and feel of the clip.
Choose between two styles: Cinematic creates an eight-second mood clip from a prompt, while Highlights builds a 20-second recap using your...
https://wordpress.com/blog/2026/06/26/
Customize Your Newsletter Subscription Experience
If you run a newsletter, no moment matters more than the one where a reader decides to subscribe. You’ve got a few seconds to make your case before they click away.
Now, you can customize what readers see at that moment: add a welcome message in your own words, describe what each tier offers, and choose whether to offer a free plan alongside your paid newsletter.
Welcome new subscribers
When your Subscribe block uses the Button only style, clicking the button opens a pop-up with a heading above the email field. Use that space to give readers one more reason to sign up.
In your Newsletter settings, set the Subscribe modal heading to whatever you like, or leave it blank to keep the default.
Tell readers what they get
When someone is deciding whether to pay for your newsletter, they want to know what they’re actually getting.
Add a description to your free and paid tiers to explain why a paid plan is worth it. Descriptions support multiple lines and bullet points, so you can lay out what’s included in a clear way.
To add descriptions, open Jetpack → Monetize in your sidebar and click the Payment Settings tab. Edit any paid plan to add its description. For the free tier, find it in your list of payment plans, click the three dots, and choose Edit.
Show only the plans you want
If you run a paid...
Now, you can customize what readers see at that moment: add a welcome message in your own words, describe what each tier offers, and choose whether to offer a free plan alongside your paid newsletter.
Welcome new subscribers
When your Subscribe block uses the Button only style, clicking the button opens a pop-up with a heading above the email field. Use that space to give readers one more reason to sign up.
In your Newsletter settings, set the Subscribe modal heading to whatever you like, or leave it blank to keep the default.
Tell readers what they get
When someone is deciding whether to pay for your newsletter, they want to know what they’re actually getting.
Add a description to your free and paid tiers to explain why a paid plan is worth it. Descriptions support multiple lines and bullet points, so you can lay out what’s included in a clear way.
To add descriptions, open Jetpack → Monetize in your sidebar and click the Payment Settings tab. Edit any paid plan to add its description. For the free tier, find it in your list of payment plans, click the three dots, and choose Edit.
Show only the plans you want
If you run a paid...
https://wordpress.com/blog/2026/06/26/
