20 ChatGPT Prompts for WordPress Customization Without a Plugin

Introduction

Over the years, I have worked on many WordPress websites, and one thing I have learned is that you do not always need a plugin to solve a customization problem.

WordPress makes it very easy to install a plugin whenever you want to add a feature. Need a button? Install a plugin. Need a custom box? Install a plugin. Need an animation? Install a plugin. Need a table? Install a plugin.

But this approach can quickly make a website unnecessarily complicated.

I prefer to first ask myself a simple question:

Can I solve this with HTML, CSS, PHP, or a small amount of JavaScript instead?

In many cases, the answer is yes.

I also use ChatGPT extensively when working on WordPress customization. I do not simply ask ChatGPT to "make my website better." I give it a specific technical problem, explain the existing structure, provide the relevant HTML or CSS, and ask it to make a controlled modification.

That difference is important.

When I work this way, ChatGPT becomes much more useful as a development assistant. I can use it to generate CSS, troubleshoot layouts, create responsive designs, improve existing code, build animations, and explain why something is not working.

The important part is that I still review and test the code myself.

Why I Avoid Adding a Plugin for Every Small Customization

A plugin is not automatically bad.

There are many situations where a plugin is the correct solution. If I need complex functionality that would require substantial development work, a reputable plugin can save considerable time.

The problem starts when a website accumulates plugins simply because every small visual change is being handled through another plugin.

For a simple customization, I usually consider whether I can accomplish it using existing WordPress functionality and a small amount of code.

How I Use ChatGPT for WordPress Customization

I have found that the quality of the result depends heavily on how I write the prompt.

A vague prompt usually produces generic code.

For example, I would not simply tell ChatGPT:

That is not a useful development instruction.

Instead, I might explain the exact component, the existing structure, the desired design, the responsive behavior, and what must remain unchanged.

When I work this way, I can use ChatGPT as a much more controlled development assistant.

20 ChatGPT Prompts for WordPress Customization

01Create a Custom WordPress Button Without a Plugin

One of the simplest customizations I frequently make is a custom CTA button.

Instead of installing a button plugin, I can use an existing WordPress HTML block or add a button directly into a template.

My Prompt

This type of prompt gives ChatGPT enough information to create something specific.

I can then adjust the colors, border radius, spacing, and animation to match the website.

02Create a Futuristic Card Design

Cards are everywhere in modern WordPress websites. I use cards for services, blog posts, portfolio projects, features, and other content.

My Prompt

I particularly like this approach because small CSS effects can make an otherwise basic layout look significantly more polished.

The key is moderation. I do not want every element moving constantly. I prefer subtle animations that respond to user interaction.

03Make a WordPress Section Responsive

Responsive problems are extremely common when customizing WordPress websites. A layout that looks good on desktop can become unusable on a phone.

My Prompt

This is one of the prompts I use when I want ChatGPT to work within a very specific CSS boundary.

The phrase "modify only the CSS related to this section" is important. Without that instruction, an AI can sometimes suggest changes that affect unrelated elements.

04Add a Hover Animation to an Existing Image

I often do not need a plugin just to animate an image. CSS can handle a simple image hover effect.

My Prompt

This produces a simple effect without adding another dependency.

05Create an Animated Gradient Heading

A standard heading can also be customized using CSS.

My Prompt

This is useful for hero sections, landing pages, and important calls to action.

06Create a Modern Author Box

For an article website, an author box can improve the presentation of the page.

My Prompt

For personal-brand websites, I find this particularly useful because the author's expertise becomes part of the page design rather than just plain text.

07Create a Premium Blog Card

A basic blog loop can look very plain. I can use CSS to turn it into a more polished content card.

My Prompt

This is very close to the type of work I do when improving an existing WordPress design.

The last instruction is particularly important when a website has different blog components on different pages.

08Create a Responsive Table Without a Plugin

Tables are another area where I often prefer custom CSS.

My Prompt

For larger datasets, I may still use a dedicated table solution. But for a simple table, HTML and CSS are often enough.

09Create a Custom FAQ Design

A simple FAQ section does not necessarily require a plugin.

My Prompt

The native details and summary elements can be particularly useful here because they provide expandable content without requiring a JavaScript library.

10Create a Futuristic CTA Section

A CTA does not have to be a plain colored box.

My Prompt

This is one of my favorite ways to improve a page without adding unnecessary functionality.

Gradients, shadows, pseudo-elements, and transitions can create surprisingly sophisticated designs.

11Create a Sticky Table of Contents

A table of contents can be useful on long articles.

My Prompt

This is a case where I first inspect how the existing TOC is generated. If the HTML already exists, CSS may be all that is required for the visual design.

12Improve a WordPress Navigation Menu on Mobile

Mobile navigation is an area where small CSS mistakes can cause major usability problems.

My Prompt

This type of prompt requires more context than simply asking for a "mobile menu." I tell ChatGPT exactly what should happen when the menu opens.

13Add a Reading Progress Bar

A reading progress indicator can be useful on long articles. For this feature, CSS alone may not be enough if I want the bar to dynamically track the reading position.

My Prompt

This is an example where I would use JavaScript rather than forcing everything into CSS. The goal is not to never use JavaScript. The goal is to avoid installing a plugin when a small, controlled piece of code is sufficient.

14Create an Animated Section Divider

A page can become visually repetitive when every section looks identical.

My Prompt

This is a small customization, but these details can help create a consistent visual language across a website.

15Create a Custom Pricing Card

Pricing cards are another common WordPress design requirement.

My Prompt

The important part is giving ChatGPT the layout rules before asking for the visual styling.

16Create a Custom Portfolio Grid

For my own work, portfolio presentation is important.

My Prompt

This gives me a foundation that I can adapt to my actual projects. I can also tell ChatGPT to preserve an existing HTML structure if the portfolio is already implemented.

17Fix CSS Without Changing the Existing Design

This is one of the most important prompts I use.

Sometimes I do not want a redesign. I simply want something fixed.

My Prompt

This kind of prompt is extremely useful when working on a live website.

When I have a large stylesheet, I want ChatGPT to behave like a controlled code editor rather than rewrite everything.

18Improve CSS Without Changing the HTML

Sometimes the HTML structure is already correct.

My Prompt

This allows me to improve an existing component without rebuilding it.

19Create a Dark Futuristic Section

Dark sections can create contrast between areas of a page.

My Prompt

I prefer using dark navy instead of pure black because it gives me more flexibility with text and accent colors.

The subtle background effects should remain secondary to the content.

20Ask ChatGPT to Audit Existing CSS Before Changing It

This is probably one of the most useful prompts in my workflow.

Before making a major change, I want to understand what is already there.

My Prompt

I use this approach because blindly replacing CSS can create new problems.

When a website already has hundreds or thousands of lines of CSS, understanding the existing structure first is much safer.

My Most Important Rule When Using ChatGPT for WordPress

I do not give ChatGPT unlimited freedom when modifying an existing website.

I give it boundaries.

For example, I might say:

• Change only `.blog-card`.
• Do not modify the homepage.
• Keep all existing CSS.
• Do not change the HTML.
• Mobile only.

These instructions significantly reduce the possibility of an unrelated part of the website being changed.

Using HTML and CSS for Animation

I also use ChatGPT to create animations, but I try not to overdo them.

Some of my preferred effects include:

Hover Elevation

A card moves upward slightly when the cursor moves over it.

Image Zoom

The featured image scales slightly while remaining inside its container.

Gradient Movement

A gradient slowly moves across an element.

Glowing Accent

A small shadow or pseudo-element creates a subtle glow.

Animated Underline

A line expands when the user hovers over a link.

Arrow Movement

A right arrow moves a few pixels when the user hovers over the link.

These effects can be created with CSS transitions and pseudo-elements without requiring an animation plugin.

A Prompt I Use When I Want Better CSS

Sometimes ChatGPT produces functional CSS but the result still looks generic. In that situation, I refine the prompt.

That usually gives me a much better starting point.

The important phrase is "restrained animation." A futuristic website does not need everything glowing, rotating, and moving.

ChatGPT Does Not Replace Testing

This is something I always keep in mind.

ChatGPT can generate excellent code, but I do not blindly copy code into a production WordPress website and assume everything is perfect.

I test it.

• Desktop
• Laptop
• Tablet
• Mobile
• Different screen widths
• Chrome and other browsers when necessary
• Page speed
• Layout shifts
• Hover behavior
• Keyboard navigation
• Existing JavaScript
• WordPress caching
• CSS conflicts

This is particularly important when modifying an existing website.

A CSS change can look perfect at 1920px and completely break at 375px.

How I Ask ChatGPT to Preserve Existing CSS

When I give ChatGPT a complete stylesheet, I make the instruction very explicit.

This is much safer than simply saying, "Make my CSS better."

The second prompt gives the AI too much freedom. The first prompt defines the task.

When I Would Still Use a Plugin

I am not against plugins.

There are situations where using a plugin makes sense.

If I need a complex feature involving authentication, membership management, advanced forms, payment processing, complex ecommerce functionality, sophisticated search, advanced database functionality, or large-scale automation, I would evaluate a dedicated solution rather than trying to reinvent everything with CSS and a few lines of code.

The point is not to eliminate plugins.

The point is to avoid using a plugin when a small customization can solve the problem cleanly.

My WordPress + ChatGPT Workflow

My workflow is generally straightforward.

Step 1: Identify the Problem

I first define exactly what needs to change.

For example:

That is much better than saying:

Step 2: Find the Relevant Code

I identify the HTML structure and CSS selectors controlling the component.

Step 3: Give ChatGPT the Relevant Context

I provide the relevant HTML, CSS, screenshot, or error message.

Step 4: Define What Must Not Change

This is something I consider extremely important. I tell ChatGPT what should remain untouched.

Step 5: Generate the CSS or Code

I ask for the smallest practical modification.

Step 6: Test It

I test the change locally or on a staging environment before treating it as finished.

Step 7: Refine the Design

Once the functionality works, I ask ChatGPT to improve spacing, typography, animation, responsiveness, or visual hierarchy.

This separates functionality from design refinement.

Final Thoughts

I have found ChatGPT extremely useful for WordPress customization, especially when I combine it with my own understanding of HTML, CSS, WordPress structure, and SEO.

The biggest mistake is treating ChatGPT like a magic button where I simply say, "Build me a website."

That can produce something, but it does not give me the level of control I want.

I get much better results when I treat ChatGPT as a development assistant.

I give it the existing code. I explain the exact problem. I define the boundaries. I tell it what should remain unchanged. Then I review and test the result.

For many smaller WordPress design improvements, I can avoid installing another plugin and instead use HTML, CSS, and occasionally lightweight JavaScript.

That gives me more control over the final design and, in many cases, keeps the implementation simpler.