Prompt Engineering for Web Dev

The Rise of Prompt Engineering in Web Development

In the rapidly evolving landscape of software development, the advent of large language models (LLMs) is poised to revolutionize the way code is written. The ability to effectively interact with these models through well-crafted prompts is becoming an indispensable skill for developers and non-developers alike. The power to generate code on demand is an incredibly valuable asset, and understanding the nuances of prompt engineering is key to unlocking its full potential.

Over the past couple of years, I’ve immersed myself in the world of AI-assisted code generation, witnessing firsthand the remarkable advancements in this field. What was once a nascent technology has matured significantly, especially in the last six months. While the specific tools and models may continue to evolve, the fundamental principles of interacting with AI prompts, such as those used by ChatGPT and Claude, remain constant.

This practice, now commonly referred to as ‘prompt engineering,’ involves a set of techniques and approaches that maximize the effectiveness of AI code generation. In this article, I’ll share some of the strategies I’ve found most useful when generating PHP, SASS, JS, and HTML code for WordPress sites. It is important to note that these concepts are not limited to WordPress; they can be readily applied to any other content management system (CMS) or development framework.

The Golden Rule: Input Dictates Output

The cornerstone of effective prompt engineering is a simple yet profound principle: the quality of the output is directly proportional to the quality of the input. When interacting with an AI, it’s crucial to remember that you’re not communicating with a human being. This may seem self-evident, but it’s a subtle yet critical distinction that often goes unnoticed.

Humans possess the ability to infer meaning, ask clarifying questions, and independently correct errors. AIs, on the other hand, lack this inherent understanding. They meticulously follow the instructions provided, and only those instructions. If you omit crucial information, the AI won’t magically fill in the gaps. It will simply generate code based on the incomplete instructions it receives.

When describing a coding task, you may unconsciously assume a basic understanding of certain concepts, particularly within the context of a specific platform like WordPress. These are details you might naturally exclude when communicating with another developer. However, when interacting with an AI, it’s essential to explicitly state every requirement, no matter how obvious it may seem.

Precision and Clarity: Cornerstones of Effective Prompts

To illustrate the importance of precision and clarity, let’s consider a hypothetical scenario. Imagine you want to create a custom WordPress function that displays a list of recent posts.

Instructions for a Human Developer:

‘Hey, could you write a quick function to show the latest few posts? Maybe display the title and date, and limit it to, say, five posts?’

A human developer would likely understand this request without further clarification. They would intuitively know to:

• Use the WordPress WP_Query class.
• Fetch posts in descending order of publication date.
• Format the date according to the site’s settings.
• Generate appropriate HTML markup.

Instructions for an AI:

‘Create a WordPress function in PHP that displays a list of the five most recent posts. Use the WP_Query class to fetch the posts. For each post, display the title as a level 3 heading (<h3>) and the publication date formatted as ‘Month Day, Year’ (e.g., ‘January 1, 2024’). Wrap the entire list in an unordered list (<ul>) with each post represented as a list item (<li>). The function should accept no arguments and should return the generated HTML as a string.’

Notice the level of detail in the instructions for the AI. We explicitly specify:

• The programming language (PHP).
• The WordPress class to use (WP_Query).
• The number of posts to display (five).
• The specific data to include (title and date).
• The desired date format (‘Month Day, Year’).
• The HTML elements to use (<h3>, <ul>, <li>).
• The function’s input (no arguments).
• The function’s output (a string containing the HTML).

This level of specificity is crucial for ensuring that the AI generates the desired code accurately.

Advanced Prompting Techniques: Going Beyond the Basics

While providing detailed instructions is fundamental, there are several advanced techniques that can further enhance the effectiveness of your prompts and refine the output from the AI.

Specifying Coding Style and Conventions

AIs are remarkably adaptable to different coding styles and conventions. If you have specific preferences for variable naming, indentation, or code formatting, you can, and should, include these preferences in your prompt. This ensures consistency with your existing codebase and personal style.

Example:

‘Write the function in PHP using WordPress coding standards. Use snake_case for variable names and four-space indentation.’

By explicitly stating these preferences, you guide the AI to produce code that integrates seamlessly with your project.

Providing Context and Background Information

For more complex tasks, providing the AI with additional context or background information can significantly improve the relevance and quality of the generated code. This context helps the AI understand the purpose and intended use of the code.

Example:

‘This function will be part of a plugin that enhances the site’s blog functionality. It should be designed to be easily customizable and extensible.’

This additional information informs the AI that the function is not a standalone piece but part of a larger system, encouraging it to consider factors like maintainability and scalability.

Leveraging Examples for Precise Output Guidance

One of the most powerful techniques is to provide the AI with examples of the desired output. This is particularly effective when dealing with specific formatting, layout requirements, or complex data structures. The AI can use the example as a template, mirroring its structure and style.

Example:

‘The HTML output should resemble the following structure: