Welcome to EasyCodingWithAI!

Before you dive into coding with AI, take a moment to consider some valuable insights. Our articles cover the pros and cons of using AI in development, the importance of having a development environment, and how AI empowers hobbyists and small businesses:

Post Icon

Tutorial : How to Use AI Prompts to Write Code.

Posted by Richard Robins on October 26, 2024 - Last modified on October 30, 2024.

Using AI to design a website or develop a WordPress plugin is a powerful way to speed up the process, especially if you’re new to coding or just need a quick jumpstart.

With the right prompts, you can guide AI step-by-step, ask it to fix issues and expand your project’s scope without leaving your conversation. Below is a walkthrough of how you might use ChatGPT prompts to create a basic website and WordPress plugin, complete with follow-up prompts to refine and troubleshoot.

Step 1: Basic Website Structure

Starting with the basic HTML structure for a landing page:

Prompt:

Create a simple HTML structure for a landing page with a header that says “Welcome to My Site,” a section to list three services, and a contact form. Include basic CSS for styling.

Output:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
<style>
    body {
          font-family: Arial, sans-serif;
          margin: 0;
          padding: 0;
    }
    header {
           background-color: #f8f9fa;
           padding: 20px;
           text-align: center;
    }
    section {
           padding: 20px;
    }
    .services, .contact {
           margin: 20px 0;
    }
    .service-item {
           margin: 10px 0;
    }
</style>

</head>
<body>
    <header>
        <h1>Welcome to My Site</h1>
    </header>
    <section class="services">
        <h2>Our Services</h2>
        <div class="service-item">Service 1</div>
        <div class="service-item">Service 2</div>
        <div class="service-item">Service 3</div>
    </section>
    <section class="contact">
        <h2>Contact Us</h2>
        <form>
            <label for="name">Name:</label><br>
            <input type="text" id="name" name="name"><br><br>
            <label for="email">Email:</label><br>
            <input type="email" id="email" name="email"><br><br>
            <input type="submit" value="Submit">
        </form>
    </section>
</body>
</html>

Step 2: Adding Background Colors and Centered Text

Prompt:

Adjust the CSS to add background colors for each section: light blue for the header, light gray for the services, and light green for the contact form. Center all text.

Output:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    header {
        background-color: #add8e6;
        padding: 20px;
    }
    section {
        padding: 20px;
    }
    .services {
        background-color: #d3d3d3;
    }
    .contact {
        background-color: #90ee90;
    }
    .service-item {
        margin: 10px 0;
    }
</style>

</head>
<body>
    <header>
        <h1>Welcome to My Site</h1>
    </header>
    <section class="services">
        <h2>Our Services</h2>
        <div class="service-item">Service 1</div>
        <div class="service-item">Service 2</div>
        <div class="service-item">Service 3</div>
    </section>
    <section class="contact">
        <h2>Contact Us</h2>
        <form>
            <label for="name">Name:</label><br>
            <input type="text" id="name" name="name"><br><br>
            <label for="email">Email:</label><br>
            <input type="email" id="email" name="email"><br><br>
            <input type="submit" value="Submit">
        </form>
    </section>
</body>
</html>

Final Product After Step 2:

Your website now has a light blue header, light gray service section, and light green contact section with all text centered, making it more visually appealing and organized.

Step 3: Adding a Footer with Social Media Icons

Prompt:

Add a footer section at the bottom with social media icons for Facebook, Twitter, and Instagram, each linking to a placeholder URL. Style them as round icons and center them in the footer.

Output:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    header {
        background-color: #add8e6;
        padding: 20px;
    }
    section {
        padding: 20px;
    }
    .services {
        background-color: #d3d3d3;
    }
    .contact {
        background-color: #90ee90;
    }
    .service-item {
        margin: 10px 0;
    }
    footer {
        background-color: #333;
        color: #fff;
        padding: 20px;
        text-align: center;
    }
    .social-icons a {
        color: #fff;
        text-decoration: none;
        margin: 0 10px;
    }
</style>

</head>
<body>
    <header>
        <h1>Welcome to My Site</h1>
    </header>
    <section class="services">
        <h2>Our Services</h2>
        <div class="service-item">Service 1</div>
        <div class="service-item">Service 2</div>
        <div class="service-item">Service 3</div>
    </section>
    <section class="contact">
        <h2>Contact Us</h2>
        <form>
            <label for="name">Name:</label><br>
            <input type="text" id="name" name="name"><br><br>
            <label for="email">Email:</label><br>
            <input type="email" id="email" name="email"><br><br>
            <input type="submit" value="Submit">
        </form>
    </section>
    <footer>
    <div class="social-icons">
        <a href="https://facebook.com" target="_blank">Facebook</a> |
        <a href="https://twitter.com" target="_blank">Twitter</a> |
        <a href="https://instagram.com" target="_blank">Instagram</a>
    </div>
</footer>
</body>
</html>

Step 4: Basic WordPress Plugin Structure

Prompt:

Create a basic WordPress plugin that displays a “Welcome to My Site” message to logged-in users at the top of each page. Include all necessary PHP code for the plugin.

Output:

<?php
/*
Plugin Name: Welcome Message for Logged-in Users
Description: Displays a welcome message for logged-in users at the top of each page.
Version: 1.0
Author: Your Name
*/

function display_welcome_message() {
    if (is_user_logged_in()) {
        echo '<div style="background-color: #add8e6; padding: 10px; text-align: center;">Welcome to My Site</div>';
    }
}
add_action('wp_head', 'display_welcome_message');
?>

Final Product After Step 4:

This plugin displays a welcome message at the top of each page, visible only to logged-in users.

Step 5: Debugging Plugin Issues

If the message isn’t displaying correctly, you might need to troubleshoot by adjusting the hook or CSS.

Prompt:

The welcome message isn’t displaying at the top of the page. Can you check the code and ensure it’s hooked correctly to display in the right location?

Suggested Fix:

Sometimes, switching from wp_head to wp_body_open or using CSS for better positioning can improve functionality.


add_action('wp_body_open', 'display_welcome_message');

Step 6: Adding a Custom Message in the Admin Settings Page

Prompt:

Add an admin settings page for the plugin where I can change the “Welcome to My Site” message. Make sure this new message appears at the top of each page for logged-in users.

Output:


<?php
/*
Plugin Name: Welcome Message for Logged-in Users
Description: Displays a welcome message for logged-in users at the top of each page.
Version: 1.0
Author: Your Name
*/
function welcome_message_menu() {
    add_options_page('Welcome Message Settings', 'Welcome Message', 'manage_options', 'welcome-message', 'welcome_message_settings_page');
}
add_action('admin_menu', 'welcome_message_menu');

function welcome_message_settings_page() {
    ?>
    <div class="wrap">
        <h1>Welcome Message Settings</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('welcome_message_settings');
            do_settings_sections('welcome_message');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

function welcome_message_settings_init() {
    register_setting('welcome_message_settings', 'welcome_message_text');
    add_settings_section('welcome_message_section', '', null, 'welcome_message');
    add_settings_field('welcome_message_text', 'Welcome Message Text', 'welcome_message_text_render', 'welcome_message', 'welcome_message_section');
}
add_action('admin_init', 'welcome_message_settings_init');

function welcome_message_text_render() {
    $message = get_option('welcome_message_text', 'Welcome to My Site');
    ?>
    <input type="text" name="welcome_message_text" value="<?php echo esc_attr($message); ?>">
    <?php
}

function display_custom_welcome_message() {
    if (is_user_logged_in()) {
        $message = get_option('welcome_message_text', 'Welcome to My Site');
        echo '<div style="background-color: #add8e6; padding: 10px; text-align: center;">' . esc_html($message) . '</div>';
    }
}
add_action('wp_body_open', 'display_custom_welcome_message');

Final Product After Step 6:

Now, the plugin has an admin page where you can set a custom message. This message will display at the top of each page for logged-in users, adding flexibility and user control.

Wrapping Up

Using AI prompts to build a website or WordPress plugin is a fantastic way to speed up development, troubleshoot issues, and learn best practices. By starting with a base prompt and iterating with follow-up prompts, you can achieve a polished, functional project in less time.

If you’re new to coding and want to get more comfortable with HTML, CSS, PHP, or JavaScript, check out these learning resources to build your knowledge and make the most out of AI’s assistance:

Richard Robins

Richard Robins

Richard is passionate about sharing how AI resources such as ChatGPT and Microsoft Copilot can be used to create addons and write code, saving small website owners time and money, freeing them to focus on making their site a success.


Disclaimer

The coding tips and guides provided on this website are intended for informational and educational purposes only. While we strive to offer accurate and helpful content, these tips are meant as a starting point for your own coding projects and should not be considered professional advice.

We do not guarantee the effectiveness, security, or safety of any code or techniques discussed on this site. Implementing these tips is done at your own risk, and we encourage you to thoroughly test and evaluate any code before deploying it on your own website or application.

By using this site, you acknowledge that we are not responsible for any issues, damages, or losses that may arise from your use of the information provided herein.