CMS and WordPress Basics, online ready to use tools

Introduction: AI and WordPress

This module bridges two worlds: WordPress – the world's most widely used Content Management System (CMS) – and AI-powered development – using machine learning tools to generate, optimize, and debug code. The goal is to combine the simplicity of a CMS with the speed of AI to build websites faster and with fewer errors.

WordPress — A Content Management System

A Content Management System (CMS) is software that lets users create, manage, and modify website content without needing technical expertise. WordPress is the dominant CMS because it:

• Simplifies website creation (no manual HTML/CSS required for basic pages)
• Offers a huge ecosystem of themes and plugins
• Is used by individuals, small businesses, and large enterprises alike

This module covers only the basics of WordPress – enough to understand how it fits into a developer's toolkit.

AI-Powered Development

Over the previous modules you built websites from scratch using HTML, CSS, and JavaScript. AI tools now let you do the same work faster and more efficiently by:

• Generating layouts – AI can produce HTML/CSS structures from a description
• Improving styling – suggest CSS refinements or responsive adjustments
• Automating JavaScript functions – write and debug common scripts
• Suggesting best practices – optimise code style, accessibility, performance

The core insight: AI does not replace the need to understand code, but it handles repetitive tasks and catches mistakes, freeing you to focus on architecture and design.

Key takeaways

• WordPress is a CMS that lowers the barrier to building websites.
• AI tools can write, optimise, and enhance code across HTML, CSS, and JavaScript.
• This module combines both: learn WordPress basics and practise using AI to speed up web development.
• The skills from earlier modules (manual coding) are still essential – AI is an accelerator, not a crutch.

Introduction to WordPress

WordPress is the world’s most widely used content management system (CMS), powering over 40% of all websites. It enables building websites without manual coding (HTML, CSS, JavaScript) through a drag‑and‑drop interface, making development faster, easier, and accessible to non‑developers.

Why Use WordPress?

• Free & open source – anyone can download, use, and modify it.
• Highly customizable – thousands of themes and plugins available.
• User‑friendly – no coding knowledge required; intuitive admin interface.
• CMS‑driven – content is managed via posts (dynamic, blog‑like) and pages (static).

WordPress.org vs WordPress.com

Exam tip: For a free, low‑commitment start to learn WordPress, use WordPress.com. For a production site with complete freedom, use self‑hosted WordPress.org.

Getting Started with WordPress.com

1. Sign up at wordpress.com – create an account.
2. Choose a domain – free subdomain (yoursite.wordpress.com) or a paid custom domain.
3. Select a theme – pick a starting design (can be changed later).
4. Set site title – e.g., “IIMB WordPress Demo”.
5. Launch – the site is live immediately.

Creating Pages and Posts

• Pages – for static content (Home, About, Contact).
  • Created from Pages → Add New.
  • Each page can be customized with blocks (text, images, forms, maps).
• Posts – for dynamic, time‑sensitive content (blogs, news).
  • Created from Posts → Add New.
  • Automatically show up on the designated Blog page (set under Settings → Reading).
• Navigation menus – add/remove links to pages, posts, or external URLs via the Navigation block on the editor.

Worked example (from the demo):

• Homepage: added a logo, updated text “Welcome to the WordPress demo website”, linked a button.
• About page: created with simple title and paragraph.
• Contact page: added a contact form and a Google Maps block.
• Blog page: displayed posts in a three‑column grid.

Customizing Appearance

• Themes – change the entire look via Appearance → Themes.
  • Content remains intact when switching themes.
  • Recommended: finalize a theme before building content.
• Styles – adjust colors, fonts, typography globally via the Styles panel.
• Header & Footer – remain constant across all pages; editable in the template editor.
• Blocks – drag‑and‑drop elements (images, buttons, galleries, maps, etc.) build pages without code.

Publishing and Maintenance

• Changes must be saved and published to reflect on the live site.
• After publishing, edits can be made anytime.
• Paid plans unlock: custom domain, removal of WordPress.com branding, plugins (SEO, security), custom emails, and advanced user roles.

Intuition: WordPress treats the homepage as a template (often called Home or Front Page), other pages inherit its header/footer, and posts are managed separately. This structure makes it easy to update navigation or design once and have it propagate everywhere.

Key Takeaways

• WordPress powers >40% of the web; it’s free, open‑source, and requires no coding.
• WordPress.org (self‑hosted) gives full control; WordPress.com (hosted) is simpler for beginners.
• Content is split into pages (static) and posts (dynamic, blog‑like).
• The block editor (drag‑and‑drop) allows inserting and customizing text, images, forms, maps, etc.
• Themes change the look without losing content; headers/footers are shared across pages.
• Menus and navigation are managed via the Navigation block and can link to pages, posts, or external URLs.
• Start with a free WordPress.com site to explore; move to self‑hosted for real‑world professional use.

Using AI & ChatGPT for Code Generation

Large Language Models (LLMs) like ChatGPT and Claude can generate, debug, and optimise code far faster than manual writing. The key to getting reliable, useful output is prompting — how you phrase your request. Knowing the basics of HTML, CSS, and JavaScript (covered in earlier modules) lets you guide the AI, evaluate its suggestions, and fix issues when the output is incomplete or wrong.

Why Prompting Matters

A vague prompt almost always yields unpredictable or broken code.

Key insight: The AI does not know your webpage, your element IDs, or your desired behaviour. The more context you provide, the more likely the generated code will work as is.

Anatomy of a Good Prompt

A high-quality prompt should include:

• What the code should do – e.g., “type out each character one by one, then delete characters one by one like a backspace”.
• Structure of your webpage – e.g., “I have an HTML file with a <p id=“animated-text”></p> element”.
• Constraints – e.g., “Don’t use jQuery”, “Only Vanilla JS”, “Use querySelector instead of getElementById”.
• Behaviours – e.g., “Pause 2 s after finishing a sentence”, “Loop infinitely”.
• Step-by-step breakdown – for complex tasks, break the request into smaller parts.

Step‑by‑Step Approach – Worked Example

A typewriter effect (from Module 7) illustrates the lesson: a single vague prompt can produce a script that may work, while a broken‑down, iterative process yields a clean, modular, debug‑friendly result.

1. Vague prompt → Unpredictable

Prompt: "Write me a text animation script for my website."

Output: A script that uses getElementById("animated-text") but does not supply the HTML. When pasted into an existing page without that element, nothing works. Adding the element (<p id="animated-text"></p>) might make it run, but the next time you ask, the AI might give a completely different animation (e.g., fade‑in instead of typing).

2. Specific prompt → Works better

Prompt: "Give me a JavaScript that creates a typing animation for these three sentences:
[‘Hello world’, ‘Welcome’, ‘Goodbye’]. Loop through them. After each sentence, pause 2 s,
then delete characters one by one at a faster rate. Use only Vanilla JS."

Output: A self-contained script with sentenceIndex, charIndex, a isDeleting flag, and recursive typeEffect function. Works out of the box.

3. Iterative refinement → Modular, re-usable

Even good output can be improved. Guide ChatGPT to:

• Replace a ternary operator with a clear if-else structure (for readability).
• Add comments.
• Switch from getElementById to querySelector (better practice).
• Add a blinking cursor.
• Wrap everything inside a DOMContentLoaded listener.
• Keep functions separate and call them from a startAnimation dispatcher.

Why this works: Because you know the basics (DOM, querySelector, event listeners, function scope), you can tell the AI exactly what changes to make.

The Role of Foundational Knowledge

You do not need to be an expert, but you must understand core concepts to:

• Guide the prompt – e.g., “Use querySelector because it’s more flexible”.
• Evaluate output – When ChatGPT suggests “use clearInterval for better control”, you can judge whether it’s truly needed (here, it was not).
• Debug errors – If the script references an element that doesn’t exist, you know to add it.
• Break down problems – AI works best on small, logical steps (just like you would write code manually).

Exam tip: The most common mistake is trusting AI output without testing. Always copy the generated code into your project and verify it works. If you don’t understand the code, ask the AI to explain it first.

Best Practices Summary

Key takeaways

• Vague prompts → random, often broken code. Specific prompts → reliable code.
• A good prompt includes: task, HTML structure, constraints, behaviours.
• Know the basics to guide the AI, evaluate its suggestions, and fix errors.
• Break complex requests into smaller, logical steps.
• Always test AI-generated code; iterate until it meets your exact needs.

Module Recap: Conclusion and Key Takeaways

The course laid a foundational web development skill set, starting from the fundamentals of how the internet works through the distinction between frontend and backend, then building practical competency in HTML, CSS, and JavaScript for creating interactive web pages. Finally, WordPress was introduced as a content management system (CMS) — a real-world tool for managing sites without deep code.

Core competencies acquired

• Internet fundamentals — request/response, client-server model, domain names.
• Frontend markup & styling — HTML for structure, CSS for layout and appearance.
• Interactivity — JavaScript for dynamic behaviour (DOM manipulation, events).
• CMS basics — WordPress as an “online-ready” tool for quickly building and managing content-driven sites.

Key takeaways

• The course built a strong, general base — not just syntax, but the mental model for solving web problems.
• This foundation opens doors to deeper specialisation: frontend frameworks, backend scripting, or full-stack development.
• The digital world evolves constantly; the skills learned are transferable — the goal is to keep learning, creating, and innovating.

Transition tip: Treat this module as a launchpad. The WordPress section, in particular, is a stepping stone to managing live sites or exploring e‑commerce, membership, and custom theme development.