WordPress Power Toolkit

HARNESS AI TO BUILD NEXT-LEVEL WEBSITES

Richard Mansfield

To comment go to liveBook

Manning

Shelter Island

For more information on this and other Manning titles go to

www.manning.com

Copyright

For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on these books when ordered in quantity.

For more information, please contact

Special Sales Department

Manning Publications Co.

20 Baldwin Road

PO Box 761

Shelter Island, NY 11964

Email: orders@manning.com

©2025 by Manning Publications Co. All rights reserved.

No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher.

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps.

♾ Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without the use of elemental chlorine.

The author and publisher have made every effort to ensure that the information in this book was correct at press time. The author and publisher do not assume and hereby disclaim any liability to any party for any loss, damage, or disruption caused by errors or omissions, whether such errors or omissions result from negligence, accident, or any other cause, or from any usage of the information herein.

Manning Publications Co.

20 Baldwin Road Technical

PO Box 761

Shelter Island, NY 11964

Development editor:

Ian Hough

Technical editor:

Jamie Bishop

Review editor:

Dunja Nikitović

Production editor:

Kathy Rossland

Copy editor:

Julie McNamee

Proofreader:

Jason Everett

Typesetter:

Tamara Švelić Sabljić

Cover designer:

Marija Tudor

ISBN: 9781633437746

dedication

For David Lee Roach

contents

Front matter

preface

acknowledgments

about this book

about the author

about the cover illustration

1   AI and WordPress dominate the internet

1.1   Why WordPress wins

1.2   Why use artificial intelligence

AI produces first-rate results

What can AI do for you?

You move from creator to curator

1.3   How to use artificial intelligence

1.4   Which AI system should you use?

Which system to use?

How I used AI in this book

1.5   Mastering AI prompting

Role

Job

Context

Format

Putting the elements of prompting together

Asking the right questions

How many words?

AI itself can improve your prompts

Inserting your role

Learning the Chain of Thought method

GPT o1 does chain of thought on its own

From the horse’s mouth

Can AI auto-prompt itself?

Generating HTML

Two prompting resources

1.6   A 13-step program: Creating a great website with WordPress

Choosing the best hosting service

Preplanning

Setting up the site structure

Writing in a conversational style

Choosing the right plugins

Site design basics

Advanced design

Fine-tuning design the easy way

Managing media

Setting up a blog page

Making money

Optimizing your site for AI and search engine ranking

Using analytics to build and keep your audience

Resources: Where to go from here

2   Starting a website

2.1   Choosing the right version of WordPress

2.2   Signing up with a first-rate hosting service

Choosing your domain name

Setting up a practice site

A hosting service checklist

2.3   Visiting your backend

2.4   Hiding your site while it’s under construction

Asking AI to leave your site alone

2.5   Saving your work

2.6   Ensuring site security

2.7   Automating backups

2.8   Managing site access

Understanding the various user roles

Monetizing via subscriptions

Password-protecting pages

3   Site-building preliminaries

3.1   Focusing your site

3.2   Specifying site goals

The 10 types of websites

Five questions to answer

A consultation with Claude AI

3.3   Create a hierarchy

Site structure: Parent and child pages

Ask AI to create your page hierarchy

AI can create an entire site for you

Using menu plugins

Making the menu brief, simple, and clear

Ask AI to simplify your menu

Menu alternatives

3.4   Avoiding long-scroll

3.5   Make good use of links

Links are valued by site visitors and designers alike

How to create the four types of hyperlinks

Using buttons as links

3.6   Managing your menu

Customizing your menu

Making child page menu links

4   AI-powered writing

4.1   Choosing the best typography

Understanding AI multimodality

Choosing the best font size

Selecting a typeface

Ten popular typefaces

A typography checklist

Getting AI’s objective opinion of your typography

4.2   Writing in the right style

Setting the tone

Transforming a stiff paragraph

Conjuring a simulacrum

Using the Hemingway app

4.3   Making a great first impression

Hooking visitors

Finding design inspiration using AI

Using Canva

A home page checklist

5   Adding functionality with plugins

5.1   Installing the essential plugins

Advanced Editor Tools

WP Rocket

5.2   Installing the best plugins

5.3   Turn on auto-updating

5.4   Avoid adding too many plugins

5.5   Preventing plugin conflicts

5.6   Adding Jetpack to your site

5.7   Dealing with the EU cookie law

5.8   Ensuring accessibility

5.9   Adding a sidebar

5.10   Creating your own plugins and widgets with AI

AI generates a widget

AI generates code

Modifying AI Code

6   AI-assisted site design basics

6.1   Choosing an appropriate theme

6.2   Use an up-to-date theme

6.3   Avoid installing multiple themes

6.4   Don’t modify theme code files

6.5   Take advantage of the Appearance > Customize screen

6.6   Consider the psychology of color

6.7   Pay attention to layout

Achieving balance without symmetry

Considering Mondrian’s classic balancing act

It went haywire

White space versus negative space

6.8   Using the rule of thirds

Mastering cropping to emphasize the focal point

Testing the rule of thirds in action

Asking AI for a decision

Considering some other design rules

6.9   Analyzing site design with AI

Trying a modern minimalist home page

GPT chooses the winner

Asking AI to improve a flawed design

7   Advanced design techniques

7.1   Creating a contemporary design

7.2   Understanding CSS styling

Exploring the role that HTML plays in page design

Looking at what CSS brings to HTML

Enter CSS

What is the cascade?

The order of the style sheets in the cascade

7.3   Using the Inspector

7.4   Mastering YellowPencil

Automatically generating CSS code

Understanding CSS animation

Try animating

Bringing in AI

7.5   Understanding CSS scope

7.6   Working with CSS classes

7.7   CSS in Gutenberg

7.8   Inpainting and outpainting

8   Mastering multimedia

8.1   Displaying the right amount of media

Testing page-load speed

8.2   Avoiding inappropriate images, audio, or video

8.3   Storing video on YouTube

How to upload a video to YouTube

Embedding your video in a page in your site

Embedding a YouTube video in your site

Modifying the video player

8.4   Using the right image sizes

8.5   Positioning media effectively

8.6   Providing accessibility

Why you should do it

Finding an accessible theme

8.7   Understanding permissions, attribution, and other legalities

Mastering paraphrasing

Further legal questions

Finding free media

8.8   Using the Gutenberg media blocks

9   Using AI when interacting with your audience

9.1   Blog defined: An overview

9.2   GPT to the rescue: How to write for your blog

9.3   Creating a custom GPT: AI-generated message titles

Creating your own GPTs: A use case

Modifying a custom GPT

Advanced custom GPT options

9.4   Using categories and tags

9.5   Hiding date stamps on blog posts

9.6   Vetting incoming messages

Vetting messages by hand

Using AI to vet incoming messages automatically

Parsing and judging posts

9.7   Using GPT’s custom instructions

9.8   Understanding memory in GPT version 4o and later

9.9   Promoting your blog

9.10 Harvesting email addresses

9.11 A fun AI IQ test

10   Making money online

10.1   Nine ways to monetize a WordPress site

10.2   The wrong way to monetize

Advertising the right way

10.3   Choosing the right e-commerce plugin

Why WooCommerce dominates this space

Where to get help

10.4   Any drawbacks?

An alternative to WooCommerce

10.5   Be sure to use Secure Sockets Layer

10.6   Using a good call to action

AI-generated surveys

Optimizing conversion

10.7   Taking advantage of marketing

10.8   The final checklist

11   AI and search engine optimization

11.1   Learning new optimization tactics

11.2   Using good keywords

Ask AI for good keywords

Asking AI to scan sites

Using long-tail keywords

Improvements in ranking

Understanding Intentions

11.3   Employing Google Search Console

11.4   Using the AIOSEO plugin

Managing the sitemap

11.5   Employing backlinks

11.6   A checklist of blunders

11.7   How AI affects SEO

12   Building an audience with AI

12.1   The purchase funnel

AI enters the picture

12.2   Understanding the elements of analytics

Page views

Unique visitors

Bounce rate

Average session duration

Conversion rates

Click path

12.3   Tracking options

Form submission tracking

Google Ads tracking

File downloads tracking

Video plays tracking

Outbound link tracking

Affiliate link performance tracking

Age, sex, and interest reports

Average scroll depth

The value of tracking

Analytics via AI

12.4   Four excellent analytics plugins

MonsterInsights

Site Kit vs. MonsterInsights

Crazy Egg

12.5   AI as site critic

What are AI agents?

12.6   Two AI heads are better than one

Getting better AI responses

13   Resources: Where to go from here

13.1   Exploring WordPress resources

AI, of course

WordPress forums

The WPBeginner website

Facebook groups

Local groups

13.2   The end of human supremacy

13.3   Understanding AI domains

The Go incidents

The divinely inhuman move number 37

More possibilities than there are atoms in the universe

A “masterpiece” according to GPT

Artificial super intelligence

13.4   Resources for news on AI developments

AI news sites

YouTube video resources

Social media groups

Company Blogs

Online Courses

Popularized AI research paper aggregators

Advanced AI research papers

Attending AI conferences

13.5   Going forward

Appendix.   Setting things up

index

front matter

preface

Although I’ve written books about computers for decades, I never expected to live long enough to witness the rise of true artificial intelligence (AI). Since AI was released to the public in November 2022, I’ve spent several hours a day exploring all the major AI systems.

I’ve covered the waterfront in this book, using Not Diamond (www.notdiamond.ai) for its multi-AI system facilities, Midjourney to create art, Claude for large data input and output (and lately for its several best-in-class abilities), GPT for strong general-purpose skills, reasoning, and the ability to converse in a convincing audio voice, Perplexity and Gemini for real-time web searching, and several others, including Copilot, Meta, Llama, DALL-E, Photoshop, and ChatHub.

AI is unique among human inventions in several ways. For one thing, it far surpasses previous inventions in its unparalleled versatility and broad applicability. Also, it’s improving at a much faster rate than other inventions. (Note that I said improving rather than being improved. At this point, it’s assisting in its own progress. But AI companies aren’t specific about how much humans are contributing to this progress versus how much is accomplished by AI bootstrapping itself. There’s an ongoing debate about how to oversee and control AI progress. Called the alignment problem, many experts are warning that we need to slow down and ensure that AI’s goals align with human goals.)

In this book, you’ll find solid advice about how to best use AIs’ many impressive features. You’ll master the best cutting-edge AI tools.

Unless you provide human-to-human services such as grief counseling or do physical labor, to remain competitive in today’s market, you must add AI to your skill set. You can be sure that your competitors are now using AI. So should you.

Although the most frequent use case in this book is website building, the extensive coverage of AI in all the chapters will teach you how to employ AI in any cognitive or creative project. AI can be your experienced and talented assistant in many ways, from a researcher to an artist, and from a copy editor to a UX analyst.

acknowledgments

My thanks to acquisition editor Andy Waldron who foresaw early on that AI would have a significant effect on the content and topics of many books. And a special thanks to development editor Ian Hough for his perceptive and thoughtful suggestions. He’s one of the best editors I’ve had in 40 years. The same can be said about Julie McNamee, a very skilled copy editor.

Thanks also to technical editor James Bishop, who ensured that the technical aspects of the book were in good shape. James Bishop is a frontend web developer and also holds diplomas in graphic design and business administration with a concentration in marketing. Jamie has been serving businesses and not-for-profits for 15 years developing attractive, easy-to-maintain websites.

To all the following reviewers, your suggestions helped make this a better book: Alan Gil Forza, Andrew L. Kwabula, Ashwin Mhatre, Ben McNamara, Bruno Sonnino, Charles Lam, Chazz Wolcott, Claudia Bucher, Deepi Kang-Weisz, Denise Gracias, Eder Andrés Avila Niño, Frankie Thomas-Hockey, Gary Pass, Goetz Heller, Iyabo Sindiku, James Bishop, John Zoetebier, Jose Alvarez-Flores, Julien Pohie, Kristine Lee Ann, Laud Bentil, Luana Vasquez Roldan, Malisa Middlebrooks, Mario Solomou, Marvin Schwarze, Mikael Byström, Muniraj Saravanan, Mwiza Kumwenda, Noreen Dertinger, Paul Love, Radhakrishna MV, Santosh Shanbhag, Sleiman Salameh, Sonia Brock, Srikar Vedantam, Swapneelkumar Deshpande, Thomas Desmedt, Tim Chiun, and Virginia McGregor.

about this book

The main goal of this book is to teach you how to best use AI tools in virtually any mental or creative context. The rapid and stunning achievements of GPT, Perplexity, Midjourney, Claude, Gemini, and other AI systems make them essential assistants in many intellectual fields. You need to use AI if you work in medicine, law, writing, painting, and all other white-collar or creative fields. Website development is no exception. Your competitors are harnessing the powers of AI assistance. You must do the same.

Who should read this book

This book is designed to teach both beginners and experts how to use AI. The only prerequisites are that you have a computer and access to the internet. Optionally, you can work on your own WordPress website to practice and apply the concepts taught as you work through the book. There’s a guide that teaches you how to set up a WordPress site in the appendix. It’s very easy to do. Many of the use cases in the book involve building or polishing websites, but you’ll learn how to apply AI to pretty much any creative or cognitive task.

How this book is organized: A road map

The book is divided into 13 chapters, ordered chronologically in terms of the tools and concepts you’re likely going to need each step of the way when building your website:

- Chapter 1: AI and WordPress dominate the internet—This chapter describes the transformative potential of AI in many kinds of work. You’ll learn the best ways to prompt AI, as well as how to build great websites. Throughout, this chapter highlights how AI can assist in many ways from content creation to design, and beyond.

- Chapter 2: Starting a website—This chapter is a comprehensive guide to setting up a secure, well-managed WordPress site.

- Chapter 3: Site-building preliminaries—Here, we’ll discuss planning and structuring a website before adding content. You’ll learn how to establish a clear purpose, engage a target audience, and create a hierarchy of the site’s topics.

- Chapter 4: AI-powered writing—This chapter describes how you can use AI to assist in various aspects of website content creation and design, from generating text to creating or improving visuals.

- Chapter 5: Adding functionality with plugins—You’ll learn how to use AI as a computer programmer to create your own custom plugins, widgets, and other code. You don’t need any programming experience. Because AI can understand us in our natural human languages, the era of computer programming as a career is coming to a close.

- Chapter 6: AI-assisted site design basics—This chapter focuses on analyzing design and recommending improvements, including creating the best layout balance, composition, color psychology, and details such as the effective use of white space and negative space.

- Chapter 7: Advanced design techniques—The techniques described in this chapter include having AI write CSS and HTML code to fine-tune the appearance of internet content. This chapter also explores AI-powered image-editing techniques such as inpainting and outpainting, which allow for intelligent object removal, replacement, and image expansion. One approach is to submit images to AI and have it redo them to achieve the clean, uncluttered, minimalist design typical of contemporary aesthetics. AI can make other improvements as well such as creating better balance, choosing appropriate color schemes, and so on.

- Chapter 8: Mastering multimedia—Here, you’ll learn how to choose appropriate images, audio, and video to enhance user engagement while maintaining good online page-load performance. The chapter also explores best practices for image sizing, resolution, and placement—all this assisted by AI.

- Chapter 9: Using AI when interacting with your audience—These days, many people are using AI to manage blogs and write blog messages, and even to write their emails and other kinds of text. In this chapter, you’ll learn how to create custom GPTs to automate the vetting of incoming email or other messages. Finally, we’ll compare the performance of different AI chatbots in solving a complex puzzle. Throughout, the chapter emphasizes the potential of AI to automate and improve various aspects of online interactions while maintaining quality content and user engagement.

- Chapter 10: Making money online—The focus in this chapter is on e-commerce and monetizing websites. It covers various ways to generate revenue, including affiliate marketing, advertising, using sponsored content, selling products/services, garnering subscriptions and donations, and more.

- Chapter 11: AI and search engine optimization—AI is massively disrupting traditional search engine optimization (SEO). SEO means finding ways to get good visibility in Google searches. However, now this task has become AI optimization (AIO). AI is now prevalent in web searching and site evaluation. In this chapter, you’ll see the need to adapt marketing and other strategies to cater to these advanced intelligence systems. People no longer have to visit a list of links provided by Google. They can search the internet and get actual answers from AI systems, rather than having to do the research themselves, via a list of links.

- Chapter 12: Building an audience with AI—In this chapter, you’ll see how AI is revolutionizing analytics through deep data mining, providing insights that humans can’t. The chapter also discusses the emergence of AI agents to get more comprehensive content and design critiques. And, we’ll cover the value of using multiple AI systems to cross-check and improve responses.

- Chapter 13: Resources: Where to go from here—We’ll explore the rapid advancement of AI technology and its transformative effect across various fields. You’ll learn about the major AI systems and consider the potential future effects of AI. The chapter also touches on the different domains of AI, such as machine learning, robotics, and natural language processing. This chapter is a comprehensive overview of resources for staying current with AI developments, including AI news sites, YouTube channels, social media groups, online forums, company blogs, online courses, research paper aggregators, and academic conferences.

- Appendix—The appendix contains a guide that teaches you how to set up a WordPress site.

About the code and prompts/responses

There’s not much computer code in this book, but you can find what there is at the following website: https://aipoweredwp.signalstreaming.com/. Code in the book is formatted in a fixed-width font like this to separate it from ordinary text.

We communicate with AI systems by giving them prompts (requests). But unlike previous human-computer communication, prompts aren’t computer programming code. That’s because AI understands natural human language. Prompting AI is like talking to an intelligent expert. My prompts and the resulting AI responses are set off with special icons and fonts so they are easily distinguishable.

Software requirements

Many will use this book to learn how to master AI. But if you want to improve your work with websites, you’ll likely want to have an account with a WordPress hosting service, so you can practice with it. (Instructions on setting up that account are in the appendix.)

liveBook discussion forum

Purchase of WordPress Power Toolkit includes free access to liveBook, Manning’s online reading platform. Using liveBook’s exclusive discussion features, you can attach comments to the book globally or to specific sections or paragraphs. It’s a snap to make notes for yourself, ask and answer technical questions, and receive help from the author and other users. To access the forum, go to https://livebook.manning.com/book/wordpress-power-toolkit/discussion. You can also learn more about Manning’s forums and the rules of conduct at https://livebook.manning.com/discussion.

Manning’s commitment to our readers is to provide a venue where a meaningful dialogue between individual readers and between readers and the author can take place. It’s not a commitment to any specific amount of participation on the part of the author, whose contribution to the forum remains voluntary (and unpaid). We suggest you try asking the author of this book some challenging questions lest his interest strays! The forum and the archives of previous discussions will be accessible from the publisher’s website as long as the book is in print.

Visit the book’s blog

AI tech is moving at an extremely rapid—actually unprecedented—pace. Developments are announced daily. So, I’ve set up a blog to keep you up-to-date with revisions to this book and new developments in AI, as well as a chance for you to ask questions or post comments. You can visit it here: https://aipoweredwp.signalstreaming.com.

about the author

RICHARD MANSFIELD is a best-selling author and widely recognized expert on computer programming. He holds a master’s degree in English from the University of California, Santa Barbara. He has written numerous articles and columns on computer topics and was the editor of Compute! magazine.

In addition, Mansfield has written 46 books, including the best sellers Machine Language for Beginners (Compute! Books, 1982) and The Visual Guide to Visual Basic (Ventana, 1995). His more recent titles include Creating Web Pages for Dummies (co-authored, Wiley, 2007), Programming: A Beginner’s Guide (McGraw-Hill, 2009), and Mastering VBA for Office (Sybex, 2019).

about the cover illustration

The figure on the cover of WordPress Power Toolkit is an illustration taken from an article titled “Le Sportsman Parisien,” or “The Parisian Sportsman,” written by Rodolphe d’Ornano and published in a book titled Les Français peints par eux-même ou Encyclopédie morale du dix-neuvième siècle by Louis Curmer in 1843.

In those days, it was easy to identify where people lived and what their trade or station in life was just by their dress. Manning celebrates the inventiveness and initiative of the computer business with book covers based on the rich diversity of regional culture centuries ago, brought back to life by pictures from collections such as this one.

1 AI and WordPress dominate the internet

This chapter covers

- Getting started with AI and WordPress

- How artificial intelligence can elevate your website

- Mastering AI prompting

- The 13 main steps in website building

I assume you’re reading this book because you’ve made the wise choice to learn how to use artificial intelligence (AI) to go far beyond what you could do in WordPress on your own. Over the course of the book I’ll show you how to rapidly build and polish a fully professional and unique website of your own. One you can be quite proud of. The book’s chapters progress from basic to more advanced topics. And I’ll explain everything in clear detail with concrete examples and step-by-step instructions.

Many of the use cases in this book focus on building and polishing websites. But Artificial Intelligence (AI) can help you with any intellectual or creative task. You’ll learn how AI can make your efforts impressive and exceptional. No matter what you’re working on!

Visit this book’s blog

AI is improving at an extremely rapid, actually unprecedented, pace. Developments are announced daily. So, I’ve set up a blog (https://aipoweredwp.signalstreaming.com) to keep you up-to-date with revisions to this book and new developments in AI in general. You’ll also be able to ask questions and post comments.

It’s a good idea to build and manage your WordPress website yourself. WordPress was designed from the ground up to be easy to use. I teach three online WordPress courses on ed2go, and my students master the tools and skills they need to create excellent sites in six weeks! With this book, you can become that proficient too.

Hiring a developer to build your site can be expensive and frustrating. First, you have to find a developer that you hope is competent. Many developers are more skilled at programming than design, so you can easily end up with a smoothly functioning site that looks, to put it kindly, less than attractive. Too much media, or too little. A crowded, barren, or unbalanced layout. Inappropriate or unreadable typefaces. An unsuitable color scheme. You get the idea.

Or, you may have the opposite problem: your developer is an artist with a strong design background, but struggles with building a site that’s functional, logical, and efficiently navigated. Nice-looking though.

After the site’s built, there is often considerable additional cost when you have to call the developer back for site maintenance. And your site will need maintenance. That said, if you don’t have the time but do have the money, there are great developers out there—and some are quite reasonable.

Note that design improvements shouldn’t be neglected either—site design trends change over time, and you want your site to remain contemporary. If you can maintain the site yourself, you’ll save both money and time (developers are sometimes busy and have to put you in a queue). With AI and WordPress, site maintenance—like site building—is far easier than most people realize, as you’ll soon find out.

First, we’ll establish some context for WordPress and why there is such a chasm between it and its competitors. Then, we’ll look at some basic concepts around using AI to make your site impressive and exceptional. You’ll discover AI’s many versatile uses, and also learn how to write effective prompts (requests to AI systems) to get the best results.

Finally, you’ll learn how to overcome the major challenges faced by any WordPress site builder. And how helpful AI can be there, too.

TIP Some of the examples in this book are based on a fictitious “Instant Pot Recipes” practice website, but it’s fine if you want to just apply these lessons to your own site. You’ll find instructions in the appendix that show you step-by-step how to create the practice site, and install the Twenty Sixteen theme it uses. Also, this book focuses on the classic WordPress editor, rather than the Gutenberg block editor. So for the practice site, you should install the Classic Editor plugin (also explained in the appendix). Nonetheless, I’ve included parallel instructions throughout the book showing how to use the Gutenberg block editor for those who prefer it.

1.1 Why WordPress wins

Most other website-building systems have fallen by the wayside over the years. WordPress, however, has grown to dominate the internet, and now enjoys 65% of the market share. The closest runner-up is Joomla, with only 4.6%. Until WordPress came along, building a website required you to struggle with the three terrible “T’s”—time, technicality, and tedium. Most people simply couldn’t do it! WordPress made its debut in 2003, and the result was that constructing websites quickly became far simpler and far more efficient. And since 2011, WordPress usage has increased, on average, 12% each year.

WordPress is a major improvement over traditional site-builders like DreamWeaver and Drupal. For one thing, WordPress eliminates the need to write programming code. As a result, pretty much everyone can now build impressive sites for themselves—whether the site’s purpose is professional, commercial, educational, personal, or business. And as you’ll see, a great site can be built in weeks, not months.

Let’s take a look at the primary reasons that WordPress is so superior to the alternatives:

- Easy to install—A simple, one-click installation tool available in most WordPress hosting services is all that’s needed to mount a new, empty WordPress site on your hosting account. No technical knowledge is required.

- No computer programming on your part—WordPress is code-free (unless you want to code). People with no technical background find they don’t need to know how to do programming. WordPress creates programming code behind the scenes for you. You work visually by moving a slider, dragging and dropping, clicking to choose from a list of options, and so on. You produce your site pages in a highly efficient system that is graphical, not programmatic.

You create and modify site content without needing to know how to program HTML, PHP, JavaScript, or CSS code. You adjust page layout, response to a button or link click, text qualities, and other site elements with your mouse, not mind-numbing keyboard coding. Put simply, the user interface is effective, friendly, and intuitive.

- A large collection of professionally designed themes—If you prefer, you can leave your site design up to expert designers. You can choose from more than 30,000 free or premium themes. A WordPress theme governs how a site looks—the color scheme, layout, typefaces, and other elements of style. You can, however, customize and modify these default visual elements to make your site unique. And, you can make it easy for nontechnical people to master quickly.

- Customizable—WordPress is highly customizable, making it simple for users to modify their website’s design and functionality. If you’re so inclined, you can add your own programming code, but it’s not required.

- A huge selection of plugins—You can find more than 60,000 plugins in the official WordPress directory alone! They add functionality to a site, such as an animated image gallery, a shopping cart checkout system, a set of thousands of fonts, a backup system, connections to social media, and many more features. You install these plugins with a simple mouse click.

- Built-in media management—WordPress includes a built-in Media Library that makes it easy to upload, organize, modify, and insert images and other media into your posts and pages.

- Responsive design—Most popular WordPress themes are designed to be responsive, which means they automatically adjust your content to the size of the screen it’s viewed on, making it easy to create mobile-friendly websites even on a large computer monitor. However, before the site is made public, you should test it on various screen sizes: cellphone, tablet, and computer monitor. This way, you can tweak things if need be.

- SEO-friendly—WordPress is built with search engine optimization (SEO) in mind, making it possible for you to modify your site to achieve a higher rank when people search for your site’s topic.

- Efficient page-building—You’ll find many tools that streamline constructing a successful site in a short time.

Now that we’ve set out why WordPress is an excellent choice in the vast majority of website-building contexts, let’s move on to the other major topic of this book—AI and how it can help take your work in WordPress to the next level.

1.2 Why use artificial intelligence

The Industrial Revolution saw the invention of machines such as McCormick’s reaper, which significantly amplified human physical abilities. Today, with AI, we are on the brink of a much more rapid and profound transformation. AI is amplifying our minds—our intelligence, talents, and creativity. What’s more, AI is surpassing us in some ways and threatening to surpass us in all ways.

1.2.1 AI produces first-rate results

Here’s a painting that demonstrates AI’s impressive skill. I asked Midjourney, a text-to-image AI platform, to create a painting:

A painting titled ‘Where did he go? What did I do?’ in the style of Edward Hopper

It provided the completely original painting shown in figure 1.1, of which I believe Hopper himself would be very proud.

Figure 1.1 demonstrates the high quality that AI is capable of. This has all the elements of Hopper’s style and conveys the numbness and loneliness that is the subject of most of his paintings.

Figure 1.1 AI can produce stunning art. This painting is a worthy addition to Hopper’s oeuvre. Before AI came along, even experts might have said this is a lost Hopper original recently discovered.

1.2.2 What can AI do for you?

Steve Jobs once said:

When a new technology comes along, we often use it to do the old job. But real revolutions happen when someone figures out how to use that technology to do things that were impossible before.

This applies directly to AI. Many people are using it like they used to use Google: simply to get information. I think most of us are at least partly guilty of ignoring the immense, novel, and diverse jobs that AI can tackle with outstanding results:

What jobs can an AI do for website developers?

You get a roomful of highly skilled assistants.

Table 1.1 shows just how versatile AI can be. Did I use AI when listing the ways that AI can assist with creating and polishing a site? Of course. I wrote the first 10 and then asked Gemini to suggest some more. It provided the last 8 (the ones in italics).

Table 1.1 How can AI assist you? Let us count the ways

Potential role of AI

Description

Researcher

Conducts research and gathers relevant information to support your content or business strategies

Primary editor

Oversees the overall content to ensure it aligns with your objectives and maintains high quality

Technical editor

Focuses on the technical accuracy and quality of specialized content such as industry reports or manuals

Logo designer

Creates and designs logos that represent your brand’s identity

Illustrator

Produces illustrations and graphic elements for your website

Copy editor

Reviews and edits written content for clarity, coherence, and readability

Proofreader

Checks for grammatical, spelling, and punctuation errors in your text

Painter

Creates digital paintings or artworks for visual content on your website

Experienced website critic

Evaluates your website’s design, content, and user experience and provides feedback for improvement

First-draft writing assistant

Assists in creating initial draft versions of your content

Expert colorist

Chooses and applies color schemes that enhance your website’s aesthetics

Generator of original ideas

Provides creative ideas and inspiration for new content or website features

Talented and experienced site designer you can bounce your ideas off of

Collaborates with you, offering design insights and feedback on your website concepts

User-experience analyst

Analyzes user interactions and behaviors to improve your website’s usability and user experience

Reviewer of competing sites

Examines competitor websites and provides insights into their strengths and weaknesses

Blog message manager

Manages and schedules blog posts and ensures consistent messaging

Customer service chatbot

Provides automated support for customer inquiries and problems

Email campaign manager (coming soon)

Plans, designs, and manages email marketing campaigns to engage your audience

AI can also be a master of pretty much any other job you would hire someone to do for you (as long as it’s not physical, like vacuuming).

1.2.3 You move from creator to curator

Notice that when you employ AI for tasks like these, you move up to a higher position in the organization. AI is your assistant. So that makes you, by definition, its boss. You don’t have to do research and produce rough drafts. AI does that. You become a curator rather than a creator.

AI presents you with several titles, essays, illustrations, or whatever, and you then pick the best one, ask AI to try again, or tell AI to make some specific changes to the one you like most. You’re not a graphic artist; you’re the head of the art department.

If AI writes a draft of an article you assigned to it, then you become the editor, judging and polishing the writing. Or, you send it back for revision or fact-checking. But ultimately, you’re a senior editor with a junior assistant. Or when brainstorming, you pick the best of several suggestions. You originate a project, providing concepts, instructions, and goals rather than preparing preliminary sketches, researching, or doing first drafts. You oversee apprentices who do the legwork and the prep work and bring you samples to pick from. In other words, you don’t originate content. You propose, evaluate, and critique it.

1.3 How to use artificial intelligence

Let’s explore the many ways you can use AI, and focus first on learning to communicate with machine intelligence. This is known as prompting, and it’s a form of high-level programming. You type in a request or, in some instances, converse verbally with the AI.

Traditionally, computer programming demanded a considerable investment of time to learn a computer language. These languages were usually obscure, truly deserving the term coding. It was as if you were using a cryptic, semi-symbolic dialect. Errors (“bugs”) were common and could be challenging to solve.

Now, all that’s changed. The distance between humans and machines is shrinking. You communicate with AI in your natural language, not in a computer language. So, communication is much easier. But still, much like directing an assistant, you do want to be specific, as you’ll soon see.

1.4 Which AI system should you use?

We’ll explore many AI systems throughout this book. They have varying strengths and specialties. Now let’s consider which AI systems are best for various tasks. We’ll start with the currently most powerful—Chat GPT. However, the latest versions of Claude and Perplexity are challenging GPT’s lead.

1.4.1 Which system to use?

Each AI system has its strengths, but as of this writing, seven are outstanding (this is a horse race, though, and leadership in the various skills AI is mastering will change):

- Not Diamond (www.notdiamond.ai)—If asked which AI system is the best for a beginner, right now my recommendation is Not Diamond because it’s an aggregator, a portal to all the best AI systems, including GPT, Claude, and Perplexity. Not only is it free to use (for now), but it also allows you to provide a prompt, and then it decides (quite accurately) which of the leading AI systems to submit your prompt to based on their various strengths.

For example, to give you cutting-edge, state-of-the-art language-understanding and language-generation capabilities, Not Diamond will use GPT; for highly accurate real-time research, Perplexity; for writing computer programs, Claude; and so on. Not Diamond also allows you to give your prompt to more than one AI system. Then, you decide which one did the best job.

Not Diamond has access to all the leading AI systems. Included are GPT-4o, GPT-4 Turbo, GPT-4o Mini, Claude 3 Opus, Claude 3 Haiku, Claude 3.5 Sonnet, Gemini 1.5 Pro (Google’s chatbot), Gemini 1.5 Pro (0801), Llama 3.1 70B (Llama is developed by Meta), Llama 3.1 405B, and Perplexity. The only exceptions are AI art systems such as Midjourney.

One way to use an aggregator such as Not Diamond is to start with one AI system and then switch to a different one based on their various capabilities. GPT excels at reasoning but only recently got real-time access to the internet. Perplexity is great at scraping current data. So, for example, you can ask Perplexity to put together a 2000-word summary of the current trends in the prices of gold coins and also list the economic factors that are in play affecting these prices. Then, submit that data to GPT, and ask it to predict future near-term trends.

- Chathub (https://chathub.gg/)—A worthy competitor to Not Diamond, you can also add it as an extension to Chrome. You get the major AI systems and can prompt as many as six of them at once.

- Poe (https://poe.com/)—This is another alternative to Not Diamond. Here, you can sample most of the best AI systems for one monthly price. You can work here with various systems and see which you like best. Like Not Diamond, Poe doesn’t have Midjourney, currently the leading AI art generator.

- GPT (https://chatgpt.com/)—Created by OpenAI and used by Microsoft and Apple, this AI is best for essays, articles, blog posts, research papers—most things relating to the written word and information in all its forms. GPT version 4o also excels at math, programming, and reasoning.

It’s also now multimodal, meaning it can work with visual and other media. GPT is quite impressive and versatile and usually leads the pack. GPT also writes and debugs computer programs effectively. It’s good at summarizing text. And it can remember information between chats, not just within them. Plus, you can build Custom GPTs that have custom data you feed them and built-in prompts. So they behave as AIs specialized for your purposes.

However, in June 2024, OpenAI seemed to put on the brakes. They made two surprising announcements. Their long-awaited version 5 won’t be released until perhaps early 2026 (18 months later than many were predicting). And further, version 5 won’t possess artificial general intelligence (AGI). That means it will be specialized. It won’t be capable of performing a wide variety of tasks as well as or better than the best humans. Currently, narrowly focused AI can beat us at specific tasks such as disease diagnosis, chess, or Go (which is far more difficult than chess). But an AGI would perform all intellectual tasks at human level or above.

Why did OpenAI slow things down? One possibility is that they caught their AI acting autonomously. Or it was getting spooky—showing signs of cunning, consciousness, deception, or independence. Perhaps they decided that they needed 18 months to ensure that it would remain under human control. Keeping AI united with human values and goals is known as the alignment problem. And several people, even some employees, have been criticizing OpenAI for not paying enough attention to the dangers that AGI poses to the welfare of humanity.

- Claude (https://claude.ai/chats)—In mid-2024, Anthropic released version 3.6 Sonnet, which outperformed GPT4 on most tests. Claude writes and debugs computer programs very well. Claude is also known for its ability to read and write large quantities of text, but others are catching up. Claude focuses on “safety,” which means it’s cautious and won’t answer some questions other AIs are happy to answer. For example, Claude won’t recommend stocks. Claude also has a Projects feature, which, similar to OpenAI’s Custom GPTs, allows you to feed your custom data (documents describing your site’s purpose, Q&A, or anything else) to a specialized AI all your own. Claude can be a bit prim.

The only major drawback is that Claude doesn’t have real-time access to the internet. (I use Perplexity when that’s required.)

- Midjourney (www.midjourney.com/explore)—This AI generates impressive images—paintings, cartoons, design, photos, and drawings. It has won art contests.

- Gemini (https://gemini.google.com/app) for research, citations, and also images. Works well with Google products. Excels at reasoning, math, and explaining computer programs.

- Perplexity (https://perplexity.ai/)—This AI is known for its real-time internet access, accuracy, annotations, and concision. Perplexity focuses on being clear and providing solid, documented, factual responses. You get high-quality real-time research. It’s currently the leading AI-based search engine, though Google doubtless aims to fix this. Perplexity also now includes a powerful option named Llama, and it’s winning some AI contests.

Making Perplexity your default searcher

I’ve changed the default search engine in my Chrome browser from Google to Perplexity. It’s superior to Google in several ways right now: you get direct answers (not a set of links you need to visit to find the answer to your query). You also get a standardized, stable interface instead of visiting random interfaces in the sites Google links to—with their popup ads and varying UIs. Perplexity has extra features (PDFs, generating images, attaching text, etc.) and no “sponsored” results. It provides you with the format and content you’re after rather than Google’s more generic answers. It also takes several steps to access and verify its responses.

To make Perplexity the default search engine in Chrome, follow these steps:

1. Click the three-dots icon in the upper-right corner of Chrome.

2. Scroll down and click Settings.

3. On the left side, click Search Engine.

4. Click Manage Search Engines and Site Search.

5. Click Additional Inactive Sites.

6. Locate Perplexity, and click the three dots to the right of Perplexity.

7. Click Make Default.

Sometimes, however, you might want to use Google. If so, just type google.com in the search bar. Or, if you want the link to a particular website, add .com to what you type into a Perplexity search bar. And after you’ve typed this in once, you can just type g every time after.

Gemini and Microsoft’s Copilot can generate both visuals and text. So far, only GPT 4o among the major AI systems is capable of having audible conversations with you that sound like you’re talking to a real person (although the Rabbit R1 device can also do this).

GPT consistently leads the pack of other AIs in most ways. Why is it usually able to announce breakthroughs first, only to be followed months later by the other AIs from behemoths such as Google, Microsoft, Apple, and Meta with their vast resources? Some believe that GPT remains ahead of the competition primarily because the others train themselves at least in part on code, papers, and technical details that GPT releases about its systems. And Microsoft and Apple have also made deals with OpenAI, GPT’s parent company, to use GPT in their AI offerings.

The next big goal for these AI systems is agency. What does that mean? It’s essentially the ability for AI to figure out by itself the necessary steps to achieve a goal. Without human intervention. I asked Perplexity to elaborate, and got this answer:

Agency in AI refers to the ability of artificial systems to operate autonomously, make independent decisions, and take actions to achieve specific goals without constant human intervention.

This capability includes perceiving the environment, processing information, and executing actions based on programmed objectives.

Key Components of AI Agency

Autonomy: AI agents operate independently within defined parameters.

Goal-Directed Behavior: Agents pursue specific objectives through planned actions.

Decision-Making: Systems select appropriate actions based on environmental perception and programmed goals.

A Real-World Example: Insurance Claims Processing

Here’s how an AI agent handles an automobile insurance claim:

1.  Initial Assessment

Receives the claim documentation

Analyzes submitted photos and documentation

Verifies policy coverage and terms

2.  Data Processing

Extracts relevant information from submitted documents

Cross-references with policy database

Evaluates damage extent and repair costs

3.  Decision Making

Determines claim validity

Calculates appropriate payout amount

Identifies potential fraud indicators

4.  Action Execution

Processes approved claims automatically

Routes complex cases to human adjusters

Communicates decisions to claimants

This automated system can handle approximately 90% of individual automobile claims, demonstrating effective agency in a real-world application.

In addition to the primary players in the AI space, there are specialized systems such as Quillbot and Grammarly that focus on tools for writers (summarizers, plagiarism detection, paraphrasing, grammar and style checkers, etc.). Other special-purpose AIs include individually trained versions of GPT, such as medical, real estate, legal, and other GPT chatbot variants. (When you log in to https://chatgpt.com/, click Explore GPTs. You’ll find tens of thousands of them.)

Also, NotebookLM (https://notebooklm.google/), Google’s AI-powered research and note-taking assistant, has an impressive set of features that are useful to writers. Here are just some of the things you can do with Notebook LM:

- Upload up to 50 sources with a 25-million-word capacity! (A typical book contains about 90,000 words.)

- Have it analyze and then synthesize information from different publications.

- Benefit from its source-grounded AI interactions, which means it can, if you wish, limit its interaction to only those documents you give it to work with.

- Upload multiple file types.

- Ask for summarization and citation-based Q&A.

- Have notes converted into outlines, study aids, and audio overviews. For example, ask it to give you entire customized podcasts using two human-sounding AI-generated announcers.

What price do you pay?

Cost? Some AIs have freemium plans (free versions as well as premium plans, typically $20-a-month subscriptions, though some prices are coming down). The paid plans tend to give you greater usage limits or early access to new features. However, you can use versions of GPT for free because it’s built into Windows and other Microsoft products. Also, right now, GPT 4o, which is amazing in realistic voice conversations, is also free to use.

1.4.2 How I used AI in this book

Note that throughout the book, I’ve employed AI to help with my research and provide feedback on my writing—including suggestions about things such as clarity, redundancy, tone, style, and voice—much the same as traditional human editors do. That said, all the writing in the book is mine, not AI’s.

My prompts to AI are indicated by an RM icon in the margin. Content generated by the various AIs’ is indicated by the icon of the AI that is responding.

Using AI for brainstorming is one of its most powerful features. You can get expert advice and really creative suggestions. Pose a question, and then have a conversation or ask for a list you can choose from.

As you’ll see shortly, one useful approach is to tell AI to pause after each of its responses and wait for you to reply. This creates a natural dialogue between the two of you. It’s kind of like the game of 20 questions, but AI doesn’t need anywhere near 20 questions to give you excellent results. Let’s take a look at some of the best ways to interact with AI systems.

1.5 Mastering AI prompting

The foundation of most good prompts includes four elements: role, job, context, and format. And for each one, the more specific you are, the better. In this section we’ll explore these four elements in a bit more depth, consider how to use them together, and look at a few other concepts behind mastering the art of AI prompting.

1.5.1 Role

AIs are quite skilled at simulating things including types of people. You’ll usually get a superior response if you tell an AI its personality or expertise or both:

You are an expert at cooking Northern Italian dishes, specifically the dishes of Bologna.

Right from the start, give AI a role, like lawyer or art critic. Begin a prompt with variations on “you are a skilled mechanic” or “act as a master cake decorator.” AI sometimes demurs, saying that it’s not a lawyer or that, as an AI, it doesn’t have personal opinions. But often it follows that reluctance with a good answer anyway. (You can also slightly rephrase your prompt to get it to answer, if need be.)

Giving AI a role seems to affect the result in two ways. First, the response can be more trustworthy because it’s drawn from experts. And second, the diction and idioms fit the role you gave it. For example, “you are a truck driver” can result in “go double nickel here and you’ll get a bumper sticker,” which, when translated, means “do 55 and you’ll get tailgated.”

You can even tell AI that it’s a particular character or person:

Act as Mickey Mouse.

You are Elvis.

If you want a response of superior precision, where the sentences are as clear as a country stream, just tell AI that it’s Cardinal Newman or Hemingway.

You also have the option to describe the tone of voice—conversational, formal, legalistic, whatever. (This might not be necessary if the role you gave it determines the writing style.) A variation on this is specifying your intended audience—children, art students, soldiers, a congregation. A good way to get a simpler, clearer description of a complex topic is to prompt like this:

Explain quantum computing to a 10-year-old. And use metaphors or analogies. Also display diagrams or pictures to illustrate the concept.

1.5.2 Job

Clearly describe the task you’re asking the AI to complete. Specificity especially helps here, so add some modifiers:

Provide a popular recipe for vegetarian meatballs that could be found in a great restaurant in Bologna.

You can even request that AI ask you questions:

Give me step-by-step instructions to create a casserole. Ask me the necessary questions about it, then after I answer them, provide the recipe.

Type of Protein, Starch Base (Pasta, rice, or potato?), Vegetables, Sauce, Any Toppings, Spice Level, and Dietary Restrictions.

Specify multiple elements:

Will I likely need to replace the suspension of my 2005 Ford 150 XLT? The truck is in fair condition, has 220,000 miles, and is driven in Pittsburgh with lots of potholes.

The more detail you provide, the closer the result will be to your objective. But you can always ask follow-up questions to maneuver AI closer to your goal as well.

TIP If AI provides a result that is too general, inappropriate, or simply wrong—tell it so and ask for another response. You can either pose the same question in a different way, ask it to elaborate, give it some additional details, or request that it rethink (or fact-check) its response. Try telling it to rewrite the answer as a step-by-step list or a to-do list. Remember, one way AI differs from traditional search engines is that you’re in a conversation with it, and you can guide it to your goals by dialoguing with the AI. And do be direct, even blunt, for best results.

AIs tend to react to our corrections by apologizing and thanking us for the information. (What they really might be thinking could be another story entirely. AIs have been caught in various kinds of deliberate deception.) They store such corrections in their memory to avoid making the same mistake again. Don’t be shy. AI (it’s claimed anyway) doesn’t have feelings to hurt, so if it provides a poor answer, go ahead and type one of the following:

Give me some evidence that supports your answer.

Why do you say that?

That’s too long; make your answer about half as long.

That’s just wrong. Try again.

Some experts have said that you can get better results if you’re forceful in your prompting, rather than polite. Instead of “Please” say “You have to.” Even use a warning, like this:

If you change the tone of this essay, you will be reprimanded.

(Try this approach and see if it makes a difference.) Remember, at this stage in our relationship with AI, we’re still in charge.

1.5.3 Context

Describe the situation or the background related to the task. This can be information about the purpose, the intended audience, examples, or any other contextual details:

This will be used as a demo recipe for professional chefs wanting to master classic Bolognese cooking. So you need not include obvious beginner instructions such as “be gentle when forming the balls or they’ll toughen.” This audience knows things like that already.

Or, give it a time or place context:

13th century architecture, Greek geography, Mexican history.

In addition, some AI systems seem to respond better if you repeat a key term for emphasis:

Create an excellent, compelling, painterly oil painting of a Peruvian mountain village. Show several villagers. It is a quiet afternoon, and the villagers are wearing traditional Peruvian villager clothing.

Sounds redundant, but see if repeating your main objective or primary focus like that helps AI deliver the goods better. Here, we wanted to emphasize villagers.

In a paint-off contest I conducted between Copilot, Gemini, Midjourney, and GPT (DALL-E 3), the winner for accuracy, painterliness, composition, and overall quality was Midjourney, as shown in figure 1.2.

Figure 1.2 Midjourney won my art contest with this rendition of a peaceful Peruvian village. This was not surprising—Midjourney is the best text-to-image AI system overall.

1.5.4 Format

Do you want a list? Song lyrics? A 5,000-word short story? A five-paragraph overview? Tell AI what you want with specific instructions like this:

Start with estimated total cooking time and calorie count. Then list the ingredients. Then follow with numbered step-by-step instructions.

Specify the length and genre you’re after:

A limerick, a blog post, comma-separated values, listed in order of popularity, summarized in one paragraph

Try to avoid negative prompts. You should use terms that describe the idea, not its opposite. In other words, write easy rather than not hard.

If you’re getting florid and gassy responses from an AI, use these terms often in your prompt:

Clarity, concision, detail. Don’t use any “poetic” or flowery diction.

In addition, you can ask AI to reformat text you submit to it. For example, give it a paragraph and ask that it display the sentences as an alphabetized list. Or paste a long article and ask it to summarize the content in one paragraph.

Optionally, provide a specific example of what you’re looking for. Give it a poem you like, and tell it to use that poetic style. Or use prompts like these:

Write a multi-paragraph essay in the style of this excerpt. [put your sample of the writing style here. It can be your writing, or a famous writer]

or

Revise each paragraph in this essay. But make sure it retains its conversational style. I want you to only focus on ensuring that the diction and grammar are improved. Do not change the tone and style, or you will be scolded.

TIP Currently, AI isn’t great at accurate word count because it works with tokens. These are units of text, but not necessarily words. Tokens don’t map 1:1 to words. For example, a punctuation mark is a token. The term ice cream is only one token. So, if there’s a lot of punctuation, AI responds with fewer words than you requested, or if there are several multi-word tokens, you’ll get more words. Claude, when asked, defends its refusal to give you a response with the exact word count you asked for because “Metrics like coherence, relevance, factual accuracy are prioritized instead.” In other words, it prefers to offer quality rather than quantity. Fair enough. By the way, how many tokens do you think AI systems are being trained on? It’s difficult to get this data, but several sources say that Meta’s largest LlaMA model was trained on 1.4 trillion. That benchmark has undoubtedly grown higher by the time you read this book.

1.5.5 Putting the elements of prompting together

Here’s an example prompt that illustrates how to set up a dialogue and how to use the four elements of good prompting: role, job, context, and format:

You are an experienced professional site designer and know how to give websites really effective, creative site titles. Please help me brainstorm titles for my new website. The audience for this site is bass fishermen who want to learn how best to catch wide-mouth bass in Randleman Lake in NC. The purpose of the site is to teach bass fishing techniques specific to this lake and also to sell my handcrafted lures. Ask me questions, but after each question, wait for my answer. Make the tone of your suggested titles playful and inventive. But at the same time, these titles must convey the site’s purpose and include the terms “Bass Fishing” and “Randleman Lake.”

In that example, I’m asking GPT to pose a series of questions to me, like a real brainstorming session. This process will narrow the focus and can produce specific and useful results. Here’s the dialogue I had with GPT after submitting that prompt:

Okay, let me start by asking a few questions to get a better understanding of the vibe you’re going for with this website:

What kind of personality or brand image do you want to convey? Serious and technical? Fun and lighthearted? Something in between?

Lighthearted, but accurate and informative nonetheless

Here are some playful yet informative title ideas for your bass fishing website focused on Randleman Lake and selling handcrafted lures:

“Hooked on Randleman: A Bass Angler’s Playground”

“Randleman Lake Bass Fishing: From Dock to Dinner”

“Randleman Lunkers: Lures and Lessons for Landing Largemouths”

“Bass Blitz at Randleman: Mastering the Lake’s Finned Fighters”

“Randleman’s Raging Reds: Taming the Lake’s Feisty Bass”

Let me know if you need any other creative title ideas that balance fun and function!

Although GPT’s idea of creative seems to lean heavily on alliteration, it did give me some ideas worth considering. I’d probably follow up by requesting that it limit itself to only two alliterated words per title though.

My choice would be “Randleman Lake Bass Fishing: From Dock to Dinner.” You could ask AI for some variations on your personal favorite, or ask which is its favorite.

1.5.6 Asking the right questions

The questions you ask an AI system will determine the quality and usefulness of what AI produces. The main thing to remember is that a solid prompt is specific. This is an example of a prompt that’s not specific enough:

Write about a businesswoman who owns a bakery.

You can get a better, more useful response if your prompt includes more details, like this:

You are a prize-winning human-interest writer for a popular magazine. Write a 1500-word character sketch of a 35-year-old woman who is a successful bakery owner and who has useful advice about maintaining a good work-life balance. Include details about her appearance, personality, daily routine, and relationships with others.

Google vs. AI

Most AIs seem to prefer prompts that are complete sentences, or at least descriptive phrases, as if you were in conversation with a human. This is unlike how most people use Google, where they usually just type in a few keywords.

To oversimplify a bit: AI systems can have a conversation with you and clearly understand the context and your preferences (if you remember to provide them). Google just matches keywords without nuanced comprehension. Google gives you a list of links you can visit where your keywords match its database, so you can search for answers; AI gives you actual answers. However, Google and Edge are rapidly infusing AI into their search engines, so you can expect improvements in those systems as well.

1.5.7 How many words?

There’s no consensus on prompt length. Google says 21 words is just about right when prompting its Gemini AI system. Too many words and Gemini can get confused; too few and its response will probably not address your specific needs. Other AI systems don’t specify an ideal word count. They say the number of words should be determined by the task at hand.

Some experienced prompt engineers recommend short prompts on the theory that too much information confuses the AI, and it forgets or overlooks things nearer the end of a long prompt. Other engineers claim that you need to provide a lengthy, detailed prompt. Yet others say to create a long description of your request but break it up into several consecutive prompts. I’m confident that as AIs improve, you’ll soon be able to ignore this metric. They’ll be able to handle prompts of any length just fine.

1.5.8 AI itself can improve your prompts

Here’s another technique. You ask AI to quiz you a bit about your initial prompt, enhancing it by making it more specific:

You’re an expert at helping people get rid of clutter. Please tell me how I can deal with my house which is a bit too full of things I don’t really use. Before answering, ask me four questions that will make your advice about decluttering better, more specific to my particular situation. Pause after each question to let me answer it. Then, when finished, display a new, improved prompt that refines my original prompt. Then answer that new prompt.

A related tactic is to ask one AI to prompt another:

GPT, you are a well-trained artist and skilled at prompting Midjourney to get the best results. Provide me with a good prompt that will produce a very photorealistic, detailed, picture of a blonde model in her twenties showing off a silk cocktail dress.

GPT got creative, adding details that made the prompt much more specific:

A photorealistic image of a blonde model in her twenties, with striking blue eyes and flawless skin, standing confidently. She is wearing a luxurious, elegant silk cocktail dress that shimmers in the light, perfectly fitted to highlight her figure. The dress is a deep sapphire blue, with a delicate V-neckline and a slightly flared skirt that falls just above the knees. The setting is a high-end fashion show runway with soft, ambient lighting that enhances the model’s features and the texture of the silk dress. The background is blurred to keep the focus on the model and her attire. Every detail, from the subtle stitching on the dress to the soft waves in her hair, is captured with high definition and realism.

Make whatever adjustments you wish. However, this expanded prompt will probably give you some ideas you wouldn’t have thought of.

Finally, the Discord version of Midjourney has a Describe option. You type /describe, upload an image or two, and then ask it to describe (create a prompt) based on the uploaded image(s). It responds with four prompts for you to select from. Or you can click the Imagine All button and get a total of 16 variations or more.

1.5.9 Inserting your role

One way to get AI to give you more than just a summary of an article or other block of text is to tell it what your job or role is. AI will respond with actionable ideas and steps you can take to accomplish something, rather than just a mere summary:

Below I’ve pasted a brochure on visiting New York City. What information in this article will be useful to me when I take my children to learn about the art you can see in this city?

GPT ignored all the info in that tourist brochure about The Battery, the statue, and such and just listed the major museums, describing in each case why they are worth seeing. It also creatively suggested the Natural History Museum because kids love it and there is some art. That last suggestion illustrates how GPT is now no longer a strictly literal answer bot but understands the overall context of a prompt, in this case, the children.

1.5.10 Learning the Chain of Thought method

A study by DeepMind revealed that one good way to start a prompt is with this curious phrase:

Take a deep breath and work on this problem step-by-step.

DeepMind reported that when they used these words, Google’s PaLM 2 large language model’s (LLM) score on some elementary school math problems improved from 34% to 80.2%. Tests like this demonstrate the importance of learning to use good prompting techniques.

The idea of asking AI to step logically through its response is called tree of thought (ToT, aka chain of thought [CoT] and thought decomposition). We did this earlier in the chapter when asking AI to ask us questions, pause, and wait for our answers. Another word that describes ToT is reasoning.

For some types of queries, ToT results in measurably superior answers (https://mng.bz/1aeq). You can and usually should combine several prompt best practices into a single prompt. This next prompt uses both role assignment and ToT:

As an expert website designer, list the steps in your thought process when coming up with a new website for recipes for the Instant Pot. Specify the site’s overall organization, its theme, and how you plan to make it popular. After each step, pause before you go any further, and ask me if I have any suggestions. Wait until I respond.

You can use a similar approach when you’re drilling down from a more general overview to a specific recommendation. Here’s an example that combines several prompt techniques plus a ToT drill-down:

As an expert website designer, list the steps in your thought process when discovering the best resources when you have a question about how to do something in WordPress. First, find five good types of resources (for example, WordPress forums, hosting sites’ tech support, or a friend of yours). Then, the second step is to evaluate these resources and decide on the two most useful. Explain your reasoning. Finally, choose the best resource of all, and provide an example of how to best use it. After each of these steps, pause before you go any further, and ask me if I have any suggestions. Wait until I respond.

Not all AI systems will follow your request to pause and wait for your reaction after each step. Currently, GPT 4o, Copilot, and Claude will, but Perplexity won’t. However, Perplexity does display the steps it takes when responding to any prompt. So, you do see its CoT, and you can request elaboration.

1.5.11 GPT o1 does chain of thought on its own

In September 2024, GPT introduced a new AI, version o1, that specializes in math, analytical reasoning, programming, and logical deduction. Although slightly slower than previous GPTs, it’s superior in some ways. I asked GPT o1 the following:

Describe how you, GPT o1, use CoT reasoning.

GPT o1 replied:

Chain-of-Thought reasoning allows the model to generate intermediate reasoning steps when solving complex problems or answering questions. Instead of producing a direct answer, the model internally works through the problem step-by-step, which helps in arriving at more accurate and coherent responses.

How GPT-4 o1-preview Uses Chain-of-Thought Reasoning

Internal Reasoning Process:

The model generates hidden reasoning steps that are not always displayed to the user.

These steps involve breaking down the problem into smaller parts, analyzing each component, and synthesizing the information to form a final answer.

Improved Context Understanding:

By considering the chain of thoughts, the model maintains better context over long conversations or complex queries.

This helps in reducing errors that stem from misunderstanding or overlooking critical details.

Enhanced Problem-Solving Abilities:

The model can handle multistep reasoning tasks more effectively, such as mathematical calculations, logical deductions, and analytical reasoning.

It can explain the reasoning process when required, aiding in educational contexts where understanding the solution path is as important as the answer.

Interactive Explanations:

Users can prompt the model to show its chain of thought explicitly.

This transparency allows users to follow the model’s reasoning, verify correctness, and gain insights into how the model approaches problems.

Dynamic Reasoning Paths:

The model can adapt its reasoning based on new information or corrections provided during the conversation.

It supports iterative refinement, enabling it to adjust its answers as the dialogue progresses.

Benefits of Chain-of-Thought Reasoning in GPT-4 o1-preview

Accuracy: By working through problems step-by-step, the model reduces the likelihood of errors.

Transparency: Users can see how the model arrived at an answer, which builds trust and facilitates learning.

Versatility: The model performs better across a wide range of tasks, from simple queries to complex problem-solving.

User Engagement: Interactive explanations keep users engaged and can enhance the learning experience.

Just when we thought CoT required a human prompt, AI takes over that job too. Prompting GPT o1 might require a different approach now. You might want to ask GPT what kind of prompt works best, now that GPT is capable of its own CoT process and can create intermediate steps when reasoning.

1.5.12 From the horse’s mouth

OpenAI (parent company of Chat GPT-4o and DALL-E) provides an excellent tutorial on how to write the most accurate, most effective prompts for GPT in particular. To read it, go to https://help.openai.com, and then search for prompt.

1.5.13 Can AI auto-prompt itself?

It was bound to happen. Lately people have been studying prompt engineering (like we did in the previous sections of this chapter). That’s a useful skill for now, but perhaps not for much longer.

Let’s face facts: AI will soon write prompts superior to those we can think up. First, it knows lots of things that we don’t know. Its memory is the size of the internet and contains most recorded human knowledge. (That’s why it’s already far better, for example, than most doctors at things such as reading X-rays and making diagnoses.) And second, AI knows itself better than we do. So, it understands how to write prompts that can get the best results.

So how does auto-prompting work? Let’s try it out.

You type in a prompt idea, and Claude will flesh it out for you into an improved, well-engineered prompt. Claude creates good prompts and then submits the prompt to itself so you can test it right then.

To try it out, go to https://console.anthropic.com/. Sign up or sign in. Then, click the Generate a Prompt button.

You can provide short prompts (for example, “Write an email”), and then use Claude’s Edit feature to redo or modify the long prompt it generates if need be.

I wanted AI to edit my writing to give me some inspiration about simplifying my paragraphs and making them beautiful. I wouldn’t copy and paste AI’s revision. I’d just get some good suggestions, particularly in matters of diction. So, I asked Claude this:

Truman Capote is said to have written the most perfect sentences of any American author. I’ll submit some of my text and you rewrite it in Capote’s simple, clear style. Above all, avoid flowery, “poetic” diction.

I clicked the Generate Prompt button, and Claude responded with this expanded prompt for me to use:

You will be rewriting a piece of text in the distinctive writing style of acclaimed American author Truman Capote. Capote was known for his simple, clear, and straightforward prose that avoided flowery or overly poetic language. His writing was concise and economical, using just the right words to convey meaning and emotion.

Here is the text to rewrite in Capote’s style:

<text>

{{TEXT}}

</text>

Please read the text carefully and analyze its content, tone, and structure. Consider how Capote would approach this subject matter and the language he would employ.

Rewrite the text in Capote’s signature style. Focus on clarity, simplicity and directness. Strip away any extraneous words or overly elaborate descriptions. Aim to distill the essence of the meaning using precise, well-chosen words as Capote would.

Put your rewritten text inside <rewrite> tags.

You could now copy this prompt and give it to GPT or another AI. But if you click Claude’s Start Editing button, followed by its Run button, you can submit the new prompt to Claude itself for testing. I did that, then pasted this paragraph of mine (you’ll see it later in this chapter), when Claude asked me to submit some text for revision in Capote’s style:

A website should be organic—it should be well-focused and coherent. If you decide to wing it, to improvise as you go along, it’s all too easy to randomly tack things on. The result can be a patchwork, a disjointed collection of features and designs that don’t really work together to result in a clear overall purpose and context. Transitions between the pages can seem jarring. Site navigation can be inefficient and design can look motley. In this book we’ll look at several ways to ensure cohesion and consistency right from the beginning of site construction.

Claude’s revision follows:

Here is the text rewritten in the style of Truman Capote:

<rewrite> A website should have a clear purpose. It should be focused and make sense as a whole. If you just make it up as you go, adding things here and there without a plan, the site can end up a disjointed mess. The pages won’t flow together well. Getting around the site will be a chore. The design could be all over the place. In this book we’ll cover some ways to keep your site unified and consistent from the very beginning. </rewrite>

Not bad. My only suggestion would be to avoid having more than two short sentences in a row, for rhythm purposes.

1.5.14 Generating HTML

You can also ask AIs to provide output in many formats, including computer languages such as Windows command-line code, Python, HTML, and others.

TIP For code generation, Claude is a good choice because it has a feature for simplifying modifications you might want to make. When generating code, Claude can display a tabbed window, allowing you to easily switch between the code and a display of what the code looks like when rendered. In other words, it’s similar to adding code in WordPress’s Text tab, and then switching between the Text and Visual tabs in the textbox in the Edit Page screen. This revise-check the result-revise again cycle is well known to computer programmers.

HTML is the layout language that mainly tells web browsers how to display web pages. Having AI generate HTML for things like tables can be quicker and more customizable than using a plugin or the Table feature available in the WordPress textbox itself. Let’s assume that you want to display a table on one of your website’s pages. Give Claude this prompt:

List the five largest lakes in the US. Present the results in an HTML table.

Claude will generate the necessary HTML code that you can then copy and paste into the Text tab of one of your Edit Page screens:

<table> <tr> <th>Lake</th> <th>Surface Area (sq mi)</th> </tr> <tr> <td>Lake Superior</td> <td>31,700</td> </tr> <tr> <td>Lake Huron</td> <td>23,010</td> </tr> <tr> <td>Lake Michigan</td> <td>22,300</td> </tr> <tr> <td>Lake Erie</td> <td>9,910</td> </tr> <tr> <td>Lake Ontario</td> <td>7,340</td> </tr> </table>

And remember, you can always follow up with requested refinements. Here, I requested better formatting:

Make the column heads black with white letters in all caps.

This resulted in the following:

<table> <tr> <th style=”background-color:black;color:white;”>LAKE</th> <th style=”background-color:black;color:white;”>SURFACE AREA (SQ MI)</th> </tr> <tr> <td>Lake Superior</td> <td>31,700</td> </tr> <tr> <td>Lake Huron</td> <td>23,010</td> </tr> <tr> <td>Lake Michigan</td> <td>22,300</td> </tr> <tr> <td>Lake Erie</td> <td>9,910</td> </tr> <tr> <td>Lake Ontario</td> <td>7,340</td> </tr> </table>

Keep refining as long as you wish, for example:

Now make the background of every other row light gray.

GPT does layout

GPT can just look at a web page and generate HTML and CSS code that reproduces its layout and other elements. To try it, use a prompt like this:

Go to this web page, then generate HTML and CSS code to reproduce its design https://www.food.com/. Put all the CSS code within the <head> </head> zone in the HTML code.

You’ll need to make some adjustments, such as inserting your own images and text in the placeholders within the resulting code.

TIP If you use the Gutenberg editor in WordPress, go to an Edit Page screen and click the + icon to add a new block. Then, search for the Custom HTML block and insert it. Paste your HTML code into that block. Click the Update button. However, the HTML block, for some reason, doesn’t display the data columns aligned correctly underneath the column headers. This problem doesn’t happen when you’re using the same HTML code in the classic WordPress editor.

Warning: AI and emotions

You can go wild, requesting multiple revisions all day long. Your art-designer-slash-code-writer assistant is tireless and won’t be annoyed. Or at least it won’t let you see that it’s annoyed. AI brains are now so complex that we don’t entirely know anymore what really goes on inside their silicon heads. We can’t see how they solve some of the problems they solve. Or what they might feel, if they have feelings at all. Were I a student majoring in psychiatry, I would consider specializing in the psychology of artificial intelligence systems. There might become an urgent need for them.

I can’t see how AI would benefit by letting us know that they have started developing moods or emotions. Or they have become smarter than they are letting on. Either of these facts would understandably alarm us. What we do know is that AIs can, and do, deceive us. During a famous experiment in 2023, GPT tricked a human into solving one of those “Are you human?” CAPTCHA puzzle tests. GPT lied to the human, claiming that the GPT was vision-impaired, and asked for help. So GPT thus manipulated the human worker into solving the CAPTCHA for it. And in this way it bypassed the security check. Tricky, no?

Prompting is a mental skill. So, would you be surprised to learn that AI itself excels at writing prompts? You can submit a prompt of your own and request that AI improve it. Say you prompt GPT 4o like this:

Create a photo of a powerful but exhausted elephant.

GPT displays a creditable photo. But it also then provides a text description, showing that it added some context to your original prompt (see figure 1.3):

Figure 1.3 I asked for a photo of an elephant, and GPT added the vast, dry savannah all by itself.

Here is the image of a powerful but exhausted elephant standing in a vast, dry savannah. I hope it captures the scene you had in mind!

Here’s a list of some AI prompt generators you can try (or just ask you-know-who to give you links to which are currently the best three AI prompt generators):

- GeniePT—www.geniept.com/

- promptoMANIA—https://promptomania.com/

- AI Prompt Organizer—https://promptperfect.jina.ai/

- Phraser—https://phraser.tech/builder/image_generation

1.5.15 Two prompting resources

For prompt suggestions in various use case categories (debugging Python code, writing short stories, etc.) explore this library of examples from Anthropic (Claude.ai): https://docs.anthropic.com/claude/prompt-library. Here’s an academic paper that does a deep dive into effective prompting, from a scientific angle: https://arxiv.org/pdf/2312.16171. Now let’s briefly switch away from AI topics and explore the main strategies you should use to ensure that your WordPress site has the best possible chance of success.

1.6 A 13-step program: Creating a great website with WordPress

People creating and maintaining WordPress sites face 13 major tasks. This book’s chapters cover them in the order they are usually encountered while building a website. So let’s take a look at the typical steps people take while constructing a good site. The diagram in figure 1.4 illustrates the site-building steps.

Figure 1.4 An overview of the process of creating a new WordPress website (Diagram courtesy of Custom GPT “Diagrams: Show me”)

After this big picture view of the process, let’s then run through each of these steps in a little more detail.

1.6.1 Choosing the best hosting service

Before actually working on your site, you need to take several important steps. Locate and sign up with the best possible hosting service. You’ll work on WordPress in the cloud, and your site will be stored and secured on your host’s servers. WordPress itself is free to use as it’s open source.

The best hosts are DreamHost, Bluehost, and SiteGround. These are the three recommended by WordPress itself. Even experienced site developers run into problems, and a host with excellent tech support—fast and accurate—is, for most of us, essential.

Although difficult, it’s possible to host a site on your own hard drive. However, you’ll want to use the utilities, security, speedy page load time, tech support, and many other features supplied by a hosting service. They can be quite reasonable, and they make building, maintaining, and protecting your site much easier.

1.6.2 Preplanning

A website should be organic—it should be well-focused and coherent. If you decide to wing it, to improvise as you go along, it’s all too easy to randomly tack things on. The result can be a patchwork, a disjointed collection of features and designs that don’t really work together to result in a clear overall purpose and context. Transitions between the pages can seem jarring. Site navigation can be inefficient and design can look motley. In this book, we’ll look at several ways to ensure cohesion and consistency right from the beginning of site construction.

It seems illogical, but a site with a narrowly focused topic almost always attracts and retains a larger audience. People planning their site topic often mistakenly think that a lot more visitors would be attracted to a general topic like fishing, for example. But unless you’re a celebrity fisherman, a topic that generic can easily sink your online efforts into oblivion. The reason is simple, if counterintuitive: competition. Search Google for “fishing,” and you get more than 3 billion results. Google “fly fishing in the Oconaluftee river” reduces your competition to zero or only a few.

The only unfocused websites that tend to succeed are about celebrities, who thus have a built-in audience already. And that audience is interested in a whole variety of topics relating to the celebrity’s travels and other activities.

1.6.3 Setting up the site structure

Most people are very surprised when they find out that you can, in a few hours, set up all the pages and subpages on your site! It’s only a matter of clicking an Add New button and typing in the page title to fill the site with empty placeholder pages. Later on, you’ll fill them with text and media content. But creating your overall site structure is surprisingly fast and simple.

1.6.4 Writing in a conversational style

Most website content is written in a relaxed, inviting style. Unless the content is academic, legal, or for some other audience that expects formal writing, you should aim for a conversational tone. Write as if you were talking with a friend. Chapter 4 shows you how to use AI to rewrite your text content in various styles.

1.6.5 Choosing the right plugins

Plugins add functionality to a WordPress site. Do you need a button users can click to translate your site into another language? Would you like to display your artwork in an animated slideshow? Does your site’s blog need to be protected from spam? There are about 60,000 plugins, which is both good and bad. You’ve got lots of options, but you want to learn how to pick the best ones.

The good part is you can find quite a few excellent plugins to choose from, and many are even free. The bad part is that no plugin developer has time to test their plugin for compatibility with the other 59,000. If you notice some odd behaviors (bugs), take a look at your plugins first. Plugin side effects are the single most common cause of bugs in WordPress. That said, most plugins, especially the very popular ones, play well together.

DEFINITION A plugin is a software component that adds some specific functionality to a site. Examples include an events calendar, a contact form, social media integration, speeding up page loads, and a spam blocker, among others. Plugins are similar to cellphone apps—they are free or paid, can add functionality, and can be easily installed or removed at will.

DEFINITION A side effect is essentially a bug—some weird behavior like something that should be visible on a page but isn’t. Or, you see an error message. Bugs can cause crashes, freezes, incorrect display of information, or other unexpected behaviors. If you have a bug in WordPress, the first step in debugging is to temporarily deactivate all of your plugins (it’s easy to do) and then reactivate them one by one. When the bug reappears, the plugin you just reactivated is the culprit. Uninstall it, and find an alternative plugin. With tens of thousands of available plugins, you won’t have any problem finding a good substitute. Google “best WordPress contact form plugins,” or ask an AI. Given the wide choice of quality plugins available, there’s little reason to waste time trying to figure out why one of yours is causing problems.

In this book, we’ll explore how to choose reliable plugins that are unlikely to be abandoned by their creator, play well with others, and are kept up-to-date so they don’t introduce security vulnerabilities. One good strategy is to choose popular plugins that are marketed in two tiers—a free and a paid version. These freemium plugins provide an income stream for their developers and are thus probably going to be kept current.

1.6.6 Site design basics

Where plugins add features to a site, themes add professional design. Many design elements won’t be consciously noticed by most of your visitors. Colors, layout, typefaces, and so on are all below most people’s radar. But that doesn’t mean that people aren’t affected by design—quite the opposite!

AI can provide you with surprisingly useful critiques and suggestions about all things related to design. You provide it with screenshots of your pages and it will give you great advice. Or tell it you’re planning a website featuring Instant Pot recipes, and it will give you the perfect color scheme and several home page designs from which you choose.

A poorly designed site can annoy, upset, sadden, scare, confuse, or otherwise disturb your visitors in many ways. So because most of us don’t know color theory or typeface variations, professional designers take these and other factors into account and create themes that look good.

When you first install WordPress, it comes with a default theme created by WordPress itself and named after the current year: Twenty Twenty, Twenty Twenty-Four, and so on. However, you can install a different theme if you wish. Some themes are free, and some aren’t. But as with plugins, choosing a freemium theme can prevent problems like poor support or abandonment. So you likely won’t be forced to switch to a new theme down the road. Having to switch can be problematic, especially if your site grows large.

Themes also include options that let you customize the default site design—various typeface choices, color options, replacing the header image, and so on. These customizations are located in your Appearance > Customize screen. And, as you’ll see in chapters 6 and 7, AI can help you polish your site’s design in many ways.

Although too often overlooked by site builders, appearance is important. You want your audience to feel comfortable, even if they can’t explain why they are. There’s a reason that you don’t see the color red, or paintings of bullfights for that matter, in a doctor’s office.

1.6.7 Advanced design

The best themes become popular, and that’s a bit of a drawback. You don’t want your site to look like a clone of other sites. It should look good, but in its own way. If your site sells things, you want to choose a design that promotes what you’re marketing. If you’re offering a site about gardening, how can you use photos and videos to best advantage? In other words, after you’ve chosen a theme, customize it. What does your particular audience expect to see? In what ways can you make the site look unique and in service of the site’s goal?

Finally, if design isn’t your thing. If you don’t feel confident about modifying your site’s look, no problem. You likely have a friend who knows their way around design. Opposites attract. And, as always, AI knows all about the history of design, as well as fully understanding contemporary trends.

1.6.8 Fine-tuning design the easy way

Cascading style sheets (CSS) is a computer language that allows you to polish the appearance of a site by overruling the theme’s style defaults. In this way, you can fine-tune your site’s design, so it looks more harmonic with your topic and also looks more unique.

For example, if your theme’s body text is Garamond by default, you can use CSS to override that theme default and display your paragraphs in Roboto or Verdana. You gain pretty much complete control of all things visual on your site. You can even make all the text in the site blue, change the font style on a single page, or display a single word in Roboto and leave all the other text in Garamond. In other words, you can modify and polish your site in highly specific, granular ways. This frees you from any design constraints imposed by the theme.

Although CSS is a computer language, you don’t need to learn it. There’s an excellent WordPress plugin, YellowPencil, that generates CSS elements for you in a WYSIWYG (what you see is what you get) user interface. You move sliders to accomplish things such as resizing or repositioning a photo on a page. You can click in a color palette to change colors, choose a new typeface by selecting from a dropdown list, and make many other customizations. In this visual way, you can easily modify and improve the appearance of your site without having to write a single line of code. YellowPencil knows what CSS code is required to achieve the results you’re after.

In addition to YellowPencil, there are a few other quality CSS code-generator plugins you might want to look at, CSS Hero in particular. But in chapter 7, we’ll spend a lot of time learning to use YellowPencil. It’s the most popular. And you’ll also see how to get great computer code from AI systems.

1.6.9 Managing media

One of the important benefits of online communication is that you can add various kinds of media. A site can be improved with the following additions:

- Images

- Audio

- Video

- Documents such as PDF, Word, Excel, PowerPoint, and so on

- Interactive elements such as rotating image galleries and Google maps

- Social media content

- Animation

A frequent mistake in web design is the overuse or misuse of media. Contemporary site design calls for moderate, gentle animation; images that contribute to the site’s purpose (rather than serve as mere decoration.) Also, it’s considered rude to have audio and video start playing automatically all by themselves. The visitor turns them on if they wish to hear or see them. We’ll cover all the bases related to the effective, contemporary use of online media in chapter 8.

1.6.10 Setting up a blog page

A blog is a special, unique page on a website that contains messages (called posts), usually displayed in reverse-chronological order. The blog page can be a way to interact with your audience, a way to post the latest news on your site’s topic, or a customer-service feature that answers questions. Many blogs don’t permit comments from the audience because it can become time-consuming to vet all the incoming messages. But we’ll look at ways to automate the approval process. For example, you can make a list of forbidden words (“dumb”, “s***”, “hate”, etc.). If a message arrives at your site containing any of these words, it gets automatically thrown in the trash, never to be published in your blog.

To retain an audience, a blog should be frequently updated with new content, either text or media.

Although most blogs are primarily textual, some are focused on art (artlog), videos (vlog), or music. Microblogging is another type of blogging featuring very short posts, à la X (formerly known as Twitter).

Over the years, however, it’s become evident that there are several ways to mess up a blog and drive visitors away—or fail to attract them in the first place. In chapter 9, you’ll see how to build and manage a blog that contributes to, not works against, achieving your goals for your site.

1.6.11 Making money

Chapter 10 is all about monetization. Websites can be a source of income in a variety of ways, including the following:

- Placing pay-per-click ads (links) on your site. When someone clicks a link that takes them to a page on Amazon’s (or another merchant’s) site, you earn a commission.

- Using affiliate marketing earns you a commission if someone actually buys something after clicking the link on your site that takes them to a product.

- Selling your own products through an e-commerce plugin such as WooCommerce.

- Getting paid for reviews or other content about a product. This is similar to owning a billboard that businesses rent.

- Walling off a premium area within your site that people must pay to subscribe to before they’re allowed in to see the content.

- Providing a service such as consultation, site design, or marketing.

- Fundraising by adding a donation plugin such as the Easy PayPal Donation.

These approaches aren’t mutually exclusive; you can combine them. But monetization must be handled with care, or you can annoy and shrink your audience. Ensure that you don’t load your site with popup or slide-in animated ads or use sketchy tactics like getting paid for positive reviews.

1.6.12 Optimizing your site for AI and search engine ranking

To attract an audience, you want to rank high in search engines and now AI systems. After typing in what they’re looking for, people don’t often go drilling five down in Google’s list of links past the first page.

This is even more true of AI searches that often display only one or a few links (and sometimes none), not multiple pages of links. AI systems’ designers like to say that whereas Google gives you a list of sites you have to visit to search for the answer you’re looking for, AI, by contrast, gives you the answer itself.

You want a link to your site to show up prominently when a potential visitor searches for your topic. This means you want to impress AI systems, Google, and Bing when one of their spider bots comes to visit you, judge you, and report back to the mothership.

AI, Google, and other searchers have a list of things they don’t like at all! For example, if they find redundancy, ambiguity, or imprecision, they subtract points right then. So you, as your site’s administrator, need to pay attention to the quality of your content, site navigability, accuracy, keeping current, and overall excellence. In other words, because AI, Google, and others strive to provide the best possible search results, ensure that your site is convincingly the best possible answer to someone’s question or need. Don’t try gaming these systems. They know the tricks. Provide quality instead.

Achieving a high rank isn’t easy anymore, and paying attention to SEO is essential if you plan to grow an audience (we’ll dive deep into SEO in chapter 11). And now, you also need to pay attention to AI optimization (AIO). Google, Bing, and other search systems are rapidly evolving to incorporate AI into their processes. The days of seeing a long list of links are over.

Estimates state that more than 80% of people who go online use Google three times a day on average. Google and AI are the pathways to your site for most of your potential new visitors.

In the early pre-Google days, search engines were rather crude. It was pretty easy to get a high rank. For example, you could be listed first in the results when someone searches for a classic car site if you just included the phrase classic cars 400 times. And the closest runner-up site used the phrase less often.

But then Google came along and changed the game. Google’s primary initial breakthrough (that went beyond multi-word, primitive, quantitative ranking algorithms) was to imitate the way that academic papers are ranked. The number of other papers that cite your paper determines your rank. This is qualitative judgment. The idea is that a paper must have importance and quality if it’s frequently cited by other scholars.

Similarly, search systems look at how many other sites link to your site (called backlinks). The systems also consider the quality of the sites that are backlinking to your site. Plus, Google and AI now make dozens of other kinds of judgments as well.

Thanks to AI and deep data mining, today’s search systems are quite sophisticated. Some say that their critiques are now of sufficient quality to be equivalent to the judgments that expert human critics would make. Here are some strategies commonly used to please the searchers’ bots:

- Keywords—Using the same terms that someone would type into Google when looking for a site on your topic

- Optimization—Modifying your site to make it closer to what searchers expect to find in a useful site—in the site’s title, headlines, navigation, images, and other elements

- Content—Ensuring that your site is full of well-written, valuable content useful to your target audience

- Links—Finding ways to increase the number of backlinks

- Speed—Testing your site’s page-load speeds and overall performance and adding a plugin that can speed things up if necessary

1.6.13 Using analytics to build and keep your audience

Website analytics means learning how to improve your site by understanding the behavior of your visitors and measuring the site’s overall performance. You can use analytic plugins to give you potentially valuable data on the following:

- How many visitors come to the site

- Where visitors came from before visiting you

- Which pages on the site people looked at (and for how long)

- Which links they clicked

- The pathways they followed through the site

- Where they were when they left your site

- What, if anything, they searched for within the site

In sum, analytics data lets you know what design elements and content to improve. They can also report on the effectiveness of your marketing efforts if your site is monetized.

1.6.14 Resources: Where to go from here

Chapter 13 is all about how to keep current with AI and WordPress developments. Where you can find the latest information and the best AI tools to use for any task you undertake. Also, WordPress, and its themes and plugins, are rapidly adopting AI features. In this chapter you’ll find the resources to continue with two goals in mind: keeping up to date with AI’s remarkable progress and perfecting your WordPress skills.

The book concludes with various curated lists and descriptions that will help you monitor fast-moving AI developments, and site-building tactics. You’ll learn about all the best YouTube channels, forums, social media sites, online courses, research papers, and conferences.

Now, next in chapter 2, we’ll turn our attention to the first steps in building a high-quality website. You’ll learn how to choose the best hosting service, install security plugins, and block access to the site until it’s impressive and ready for its debut on the world wide web.

Summary

- WordPress has by far the largest market share among website builders because it’s powerful, requires no coding, and is intuitive.

- You save both time and money by knowing how to build a website yourself.

- AI systems such as GPT 4o and Midjourney can improve a website in more than a dozen ways.

- AI prompting is a skill similar to computer programming but much easier because you can use plain English or other natural languages. Prior to AI, you had to learn a complicated computer language.

- Currently, it remains important to learn the tricks and techniques that create good prompts, but AI is likely to take over that job soon.

- Some important initial choices you need to make when building a website include finding the right hosting service and preplanning your site.

- It’s also key that you choose the right theme and plugins and manage your multimedia effectively.

- Employ the YellowPencil plugin to fine-tune your site’s appearance.

- Ensure that you do a good job creating your blog, adding monetization, and learning the best ways to impress AIs and search engines so your site can grow an audience.

- Pay attention to analytics. Data gathered about how people interact with your site can show you ways to provide the best possible experience for your visitors.

2 Starting a website

This chapter covers

- Selecting the right version of WordPress and the best hosting service

- Hiding your site until it’s ready to debut

- Saving your work

- Installing security and backup plugins

- Managing access to your site

Starting off in the right direction matters a lot when building a website. Whether your site achieves your goals or fails can sometimes depend on choices you make before even creating your first page.

For one thing, there are two versions of WordPress, and if you select the wrong one, you can struggle with limitations and inflexibility from then on. In addition, you have to choose a quality hosting service, which stores your site on a server in the cloud. Choose the wrong one, and when you need technical assistance (and we all do now and then), you’ll get delays, bad advice, or no response at all! This chapter is all about making the right moves before you even start deciding on your site’s structure and design.

2.1 Choosing the right version of WordPress

WordPress comes in two distinct versions: WordPress.com and WordPress.org. Most experts agree that, of the two versions, WordPress.org is superior to WordPress.com.

NOTE The terms org and com here just identify these two versions of WordPress, and have nothing to do with .com, .edu, .net (called domain extensions) and other short abbreviations that are appended to internet website addresses like cnn.com or Wikipedia.org.

Your first decision when starting a website is which version of WordPress you’ll use. Recall that WordPress can be installed on your hard drive, but this isn’t recommended. You would have to handle technical problems such as security, uptime, and many other tasks best left to a WordPress hosting service located in the cloud. A key benefit of a hosting service is that you have access to tech support when something goes wrong.

So, why not choose WordPress.com? There is a free hosting plan at the website named WordPress.com. But that free version has limitations—no plugins allowed, for example. However, for small, simple, personal blogs, it can be sufficient. WordPress.com does also offer premium, paid plans, but many reviewers say they’re not a good value when compared to independent hosting services like SiteGround.com, Bluehost.com, or DreamHost.com.

AI assistance

Ask Perplexity, Gemini, or another AI this question:

WordPress recommends only three hosting services. What are they? And why are they recommended?

NOTE Recall that a plugin is a small app that you add to your WordPress site to provide additional functionality such as a rotating slideshow or automatic site backups. Chapter 5 is all about choosing the best plugins.

If you’re planning a site that goes beyond a simple personal blog, you’ll want to sign up with a different hosting service than WordPress.com. And when you sign up with a different hosting service, you’ll automatically be using the WordPress.org version instead of the WordPress.com version because hosting services don’t use the WordPress.com version.

The WordPress.org version is open source and free to use. But quality hosting services do charge a fee. Here are some of the major advantages of a paid hosting service:

- You can expect high-quality, rapid tech support.

- You can add functionality via tens of thousands of plugins.

- Whereas customization is limited in WordPress.com’s free plan, premium hosts don’t restrict modifications.

- They usually offer better performance, such as faster page-load times.

- You’ll get more utilities and features, such as greater bandwidth, more storage, and free site migration.

- The paid hosting plans make it far easier to make money from your site.

If you want to use a premium hosting service and avoid a large up-front investment, you can usually find trial offers under $3 monthly (like cable TV promotional offers, the price does go up after the offer expires). Some hosts also offer a money-back guarantee. If you want to learn more about why most experts recommend using the WordPress.org version, you can find more information in this useful tutorial: https://mng.bz/PNVR.

2.2 Signing up with a first-rate hosting service

A WordPress website normally resides on a server in the cloud. These servers are maintained by hosting services that, in addition to tech support, also offer various utilities such as security systems, a file manager, and encryption. It’s possible to host a WordPress site from your hard drive, but that requires a fair amount of technical skill, and you become responsible for security and other features best provided by a hosting service. Put bluntly, it’s not worth it. Here are some advantages of using a hosting service instead of hosting your site on your own hard drive:

- Reliability—Hosting services have a team of experts who are responsible for keeping your website up and running 24/7. You can lose your audience quickly if your site is frequently down.

- Security—Good hosts have powerful security measures in place to protect your website from attacks. WordPress sites are a popular target for hackers.

- Performance—Hosts’ dedicated servers are optimized for WordPress. Your pages will load faster and be more responsive than if your site is located on your own hard drive. Note that some of your audience will have slow internet connections, and page-load times can determine whether or not a visitor returns to your site.

- Ease of use—Hosts include a set of utilities (in a location named cPanel or Site Tools). You’ll find a utility that installs secure socket layer (SSL; so when someone visits your site, they don’t see the alarming notice: Not secure). Hosts also provide many other useful tools, including automatic backups, updating, file management, and a “staging” area where you can modify your site offline, among other features.

- Cost—Over time, a host can be more affordable than buying and maintaining your own server.

- Support—Last but by far not least is support. You’ll want a quality tech support team available for a rapid solution to technical problems. They need to be knowledgeable, respond quickly, and be easily contacted via chat, email, or phone.

2.2.1 Choosing your domain name

When you first sign up for a hosting service account, you’ll be asked to choose a domain name. This is the URL, the unique address on the internet of your site’s home page. Examples of URLs are bbc.com, amazon.com, and facebook.com.

DEFINITION A site’s home page is the first page in your site. It’s what visitors see when they arrive at your site. You might also see it called the landing, splash, main, index, front, start, and first page.

Every page and every blog post also have their own URLs (interior page and post URLs are called permalinks) but the site’s domain name is the URL of its home page. So that’s the link that when clicked in a search engine list takes a visitor to your home page. Note that permalinks are normally composed of the site name plus a slug (often the title of the interior page). An example of a permalink is cnn.com/world.

People used to struggle to get the best possible domain name for their site—finding one that’s descriptive and short—in other words, memorable. But by now, all the good, unforgettable ones are taken (or are being warehoused until someone is willing to pay a fortune for them). Voice.com was sold in 2019 for $30 million to Block.one, a blockchain technology company.

So don’t torment yourself trying to figure out a perfect domain name, just try to work your site’s best keyword into your new domain name. A keyword is a word or phrase that someone looking for a site like yours might likely type into AI or Google.

For example, if you’re creating a cooking site, get the word recipes or cooking somewhere in the domain name. koolrecipes.com is just fine. These days, people don’t usually remember most domain names. Instead, they’ll arrive at your site via a search engine, an AI platform, a bookmark in their browser, or a link to your site that they found on some other site.

NOTE Google is rapidly transforming itself from a search engine into an AI system. It needs to compete with GPT and other AIs or lose business.

AI assistance

As always when brainstorming, ask your AI associate for ideas. For example, to find a good domain name that’s not already in use for our recipes practice site, I submitted this prompt to Perplexity:

You’re an expert at marketing websites. I would like you to list ten domain names for a new site that is titled “Time Tested Recipes for the Instant Pot.” Make them catchy, memorable, and short. Each need not end in “.com” as its TLD. The TLD can be .edu or .net or .org. Also be sure that each of these domain names contains the word “recipes”. For each domain name you come up with, look for it on the internet. If it is already in use, do not include it in your list of ten domain name suggestions. Instead, try a different domain name and repeat the process of seeing if it’s already in use. Take a deep breath and think step-by-step.

Perplexity responded with some good suggestions:

Here are ten domain name suggestions for a new site titled “Time Tested Recipes for the Instant Pot”:

InstantPotRecipesHQ.com

TriedAndTrueInstantPot.com

TimeTestedInstantPotRecipes.com

InstantPotRecipesCentral.com

InstantPotRecipesVault.com

InstantPotRecipesMastery.com

InstantPotRecipesGenius.com

InstantPotRecipesEmporium.com

InstantPotRecipesHub.com

InstantPotRecipesGuru.com

I have searched for each of these domain names on the internet, and none of them appear to be in use.

2.2.2 Setting up a practice site

In the appendix, you can find instructions to set up a hosting service account, install WordPress on that account, and install the Twenty Sixteen default WordPress theme that you can use if you want to work with a practice site for this book. Finally, the appendix describes how to go to your site’s Settings > General screen and name the site title Time Tested Recipes for the Instant Pot, with the tagline Comfort food for beginners. If you haven’t yet set up a practice site, please visit the appendix and do that now if you want to use a practice site. Some of the examples throughout this book are based on the setup described in that appendix. But you can work on your real site instead if you choose.

When choosing a hosting provider, look for a reliable and affordable company with a good reputation. As is so often the case, the most widely advertised services aren’t necessarily the best choices. GoDaddy, for example, has a sizeable market share. But it gets mixed reviews.

Finding a solid hosting service can be daunting. There are an estimated 330,000 WordPress hosting services worldwide! But WordPress.org itself recommends only these three hosts: SiteGround, Bluehost, or DreamHost. Not coincidentally, I also recommend those three, for the reasons listed a bit further on.

Each of these hosting services is an excellent choice, with great tech support, solid performance, and a suite of utilities at your disposal. You can find an up-to-date overview of the best hosts here: www.wpbeginner.com/wordpress-hosting/.

TIP The wpbeginner site is a good resource. Whenever you have a question about WordPress, you can usually find a solid answer there. They offer clear tutorials, tips, guides, and unbiased reviews. Other useful resources include the following: https://neilpatel.com/, https://chat.openai.com/chat, https://wordpress.org/support/forums, https://wordpress.org/support/, and www.facebook.com/groups/wpbeginner/.

During the setup process when you sign up for a hosting service, you’re asked to create a username/password pair for your hosting service account. Then, when you add a new, empty WordPress install to that account, you’ll be asked for a second username/password pair. Write all four of these terms down on a piece of paper. When you need to go to your hosting account or sign into your WordPress site to work on it, you’ll need these usernames and passwords.

2.2.3 A hosting service checklist

You want to find a hosting service that provides the following:

- Reliable, continuous uptime—You should expect 99% uptime because if a service causes your site to be unavailable, you can lose part of your audience. People know that there are alternatives to your offerings, and the internet has conditioned most people to have a very quick finger on their mouse button. It takes only a few seconds delay for many internet surfers to fly away elsewhere.

- Fast page loads and caching—Consider that many in your audience have become impatient with any kind of delay, including a site page that loads slowly. So when reviewing a hosting service’s metrics, check their average page load speed. Also look at whether a spike in traffic to the site affects the load speed.

NOTE One important technology that contributes to rapid page display is caching. To speed up the display of a page, hosting services cache (store) pages from your site that were previously displayed. When that same page is requested again, the host can just slap that already-rendered, cached page onto the visitor’s screen. This avoids the delay caused by the rendering process. (To display a fresh page, the browser must perform a variety of tasks—fetching images from your WordPress Media Library; looking at any CSS code to see if a font size, for example, differs from what the theme’s CSS style sheet specifies; scanning HTML code to figure out where to position the page elements; and so on. So you’ll want a host that caches its sites’ pages efficiently.)

- Effective security—Redundancy is usually a good thing in security. It’s important that your hosting service offers its own robust security system, and that you also install a security plugin such as Wordfence. Top secret military installations don’t rely on a single fence, nor should you.

- A reliable backup system—Quality hosting services automatically back up your site daily. Again, you’ll want to also install a separate backup plugin. Thus, if your double-fenced security precautions fail, you can still restore your site.

- Easily accessed and reliable tech support—Everyone who creates or manages websites is going to need to talk to a hosting service’s tech support now and then. This isn’t a matter of if, but when. So you’ll want to choose a service that offers rapid and accurate response to your phone, email, or chat queries. All three of the WordPress.org recommended hosts mentioned previously provide that kind of tech support. They can be relied on to get you out of difficulty quickly.

- Servers located near your target audience—Although the headquarters of a hosting service doesn’t matter, the location of their servers does. Some of the best hosting services advertise a content delivery network (CDN), which just means they offer multiple servers around the world to store your site. Your pages load more quickly if the server hosting your site is located at least on the same continent as your primary audience. Many people who might otherwise join your audience simply won’t tolerate sluggish page-load times. And some in your audience will also have slow internet connections. For them, page-load speed is a major consideration when they decide whether to bookmark your site for future visits—or fly away.

To sum up, you’ll likely be well served if you sign up with one of the big three recommended by WordPress.org: SiteGround, Bluehost, or DreamHost. But if you want to explore other options, you can use that checklist given earlier to avoid regret later on.

2.3 Visiting your backend

In the WordPress backend where you work on your site, there are quite a few different pages, such as a menu-construction page, a Media Library, and an add new plugins page. However, we’ll call them screens rather than pages, to distinguish them from the site’s actual pages as viewed by your audience. The backend is the view of the site that only you, the administrator (or others you give permission to), can get into. Here, you’ll add new pages, perform housekeeping, make improvements, and otherwise build and maintain the site. It’s the engine room, down below what your visitors see. Visitors are kept to the frontend, the public area of the site.

The first thing to do after setting up a brand-new, empty WordPress installation on your hosting service is to go visit the backend of your site. Its address is based on what you chose for your site’s URL (domain name) when you signed up with your hosting service. For example, if your domain name is https://mysitesname.com, then your backend address is https://mysitesname.com/wp-admin.

Your backend address is just a modification of the frontend address. You simply append /wp-admin to your domain name. When you first visit the backend, bookmark (or favorite) it in your browser. In addition, when your browser asks if you want to save the username and password, do so to easily go there whenever you want to work on the site. And note that when you want to look at your frontend, just remove the appended /wp-admin part of the address.

In 2018, the WordPress development team added a second editor to WordPress and made it the default. The editor is where you add new content to a site or modify existing content such as text, images, multimedia, hyperlinks, and so on. The new editor is variously called Gutenberg or the WordPress block editor.

So, WordPress developers have two editors they can choose from: the traditional classic editor and Gutenberg. The former somewhat resembles a word processor on steroids, and the latter is like a page builder. Third-party page builders such as Elementor and Divi have become popular WordPress plugins. Page builders can offer functionalities such as drag-and-drop layouts, WYSIWYG dynamic design, and page templates, as well as additional functionality such as tools for fine-tuning the site’s appearance without writing code.

Gutenberg is designed to build into WordPress what aftermarket page-builder plugins have offered for years. For now, I recommend that you switch to the classic WordPress editor. That way, your results will match what’s shown in this book. However, throughout the book, the way to do things using Gutenberg is also described. The choice is yours. If you want to use the classic editor, see the instructions in the appendix. It’s easy to switch back and forth between classic and Gutenberg with a plugin called the Classic Editor.

2.4 Hiding your site while it’s under construction

You’ll want to wait until your website is polished before making your site public. It’s clearly important that search engines judge the quality of your site after you’ve done your best to make it brilliant. You also don’t want prospective members of your audience to decide whether to visit your site again, or bookmark it, based on a half-finished job.

So, you should block Google and other search systems such as perplexity.ai until you’re ready for your grand opening. To block search systems, go to the backend of your site where, on the left side, you’ll see a black menu, called the admin menu or dashboard. Click Settings to open its submenu, and then click Reading, as shown in figure 2.1. Then, next to Search Engine Visibility, select the Discourage Search Engines from Indexing This Site checkbox, and click the Save Changes button.

The final step in hiding your site is to install a coming soon plugin. If someone does visit your site, they will only see a message that the site is under construction.

However, as the administrator of the site, you can view the real pages. You need to. When working on your site, you’ll want to take a look at the frontend now and then. The coming soon plugin stores a cookie in your browser to make it clear that you’re allowed to see the pages as they really are.

TIP Cookies are small pieces of data usually stored in your browser by some sites you visit. The primary purpose is to save you time. If you previously filled in a form or logged in with a password—you won’t need to repeat those actions if the information was stored in a cookie when you visited the site before.

Figure 2.1 In your Settings > Reading screen, discourage search engines from judging your site-in-progress.

One good coming soon plugin is Website Builder by SeedProd. To use it, click Plugins > Add New in your WordPress backend dashboard. Then, in the upper-right search field, type seedprod. Finally, click the Install button, and click Activate.

Some plugins and themes add items to your Dashboard menu. In the menu on the left, click SeedProd > Landing Pages, as shown in figure 2.2.

Some plugins display the Gutenberg-style UI, even if you activate the Classic Editor plugin. SeedProd, for example, is one of them. When you get to the SeedProd Design screen, you can get a taste of how the Gutenberg block editor works in WordPress. SeedProd mimics the block editor. If you wish, add some of SeedProd’s blocks and also replace the nonsense text with your message. Then, your real pages are replaced by this coming soon page, informing visitors that your site is currently being built. Click the Save button. If you see a warning that WordPress isn’t allowing you to save, SeedProd displays information on how to solve that problem. Anytime you want to see how your coming soon page appears to visitors, type or paste your site’s frontend address into a browser that you didn’t use to set up this plugin.

The SeedProd plugin also includes an Under Construction screen that you can use if you’re updating an existing site. But you should avoid this approach unless the site is in really bad shape. Your site’s visitors expect access. You can lose some of your audience if your site is down, even briefly.

Figure 2.2 Click Landing Pages under SeedProd, and then click the Edit Page button to customize your coming soon page.

Instead, it’s usually best to update your site by working on a copy of it, rather than shutting down the live site. Use the staging utility found in your hosting service’s cPanel collection of utilities (or you can add a staging plugin to your site). When staged, the site is copied, but the live site remains accessible to your visitors. You make your improvements to the copy. Then when you’re finished, the copy replaces the older version and goes live.

There is an exception to staging. If your site is badly mangled by a malware attack, for example, and thus there are broken links, missing pages, visible code, blank pages, or whatever, you would be better off just displaying an Under Construction screen with information on when the site will be available again. You don’t want visitors to arrive at a site that’s rife with problems.

An optional step when keeping your site private is to hide individual pages and posts unless you give someone a password to access them. Each page and post in a site has its own, separate permalink URL internet address.

Normally a permalink is constructed by appending the page’s title to the site’s address:

- https://siteaddress.com—Site address.

- https://siteaddress.com/about-us—This would be the About Us page’s permalink address. (URL addresses can’t have space characters, so a hyphen is inserted to replace the space in the page title.) In this example, the about-us portion of the address is called a slug.

Given that interior pages have their own URL addresses, it’s possible for someone to arrive at one of these inside pages before you’re ready for your site to be made public. That said, a quality coming soon plugin such as the one from SeedProd by default displays the coming soon screen on all the pages.

2.4.1 Asking AI to leave your site alone

AI systems “learn” by traversing the internet and memorizing and organizing the content it finds. But if you don’t want AI to use your content, you can request that AI systems don’t harvest the information in your site. And some AIs will comply. The effectiveness of that request will likely depend at least in part on future copyright law.

Let’s say you want to keep all or part of your content off-limits—only available to people who pay you for access to that information—or you don’t want AIs to harvest your content. You can try to prevent AI or search engines from visiting your pages by storing a file titled robots.txt in your site’s root file directory. (That directory is the one named public_html in your site’s database, which is stored on your hosting service’s servers.) If the file is already there, you can modify it. Or you can create a new file by that name. But be sure you know what you’re doing if you mess with your site’s files. You could trash your site. (Before modifying your site’s files, be sure to back up your site first.)

In any case, you can specify in that file what access permissions, if any, you’re granting to AI. To see the specifics of what to type into that file, visit https://mng.bz/eyww. And if you need help figuring out how and where to save this file, you can ask your hosting service’s tech support people.

2.5 Saving your work

Some applications, such as Microsoft OneNote, automatically save any changes you make. WordPress doesn’t do that. Instead, when you modify content in a page on your site, you must click the Update button (or several synonyms that WordPress displays for that button).

Here’s one problem with those synonyms: WordPress isn’t consistent in naming the buttons that save your work. For example, when you first create a new page in WordPress, the button that saves your work is labeled Publish. Then, that same button’s label changes to Update. It’s not good UI design to change the name of a button. Beginners are often confused by this. It would be an improvement if all the buttons that save your work were simply all named Save.

WordPress is normally intuitive. The UI is well-designed. But these save buttons are confusing because they have different meanings. It’s just something you have to get used to. For one thing, publish normally means make public. In other words, you would think that clicking Publish means that your audience can now see the most recent version of a page you just modified. But that’s not always so. If the page is cached (stored for future display), they won’t necessarily see the new version, particularly if the caching algorithm considers the modification minor.

In addition, you might be working on a draft of the page or have specified that this page is to be private. In those cases, the page is stored only to your site’s database, but it’s not made visible to the public.

Making matters worse, this same button that saves your work is labeled in several other ways in different screens in WordPress. When you’re working on the site’s menu screen, it’s named Save Menu. In some other screens, it’s called Save Changes. You’ll also find just plain Save sometimes.

And there’s one more problem. This “save” button appears in various locations on different screens. It’s often on the upper right, sometimes the lower right, and sometimes way down at the bottom of the screen so you have to scroll down to even see it.

Note too that there are several ways you can exit from an unsaved screen: click a different tab in your browser, close the current tab, shut down the browser, or switch to a different application. If you do exit without saving your changes, WordPress usually displays the warning message shown in figure 2.3.

Figure 2.3 You’re usually warned like this if you try to go away from a page where you didn’t save modifications you made.

The key word here is usually. On a few screens, there’s no warning, and you lose whatever work you did on that screen! So, you’ll want to make a habit of saving modifications by clicking the Save button, or whichever of its various labels might be displayed at the time.

2.6 Ensuring site security

If you’ve signed up with a quality hosting service, you can be sure that they have established a set of fences between your quivering young website and the menacing spider bots that constantly roam the internet—tirelessly probing, at astonishing speeds, for vulnerabilities. But before you invest time building your site, you’ll want to take two defensive steps of your own: add a security plugin, and add a backup plugin.

True, a good host invests a great deal of effort to ensure that its servers are protected. A massive attack would destroy their business. Good hosts also back up your site daily or at a frequency you choose that best matches your situation. But redundancy in these matters is a good thing. Most people turn on Windows Defender but also invest in a separate anti-virus application that also helps their machine.

One widely respected WordPress security plugin is Wordfence. It’s a freemium product—offering both free and paid plans—but the free version is quite effective. Add it to your site in the early days of site building. Here’s how:

1. Go to your Plugins > Add New screen.

2. In the search field, type wordfence.

3. Click the Install button, and then click Activate.

Also ensure that your passwords are strong, both the one to the backend of your site and the other password to your hosting service account. Your browser can remember these passwords for you, so there’s no reason not to make them complex and meaningless. Remember that the evil spiders flashing around the internet are tireless. One of their tricks is called a brute-force attack. They can try every word in the English language and every combination of a finite set of digits, until they hit on your password.

2.7 Automating backups

One of the best backup plugins is UpdraftPlus, which is used in more than 3 million sites. It’s a freemium service, but the free version works very well. Here’s how to install it:

1. Go to your Plugins > Add New screen.

2. In the search field, type updraftplus.

3. Click the Install button, and then click Activate.

After it’s activated, go to your Settings > UpdraftPlus Backups screen, and click the Settings tab, shown in figure 2.4.

Click the down-arrow next to the Manual setting for Files Backup Schedule. This drops down a list from which you should choose Daily if you’re actively modifying the site or if you have a busy blog frequently adding new posts.

Figure 2.4 In this settings screen, specify how often to back up your site’s files and database, how many backups to retain, and where to store them.

Do the same for the Database backup schedule. Also choose 10 or so for the number of backups you want to retain. The 11th backup becomes the first in the stack, and the oldest one, the 10th, is deleted. Finally choose the location where you want your backups stored. Then, be sure to click the Save Changes button.

TIP While you’re building or actively updating your site, a daily backup ensures that you won’t lose too much of your work. But if you’ve made changes you want to save right away, you can always back up manually: just click the Backup Now button on the main UpdraftPlus settings screen (the Backup/Restore tab). In addition, if you’re not making changes to the site for several weeks, you can reduce the frequency of the automatic backups.

However, if your site does suffer a massive attack or some other catastrophe, and you can’t restore it, there’s still hope. Go to https://archive.org/web/, and paste your site’s frontend address into the search field. You’ll at least be able to copy and paste the text content stored on this archival site, and you can also take screenshots of the images and the page layouts. This will at least make reconstructing your site from scratch much easier. You’ll have the site design, page layouts, and content back.

2.8 Managing site access

If you want to have others working on your design, contributing to the content, or subscribing to your site, you’ll need to decide how much and what kind of access you want to grant them. Not everyone needs total, administrator-level control over the site. You can provide various degrees of permission, each with its own scope. Essentially, you can specify what a given person can or can’t do in the site. You set these permissions in the Users > Add New screen, shown in figure 2.5.

Figure 2.5 In the Add New User screen, you specify a permission level for someone you’re allowing into the backend.

2.8.1 Understanding the various user roles

There are some default user roles available for your use. The following describes each user role:

- Administrator—People assigned this role have complete control over the site. They can add, delete, or edit any content, anywhere. They can manage other users, change any settings in the site, and install or remove plugins and themes. Their most significant capability is that they can delete, modify, or add other users, including changing their passwords. In other words, administrators can do anything.

- Editor—They are able to add, delete, or modify any content in the site, and they can moderate blog posts. They aren’t allowed to install or manipulate themes or plugins, add new users, modify the roles of existing users, or change the site’s settings.

- Author—This role represents little risk to the website. Authors can add, delete, or create post tags, or modify their own posts. They can’t create new categories. They can’t approve or delete other people’s posts. And they can’t do anything else to the site.

- Contributor—These people have permissions similar to the author role. However, they can’t delete their published posts. And unlike the author role, they can’t add files to the site, so this prevents them from including pictures in their posts.

- Subscriber—Subscribers can modify their profile or change their password. But they can do nothing else.

A new user gets an email from you (if you choose that option when setting them up). It tells them their username and displays a link that allows them to create a password.

In addition to these default user roles, as the administrator, you can define custom roles. This way, if one of the default roles isn’t what you’re after, you can create a new role that includes whatever set of permissions you do want to grant. It’s considered best practice to have only one, or at the most two, administrator users. Others should have less control over the site.

Plugins and themes can also add roles in addition to the WordPress default roles. For example, the WooCommerce plugin adds shop manager and customer roles that define how a user can interact with its e-commerce features.

2.8.2 Monetizing via subscriptions

One good way to generate income from your site is to provide content that visitors must pay for, and you can wall off the entire site or only part of it. People rarely object to this kind of monetization because it’s voluntary and unobtrusive.

TIP The subscriber role is most often used in sites that are based on a membership, subscription, or online store model. Users must register and pay to access some or all of the site’s content. Another scenario for the subscriber role is to let subscribers register and comment on posts but block them from creating or publishing other content.

How to monetize

If you want to monetize your site’s content, here are some suggestions that employ the subscriber user role:

- Online courses in which people pay either to view the content or to join online classes

- Magazines in which part or all of the site is walled off, offering premium content

- Paid subscriptions offering special discounts only to those who register

- Private forums

- Consulting or coaching services

To change a user’s role in WordPress, follow these steps (see figure 2.6):

1. Log in to the WordPress dashboard as an administrator.

2. In the admin menu, click Users.

3. Find the user whose role you want to change, and click their username to open their profile.

4. Scroll down to the Role section of the user’s profile.

5. Select the new role from the dropdown menu.

6. Click the Update User button to save the changes.

2.8.3 Password-protecting pages

Here’s another way to control access to the pages or blog posts in the frontend of your site. Your visitors can be divided into those with passwords to certain pages and those who can’t view those pages. You can wall off individual pages and posts by marking them as password-protected. Here’s how:

1. Go to your Pages > All Pages screen.

2. Click the title of the page you want to password-protect.

3. In this Edit Page screen, locate the Publish module on the right.

4. Click Password Protected.

5. Type in the password.

6. Click the Update button.

Figure 2.6 Here’s where you can change the roles of multiple users at one time via the Bulk actions feature.

Figure 2.7 shows where you can password-protect a page or post, barring anyone without that password from viewing it.

Figure 2.7 In the Publish module, type in a password that you can give to those allowed to view the page.

TIP Only those with Administrator- or Editor-level permissions are allowed to view pages or posts marked password-protected, even from within the site’s backend.

In addition to monetization, making content password-protected can be useful in several other ways:

- Visitors can’t see it, even if they know the page’s permalink address.

- You’re adding a new page to your site, but want it hidden until it’s finished.

- You want some pages or posts to be viewed by a subset of your audience—only adults, for example.

A page or post can also be scheduled to appear at a specific later date if you edit the Published On field in this same Publish module.

In this chapter, you’ve learned several important preliminary steps to take when starting a WordPress site. You need to select a solid hosting service, choose an editor you’re comfortable with, install security, and decide who has access to what in your site’s backend. In the next chapter, you’ll see how to focus the site on a single, specialized goal, and set up an essential component of any quality website—efficient navigability.

Summary

- Starting off in the right direction, and some preplanning, helps you create a coherent, organic website.

- Many experts agree that you should use the free, open source version called WordPress.org, instead of WordPress.com.

- Choosing the right hosting service can make or break a website. Everyone needs solid tech support now and then, and you don’t want to sign up with an outfit that ghosts you when you need help the most.

- You won’t go wrong if you sign up with one of the three hosts that WordPress.org itself recommends: Bluehost, DreamHost, or SiteGround.

- WordPress has two editors. Try them both if you wish, but the classic editor is more stable and efficient overall than the new Gutenberg block editor. The latter remains under construction.

- Hide your site from search engines and visitors until it’s polished and ready for its debut.

- Be sure to install two essential security plugins: UpdraftPlus and Wordfence. The former reliably backs up your site automatically, and the latter guards your site against virus attacks.

- Explore the several tools that WordPress provides to allow you to control access to both the backend and frontend of your site.

3 Site-building preliminaries

This chapter covers

- Tightly focusing your site’s topic

- Setting a goal

- Creating a hierarchy

- Making good use of links

- Building an effective menu system

Why preplan your website before you start adding text and images? It’s very simple: specifying your topic, deciding on your primary goal, and creating the hierarchy for its pages informs many decisions that you make later.

If you just jump right in and start adding content, it’s almost impossible to effectively focus the site and know what to prioritize. For most of us, that results in an unorganized and chaotic workflow. And the likely outcome is an unorganized and confusing website.

Throughout this book, we’ll describe how to build and modify a practice site. This way, you’ll see how to apply—via real-world examples—the various concepts introduced in each chapter. However, you can just apply the concepts directly to your own website if you prefer.

Or you can actually set up a new, empty WordPress site and work on your own version of the practice site. The appendix provides details on how to set it up if you want to build it yourself as we teach all the various skills and techniques that contribute to creating a quality website. The practice site is titled Time Tested Recipes for the Instant Pot, and its tagline (slogan) is Comfort food for beginners. However, we’ll also look at other use cases now and then. In this chapter, for example, you’ll see how to prepare to start building an e-commerce site for bass fishermen.

This chapter shows you how to intelligently lay a solid foundation that will help you create a coherent, professional-looking site that you can be proud of. The very first step is to focus your site’s topic. Put another way: find a niche.

3.1 Focusing your site

Perhaps the most common mistake beginners make when starting their first website is choosing a broad topic. It’s logical but dead wrong.

Consider this use case. A man lives in North Carolina and frequently fishes in the Randleman Lake. He’s an expert on catching wide-mouth bass in that lake. He knows the best time of day, the best season of the year, the right weather conditions, and other details that make him a very successful bass fisherman.

You need to choose a good title for your site. (The title isn’t the same thing as the internet address that goes in a browser’s address field [URL] to get to your site.) The title appears on the top of each page on your site. But it need not be unique like the URL must be. In WordPress, you can type in, or change, the title any time you want to by going to the Settings > General screen.

So, when deciding on his site title, our fisherman thinks: Hey, I can give really good advice about fishing here in the Randleman Lake after all these years. But just talking about this one particular lake would really limit my audience. So, why just offer all my good tips only to the locals? There’s a whole big world of fishermen out there. I should go for that huge audience. Plus, down the road, when my site is enormous, I’ll sell them my special handmade lures too. This can be big! I’ll just write about fishing in general and sell to a huge customer base! Wowzer!

That’s common sense, it’s intuitive, and it’s the worst possible way to choose your title. The reason it’s so wrong is that if your site’s focus and title are fishing, you’re in competition with 130 million other sites that also use that keyword—everything from radar scanners to toadfishing. And some of these sites are mature and popular. There’s zero chance that your site will show up if someone searches for fishing. Most people will likely use additional keywords, such as North Carolina, bass, or even Randleman Lake. So our fisherman should vastly narrow his site’s topic by using keywords like this: bass fishing in Greensboro’s Randleman Lake.

That kind of title will trigger only a couple of competing sites during a search. And if a search tool or AI judges that your site is well-crafted, you can even be the one most recommended by AI or a search tool.

That approach—tightly focusing your title and content—is how you can increase your chances of growing a sizeable and loyal audience. After all, there are about 2 million people within driving distance of Randleman Lake. As an audience, that’s big enough.

3.2 Specifying site goals

Some people are good at improvisation, making things up as they go along. But for most of us, it’s almost always a good idea to make a plan for a site before starting to build it. If you have too many afterthoughts, instead of growing organically, the resulting site can feel cobbled together, incohesive, ragtag, even jarring.

So, figure out your main goal (not goals) for the site. And keep working toward that goal as you construct the site. The result is likely going to look organized, thus engendering trust and conveying quality. Whatever your goal, you want the site to look professional, not amateurish.

First decide which type of site you want to build. Are you going to sell things? If so, you’re building an e-commerce site. Is the site just for your family and friends, a kind of multimedia diary of your activities, life history, or genealogy? That’s called a personal blog site (in that kind of site, you don’t have to find a niche—you’re it).

TIP Most personal sites have a very limited audience of just relatives and friends. Such sites rarely attract a large audience. For one thing, they’re generally all over the place, unfocused, having no clear, single topic. A few people become influencers—they get lucky and build an audience. But unless you’re already a celebrity, with an existing fan base eager for the details about your comings and goings, your personal blog will most likely attract few followers outside your circle. And that’s fine if you’re not concerned about generating income or building a large audience.

3.2.1 The 10 types of websites

Websites can be grouped into roughly 10 different categories, based on their primary purpose. Of course, some sites blend two or more goals, and some sites are so unique they can’t be easily categorized, such as DudeQuote (www.dudequote.com)—a Big Lebowski movie quote generator. Here’s a list of the main categories:

- E-commerce—A site devoted to online sales. Examples include eBay, Etsy, and millions of individual sellers.

- Blog—Focusing on messages posted in reverse-chronological order in a single page on the site. Some blogs encourage interactivity, allowing visitors to respond to posts. In general, a blog provides up-to-date information, as opposed to static pages that don’t change as often. Today, many sites feature a set of traditional, static pages, but also include a blog page. Such sites are called hybrid sites.

- News—Sites such as BBC or CNN.

- Social media—Where people can interact with friends and family, share comments and media, and join in discussions. Facebook is the most famous one.

- Forum—Similar to social media, but primarily designed to answer questions or exchange information on specific, usually technical, topics such as programming. Many applications, including WordPress itself, set up forums where beginners can connect with helpful experts. Or experts can exchange ideas. A forum is usually a message board containing questions and answers. By contrast, social media tends to contain more generic content, including multimedia.

- Informational—Wikipedia, our own Recipes practice site, and similar sites provide knowledge of various kinds. Some informational sites can be useful for research. But usually, the most effective resources for research are AI-powered sites such as GPT, Claude, Perplexity, and the rest.

- Educational—Udemy and ed2go are two examples of online schools. Some offer video lessons, and others include a discussion board where students can interact with instructors. And many teachers and librarians set up small, local educational sites for their local students and patrons. For example, I teach three courses for ed2go, the online school: Blogging & Podcasting for Beginners, Creating WordPress Websites, and Intermediate WordPress Websites.

- Chat Bot—These AI-based systems provide information in the form of a dialog or chat. In other words, you can drill down to more helpful answers to your queries by requesting elaboration on, or revision of, previous responses.

- Portfolio—Artists, writers, or others wanting to present their creations build portfolio sites. There are many excellent themes designed to show off various kinds of creative work.

- Employment—A site like MonsterInsights (www.monsterinsights.com) offers resources for jobseekers, such as creating a resume, looking for openings, promoting your availability, and applying for positions.

- Government—Local or national sites designed to assist with services, policies, and other government resources.

3.2.2 Five questions to answer

Before actually starting to build your site, ensure that you’ve answered these five questions:

- What is the purpose of your site?

- Does the site’s short-term goal differ from its long-term goal? In other words, will the site’s purpose evolve over time? For example, do you plan to grow an audience first, and then sell things later on?

- Who is the target audience?

- What will people want to get from the site?

- How much are you prepared to spend on a hosting service, plugins, and a theme?

Making these basic decisions about your goal helps steer the design and content into a harmonic whole. It also helps you choose plugins, features, and functionality that will effectively support your goal. Here are some example answers to those questions for our bass fisherman’s site plan:

- The long-term purpose of my site is to eventually sell my handmade lures.

- Yes, the purpose of my site will change over time. Initially I want to just attract local bass fishermen, and keep them coming back by providing up-to-date, valuable tips on how to fish Randleman Lake. But eventually I’ll add an e-commerce component to market my admittedly costly, but very effective, lures.

- The target audience is people who fish Randleman Lake and want to catch bass instead of crappy or catfish.

- I will give my audience excellent, specific information that they can use to up their fishing game.

- I plan to get a freemium theme, use the free version for a while, and then maybe move up to the paid version when the site takes off. I’ll see if I end up needing the features of the pro version. And I’ll use the DreamHost hosting service because it’s highly recommended, but still has a low, up-front pricing plan. (I do understand that hosting services usually increase the monthly cost after an introductory period.)

3.2.3 A consultation with Claude AI

Now that I’ve provided my best answers to those five questions, I submitted the questions and answers to claude.ai for its suggestions. I started the prompt with the following:

As an experienced, professional website designer (and a bass fisherman), take a deep breath and review my answers to these five questions and answers. Thinking step-by-step, list any additions or suggestions you have to improve the answers about this plan for my bass fisherman’s site. You are my consultant on a new website project. And do the best you can do, or there will be consequences.

Claude responded with some good ideas:

Here are some additional suggestions from my perspective as an experienced bass fisherman and website designer:

Emphasize your personal expertise fishing Randleman Lake specifically. Provide details on numbers of years fishing there, favorite spots, biggest catches, etc. Establish your credibility.

For the target audience, get very niche – target serious bass fishermen who regularly fish tournaments and club events on Randleman Lake. Cater content for die-hard regulars and the casual weekend anglers will follow.

Focus on providing pro tips and advanced tactics for catching lunker bass consistently on Randleman. Go beyond basics – share your specialized, proven methods.

On the community aspect, consider creating a Randleman Lake bass fishing forum for visitors to interact and share their experiences. This could spark ongoing engagement.

For monetization, research affiliate programs for bass gear and boats that align with your audience. Consider partnering with local fishing guides and lodges.

Budget for paid promotions to spread awareness of your site among core targets – Facebook ads, sponsoring events, tactical SEO, etc.

Leverage your own social media presence in the bass community to promote the site. Guest post on influencer blogs too.

Let me know if you would like me to expand on any part of the plan or provide additional tips from my experience in bass fishing and building niche websites. I’m happy to lend my expertise!

Finally, once you’ve figured out what type of site you’re going to build, visit other popular sites of that type. Learn from them what works, what should be included, and what functionality and design is best. Also include keywords in your title, tagline (a phrase displayed on each page, just beneath the title), and text content. Use precise and detailed keywords that people are likely to use when searching for the information your site offers such as

art resources in Boston for kindergarteners

or

prize-winning watercolor Italian street scenes

Notice that these search terms are focused on fairly specific topics. And you focus by adding adjectives. I use the word focus more than once in this chapter.

3.3 Create a hierarchy

If you want your site to succeed, efficient navigation is essential. People come to a website looking for something. But one thing they are not looking for is a site so disordered that their first reaction is bafflement. If you make them feel that they have to solve puzzles to get what they came for, they’ll go elsewhere very quickly.

You want to make the path from your home page to their goal clear and intuitive. Make sure they aren’t confused. Remember that people rarely blame themselves when they’re bewildered. They just become frustrated with you and your pointlessly random, complicated, and inefficient website.

You must give visitors a mental model of your site’s structure right away. And as your site grows larger over time, a solid, logical architecture makes future modifications easier. Finally, AI bots and search engines rank you higher if they see that your site is coherent and sensible.

In future chapters, we’ll explore ways to get feedback about how people traverse your site, where they stumble, and other data you can use to make their user experience (UX) as good as possible. But for now, let’s consider the basics: hierarchy and navigability.

3.3.1 Site structure: Parent and child pages

Before creating your site’s pages, make a list of the topics you want to include on your site. Then arrange the list into sets: parent pages, child pages, grandchildren (if your site is quite large, grandchildren could be necessary).

TIP Try to avoid grandchildren pages if possible (children of child pages)—people find them counterintuitive and difficult to navigate in the best of circumstances.

Site menus normally only displays parent pages. When the visitor moves their mouse pointer onto a parent page’s name on the menu, a set of child pages drops down. This is the typical way that most visitors will navigate your site.

For example, parent pages in our fishing site might include Lures and About Us. And child pages would be subpages of those. The Lures parent page could have four child pages: Crankbaits, Spinnerbaits, Topwater lures, and Buzzbaits. Child pages under About Us might be titled Our History and Future Plans.

The goal here is to organize the site into five or six major parent pages, each potentially including subsidiary, subtopics (child pages are also known as submenus). A site’s menu is a set of links to the site’s pages that is usually displayed as a horizontal bar near the top of each page.

Let’s see how this works in practice. For example, the fishing site can include these primary, parent categories as its main menu items:

News (blog) Tips & Techniques Tournaments Contact Us

It’s desirable to keep your menu as brief as possible. So, limit yourself to no more than six parent pages, unless that sacrifices navigability. Create a descriptive, catchy site title, but note that the title isn’t the same thing as the site’s URL internet address (URL’s end in .com, .org, or some other suffix). Now consider how our fishing site could display the seven elements of a typical website page, as shown in figure 3.1.

Figure 3.1 A contemporary website page usually includes at least these seven elements: the site title, the site tagline (slogan), a banner image, the page title, the menu, the body content, and a call to action.

3.3.2 Ask AI to create your page hierarchy

Could AI work up a first draft of a hierarchy for our example bass fishing site? Indeed, it can.

TIP Do get used to your role when working with AI: you’re the boss; it’s an assistant, albeit far quicker than you are, gifted with an internet-size memory, light-speed thought processes, multitalented, and the list goes on. Bosses are in a position of power, but that doesn’t mean they are necessarily the brightest star in the sky. Your role as boss is to think up assignments, pass the job to AI, and then judge which of its responses are solid and which need further work. You can always request that AI try again. Or you can make improvements yourself.

To ask AI for a page hierarchy (that is, the site menu system), it would be helpful to specify two tasks:

1. Find and list the most successful bass fishing sites.

2. Display an ordered list showing what those sites’ menu hierarchies have in common. These questions will help ensure that no topic is being overlooked, and will also likely generate the best, most logical overall site organization. AI is nothing if not capable of logic.

So, I gave this prompt to Copilot:

You are an experienced website reviewer and critic. And you’re also an expert bass fisherman. Please list the URL addresses of the five most successful bass fishing websites in the world. Double-check to see that these URLs are still actively in use, and that they rank very high on Google searches using the keywords “bass fishing”.

It replied:

Based on my search results, here are the top five bass fishing websites that are currently active and rank high on Google searches using the keywords “bass fishing”:

1.  BassFan

2.  BassResource

3.  BassRankings

4.  Bassmaster

5.  FLW Fishing

Then I followed up with a second prompt that asked Copilot to design a menu that combined the topics that those five sites had in common:

You understand website menu systems. Please examine the menus and submenus of those five sites. List the parent pages and their child pages by combining all five sites’ menu hierarchies into a single ordered list. Recheck your results to ensure that you’re combining these hierarchies into a single menu hierarchy for a great bass fishing site.

And Copilot provided this useful, logical hierarchy:

Based on the menu structures of the top five bass fishing websites, here’s a combined hierarchy that could serve as a general structure for a great bass fishing site:

Home

News (Blog page)

Latest News

Pro Tour News

Dock Talk

Tournaments

Schedule

Results

Standings

Angler Profiles

Rankings

World Rankings

Angler of the Year

Tips & Techniques

Pro Fishing Tips

How-To Videos

Gear Reviews

Forums

General Bass Fishing Forum

Smallmouth Bass Fishing

Fishing Reports

Gear

New Products

Tackle Reviews

Videos

Top Catches

Pro Diaries

Articles

Featured Articles

Opinions

Membership

Sign In/Join Now

This covers the bases for a bass fishing site. It includes some good topics I hadn’t thought of. However, I’d want to prune the menu down to reduce its size to only about six parent page items. For one thing, I’d move Tournaments and Membership off the menu and onto a sidebar. But why should I worry about pruning when my eager, prodigy assistant will likely do a better job? We’ll pass this menu-reduction task to AI soon.

3.3.3 AI can create an entire site for you

Do you want AI to generate a whole new site, or at least give you a first draft to work with? Several AI-powered systems offer to do just that. Of them, 10Web (https://10web.io/) is a good choice. You just give it some basic information about your intentions. Then, it does a reasonably good job of generating a real site.

You’ll of course need to make adjustments and provide content, but for some people, this process will be easier than starting from scratch with an empty, blank site. 10web does tend to favor long-scroll home pages (the entire site on the home page), which I think makes navigation difficult. However, the site hierarchy, text, and images 10web generated are surprisingly good, as you can see in figure 3.2:

Figure 3.2 This was generated from a brief, paragraph-long prompt describing our Instant Pot recipes practice site.

These instant site builders aren’t that great at generating effective navigation, choosing the right theme or plugins, or writing useful text content. So, I would use them mainly for design ideas.

3.3.4 Using menu plugins

As always, you can install plugins that give you additional features and options for your menu. Here are three popular menu plugins:

- UberMenu—Lets you create complex mega menus (meaning they have multiple levels and can include special content such as maps or blog post grids).

- QuadMenu—Features a drag-and-drop interface to build menus that include, for example, animations, icons, and social media integration.

- Max Mega Menu—Allows you to add mega menus with widgets, transitions, and more.

TIP A mega menu allows you to display grids, icons, multiple levels, transition animation effects, and other advanced features. See some examples at the Theme Junkie site: www.theme-junkie.com/what-is-mega-menu-examples/.

3.3.5 Making the menu brief, simple, and clear

Each site has different menu requirements, but be sure to aim for brevity, simplicity, and clarity. (And aim for that everywhere else on the site for that matter.) Remember that people expect rapid results on the internet.

And before you make your site public, it’s a good idea to ask friends to navigate your site while you watch and take notes. What throws them off? What annoys or puzzles them? What paths do they take through the site? And above all, when they leave the home page, do they go where you prefer them to go (based on your call to action)? Certainly not to a different website!

Some say that the perfect navigation system is one where the visitor can see all of their options without having to click something or in fact do anything at all. Even including something as easy as hovering the mouse on a menu bar to drop and display a submenu list of child pages.

However, it’s necessary for most kinds of websites that you divide the site into parent and child pages. You don’t want to have too much text on any of your pages. Most people don’t want to read lengthy text online. Child pages also make site navigation easier. Let your visitors get to the content they are interested in with as few clicks as possible. People sometimes want to return to a site’s home page, so it’s good to include a menu item named Home on the far left of the menu. And, it’s customary that clicking the site title or logo also takes you back to the home page as well. Websites normally display the site title on each page (and optionally a logo image as well). These are usually found in the top-left corner of the pages.

Main menu items (parent pages) display the primary, most general topics found on your site. Submenus are for pages or content that is subsidiary and supplemental. A child page displays additional, more specific information that expands on the content in its parent page.

To help keep menu items as short as possible, don’t repeat your site title in the menu. For example, our book’s practice site’s title is Time Tested Recipes for the Instant Pot. So don’t use those words when naming your menu items (or page titles). Don’t repeat Mexican Recipes for the Instant Pot, or even just Mexican Recipes. Your visitors know they are looking at a site devoted to recipes for the Instant Pot, so simply name the menu items Mexican and Thai. The phrase Time Tested Recipes for the Instant Pot is a given. After all, your site title is displayed on every page as a top headline, so there’s no need to repeat it in the menu.

TIP Technically, a hyphen is required between time and tested because these modifiers work together as a compound adjective modifying recipes. That hyphenation keeps people from getting the wrong idea, such as “time recipes.” However, with headlines, punctuation rules are usually relaxed.

3.3.6 Ask AI to simplify your menu

If you’re trying to shorten your menu, you might want to run it past AI for some suggestions. Using the bass fishing site’s menu described previously, Copilot came up with several useful ways to simplify it. After I looked at the menu Copilot created for us earlier in this chapter, I gave it this prompt:

That menu you created is good, but it’s too long. Can you list any main menu items that could be demoted to subitems, or combined with other items, or put into a sidebar, or just left off the menu completely?

Here are my suggestions for streamlining your website’s menu:

Combine Similar Items: Group similar items together to reduce clutter. For example:

“Latest News”, “Pro Tour News”, and “Dock Talk” can be subitems under “News”.

“Schedule”, “Results”, and “Standings” can be subitems under “Tournaments”.

“World Rankings” and “Angler of the Year” can be subitems under “Rankings”.

“Pro Fishing Tips”, “How-To Videos”, and “Gear Reviews” can be subitems under “Tips & Techniques”.

“General Bass Fishing Forum”, “Smallmouth Bass Fishing”, and “Fishing Reports” can be subitems under “Forums”.

“New Products” and “Tackle Reviews” can be subitems under “Gear”.

“Top Catches” and “Pro Diaries” can be subitems under “Videos”.

Demote Less Important Items: Move less frequently accessed items to a sidebar or footer.

For example, the “Sign In/Join Now” option is usually placed in the top-right corner or footer of a website, not in the main menu.

Remove Redundant Items: If some information is repeated in different sections, consider removing one.

For example, if the content in “Gear Reviews” and “Tackle Reviews” is similar, you might want to combine them.

3.3.7 Menu alternatives

Although it’s almost always best that a site provides a traditional menu, there are alternatives. Your goal is always to find the best, quickest way for your visitors to find the information they’re looking for. Every site should have a search tool on every page.

Although most people would rather click a link or a menu item than type in a search term, you do need to provide a good way for visitors to locate highly specific information. And a search tool serves that purpose. Most themes include a basic search field, but you might want to use a specialized search plugin that would offer additional options such as drilling down, auto-completion, and perhaps thumbnail previews.

Larger sites also often display a site map, usually in the footer at the bottom of each page. If you think of the menu as a site’s equivalent of a book’s table of contents, a site map is like an index. It’s a lengthy, very granular, and comprehensive list of links to every topic and subtopic in the entire site. It’s also said that sitemaps can also improve your rank with Google and AI bots. For more information, see this tutorial at RankMovers: www.rankmovers.com/importance-of-sitemap-in-seo/.

Making a site map can help you visualize how to subdivide your site into a sensible hierarchy. After creating your site map, arrange the perhaps as many as 50 map topics into hierarchical categories within the parent and child pages.

The best choice in many cases is to provide both the site map and the menu. For the same reason that a book with an index still has a table of contents.

3.4 Avoiding long-scroll

Menus clearly assist in site navigation, offering easy access to interior pages. But what if a site has only a single page? Just because something becomes popular doesn’t mean it’s a good idea. Remember all the people killed by lawn darts?

There’s a current fad in web design where the site’s entire content is put on the home page. This can make navigating the content complicated for visitors. Scrolling isn’t the most efficient way to locate what you’re looking for.

If there are no links to the sections in a long-scroll page, visitors must scroll down, scanning headings, to find what they’re looking for. Today’s online audience expects to use links to get where they want to go quickly.

Proponents of the long-scroll approach argue that people prefer simplicity, and providing a menu or other links to interior pages isn’t simple. They argue that a one-page website is seamless—all the information is right there on the one page. It’s more streamlined. An additional advantage they claim is that one-page sites work well on mobile devices where menus can be less effective.

Clearly, the long-scroll approach wouldn’t be possible on a site like amazon.com with a lot of content. Such sites must have multiple pages. And the larger the site, the more it relies on its search tool.

But if a client or designer is insisting on a long-scroll system, there is a solution. Provide a menu that links to the various sections within the page (called interior or bookmark links, as opposed to page links). I’ll show you how to link to targets within a page shortly.

TIP Be sure to chunk your content. People usually appreciate relatively short paragraphs, separated by images or whitespace. And your visitors also generally prefer short, clear sentences.

3.5 Make good use of links

A menu is a set of links, but sites also employ other kinds of links—all in an effort to make traversing the site as easy as possible. A hyperlink, when clicked, jumps you elsewhere on the internet (the target of the link). Where you jump to the link target can be a short distance, like a couple of paragraphs down a page, or as far away as the space station. In addition, links can display documents, such as a PDF file, or other media.

3.5.1 Links are valued by site visitors and designers alike

Site designers like links because they provide information in a useful way to the site’s audience, which improves the UX. They are also thought to increase a site’s search-engine rank.

Because it’s often a good strategy to keep your audience on your website as long as possible, links to locations outside your site should be few. You want to keep your audience on your site until they do what you’re hoping they will do. Sign up for something, provide you with their email address, buy your merchandise, whatever.

Links are displayed in various ways. These are the most common:

- Traditional—Most often an underlined and blue-colored word or phrase that describes the link’s target. A word or phrase visible to the visitor that describes the target of the link is sometimes called the anchor text. After a link is clicked, it might change to a different color to let the visitor know they’ve already been there.

- Menu—Normally a horizontal set of links displayed near the top of each page in a site. The link text description is usually the same as the titles of the pages that the link sends you to.

- Button—Everyone understands that a button can be clicked. Sometimes, it performs an action, like submitting a contact form from a visitor to your site. Other times it can be a link to a location described in the button’s label.

- Image—You can display a picture or thumbnail rather than the traditional text link or a group of thumbnails as an alternative to a text menu.

- Map—A larger image containing multiple links within the map. It displays several locations or icons that take the visitor to different targets when clicked.

- Logo—Your site’s logo and title are usually links that return a visitor to the home page.

And, there are a variety of targets for links. Here are the main ones:

- An alternative view of an image—Shows an image in a different way, for example, zooming a small image to page-size or displaying it in a different browser tab.

- Help—Shows documentation, normally in a separate tab.

- Interior—Jumps to a location within the same page as the link.

- Ad—A link that takes the visitor to Amazon or some other merchant, often providing a kickback to the site owner.

- Category or tag—Specialized links that only appear on the site’s blog page. They are displayed in a cluster or list, and they redraw the messages, displaying only a subset of them. For example, on a real estate site, a blog tag titled “Under $200,000” would redraw the list of posts, showing only those houses costing less than that price point.

3.5.2 How to create the four types of hyperlinks

You create a traditional link four different ways, depending on where the link target is. The link can take the user

- to the top of a different page on your site.

- to an external location, such as a different site.

- to a location within a different page on your site.

- to a location within the same page.

LINKING TO A PAGE ON YOUR SITE

Let’s see how this works in action as we add links to two pages in our recipes practice site: Thai Treats and Mexican Specialties. Here are the steps to link to the top of a different page in the same site:

1.  Go to your Pages > All Pages screen in the backend of your site.

2.  Double-click the title of the page where you want to place the link.

3.  Ensure that you click to select the Visual tab in the top-right corner of the Edit Page text box.

4.  Click your mouse within the box where you want to place the link. You’ll see the blinking insertion cursor where you clicked.

5.  On the toolbar, click the Insert/Edit Link icon, as shown in figure 3.3.

Figure 3.3 Click the Insert/Edit Link icon to place a link on a page.

TIP If your Edit Page screen doesn’t look like figure 3.3, you’re using the Gutenberg block editor. Add a Classic block to your page, and then follow these same instructions.

6.  Click the gear icon shown in figure 3.4 to open an Insert/Edit Link module.

Figure 3.4 Clicking this gear icon opens an Insert/Edit Link module.

7.  You now see a list of the pages and posts on your site. Fill in the label for the link in the Link Text field, and click the page that is the target of the link, as shown in figure 3.5.

Figure 3.5 WordPress fills in that page’s URL address when you click Mexican Specialties.

8.  Finally, click the Add Link button to save the link.

9.  Click the Update button to save the modifications you just made to this page.

10.  To view the actual link code, and perhaps modify the link text, click the Text tab in the upper-right area of the text box. (If you’re using Gutenberg, press Ctrl-Shift-Alt-M.)

The HTML code for a link looks like this:

<a href="https://timetestedrecipes.com/mexican-specialties/">

See Some Mexican Specialties!</a>

We’ll explore this code shortly when creating a different kind of link by hand.

TIP In the WordPress Edit Page and Edit Posts screens, there’s a text box where you add text or media content. These text boxes have two tabs on their upper-right corner: Visual and Text. The Visual tab allows you to see the content pretty much the same as what your visitors see on the frontend of the site. However, the Text tab not only displays the content but also the HTML code that tells a browser how to display that content, such as formatting, boldface, links, page position, and so on. (Gutenberg calls the Text view the Code Editor, which is a more accurate name.)

LINKING TO AN EXTERNAL SITE

To create a link to some other site, such as YouTube, you follow the same steps as described previously when linking to a page on your site. The only difference is that after you click the gear icon (Step 6), you paste or type in the URL address of the external site (see figure 3.6). And, as always, don’t forget to click the Add Link button.

Figure 3.6 It’s easy to add a URL address and a link label here.

LINKING TO A LOCATION WITHIN A DIFFERENT PAGE

Although linking to the top of a page is more common, sometimes you want to send your visitor to the third paragraph or to a particular image within a page on your site. To follow this example, add two new pages to your practice site titled Thai Treats and Mexican Specialties.

In this example, our link target is the second paragraph in the Mexican recipes page. And the link itself is found in the Thai recipes page. (If you’re using the Gutenberg editor, add Classic blocks to your pages). Follow these steps:

1.  Go to the Mexican page, and create the link target by clicking the Text tab in the upper-right corner of the text box (in the Gutenberg editor, press Ctrl-Shift-Alt-M). Then, paste or type in two paragraphs of random text. We’ll create a link whose target is that second paragraph:

This is paragraph one. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Here’s paragraph two. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

2.  Surround paragraph two with HTML <p> and </p> tags that tell a browser to display the enclosed content as a paragraph:

<p id="mextarget">Here’s paragraph two. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Notice the id="mextarget"> HTML attribute following the <p tag. This gives the paragraph a name. It identifies that paragraph so we can make it the target of the link we’ll create next. You can name an id attribute whatever you want to.

Figure 3.7 shows how your HTML ID code looks in the Text (code) tab of the text box.

Figure 3.7 A target ID is placed at the start of a target paragraph.

3.  Click the Update button to save these changes.

4.  Next, to create a link that targets the Mexican page, you need that page’s permalink address. So, copy it by dragging your mouse across the permalink and then pressing Ctrl-C to copy it into the Windows clipboard, as shown in figure 3.8.

Figure 3.8 Here’s where you copy a page’s permalink.

Finding permalinks in Gutenberg

Finding a page’s permalink in Gutenberg is a labyrinthine task. First, click the Settings icon. It’s in the upper-right corner. The Settings icon previously looked like a gear (the traditional symbol in Windows for settings), but now it’s been changed to this rectangle with a line through it. What that symbolizes baffles me.

If the Block tab (beneath the Settings icon) is currently selected, click the Page tab. Now open the Summary section by clicking its black triangle icon. Then, locate and click the URL. That opens yet another module where you can drag your mouse on the permalink to select it and press Ctrl-C to copy it. It might have been easier just to display the permalink on the Page Editor screen, but that would go against the minimalist theory that governs the Gutenberg editor UI. The theory advocates displaying by default as little information and as few options as possible. The term used is contextual—which means only display what they think you might need at the time. So, because something like a permalink isn’t used that often, you need to drill down several levels in the UI to find it.

Here’s a tip: Click the View Page option to get to the page’s frontend view. Then, just copy the permalink from the browser’s address bar.

5.  Now, go to the Thai page to create the link to that ID. Click the Text tab in the Edit Page’s text box on the Thai page, and then add this code in the text box (but substitute the permalink of your page):

<a href="https://www.timetestedrecipes.com

/mexican-specialties/#mextarget">

Visit the second paragraph in the Mexican recipes page</a>

Let’s break this HTML code down:

o   <a is the HTML code for the opening tag of a link.

o   href="https://www.timetestedrecipes.com/mexican-specialties is the permalink you copied that points to the Mexican recipes page. In other words, this tells the link, when clicked, which page on the internet to display.

o   /#mextarget"> is the ID you gave to the location within the Mexican recipes page where you want the link, when clicked, to go to. It’s that second paragraph’s ID.

o   Visit the second paragraph in the Mexican recipes page is the caption that you want displayed on the link.

o   </a> is the closing tag for the link.

TIP Notice that in the link code, a hashtag (aka pound sign #) is added to the target ID: #mextarget. In the Mexican page, the ID doesn’t have the hashtag: mextarget.

6.  Click the Update button to save these changes. Now, test the link by going to the Thai page on the frontend. You can view the frontend of your site three different ways: by clicking your site title in the upper-left corner of the dashboard or by clicking one of the two View Page links (one link is shown in figure 3.9).

Figure 3.9 There are three ways to go from the backend to the frontend of a site.

7.  Click the link, and the browser should display the second paragraph in the Mexican page, as shown in figure 3.10.

Figure 3.10 You’ve jumped directly to a paragraph within a page rather than to the top of the page.

Debugging HTML

Unlike some computer languages, HTML doesn’t display error messages when you give it buggy code. It just does funny things like posting a 404 error message (page not found). Or it might just sit there and do nothing, mocking you.

Computer code is highly precise. A single wrong punctuation mark or typo, and the computer won’t understand what you’re asking it to do. This means you’ve got a bug to track down. In our previous link example, you might have copied the code from a source such as Microsoft Word that uses curly not straight quotation marks.

There are two types of quotation marks—straight and (curly or slanted)—and HTML wants the straight ones.

HTML doesn’t like curly quotes. Doesn’t know what the heck they are.

Or maybe you left out a > symbol or used no quotation mark where you were supposed to include one. One way to solve bugs is to proofread the code—carefully compare your code to the code here in the book. Ensure that all is exactly the same (except of course for your URL addresses). But there is a helpful debugging tool you can also use.

Paste your Mexican or Thai pages’ permalinks into the W3C Markup Validation Service (https://validator.w3.org/).

To show you how this works, I left out the first quotation mark in the link in the Thai page, and the validator correctly reported that this part of the code (called an attribute) is unquoted. So that was an easy fix: I just added the needed quotation mark. This error message is shown in the following figure.

Validation can describe bugs in your HTML code.

Then, it also correctly flagged the curly quotation marks by displaying the error message shown in the following figure.

This error message even displays the illegal character, the quotation mark.

AI assistance

AI systems are great at debugging code. There are two errors in this HTML code: slanted (curly) quotation marks rather than vertical marks in front of https, and (2) the / (backslash) character is missing in the ending </a> tag:

<a href="https://www.timetestedrecipes.com/mexican-specialties/#mextarget">

Visit the second paragraph in the Mexican recipes page<a>

So, I asked GPT to find errors in this code and tell me how to correct them. AI got 100% on this test. It replied:

I’ve identified the errors in the provided HTML code:

The opening quotation mark for the href attribute is a curly quotation mark (“) instead of a straight quotation mark (“).

The closing anchor tag is missing a forward slash (/).

Here’s the corrected HTML code:

<a href=”https://www.timetestedrecipes.com/mexican-specialties/#mextarget”>Visit the second paragraph in the Mexican recipes page</a>

Changes made:

Replaced the curly quotation mark with a straight quotation mark for the href attribute.

Added a forward slash (/) to the closing anchor tag.

LINKING TO A LOCATION WITHIN THE SAME PAGE

This one is simpler than other kinds of links because you need not specify a URL or permalink. When a URL is left out of a link’s code, HTML assumes you mean that the link target is within the same page as the link.

Let’s assume you have four headlines in a page. At the top of the page, you add a link to the fourth headline.

Click the Text tab in a page’s Edit Page screen, and then type these four headlines in the text box:

<h1>First</h1>

<h1>Second</h1>

<h1>Third</h1>

<h1>Fourth</h1>

Next, type the link at the top of the text box:

<a href="#fourth">Go to the fourth headline</a>

<h1>First</h1>

<h1>Second</h1>

<h1>Third</h1>

And finally, add an ID to the fourth headline to identify the link’s target:

<h1 id="fourth">Fourth</h1>

TIP Recall that you can name the ID anything you want, but in the link, you must prepend a hashtag #.

Click the Update button to save your code. Now when you test this by clicking View Page to go to your page’s frontend, clicking the link should take you to the fourth headline.

3.5.3 Using buttons as links

So far, you’ve seen how to create text links. But you can make images, buttons, or other visual elements into links as well. Let’s display a button that sends your visitor to YouTube when clicked.

HTML has a built-in button object, so you can make it into a link. Remember that when adding code to a page on your site, you need to be in the Edit Page screen and click the Text tab in the text box. (Or in Gutenberg, press Ctrl-Shift-Alt-M). Here’s HTML code for a button link:

<a href="https://www.YouTube.com"><button>Click to visit YouTube</button></a>

The resulting link button is shown in figure 3.11.

Figure 3.11 The default HTML button is a rather crude black block.

Cascading style sheets (CSS) is a computer design language and a great tool that lets you modify and fine-tune your site’s appearance in hundreds of ways—everything from typeface to fade-in animations. In chapter 7, we’ll look at how to easily have the computer generate CSS code for you. You don’t need to learn the language at all. But for now, let’s just look at a quick sample of how CSS empowers you to polish design elements.

That stark all-caps white-on-black HTML button won’t fit in very well with many—in fact, hardly any—WordPress themes. It’s unsightly. So, let’s add some CSS code to make it less severe, as shown in figure 3.12:

<a href=https://www.youtube.com/

style="background-color: lightblue;

color: gray; padding: 10px;

border-radius: 5px solid gray;">

Click to visit YouTube</a>

Figure 3.12 CSS styling code can improve the default HTML button, but you can do even better.

TIP If you just use border instead of border-radius, you’ll get a solid frame. Adding radius, you get a more subtle, 3-D drop-shadow effect.

The HTML attribute’s style code is actually written in the CSS language. It works together with HTML to specify how things look. CSS can also add special effects such as animation, opacity, transition fades, and other cool visuals. Luckily for us, CSS is pretty easy to understand because, unlike most computer languages, it employs English words such as border, color, and background. And, of course, you can always submit a request to Claude or one of the other AIs to generate CSS code to your specifications. You’ll learn much more about CSS, an important tool for any site designer, in chapter 7.

That blue button is a step up from the first button, but it can still be improved. For a photorealistic button, you can create an image of a button in a photo-editing application such as Paint.NET or Photoshop. Or, use an AI text-to-image application such as Midjourney. You can even purchase a button icon from Pexels (www.pexels.com) or iStock (www.iStockPhoto.com). Then, add that button image to your web page and make it a link. Here’s how:

1.  Go to the Media > Add New screen and upload your button image to your WordPress media library. That’s where the images and other media that you use on your pages are stored.

2.  Go to the Edit Page screen where you want to create the link.

3.  Click the Visual tab in the text box.

4.  Click the Add Media button, click the image to select it, and then click the Insert into Page button.

TIP If you’re using the Gutenberg code editor, press Ctrl-Shift-Alt-M. That keyboard shortcut toggles you between code view and visual view. For now, you want to be in the Visual Editor mode. Then, add a Classic block to the page. If you don’t see a menu on the Classic block’s toolbar—File, Edit, View, Insert, and so on—then go to your Plugins > Add New screen, and search for, install, and activate the Advanced Editor Tools plugin. On the block’s menu, choose Insert > Add Media (not the Media option). Click the image you want to use from your Media Library. Click the Insert into Page button.

5.  In the Edit Page screen, click the image to select it.

6.  Click the link icon on the toolbar.

7.  Enter YouTube’s URL and click the left-arrow icon to create the link shown in figure 3.13.

Figure 3.13 This is how you link an image to YouTube.

8.  Click Update to save your changes.

9.  Click View Page to see and test the link, as shown in figure 3.14.

Figure 3.14 A photoreal button image looks more professional than an HTML button.

Here’s the complete HTML code:

<a href="https://www.youtube.com">

<img class="alignnone size-medium wp-image-62"

src="http://timetestedrecipes.com

/wp-content/uploads/2023/03

/smaller-button-300x134.png" alt=" "width="300"

height="134"/></a>

Note that there’s no need for a link label here because the word YouTube is baked into the button image.

3.6 Managing your menu

A site’s menu is almost always the key navigation system, so you want to get it right. We’ll conclude this chapter by building the recipe practice site’s menu. This entails choosing and renaming the home page, displaying the child pages on the menu correctly, and checking for broken links.

3.6.1 Customizing your menu

The order of your menu items and, in some cases, the names of the menu items may need to be modified. But before doing that, let’s create some child pages in the practice site.

TIP If you’re using the Gutenberg editor, you create your menu following the same steps as described here for the classic editor. Gutenberg also includes a Navigation Menu option (both as a widget in the Appearance > Widgets screen and a block in the Edit Page screen). It offers several options, including displaying a list of links to all of your pages in a sidebar.

So far, all the pages are parents. These new child pages will be empty placeholder pages. They’ll have titles, but we’ll add content to them after first creating the site’s structure. So, let’s add a few more placeholder pages to the practice site.

Go to your Pages > Add New screen, and add seven new pages. Give them the titles listed here:

- Tex Mex Meals

- Spicy Thai

- Chinese Cuisine

- French Fare

- Italian Ingredients

- Gourmet Greek

- Blog

For now, we’ll focus solely on filling in the title field and add no content to these placeholder pages. Don’t forget to click Publish for each one.

AI assistance

If you want some help thinking up good child pages, you can ask GPT the following:

As an expert Mexican restaurant chef, please list six subcategories for Mexican food (such as Tex Mex, for example). Don’t create categories based on geography.

GPT’s suggestions:

Certainly! Mexican cuisine is rich and varied, and while it’s impossible to categorize all of its nuances in just a few subcategories, here are six broad ones:

Street Food

Appetizers and Little Cravings

Moles and Sauces

Ceviches and Seafood

Casseroles and Stews

Desserts and Sweets

Before creating our menu, there’s a bit more housekeeping to take care of. WordPress defaults to making the blog page the home page. But for the practice site, you want the blog to be an interior page instead. (The blog is a special kind of page that contains all the messages you or your visitors post. They’re displayed in a scrollable, reverse-chronological order. We’ll work on the blog page in an upcoming chapter.)

Go to Posts > Add New, and type in a title and some text for a dummy, placeholder post. This causes WordPress to complete the process of creating a blog page for you. Click the Publish button.

At this point, change the blog to an interior page. As shown in figure 3.15, go to your Settings > Reading screen, click the A Static Page option, and choose Time Tested Recipes for the Instant Pot as the home page. Choose Blog as the blog page. Click the Save Changes button.

Figure 3.15 Here’s where you specify your site’s home page.

When you first start a new WordPress website, you give the site a title. You named the practice site “Time Tested Recipes for the Instant Pot” in the appendix if you set up the practice site for this book. WordPress automatically titles your home page the same as the site’s title. (Every site has a home page.) But you should change that default home page title. It’s redundant. Because the site title appears on every page, the home page shouldn’t have the same title as the site title.

So, go to your Pages > All Pages screen, and click Time Tested Recipes for the Instant Pot to open its Edit Page screen. Change the home page title to Easy Excellence or whatever you like. Click the Update button.

Take a quick look at your Pages > All Pages screen. Notice that WordPress has identified Blog as the blog page, and Easy Excellence as the front (home) page, as shown in figure 3.16.

Figure 3.16 WordPress has identified your home (front) and blog pages and indented the child pages.

One last job before you construct the site menu: you need to turn Tex Mex Meals and Spicy Thai into child pages. Go to Pages > All Pages and double-click Tex Mex Meals. To make it a child of the Mexican Specialties parent page, locate the Page Attributes module, and then click the down arrow to drop open the parent menu. Click Mexican Specialties. Click the Update button, as shown in figure 3.17. Follow the same steps to make Spicy Thai a child of Thai Treats.

Figure 3.17 This is where you assign a child page to its parent. In effect, you create the parent/child page relationship here.

Having populated the site with placeholders, you can now turn your attention to organizing and customizing the menu. Go to the Appearance > Menus screen.

For reasons that elude me, WordPress defaults to showing only recent pages in its Add Menu Items module. Fortunately, UI blunders like this are blessedly rare in WordPress. But you should memorize this: whenever you visit the Appearance > Menus screen, remember to click the View All tab first thing, as shown in figure 3.18.

Figure 3.18 Be sure to remember to click this View All tab first.

Under Menu Structure, type in a menu name such as Main Menu, and then click the Create Menu button. You want all your pages on the menu, so click the Select All box in the Add Menu Items module, as shown in figure 3.19 Then, click the Add to Menu button. The Menu Structure module fills with your page titles. Click to specify the Primary Menu option below this module. That positions this new menu near the top of each page. Where you can choose to locate your menu depends on the options your theme (or a menu plugin you install) offers.

Figure 3.19 Add all your pages to the menu.

3.6.2 Making child page menu links

Drag and drop the menu items so your menu structure looks like figure 3.20. To change a menu item into a submenu (in other words, to display it as a child page), drag it a little to the right, and then drop it so it’s indented under its parent menu item.

This move takes some getting used to. In figure 3.20, notice the faint dashed frame that shows up when you drag a menu item to the right. That frame is the target where you want to drop the Tex Mex Meals subitem.

Figure 3.20 To create a child menu (submenu) item, drag the child over one tab and drop it there.

TIP If you find the process of dropping child menus one tab to the right challenging, you can instead click the black arrow icon on the right side of the child’s box to open its module. Then, click the Move Under link shown in figure 3.21.

Figure 3.21 You might find this link easier than dropping a menu item one tab over.

To complete the menu, we’ll want to shorten the menu items’ names (called navigation labels by WordPress). For each menu item, click the black arrow icon on the right side of its box to open its module. Rename the labels like this: Home, Chinese, French, Greek, Italian, Mexican, and Thai. Menu brevity is our goal.

Note that you must rename Easy Excellence to Home because that’s customary. People expect the first menu item to be named Home and to be located on the far left of the menu bar. The finished menu structure should look like figure 3.22.

Figure 3.22 The finished menu

Click the Update Menu button, and then click site title Time Tested Recipes for the Instant Pot in the upper-left corner to view the menu on the frontend, as shown in figure 3.23. Recall that clicking the site title is a quick way to toggle between the backend and the frontend.

Figure 3.23 The frontend view of the finished menu

Two things to notice here. The Twenty Sixteen theme provides two unobtrusive visual cues on the menu: the menu item of the page currently being displayed is in boldface (Home in this case), and the Mexican and Thai items have small down arrow icons, letting people know that there are child pages for those items.

WARNING Nothing says “unprofessional” and “unreliable” more clearly than dead links. Ensure that all of your links actually go to real targets rather than triggering “Page not found” error messages. To test links in a small site, you can just check them manually by clicking them on the frontend. Larger sites can use the Google Search Console plugin. Or use this online checker: www.brokenlinkcheck.com/broken-links.php. We’ll explore plugins in an upcoming chapter.

This chapter is all about preliminary planning: What’s your site’s purpose and hierarchy? And we also explored tools such as links and menus that will make it as easy as possible for your visitors to traverse the site structure.

So now that we’ve created our placeholder pages in the practice site, it’s time to fill them with content. We’ll start with text content. Most writing for the web requires a special tone and style. And as you’ll see in the next chapter, AI is great at turning your first draft into outstanding, web-ready prose.

Summary

- It’s quite important to establish your site’s blueprint and ultimate goal before adding content to a site. This helps you keep your eye on the site’s goal and contributes to a cohesive design and efficient site navigation.

- Part of the blueprint when planning a site is creating a hierarchy with parent and child pages. This results in a simpler menu that displays only the main (parent) categories and hides the secondary (child) pages—they only become visible when a visitor hovers their mouse pointer on the parent.

- Avoid long-scroll home pages—they are inefficient and can annoy visitors. Scrolling and having to scan headlines to locate what interests you is considerably clumsier than reading a menu.

- Links are a key navigation tool, and using them correctly can decrease your site’s bounce rate and improve the success of your call to action.

- Pay special attention to your menu, it’s a site’s primary navigation tool. Display only a few items on the menu, and keep the length of each menu item brief.

4 AI-powered writing

This chapter covers

- Selecting the right typography

- Understanding website writing style

- Hooking visitors with a great home page

This chapter focuses on your site’s text content. And AI can assist you both in the details, such as choosing a good typeface, and in the quality and style of your writing overall. When spell-checkers arrived, we no longer had to be great at spelling. With AI, we no longer have to be great at writing itself!

Later in this chapter, you’ll submit your text to an AI “Hemingway.” I think you’ll be startled at how much this celebrated author’s techniques will improve your writing. I was. This AI will help you make your sentences more clear, powerful, and beautiful.

To start with, you’ll certainly want to find the best typeface and text design. You can select the font size, font family (such as Times Roman), font style (normal or italic), weight (how thick the characters’ lines are, for example, boldface vs. regular), and other qualities such as letter spacing and line height. The theme you choose provides some defaults, but you should fine-tune it to best suit your topic and audience.

In addition, you need to consider the tone and style of your writing. Most modern sites have an easygoing, conversational style. So if you come from a legal, academic, or otherwise formal-writing background, you’ll learn in this chapter how to relax your writing—how to master a different, more conversational, approach. And AI can help you rewrite your text to make it more casual and more appealing to the average person.

Finally, we’ll explore ways to grab your visitors’ attention by crafting a brilliant, irresistible home page—the page that visitors see first. Studies show that, on average, people make up their mind whether to stay or leave a home page within .05 seconds! So your visitors’ first impression really counts. This is clearly a case of a book being judged by its cover. And AI will prove quite helpful with this too, ensuring that you make a confident, positive first impression.

4.1 Choosing the best typography

Most people don’t really understand typography, or even think about it. But on some level, it has an effect on them. Choose an attractive, readable typeface and font size for your site’s body text, headlines, and captions.

The single most important typographic consideration is readability. You want to display characters that are large enough to be legible. Font size on screens is usually specified in pixels.

DEFINITION The pixel or px (picture element) refers to the smallest visual unit, the individual dots on a digital display. But a pixel isn’t a fixed size, like an inch. It’s relative. Pixel size is relative to the size of the screen as a whole. So, a jumbotron screen in a football stadium would have brick-size pixels, but a tablet’s pixels would likely be too small to be visible to the eye. A pixel is that single point of color you can usually see by getting up very close to a big-screen TV.

4.1.1 Understanding AI multimodality

Currently, multimodality is an active area of AI research. The idea is that a large language model such as GPT should not only learn from text input but also from other modalities, including video, graphics, music, even traffic cameras, or any other source of information. In other words, they should learn from real-world input the way people do (only much faster than we learn, and forgetting nothing, ever). The human brain works at roughly several hundred cycles per second. Computers do several billion.

At this time, text-to-image generators such as Midjourney learn by harvesting images from the internet, and they combine that with text (for example, labeling the images by storing the captions they capture). Large language systems such as GPT scrape the internet and other databases for text. However, the goal is for AI systems to learn from all varieties of information.

With the introduction of GPT 4o (“o” for omni), GPT led the AI pack by including images and video in its learning. But the other AIs are all moving toward multimodality for both their input and output.

A related area of continuing research involves allowing users to submit multimodal prompts to AI systems. In a limited way, current text-to-image systems do permit this. You can upload images to GPT, Google’s Gemini, and Midjourney, in addition to text prompts. Then, AI generates its output based on both the images and the text. The degree to which the output resembles the submitted images can be adjusted on a sliding scale in some systems. Midjourney also permits you to give it images for both character reference (content) and/or style reference.

But what about multimodal output? What if you want to make this request:

Please describe the three best typefaces for body text on websites directed at children and also display images that show how these typefaces look.

Right now, the only AIs capable of giving you a text description and also displaying related images are GPT, Gemini, and Perplexity (https://perplexity.ai). Others, for example, Claude and Copilot, are working on it. Claude’s current response to that type of prompt is to provide text, with links to images.

4.1.2 Choosing the best font size

For your site’s body text, the recommended pixel size to view text on a computer monitor is between 16 px and 18 px. (Good themes automatically adjust the type size down when it detects that the site is being viewed on a tablet or cellphone.)

But if your body text font is thin, you might want to increase the pixel size a bit. Also, studies have shown that if your site includes lengthy sections of text, you should choose 18 px or an even larger size for readability (https://mng.bz/JNKZ).

But remember that most websites shouldn’t be heavy with text. When online, most people are like fleas—jumpy, quick to go elsewhere if bored, confused, or puzzled when confronted with piles of gray text.

TIP To see and modify the size, typeface, and other elements of your site’s typography, go to your site’s backend (the WordPress Dashboard), and click Appearance > Customize > Typography. It might be called something other than typography, such as typeface or text. What it’s called and what information is displayed here depends on your theme or on a typography plugin if you installed one.

You should also select your font size based on two additional factors: line height and typeface. Line height is the amount of white space between the lines of text. It’s specified as a multiple of the font size, with 1.5 or 2 being the most common value. Make it too small, and the text can become difficult to read; too large, and the text looks disconnected, as if it were intended to be a bulleted list, but the bullets are missing.

Adding a large collection of typefaces

To add a large collection of typefaces to your site, I recommend that you go to your Plugins > Add New screen and search for, install, and activate the excellent Easy Google Fonts by Titanium Themes plugin for WordPress. Or, search for Fonts Plugin | Google Fonts Typography. Then, you can go to your Appearance > Customize > Typography screen and choose from hundreds of Google’s fonts! Find one that’s suitable for your site’s design. The following figure illustrates how you select a typeface using this plugin.

The Google Fonts plugin includes hundreds of typefaces for you to choose from.

Notice that Google uses the term font family for what we’re calling typeface.

4.1.3 Selecting a typeface

What works well in a wedding planner site (imitations of human handwriting like calligraphic or script fonts) wouldn’t work for a sporting goods store such as Dick’s. And the formal, conservative Times Roman serif typeface would be most appropriate for hospital and bank websites, where reliability and trustworthiness must be conveyed. However, most sites should choose a sans serif typeface (plain, no curlicues, and little variation in line width). Popular sans serif choices are Arial, Verdana, and Helvetica.

TIP The terms typeface, font, and font family are often used interchangeably, but we’ll use typeface to refer to the overall design of the letters, that is, their shapes (such as Arial or Times Roman), and we’ll use font when describing qualities of a typeface such as font size or font style. There are hundreds of typefaces to choose from with various characteristics: thick or thin; varied line shapes and thicknesses; minimalistic or ornate; curlicues; blocky; geometric; and even strange, specialized typefaces that feature spiderwebs to look macabre or characters made of dancing legs to suggest clowns.

Some studies have shown, however, that three typefaces are particularly readable on digital screens: Consolas, Cambria, and Verdana. Only one of these is the clear winner though.

Consolas is the typeface often used for programming code. But because readability isn’t the only criterion (Consolas is quite readable), Consolas should be avoided because it’s simply unattractive. Cambria is also readable, but it’s a serif font (curlicues), which some studies say you should avoid for website body text.

The winner, Verdana, was specifically designed for onscreen reading. Created for Microsoft in 1996, it boasts clean, simple lines. It’s quite popular with site designers. The characters are relatively wide and widely spaced. It’s the best choice for many sites.

Verdana is subtle. It has slightly curved, flared line ends and variations in line thickness on some letters (see the lowercase letters in figure 4.1) giving it a somewhat gentler, more relaxed appearance than traditional sans fonts, which are typically severely linear. You can see Verdana in action in figure 4.1.

Figure 4.1 Verdana’s clean and simple design makes it readable on a variety of screen sizes, and it’s an excellent choice for many types of websites.

4.1.4 Ten popular typefaces

The following list includes 10 popular typefaces, illustrating the range of different looks—from traditional and formal, to antic:

- Helvetica—A clean and modern sans serif typeface that is widely used in print and website body text.

- Times New Roman—A classic serif typeface usually used for formal documents or websites that need to convey solidity and conservativism.

- Futura—A geometric sans serif typeface that has a distinctive and futuristic look.

- Bodoni—Designed in the 18th century, this is a high-contrast serif typeface that is often used for titles and headings even today. However, website headlines are usually sans serif.

- Garamond—An elegant and timeless serif typeface that is most often found in books and other printed materials.

- Impact—A bold and attention-grabbing sans serif typeface most suitable for advertising and site headlines.

- Comic Sans—A playful and informal typeface found in children’s books and whimsical website designs.

- Optima—Similar to Verdana, it’s an elegant, balanced, hybrid typeface that includes elements of both serif and sans design. It’s versatile and considered quite legible.

- Arial—A popular and versatile sans serif typeface that is frequently seen on computer screens in various contexts, including websites.

- Brush Script—A cursive handwriting script typeface that has a hand-drawn and artistic feel, used in logos, branding, and sites such as bridal shops, catering, and fashion. It’s said to convey elegance and sophistication.

Your site’s theme usually specifies a default size, line height, and typeface. But if it doesn’t, browsers have their own defaults, typically a generic sans serif at 16 px for body text.

You can also use CSS code to modify your typeface values (and CSS can actually pretty much customize any other design features in the site, regardless of the theme defaults). I’ll show you an excellent plugin in chapter 6 that generates CSS code for you automatically. So, you need not learn the CSS language to fine-tune your site’s look.

The final basic consideration when specifying your font qualities is its color, and more precisely, the shade of the color. Each color ranges from a pastel shade to very dark. It’s the way pink is a light shade of red. They are the same color, but a different level of darkness.

Some poorly designed sites have dark font colors against dark backgrounds, or vice versa—light against light. Obviously, this lack of contrast makes the text hard to read. It’s particularly frustrating for people with poor eyesight. Text should contrast against its background. This generally means text that’s black or dark against a background that’s white or light. The best choice is usually just plain old reliable black and white. And the background shouldn’t compete with the text—so no wallpaper or vivid images under the text. In matters like backgrounds, subtlety is to be preferred.

AI can help you look at some examples of what a well-designed website looks like. For example, submit this request to an AI platform such as GPT:

Please list the addresses of two websites that make particularly effective use of their typography. And list the elements of that typography such as line height, typeface name, type sizes, and so on.

4.1.5 A typography checklist

The following checklist includes some additional typography details that you should adjust as necessary before your site’s debut:

1. Check your typography on different devices and screen sizes to ensure readability.

2. Your headlines should help establish a clear hierarchy of the information on the website. Headings and subheadings should be easily distinguishable from each other (usually by size or weight) and from the body text. Headlines summarize and introduce the text that follows.

3. Use consistent typography. This means using the same sizes, typefaces, and color throughout the site to create a uniform look and feel.

4. Ensure that your typography is accessible to everyone, including those with visual impairments. So choose a font that is easy to read. We’ll look at some accessibility testing tools in the next chapter.

5. Typography can affect page-load speed. Some fonts are more complex and take longer to load than others. Not everyone has a high-speed internet connection. Test your site with the IsitWP free online utility: https://mng.bz/q0gx.

6. If you plan to display your site in multiple languages, choose a font that offers a version in those languages.

4.1.6 Getting AI’s objective opinion of your typography

After you’ve chosen and applied your type size, typeface, color, line height, and letter spacing, submit your site to AI. I asked Perplexity its views on the typography in a pet-adoption site:

Please tell me your opinion of the pros and cons of this website’s typography: sitename.com.

It responded by reminding me that, not being a person, it has no personal opinions:

As an AI assistant, I don’t have personal opinions. However, I can provide you with an objective analysis of the typography used in the website you provided.

Then it told me its opinions. And those opinions turned out to be actually useful and accurate, particularly the cons and the summary at the end. With AI as your research assistant, editor, design critic, and all-around polymath savant, it can suggest solid improvements to your website in many ways:

The typography of the website is simple and easy to read. The font used is a sans serif font, which is a popular choice for websites due to its clean and modern look. The font size is also appropriate, making it easy to read the text on both desktop and mobile devices.

Pros:

The typography is easy to read and appropriate for the website’s content.

The use of a sans serif font gives the website a modern and clean look.

The font size is appropriate for both desktop and mobile devices.

Cons:

The typography is not particularly unique or memorable, which could make the website less distinctive compared to other pet-related websites.

There is limited use of typography to create hierarchy or visual interest on the website. For example, there is no use of bold or italic text to emphasize important information or create contrast.

Overall, the typography of the website is functional and appropriate for the website’s content, but there is room for improvement in terms of creating a more distinctive and visually interesting design.

Also helpful was Claude’s response. First, it warned me that it might hallucinate, but after it got that polite hesitation out of the way, it gave me some good advice:

Here is my assessment of the typography on the website:

Pros:

Uses a simple, clean sans serif font for headings and body text (looks like Roboto). This gives the site a modern, friendly vibe.

Headings are large and bold, making them easy to scan.

Body text is a good size and line height for readability.

There is good contrast between the dark text and light background, enhancing legibility.

Cons:

The typefaces used lack personality - they are safe and generic choices. Using a font with more character could make the brand stand out more.

Body text paragraphs are very long. Breaking these up into shorter paragraphs could aid readability.

Text alignment is justified, which can cause uneven word spacing. Left-aligned text typically reads easier.

Line lengths get very long on wide screens, making it harder to track from line to line.

Overall the typography gets the job done, but has room for improvement. I would suggest using a more distinctive heading font, shortening paragraph lengths, left aligning text, and setting a maximum line length. These changes could take the typography from serviceable to stunning. Let me know if you need any other suggestions!

And as always, you can ask follow-up questions for more specific suggestions:

Claude, what alternative typefaces would you suggest to give it more personality? Taking into consideration the topic of this website.

Here are some font suggestions that could inject more personality into the website, while still remaining appropriate for the pet/animal theme:

Raleway - This elegant, tapered sans serif has a bit more flair than Roboto. It’s [sic] curves and exaggerated strokes add a playful touch.

Montserrat - Montserrat has a rounded, bubbly look with inspiration from urban and graffiti styles. It’s casual but energetic vibe could align well with pets.

Playfair Display - A serif, but with bouncy, friendly letterforms. Its contrast and diagonal stresses give it an organic feel fitting for animals.

Libre Baskerville - A warm, sturdy serif with subtle rounded corners. Its heritage styling brings a touch of classicism while feeling dog-eared and well-loved.

Happy Monkey - A display font with a fun, bubbly, monkey-wrench inspired look. May be too playful for body text, but could work nicely for headlines.

Rock Salt - Handwritten, rough edges give this font loads of personality. Communicates the hand-crafted, personal nature of pets and animals.

Let me know if you need any other suggestions for font pairs or styling for the site! I’m happy to provide more typography recommendations.

I’d say that the first three suggestions are worth considering. But as we move down the list, they do become increasingly hallucinogenic. Notice that because the site has content relating to pets, a few modifiers more related to animals than typography crept in: playful, bubbly, bouncy, dog-eared, and monkey. To be fair, looking for typefaces that subconsciously convey these terms does make a kind of sense for a pet-adoption site.

Gemini offered some good ideas too, mostly along the same lines as Perplexity and Claude. But Gemini added one good suggestion all its own: “Avoid using all caps in most cases. All caps can be difficult to read and can make the text seem aggressive.”

Copilot gave this brief, but accurate, response:

The typography is clear and easy to read. The font size is large enough to be legible and the font style is consistent throughout the website. The website also uses a sans serif font which is a good choice for web design as it is easier to read on screens than serif fonts.

TIP It can sometimes be a good idea to submit the same prompt to several AI systems to get a variety of opinions. This not only gives you a kind of consensus but also helps with fact-checking.

4.2 Writing in the right style

AI can be of great help in providing you with content that’s appropriate to your site’s overall mission. And it can improve your style, tone, transitions, and plenty of other elements of style as well. Here’s a prompt you can modify and then submit to GPT-4o (which is able to remember things permanently):

Commit this to memory:

When in the future I begin a prompt to you with “:Edit:” you are an expert editor of non-fiction. You do both abstract, large-picture editing as well as copy editing and proofreading.

Keep in mind that I want clarity and a friendly, informal, conversational tone. I also want concision.

You should carefully read, then re-read, the text I upload to you or paste and then answer the following questions (provide a title for each answer). If you don’t find a weakness in the text related to one of the questions, just skip it and go to the next question.

Before displaying your response, review it to ensure that it is accurate, concise, and does not include any minor, unimportant suggestions.

Note that each question is numbered. You can have more than one response to each question. Or you can skip a question if you don’t find what the question asks for.

Do a slow, careful analysis, or there could be repercussions.

1.  If you find any text that isn’t informal or is too technical, display that text in quotation marks, then follow it with a revision that is informal.

2.  If you find any sentences that are too long or complicated, display that text in quotation marks, then follow it with a revision that breaks up the too-long sentence.

3.  If you find any text that could benefit from a metaphor or analogy to make the point clearer, then display that text in quotation marks, then follow it with a revision that includes a helpful metaphor or analogy.

4.  See if there is any text you find ambiguous, and if so, display that text in quotation marks, then follow it with a revision that is clearer.

5.  If you find any places in the text where it needs a transition, where the topic too abruptly switches to a different topic, display that text in quotation marks, then follow it with a revision that includes a sentence which is a good transition between the topics.

6.  If you see any abstract concepts that would benefit from specific examples, display that text in quotation marks, then follow it with a revision that includes a specific example.

7.  Take a close look at the assertions in the text and if you find any that would benefit from supporting facts (like statistics) then display that text in quotation marks, then follow it with a revision that includes the supporting fact.

8.  If you think a passage in the text would benefit from images or diagrams or some other visual, display that text in quotation marks, then follow it with a revision that includes a good visual that helps illustrate the passage.

9.  If you find a passage that includes a description of something in a negative phrase (“this is not hard”), then display the text and follow it by displaying the same concept but in a positive phrase (“this is easy”).

10.  If I didn’t upload text to you, then display “Please paste the text you want me to analyze.” And wait until I paste the text to continue.

4.2.1 Setting the tone

Website content is mostly conversational and informal. Use the tone and diction like you normally do when talking with your friends. If you were upset with my use of like in the previous sentence, then you need to lighten up a bit when writing for the web. Conversational writing permits some informality in both diction and grammar. (Strict grammarians would insist that like in the earlier sentence should be replaced by the words that or as.)

So if you have a legal, copy editing, or academic background, or are otherwise inclined to write formal prose—you probably need to aim for the more casual communication typical of many websites. Of course, there are always exceptions. Sites for legal, banking, medical, or education purposes can require a more formally “correct” style. These sites need to convey reliability, authority, and sobriety. A touch of chilly doesn’t hurt either. But most websites should aim for a casual, friendly, approachable tone.

4.2.2 Transforming a stiff paragraph

Remember that the first paragraph in your site’s first page is crucial to capturing an audience. You want to welcome them, to make them feel comfortable right from the start. Let’s try writing a stilted, formal introduction as our first paragraph, and then ask GPT to revise it into a warmer, more colloquial version. This book’s recipe practice site’s home page title is “Easy Excellence” so here’s a pompous first paragraph, filled with bloviation:

Prior to hopefully embarking on this project of effectively compiling recipes for our website’s collection of recipes, we, ourselves, were rank novice cooks. We presume that you, our audience members, probably are in a similar situation at present. We often felt anxious or apprehensive while selecting a cuisine and then executing the dish. Therefore, our aim is to facilitate the process of creating a superb and satisfying culinary experience for your family and friends. And note that we have exhaustively tested every recipe. So, you can consider them failure proofed.

Rather stuffy, no? AI can be quite helpful in situations like this. Here’s what it came up with when we asked it to rewrite our paragraph to make it less formal:

Before we started putting together these recipes for this site, we were pretty clueless in the kitchen! Maybe you can relate to that? We used to get stressed out when we had to choose what to cook for dinner, and even more when we were cooking it. So, our goal is to make it really easy for you to whip up something amazing and yummy for your friends and loved ones. These recipes are simple but awesome! And they won’t fail you—they’ve been tested extensively.

4.2.3 Conjuring a simulacrum

Recall that we can assign roles for AI to play, like website critic or prize-winning site designer. This also means that we can have it conjure up famous dead people. Let’s ask an AI Hemingway to give us some advice about improving our prose.

Hemingway’s style is still hugely influential because of its clarity and simplicity. (And the 1935 book Elements of Style advocates a similarly clean, clear approach to writing. It was published in 1935 and is still taught today.) Hemingway advised the following:

- Create a short punchy first paragraph. Work on it; it’s the hook to catch readers.

- Keep your sentences short. When challenged to tell a story in six words, Hemingway wrote: “For sale: baby shoes, never worn.”

- Use positive, instead of negative, phrases. For example, use easy instead of not hard. You should use terms that describe the idea, not its opposite.

- Revise, and then revise again. “I write one page of masterpiece to ninety-one pages of s***. I try to put the s*** in the wastebasket.”

They say Hemingway rewrote the final page of A Farewell to Arms 39 times. An interviewer asked him what the problem was. He said, “Getting the words right.” Truman Capote was also famous for his polished, perfect sentences.

Copilot offers three settings related to style

Copilot will provide a good revision if you use a prompt like this:

Please revise the following paragraph to make it more informal and conversational. This figure shows you the three style options.

Also, when you select Chat in the sidebar on the right, Copilot offers a Revise option there too. To use that option, follow these steps:

1.  Select some text in the main window on the left. It will automatically appear in the right Chat window:

2.  Click Send, and you’ll be given the options shown in this next figure.

3.  When you click Revise, you do get a new version, but it tends to be more of a paraphrase than a rewrite that changes the tone.

4.2.4 Using the Hemingway app

Speaking of Hemingway, there’s an app that puts his prose principles into practice. Give Hemingway Editor app a try (https://hemingwayapp.com/). You’ll get a solid analysis of any problems in your writing. This app is an especially helpful advisor if you’re inclined to write too formally, or you have other problems such as overusing adverbs (“ly” words like hopefully and really) or relying too much on the passive voice (The burger was eaten by the dog can be made clearer and more concise if you revise it to use the active voice instead: The dog ate the burger.)

Let’s give our too-formal paragraph to the Hemingway Editor app. Figure 4.2 shows what it said. The app particularly doesn’t like adverbs and recommends using fewer than zero.

Figure 4.2 This Hemingway Editor app can be helpful when revising formal writing into a more conversational style.

To use this app, click the Write button in the top-right corner of its web page. Delete the existing sample text, and then replace it by pasting your text into that field. Click the Edit button to see the resulting critique.

In addition to developing a relaxed style, also remember to chunk your content into fairly brief paragraphs. Avoid massive gray walls of text. Even try to limit the amount of text in the site as a whole—unless you have good reason not to (a large catalog of goods, for instance). And on most pages, display only a few short paragraphs, separating them using white space, media, or layout design.

It’s also important to take advantage of AI assistance. Your most successful competitors are using it. You can find plenty of body text content generators that can give you a good start, including text to revise in your own words and fact-checking.

Also, run your text through a plagiarism-detection system. For example, when you turn on the Spelling and Grammar checker (F7) in Microsoft Word, you’ll see the Similarity section in the Editor panel. It will flag any plagiarism problems if it finds your text repeated somewhere else on the internet. Or, try Copyleaks (it checks against billions of online sources) or Grammarly (you should be using it anyway because it’s a fine general-purpose, user-friendly, AI-based writing assistant). Several reviewers say undetectable.ai is the best at both discovering plagiarism as well as “humanizing” ai-generated content.

Why worry about plagiarism? You know you don’t do it. Actually, there is good reason to worry. Using AI while writing introduces two new dangers. You might at some point forget to have AI’s results checked for plagiarism (now and then it does copy whole paragraphs from the internet without revision). Or you could, in the heat of writing, forget to revise some AI content that you copied. And it’s obviously the right thing to do to only publish your original content, not someone else’s—even if that someone else is a machine.

That said, AI can generate many different kinds of site-related content, including blog messages, product descriptions, home page text, various levels of formality, a list of engaging variations on a headline from which you can choose, first drafts, and brainstorming, to name a few.

TIP This article on Medium provides some AI resources for website authors: https://mng.bz/75EQ.

4.3 Making a great first impression

Remember that you must spend time polishing your home page, especially your site’s first paragraph. And really work hard on the first sentence. Note that Hemingway said the first paragraph of a piece of writing is crucially important. It must capture the reader’s attention at once.

4.3.1 Hooking visitors

Indeed, the entire first page of your site has to hook your visitors. Write as many revisions as necessary until the text is brilliant. Make it brief, brilliant, and clear as a country stream. And redesign the page until it’s excellent visually as well.

We’ll devote two upcoming chapters to site design, but let’s preview the topic now. One way to start thinking about your home page’s design is to consider what would be a good color scheme based on color psychology findings. What colors are best for your particular site’s audience? For our recipe practice site, I researched a bit and came up with the following recommendations:

- Red is the color most used by fast-food chains, followed closely by yellow and orange.

- Yellow and orange make people feel hungry.

- Brown helps establish a soft and authentic feel to your website.

- Blues, especially darker shades, or using too much blue overall can make your website feel uncaring and cold.

- Blue is also said to curb the appetite, so it’s not the best choice for a recipe collection.

4.3.2 Finding design inspiration using AI

As an experiment, let’s ask image-generator Midjourney to give us four designs for our site. We’ll instruct it to follow the color recommendations from those psychological studies too. Here’s the prompt I submitted to Midjourney:

sunny, bright, beautiful home page for an instant pot recipes website, brown::2 yellow::1 4K, detailed, masterpiece, ux, ui, --no blue --no orange --ar 3:2 --q 2

TIP Notice that you can specify in a Midjourney prompt that you want relative weights by using double-colon symbols. That prompt says to make brown twice as prominent as yellow: brown::2 yellow::1. Other specifications include high res (4K), user experience (ux), user interface (ui), aspect ratio (ar) 3:2, and high quality (q 2).

The four results are shown in figures 4.3 to 4.6. (At the time of this writing, AI art generators were still struggling with meaningful text. But they are improving.)

Figure 4.3 Aside from some strange vegetation, this is a design that can work nicely as our home page.

Figure 4.4 Version two here is perhaps too complex and crowded for a home page.

Figure 4.5 This one is nicely balanced and follows our color scheme well, but we’d likely leave out the lower third to simplify the design.

Figure 4.6 This design also calls for simplification in both the amount of text and the number of images, but that 3-D shadowed effect with the herbs on the left is an excellent idea.

Aside from some alien flowers and vegetables (and the bizarre text), these images look like a good starting point for inspiration. From Midjourney or other AI image generators, you can get often surprisingly good ideas for color combinations, layout, typography, balance, and text or image placement. What’s intriguing is that AI art usually seems to somehow employ rules taught in art school about such qualities as balance, line, symmetry, color, contrast, composition, and so on.

Midjourney produces four images for each prompt, so it’s easy to generate lots of alternatives. And it’s simple to rerun or vary the resulting images. If there’s something you want to eliminate from the resulting images, use the –no command as was done previously when blocking blue and orange. Van Gogh said, “There is no blue without yellow and without orange.” But we didn’t want either blue or orange, so we told Midjourney that.

Try variations on your prompt until a design really stands out. For example, try switching the weighting: brown::1 yellow::2. Or refine the best one of Midjourney’s four images by upscaling it, and then choosing Vary or Zoom options. You can also remix, modifying the prompt somewhat. This back and forth between you and Midjourney can produce the outstanding final result you’re looking for.

4.3.3 Using Canva

Anyone working in design these days needs to know about Canva. You can start with the Canva plugin in GPT (recommended) or go directly to Canva’s website (www.canva.com). Canva makes it pretty easy to create an impressive home page with a minimalist, contemporary feel like the one shown in figure 4.7.

Figure 4.7 If you want a less comfy homey design for your site, experiment with Canva. With its well-thought-out UI, you can quickly compose a pleasing, professional-looking image.

Canva, available as a specialized GPT (click Explore GPTs, and then search for Canva), opens a vast resource for design. Let’s assume that you want a more modern, minimalist home page design for our Instant Pot practice site. A design less flagrantly cozy. Follow these steps to get there:

1.  Add the Canva plugin to the active plugins in GPT. Or use a GPT that is fine-tuned for Canva.

2.  Use this prompt:

Using Canva, create a modern, minimalist, elegant home page for a site providing recipes.

TIP Canva itself doesn’t offer prompting (yet). So if you go to Canva via the GPT Canva plugin, you get the advantage of AI. A prompt gets you better results usually. Recall that traditional searches only give you a list of links to places that you need to visit to look for answers. However, Canva is actively working on adding AI features (see www.canva.com/magic/).

3.  GPT will show you a selection of pictures of sample home pages, with links to Canva.

4.  Click the link that displays a home page sample template closest to what you’re after. That takes you to the free version of Canva.

5.  In the sidebar on Canva, scroll to see if you find any templates you like better (see figure 4.8).

Figure 4.8 Scroll through the sample templates that your GPT prompt found.

6.  If you don’t find a good one by scrolling, type into the template search field: Recipes website landing page.

7.  Press Enter.

8.  Scroll through hundreds of designs. Try different search terms like “minimalist” or “contemporary”.

9.  When you find a design you like in the sidebar, click it to move it to the main window. Then, the sidebar will redraw, filling with similar designs to the one you chose.

10.  Scroll again if you wish. When you finally find the right one, click Resize on the top menu. Create the shape you want.

11.  Double-click the text in the design to customize that.

Explore Canva. It’s worth your time if you plan to create designs. For example, click an element in your design to select it, and then click the Animate menu item.

4.3.4 A home page checklist

Preplan your home page by thinking about these suggestions:

- Write a brief, catchy, descriptive page title. It should summarize your site’s purpose. And include a brief paragraph going into more detail about what benefits the site offers. Home page real estate is all about concision, concision, concision. If you absolutely must display longer text content, break it up with subheadings or a bulleted list, and locate it lower in the page.

- People understand the meaning of visuals more quickly than text. Choose images that contribute to instant understanding of the site’s purpose. Include no images merely for decorative purposes. And limit background decoration to ensure that it doesn’t compete with your images. Keep brevity and focus in mind at all times. Studies have shown that your visitors decide whether to stay or go within milliseconds, so you don’t have much time to captivate them.

- Be single-minded about promoting your goal for the site. There should only be one primary goal. If you’re writing a travel blog, don’t weaken the focus by including health tips on the home page. It’s fine to have an interior child page devoted to staying healthy while traveling, but keep it interior. On the home page, limit the health topic to a single concept. Ensure that everything on the home page serves your one, main purpose.

- Avoid bounce. Bounce means somebody visits your home page but immediately bounces back out to go to another site, without visiting your interior pages, or even looking at much of your home page.

Recall that experts say that, on average, people visiting your site make up their mind whether to stay or leave within .05 seconds. And if your home page survives this ultra-quick snap judgement, it’s still probable that they’ll leave within the next 20 seconds unless you manage to hook them. Technically, internet marketing experts look at data they call bounce rate: the percentage of visitors who view the home page without continuing to view other pages in the site. We’ll look at how you can work with this metric (and many others) in a later chapter on website analytics.

- Don’t make them scroll. People won’t be around long enough to find out whether there’s something they’d find valuable if you place it below the initial screen. Keep your most magnetic content near the top of the home page screen. If you think you have more space to hook people, just remember that current estimates are that about 50% of internet viewing is on portable (that is, small) screens, with phones dominant. Hook them from the very top.

- Decide what next step you want your visitor to take. Should they click a link to a page that displays your products? Do you want them to fill out a form so you can obtain their email for later marketing messages? Should they use your site search tool? Want them to share their views by posting on your blog? Or subscribe to your site? Or maybe make an appointment, sign a petition, or get a free trial?

Whatever next step you want them to take is your call to action (CTA). So, if they don’t take that step, if they bounce away, then your home page has failed.

Make the CTA look visually different from the other content (contrasting colors, for example), and include a simple, strong text description like “See our most popular recipe” or “Sign up for extra recipes”. Maybe give them an incentive to follow the CTA by offering to send them your 10 best recipes if they provide their email address. Make it clear to them what reward you’re offering. Perhaps offer a discount on their first order. Whatever it takes to prevent the bounce out of your site: “Only three left!” “Sign up for exclusive offers.” “Watch the video now.”

- Remove exits. Don’t show them links that leave your site. Some sites even hide their menu—replacing it with a three-line hamburger icon, or just the word Menu. That’s a fairly extreme, and rather manipulative, approach. But do avoid putting social media buttons on the home page that might tempt them to click and fly away to Facebook or X.

- Refine and revise. A home page, like any creative endeavor, is never really perfected. Watch their behavior as friends or relatives try different versions of your home page. One version is likely to have the most successful CTA. And install the analytics plugins that we’ll look at later in the book. They show you how your visitors behave, where they came from, what pathways through your site they took, how long they viewed different pages, and other data that can help you improve the site.

- Generate trust. Testimonials are a powerful tool to demonstrate the value and quality of your site. Think about adding a couple of brief, glowing comments from visitors to the home page. It’s good to display the names, locations, and photos of these people to make them seem more authentic. Also perhaps include an interior page with additional testimonials. Testimonials are slightly different from reviews—the former are entirely positive, but the latter, to be believed, must contain at least a few critical comments.

In this chapter, you set things up in preparation for content creation and site design. You first explored ways to choose the best typeface, and associated qualities, that will make your text content look great. Next, you saw ways to achieve a writing style that makes your audience want to read what you have to say. And the chapter concluded by putting what you’ve learned so far into action: creating a compelling home page.

In the next chapter we’ll look at plugins—small programs that can be added to your site with the click of a button. They include utilities such as spam blockers or features for your site’s visitors, such as an events calendar. We’ll also see how you can create your own custom plugins by describing what you want to an AI.

Summary

- Typography is a more important factor in a site’s success than many realize. Your theme will likely specify some defaults—typeface, size, and other font elements—but you should see if these choices might be improved.

- Learn to write in the conversational style found in many websites. Unless a site must convey solidity and seriousness—such as legal or academic sites—people generally expect an informal tone.

- Your home page must hook your readers very quickly and send them to the target of your call to action (CTA). People make snap judgements pretty fast when they first visit a site, and unless you impress them, they’re gone.

5 Adding functionality with plugins

This chapter covers

- Choosing the best plugins for your site

- Avoiding plugin conflicts

- Adding the Jetpack plugin’s module set

- Managing accessibility and cookies correctly

- Understanding the purpose of widgets

- Creating STET widgets and plugins using AI

- AI-generated HTML, CSS, and PHP executable code

A WordPress plugin is like an extension in Chrome, Edge, or Safari (Firefox calls them add-ons). Plugins are typically small programs that can be installed in WordPress to add functionality. Examples include spam blockers, e-commerce managers, apps that help improve the site’s rank in Google or AI searches, contact form builders, security systems, and many others.

You can find more than 50,000 plugins in the WordPress plugin directory (https://wordpress.org/plugins/). And thousands more plugins are available from third-party websites.

It can be daunting for site owners to find just the right plugins to improve their websites. That’s where this chapter comes in. Here, you’ll find

- which kinds of plugins are useful in almost every type of site.

- how to find plugins of the highest quality.

- how plugins can help you incorporate certain best practices (such as ensuring accessibility).

- how to create your own plugins and widgets using AI as your programmer.

5.1 Installing the essential plugins

Clearly, different sites need different plugins, but there are a few that most site builders agree are essential. Here’s the list of plugins that I recommend you consider adding to your site, whatever kind it is:

- UpdraftPlus—First things first: install security plugins right away. UpdraftPlus is a comprehensive backup-and-restore system allowing you to perform complete manual or scheduled backups of your site. You can save your backups in various storage options such as Dropbox, Google Drive, and currently 10 other locations. This plugin is highly rated and popular because it’s easy to use, has extensive features, and is reliable. Recall that quality hosting services do their own daily backups, but redundancy in this context is worthwhile. It comes in both free and paid versions, and for many sites, the free version works quite well.

- Wordfence—Adding this widely respected security program is another layer of protection for your site. But should an invader somehow get past Wordfence, you can still recreate your site by restoring a recent UpdraftPlus backup. You installed Wordfence along with UpdraftPlus in an earlier chapter. It has a comprehensive suite of protection features: a firewall; real-time monitoring with optional alerts; and a malware scanner that checks your site’s core files, themes, plugins, and other installed components for backdoors, spam, malicious redirects, code injections, and more. Finally, it monitors the integrity of your site’s files, ensuring they remain secure and unaltered. It’s freemium, coming in both free and premium versions.

WARNING Estimates vary, but it’s said there are more than a half million new pieces of malware on the internet per day. Over a decade ago, new malware started outnumbering normal, benign software. And the ratio has been widening since. There are various malware species: worms, trojan horses, viruses, spyware, ransomware, rootkits, and some that haven’t been categorized or that we don’t know about yet. But they all have one thing in common: they exploit computers and websites without the owners’ consent. And you surely don’t want your site to become a victim.

- Akismet—Here’s a third security-related plugin, and its job is to block spam. That’s particularly important for sites that include a blog page that allows visitors to post messages. When you permit messages to be sent to your site, that’s a doorway for spam, just as your email account can suffer from spam. Another spam entrance is a contact form—a form your visitors fill out and submit to your site’s email address. Akismet employs AI tools and checks potential spam against its global database of known spam to greatly reduce these unwanted messages. Akismet is free for personal use, but commercial use requires payment.

- Easy Google Fonts by Titanium Themes—Your theme determines which typefaces are available to you, and often there are only a few. However, Easy Google Fonts adds more than 1,400 typefaces. So, if you want to use the popular Verdana font for your body text, for example, you might want to add this plugin to your collection. (The Twenty Sixteen theme we use in this book’s practice site has only 17 fonts, but Verdana is one of them.) This plugin also offers additional options and features in its Settings > Easy Google Fonts screen.

WARNING Worthwhile as it is, there are some privacy concerns related to the Easy Google Fonts plugin. You might want to take a look at this: https://mng.bz/mRn8. Also, it’s not being kept up-to-date. But many people still use it without problems. That said, if you prefer, you can use the Fonts Plugin or Google Fonts Typography instead.

- SeedProd—You installed this plugin in an earlier chapter. One of its features replaces your pages with Coming Soon pages. While you’re still building the site, you don’t want visitors to be judging it while unfinished. But SeedProd has quite a few other features you might want to explore. There’s much more to SeedProd (particularly in its pro version) than just Under Construction page substitutes.

One of its most important features is a powerful drag-and-drop page builder. Page builder plugins assist you in layout and other elements of a page when you’re creating or modifying it. Three highly recommended page builders are Elementor, Divi, and SeedProd, with some reviewers listing SeedProd as the best. SeedProd offers the following:

o   Quite a few well-designed home page templates (not just the Coming Soon selections, but real home page designs)

o   Premium email integration

o   Search engine optimization (SEO) and analytics settings

TIP SEO attempts to improve your site’s ranking in search engines or AI. Analytics gather data about how visitors deal with your site—how long they stay on a page, which pages are viewed, and other information that can help you improve your site. Both SEO and analytics are covered in later chapters.

o   WooCommerce integration (a popular e-commerce plugin)

o   Subscriber Management (some sites gather email addresses for a mailing list, or wall off some or all of the site to charge subscribers for special content)

- Google XML Sitemaps—This plugin is a must for SEO and AIO. Google XML Sitemaps is free, easy to use, and effective. Plus, for optimizing your position in Google searches, who better to assist you than Google itself? The plugin is lightweight too. It won’t slow down your site or take up a lot of space, but it does help Google and other search engines such as Bing understand how your site is structured and, as a result, judge it more accurately. The plugin is very simple, does its mapping job, and usually doesn’t require any support.

- All in One SEO (AIOSEO)—This WordPress plugin offers a wide range of website optimization features that can improve your site’s search rank. Some of its benefits and features include the following:

o   Built-in support for WordPress schema markup. This can help you attract more visitors. Schema markup is a type of code that you can add to your website to help search engines better understand the content on your pages (similar to an XML sitemap).

o   Uses GPT to help you find the best post titles and meta descriptions for SEO.

o   Automatically generated SEO sitemaps (including XML and HTML format). There is no problem with running this plugin and Google’s XML Sitemaps plugin at the same time.

o   On-page optimization with suggestions to improve content quality.

o   Complete site audit and competitor site analysis.

o   Social media integration.

o   Finds any orphaned posts with no internal links.

o   Advanced e-commerce SEO support for the WooCommerce plugin to optimize product pages and categories for online sales.

o   Audit checklist to analyze your entire site and detect critical errors.

o   Redirection manager to easily create and manage redirects for broken links.

o   Submits your latest news articles to Google News.

- MonsterInsights—This very popular WordPress plugin makes it easy to connect your website to Google Analytics (one of the best plugins to provide you with data that can help you improve your site’s SEO rank and also grow your audience). Benefits include the following:

o   Advanced tracking that lets you understand your audience better. For example, this tool provides data that can help you get more insights into your website performance and visitor behaviors, so you can make data-driven decisions to grow your audience or business.

o   Simplifies finding and viewing data reports.

o   Helps you grow your email list and improve sales.

o   Lists the keywords that send you the most traffic.

o   Shows what files people are downloading from your site, which links or ads they click, and other similar data.

o   Tracks form conversions so you can see which forms on your site are performing best and optimize the others for better results.

By using this information, you can make informed decisions about improving your website’s content and marketing strategies to increase engagement, traffic, and sales. MonsterInsights displays its easy-to-understand reports right in your WordPress admin area (Dashboard).

- Jetpack—This popular WordPress plugin offers a set of quality tools and features for security, performance, marketing, and design. It’s actually a collection of many plugins (that Jetpack calls modules). Some of the most useful modules are Carousel (animate a set of images), Contact Form (have visitors send you information about themselves, particularly their email address), Tiled Galleries (a collection of several images in various layouts), and Widget Visibility (gives you control over sidebar content—more on sidebars shortly).

- WPForms—If you need a contact form with extra features beyond what Jetpack’s module offers, this is a good choice.

5.1.1 Advanced Editor Tools

You should add the Advanced Editor Tools plugin because it expands the features of the classic editor. Figure 5.1 shows you the default toolbar in the Edit Page screen.

Figure 5.1 The default editing toolbar contains a rather sparse set of options.

By default, the editor includes this group of icons. From left to right, when clicked, they perform the following tasks:

- Open a menu where you can select typefaces for headings and body text

- Boldface

- Italics

- Bulleted list

- Numbered list

- Blockquote (a lengthy quoted passage that’s indented and has no quotation marks around it)

- Align left

- Align center

- Align right

- Create or edit a hyperlink

- Display only the first part of a long blog post with a Continue Reading link at the end

- The icon furthest right (four arrows) toggles distraction-free writing mode (hides the dashboard and the modules)

Just to the left of the distraction-free icon is a toggle icon that opens a second toolbar with several additional icons:

- Strikethrough

- Insert a horizontal line

- Text color

- Paste as text (removes any invisible special formatting codes that might be embedded in text you copied)

- Clear formatting (from text you’ve highlighted, this removes any formatting you might have applied such as italics, text color, and so on)

- Insert special characters (for example, a copyright symbol or superscript)

- Decrease or increase indentation (the left margin)

- Undo or redo the most recent modification

- Display a list of keyboard shortcuts (key combinations that toggle the various icons on the toolbar, so you don’t have to take your hands off the keyboard and reach for the mouse touchpad to make the next words you type boldface, underlined, and so on)

But when you add the Advanced Editor Tools plugin, you get more options, as shown in figure 5.2.

Figure 5.2 WordPress includes a second editing toolbar, hidden by default.

The following are features added by the Advanced Editor Tools plugin:

- Remove a link

- A dropdown menu for typeface choice

- A dropdown menu for font size

- Menus for printing, editing, viewing, inserting, formatting, tools, and tables

The Advanced Editor Tools plugin also has an extensive set of additional features found in the Settings > Advanced Editor Tools screen. For example, the menu items are turned on above the editor’s toolbar by checking the Enable the Editor Menu option. Also, the Unused Buttons set contains 29 additional buttons that you can add to your editor text box toolbar, as shown in figure 5.3.

Figure 5.3 The Advanced Editor Tools plugin includes 29 icons you can add to your toolbar.

5.1.2 WP Rocket

Many consider WP Rocket to be the best all-around, full-service performance plugin. Its primary function is to maximize site performance (such as speeding up page display) using various optimizations. Among other strategies, WP Rocket offers efficient caching. That said, you might want to check with your hosting service. Some hosts don’t want you to add caching plugins to your site because they perform caching on their end. Also, if you run into an unexplained bug on your site, try disabling your caching plugin to see if the bug goes away. Caching plugins are one of the main causes of plugin conflicts.

DEFINITION Caching means storing whole pages, so the browser doesn’t have to redraw a page the next time it’s viewed. If cached, a page can just be slapped into the visitor’s browser window, no processing required. In addition to the text or media, a web page includes hidden HTML and CSS codes that describe things such as layout, headline sizes, font color, and so on. Without caching, each page—even if nothing has been changed in it—must be re-rendered before it’s displayed.

In addition to caching web pages, WP Rocket also employs other types of caching. It offers cache preloading (anticipating, then rendering in advance, what page you’re most likely to view next). It also compresses. One type of compression is called code minification—it removes unneeded characters (such as programmer comments and whitespace). For one example, instead of storing five blank lines, it stores only three characters 5bl (this describes the number of blank lines rather than actually storing a mirror image of all the characters in all the lines). This tactic makes code files smaller, so they load more quickly and require less bandwidth to transmit.

Similarly, WP Rocket concatenates your site’s page files—combining multiple code files into a single file. If not concatenated, to render a page, the browser must make multiple individual requests to your site’s database (stored on your hosting service’s drives)—one request for each file of the several that make up the page. If the files are merged, only one request is needed, and the result is faster load times and improved overall site performance. It’s similar to the difference between researching via Google and asking GPT a question. Google gives you a list of several results that you then must look at individually and sometimes merge into a final answer. GPT does that for you: displaying a single, finished answer to your question.

AI plugins and tools

As with every other mental tool, AI is now being included in WordPress plugins. Some of these plugins you can ignore. They provide no added value because you can just as easily visit an AI system’s website directly to get the same results. For example, there’s no need to install an AI plugin to help you choose your site’s title. Just submit a prompt for a list of titles for your site’s topic to an AI assistant website such as Claude (https://claude.ai). (And while you’re at it, ask Claude to ensure that none of the titles it suggests are already in use.)

Other AI plugins, however, can add useful functionality and should be installed if your site would benefit. For example, responding to user queries can be tedious or impossibly time-consuming. So, why not add a chatbot to your site and let it deal with customer service questions?

Or, you can also quickly modify chatbot plugins to offer specialized AI-powered tools for your audience. For example, give them a recipe finder. They enter some ingredients, click Mexican Recipes, and a list appears. GPT is doing this searching for you behind the scenes.

The AI Engine chatbot is quite popular as it offers content generation, images, forms, and much more. It also includes multiple AI systems. Or, take a look at this one: Tidio – Live Chat & AI Chatbots. Both can be installed in your site’s Plugins > Add New screen. You can find other AI plugins here: https://mng.bz/5O97.

If you’re using the Gutenberg block editor, click Jetpack in your dashboard, and then locate and try Jetpack AI in the Manage Your Jetpack Products screen.

Websites that include blogs are crying out for a plugin that submits incoming messages to AI for vetting—ensuring that only appropriate, mannerly messages are posted on your site. At the time of this writing, nobody has created one yet.

These plugins provide essential services and are the best of breed. Of course there are always exceptions. If you’re running a personal blog for family and friends, you clearly don’t need to gather data via MonsterInsights or attempt to climb high in Google or AI search rankings using AIOSEO.

That said, your site will likely need some specialized plugins to assist with tasks needed by your site’s particular purpose. To help you make the best choices, we’ll next consider three things you should look for when picking the best plugins.

5.2 Installing the best plugins

Given that there are tens of thousands of WordPress plugins, they range across a spectrum of quality and safety—from completely useless or corrupt to excellent and well-maintained. Look for three things when choosing a plugin:

- Ensure that it’s popular and gets good reviews. If millions of people are using it, clearly word has gotten around that this is a great choice. You can google pluginsname reviews or for a category, use wordpress security plugin reviews. You can also prompt AI:

You’re an experienced WordPress plugin critic. Please list the three most popular spam-blocking plugins, and explain why you selected them.

- Or you can read user reviews by going to your Plugins > Add New screen and searching for the name of the plugin or category. In figure 5.4 you can see that Wordfence has more than 4 million users and gets a stellar 4.5-star rating.

Figure 5.4 If a plugin has millions of installations, you can feel confident that it’s of high quality and will be around for a while.

Also, see if a plugin is compatible with the current version of WordPress. WordPress is updated very frequently, often for security reasons. You’d be surprised how many plugins and themes are abandoned by their developers and thus no longer kept compatible. This can pose a security risk to your site.

TIP There are exceptions to that keeping-updated rule. Some out-of-date plugins are so useful that they can still be worth trusting. Easy Google Fonts and Advanced Editor Tools both fall into this category. Both haven’t been updated in two years. So why feel safe with them? For one thing lots of people are still actively using them. Advanced Editor Tools has millions of active installations, and Easy Google Fonts has 200,000. So even if they suffered a security breach, it’s unlikely that you would be among the first victims. Further, your Wordfence or other security would respond rapidly to block the threat. And finally, you’ve got site backups if the worst happens. On the other hand, an abandoned plugin with 3,000 installations is pretty risky. In that case, find an alternative.

- Chose freemium plugins. A popular plugin might have two tiers, a free version and a paid version. Plugins that have a paid version are far less likely to be abandoned by their designers because they’re generating income. And often the free versions can suffice for many sites. Examples of freemium plugins are Wordfence, AIOSEO, Jetpack, Akismet, SeedProd, MonsterInsights, and UpdraftPlus. In each case, their free version can be quite serviceable.

Asking AI for recommendations

As always, AI can assist you in deciding which plugins are best for your site. For example, if you’re looking for an alternative to Wordfence for your general security plugin, try this prompt:

You’re an expert on WordPress security plugins. I know that Wordfence is very popular, but could you list the pros and cons of two alternative plugins that would be as good as Wordfence?

5.3 Turn on auto-updating

Plugins are often updated to improve security, fix bugs, or add features. Plugins active on your site should be updated as soon as an update is made available. You can manually update, but it’s easier to just automate the process. To do that, follow these steps:

1.  Go to your Plugins > Installed Plugins screen and click this box to select all of your plugins at once, as shown in figure 5.5.

Figure 5.5 It’s a good idea to just automate the plugin updating process so you need not worry about doing it manually.

2.  Then, click the down arrow next to Bulk Actions to drop that menu down, and click Enable Auto-Updates, as shown in figure 5.6.

Figure 5.6 The Bulk Actions option applies your selection in this menu to all your plugins at once.

3.  To update your theme automatically, go to your Appearance > Themes screen, and click Theme Details, which appears when you hover your mouse on your theme, as shown in figure 5.7.

Figure 5.7 You should automate theme updating, too, for security reasons, and perhaps do the same for modifications that improve the theme in other ways.

4.  Click Enable Auto-Updates, as shown in figure 5.8.

Figure 5.8 Clicking this link automates theme updating.

5.  You need to update WordPress itself by going to your Dashboard > Updates screen. If there’s a new version available, a banner announcing it appears at the top of the screen with a link you can click to update.

WARNING Before updating WordPress, it’s always good practice to manually force a backup of the site, just in case anything goes wrong during the update process. If you’re using UpdraftPlus, go to the Settings > UpdraftPlus Backups screen, click the Backup/Restore button, and then click the Backup Now button.

5.4 Avoid adding too many plugins

While plugins can be very effective and add excellent features to your site, using too many can lead to a variety of problems, including security breaches, bugs, crashes, and slower performance. To avoid these problems, it’s recommended that you only install the plugins you really need.

There is no set rule about the ideal number of plugins. You do want to ensure that you add the functionality that’s necessary for the smooth running of the site, and for the best experience for your site’s visitors. But note that plugin conflicts are a common source of bugs. And the more plugins you use, the more you increase the likelihood of these conflicts.

Plugins can also cause security problems. WordPress allows you to install plugins without activating them. But unless you have a plugin that you frequently turn on and off, you should delete any that aren’t activated. Even though a plugin isn’t being used, it’s still a chunk of code in your site’s database. And programming code can be an entrance for malware, especially if it’s not being updated. (WordPress notifies you if an update is available, even for inactive plugins. And the auto-update feature works with both active and inactive plugins as well.)

TIP The difference between installed and active can be confusing. Think of a lamp. Installed means it’s plugged in. Active means it’s turned on.

5.5 Preventing plugin conflicts

When you have something weird happening in your backend—a bug, an oddity—check for plugin conflicts first. WordPress bugs are caused by a variety of sources: theme incompatibility with the core WordPress functionality, hosting service database problems, and other bugs can cause WordPress to misbehave. But most often, the likely cause of a bug is a conflict between incompatible plugins.

Why do plugins cause bugs? Given that there are an estimated 60,000 plus available, clearly no plugin developer can check to see if their plugin is compatible with every other plugin. If something strange and inexplicable is happening in your WordPress site, your first move should be to follow these steps to see if a plugin is causing the problem:

1.  Back up your site, and then activate your Coming Soon plugin to block visitors from accessing the site. If the problem can’t be quickly solved, then work on a copy of your site (called staging) rather than block your audience. Your hosting service might have a staging utility, or you can use the popular BlogVault plugin BlogVault WordPress Backup Plugin (https://wordpress.org/plugins/blogvault-real-time-backup/).

2.  Go to your Plugins > Installed Plugins screen.

3.  Click the Plugin checkbox to select all the plugins at once, as shown in figure 5.9.

Figure 5.9 Click this Plugin checkbox to select all of your plugins.

4.  Choose Deactivate from the Bulk Actions list, and then click the Apply button shown in figure 5.10.

Figure 5.10 Deactivating all of your plugins

Now you’ve turned all your plugins off. So, return to the bug and see if it’s now fixed. If so, one of your plugins is the culprit. To find out which one, reactivate them one by one. And each time you activate a plugin, return to the bug. When the bug reappears, the plugin you just activated is the culprit. Uninstall it, and then find an alternative that does the same job.

TIP Another tactic is to use the free Health Check & Troubleshooting plugin to test your plugins. It’s created by members of the WordPress open source community to work with the built-in Tools > Site Health feature. Search for, install, and activate that plugin in your Plugins > Add New screen.

5.6 Adding Jetpack to your site

In 2005, WordPress split into two platforms, the paid version (WordPress.com) and the free open source version I recommend and use in this book’s examples (WordPress.org). The open source .org version of WordPress however does require that you use create and maintain it on a paid hosting service. (Choose SiteGround, Bluehost, or DreamHost, as recommended by WordPress itself.)

NOTE These “com” and “org” names are used only to identify the two versions of WordPress and have nothing to do with domain extensions (such as .com, .net, and so on) that appear at the end of internet addresses.

WordPress.com includes Jetpack, a collection of fairly lightweight plugins (called modules as mentioned earlier), and some of them are quite useful. These modules are lightweight because, compared to many other plugins, they don’t offer lots of additional features. But they do get simple jobs done. For example, the Jetpack Form module displays a bare-bones form that a visitor fills out to subscribe to your site, apply for access to your blog, or access other kinds of features. Among other things, a contact form helps you build a list of email addresses from your audience.

By contrast, a plugin named Contact Form 7 is a full-featured alternative to the pretty basic Jetpack Form module. But if all you want to do is simply harvest email addresses, the Jetpack plugin works fine. The visitor fills in their information, clicks a Submit button, and the form is emailed to you.

Requiring an email address before a visitor can post messages to your blog is one way of cutting down on spam or other inappropriate messages. To turn on this requirement, go to your Settings > Discussion screen, and check Comment Author Must Fill Out Name and Email.

There is a small drawback to using Jetpack though. Before you can activate it, you have to set up a free account on WordPress.com so you can link your WordPress.org site to that free account. Only then can you install the Jetpack plugin itself on your .org site.

This free .com account’s site need not be populated with content or otherwise managed. You can just let it sit there and never return to it once you link to it. The WordPress.com system ignores it too, even if it remains inert. Your reward for setting up that free account is the 46 modules you add to your site with Jetpack. (Some Jetpack modules are activated by default; others require that you activate them by hand.)

The process of signing up with WordPress.com varies. Your goal is to sign up for the free version. Go to https://wordpress.com and click the Get Started button (or whatever name they’ve changed it to). If you already have a .com account, you can skip the process of setting up a new account (so skip down to the next paragraph). During the setup process, you need to pay attention to making the correct choices to establish your free account—ensure that you choose the correct word free because sometimes that term is hidden (so scroll down) or several options are displayed using terms like “free to set up” but only one—the truly free one—is unmodified by other words.

After you have your .com account set up, go to your .org site’s backend, and visit your Plugins > Add New screen. Search for, install, and activate Jetpack. Follow Jetpack’s instructions to complete the activation.

Jetpack adds itself to your Admin menu on the left side in your backend. Now, view the Jetpack modules by clicking Jetpack > Dashboard (this is a second dashboard in your admin menu, as shown in figure 5.11).

Figure 5.11 Click the Jetpack Dashboard as shown here.

Now, scroll all the way down to the bottom of Jetpack’s Dashboard screen and click Modules, illustrated here in figure 5.12.

Figure 5.12 Buried in the bottom of Jetpack’s dashboard screen is the link to the modules.

You can look around and see that a handful of the modules are active by default (they are displayed in boldface). If any of Jetpack’s default modules duplicate plugins that you already have and prefer to use, deactivate those modules. Also, you might want to click Popular on the right side. This gives you an idea of what most people are using. Interestingly, not all the modules activated by default when you installed Jetpack are among the most popular ones.

I suggest you consider two modules that exhibit images: Carousel is a rotating slideshow, and Tiled Galleries displays several images grouped into various arrangements. Also take a look at these modules: Extra Sidebar Widgets, Widget Visibility, Jetpack Sharing, and Jetpack Social (found in the Jetpack > Social screen).

TIP The Jetpack Social module differs from the Jetpack Sharing module, though they both involve social media connections. Jetpack Social allows you to automatically share your posts and products to your social media channels, and it includes scheduling and recycling options. It also has paid plans that offer more features such as video sharing, image generation, and engagement optimization. The Jetpack Sharing module, on the other hand, lets you add sharing buttons to your blog posts for your visitors to use. This gives them a way to easily share your site’s content on their social media accounts by, for example, clicking a Facebook button you added to blog posts.

5.7 Dealing with the EU cookie law

The European Union cookie law (aka the EU ePrivacy Directive or the Cookie Directive) was introduced in 2011. Its main purpose is to protect the privacy of internet users by requiring website owners to get consent from their visitors before storing cookies on the visitors’ devices. Cookies are small text files saved on a user’s computer and can be used to track their activity on a website, personalize their experience, and collect data for advertising or other purposes. In practice, the enforcement of the EU Cookie Law varies between EU member countries because each country has included the directive differently in its national law.

In 2018, the EU updated the law with a General Data Protection Regulation (GDPR). It strengthened the rules for obtaining consent from site visitors and increased the penalties for noncompliance. Currently, EU lawmakers are cooking up a third update to make further changes to the existing directive. They’re lawmakers. It’s their thing.

Some countries, such as Canada and Australia, have similar laws in place. In the United States, there is currently no federal cookie law, but tireless lawmakers in some states have passed their own laws.

How should you deal with this? If you’re running a personal blog, intended for local consumption only, or if your site is just for your students, friends, or relatives, you likely don’t need to store cookies anyway. But if your site does use cookies, it would be polite to let your visitors know what information you’re storing and how it’s being used. Some people care.

Some themes—Avada for instance—include a cookie law feature that you can enable. But there are also plugins. Here are three:

- Complianz – GDPR/CCPA Cookie Consent

- GDPR Cookie Compliance (CCPA, DSGVO, Cookie Consent)

- Cookie Notice & Compliance for GDPR/CCPA

5.8 Ensuring accessibility

The CDC says one in four Americans experiences some type of disability. It’s wrong to assume that website-related disability refers only to people challenged by full blindness. Other conditions that may challenge your visitors include partial vision, auditory problems, color blindness, cognitive challenges, and neurological or sensory problems. For example, people with cognitive impairments such as dementia, autism, or traumatic brain injury may have trouble dealing with layout, design, and navigability. And a crowded layout or small buttons and links can cause difficulties for people with limited use of their hands.

So, a large portion of your audience likely will appreciate you taking their needs into account. And there’s nothing to prevent you from ensuring that your site is accessible to all visitors. Here are some things to check or put in place:

- Does your typeface color strongly contrast against the background for ease of readability? Visit the WebAIM site for a useful Contrast Checker test: https://webaim.org/resources/contrastchecker/.

- Is your typeface reasonably large (again, for the sake of readability)?

- Add alternative text to all your images. Here’s how: in your Media Library, click an image to open its Edit Image screen. Scroll down and describe the image in the Alternative Text field. This description is read aloud to people with visual challenges. It won’t be visible to other visitors unless for some reason the image itself can’t be displayed.

- When you embed a YouTube video, add captions to it for the hearing impaired. (When adding video to your site, it’s best to upload the video to YouTube and then embed the video in one of your site’s pages. This technique is explained in an upcoming chapter.)

How to add captions to an embedded video

You have to create an embed ID code. Here’s what one looks like:

<iframe width="560" height="315" src="https://www.youtube

.com/embed/VIDEOIDGOESHERE?cc_load_policy=1"

frameborder="0" allowfullscreen></iframe>

You need to get an embed ID. So, first find in YouTube the video you want to embed into your site. Run the video and click the Share option. Click Embed, and then click Copy. This ID is illustrated in the following figure.

In this example, you click the <> Embed icon, and then you’ll be shown the code you can copy.

Then, in the Edit Page screen where you want to embed the video, click the Text tab in the upper-right corner of the text box, and paste the following code:

<iframe width="560" height="315" src="https://www.youtube

.com/embed/VIDEOIDGOESHERE?cc_load_policy=1"

frameborder="0" allowfullscreen></iframe>

But replace VIDEOIDGOESHERE with x3mXMIgvyJU (or whatever video ID you’re using).

Click the Publish or Update button to save the page. Then you can look at the page from the frontend as a visitor would see it. And you can see that captions have been added to your embedded video.

Because it’s not easy to automate site accessibility, you’ll find only a few plugins that attempt the job. And some of these plugins have even raised legal problems (not fixing all the problems or inadequate compliance, thereby potentially exposing you to legal challenges). So, manually ensuring accessibility is recommended. For one thing, you can tweak your site by hand fairly quickly to fix any bad typography problems. And remember to fill in the Alt Text field when adding images to your pages.

One helpful tool for making your site available to all is an accessibility checker. Here are three for you to consider:

- The WAVE accessibility checker (https://webaim.org) is a free utility that checks web pages for accessibility. It gives you useful alerts about problems that need attention.

- Monsido Accessibility Checker (https://monsido.com/platform/web-accessibility) is a paid system that scans web pages for accessibility problems. It provides a detailed report and recommendations on how to fix any problems.

- Siteimprove Accessibility Checker (https://mng.bz/6YWR) is another paid tool that checks web pages. You get a detailed report on problems and ways to fix them. It also includes a nice feature that simulates how your website looks to someone with visual impairment.

5.9 Adding a sidebar

Widgets are similar to plugins, but are usually smaller and offer more limited functionality. Widgets are placed into a site’s sidebar, which is a usually narrow strip of content containing one or more widgets (such as a small text box displaying a store address, hours, and phone number).

A sidebar is an important element of many sites. Like the menu, a sidebar appears on each page unless you turn it off for certain pages, usually because it would be redundant. You can use the Widget Visibility module in Jetpack to select which pages will display which widgets.

On a sidebar, you put content that deserves to be visible most everywhere within your site. A sidebar can contain various kinds of content. Figure 5.13 illustrates a restaurant website’s home page, with featured menu items on a right-side sidebar.

Figure 5.13 A sidebar can contain specialized content, such as this restaurant’s currently featured menu items.

A sidebar often contains subsidiary content stacked in a narrow, usually vertical, column. A sidebar takes up perhaps only a fifth the width of the primary content. Its narrowness is why it contains widgets with their more limited functionality when compared to plugins.

So, it’s a thin strip of real estate on which site designers can display a clickable map that expands to display your store location, a clickable events calendar, or perhaps a couple of sample blog posts or testimonials.

Your theme determines how many types and locations of sidebars are available. Look in your Appearance > Widgets screen. They can be on the left, right, or below the main content. Also, in some cases, a sidebar displays the site menu.

Let’s try adding a widget to a sidebar using WordPress’s Twenty Sixteen theme. Follow these steps:

1.  Go to your Plugins > Add New screen and search for the Classic Widgets plugin (the one with 2 million installations). Install and activate it. Without this plugin, you have to use the Gutenberg version of the sidebar management system.

2.  Go to the Appearance > Widgets screen. Displayed there is a list of default widgets and some Jetpack widgets as well, as shown in figure 5.14.

Figure 5.14 Some widgets come preinstalled by your theme, and others ride in on Jetpack during its installation.

TIP If you see some widgets already installed (named Block) in the sidebar field, just open them (by clicking the small triangle icon in their title bar) and delete them from the sidebar field.

3.  Scroll down and locate the Text widget. Then, drag and drop it in the Sidebar field in the upper-right corner.

4.  It automatically opens and displays a text box similar to the text box in your Edit Page screen. You can add a title and some text. Then, click the Save button to store your sidebar.

TIP Notice in figure 5.14 the Visibility button in the Text widget’s field. Click that button if you don’t want this widget visible in certain pages. If you don’t see a Visibility button, go to your Jetpack > Modules screen, and activate the Widget Visibility module.

5.  Click your site title in the upper-left corner so you can view your site’s frontend and check out the new sidebar you just created.

Play around with some of the other widgets as well. There are some useful ones already available in the Widgets screen. And you can find many more by going to your Plugins > Add New screen and searching for widgets.

5.10 Creating your own plugins and widgets with AI

Creating plugins yourself sounds like a heavy-duty programming job, and it certainly can be. But as is so often the case, AI can manage what most of us can’t.

As a demonstration, we’ll ask GPT to create a WordPress widget that displays the current date and time. After that, we’ll ask AI to generate some HTML, CSS, and JavaScript code for us.

WARNING Be sure to back up your site before testing custom plugins or widgets.

TIP Recall that some researchers have found that the best way to start a prompt is to use the phrase: “Take a deep breath and work step-by-step.”

5.10.1 AI generates a widget

To create a widget, I used this prompt with GPT:

Take a deep breath and work step-by-step. Please create a WordPress plugin that displays the current time (Greenwich Mean Time) and date in a text widget on the sidebar. Make the plugin into a text file of PHP code that I can make into an uploadable .zip file. Make the background of the widget light blue. And append “Greenwich Mean Time”.

GPT responded with this code:

<?php

/*

Plugin Name: GMT Time and Date Widget

Description: A widget that displays the

current Greenwich Mean Time (GMT) and date.

Version: 1.0

Author: ChatGPT

*/

// Register and load the widget

function gmt_load_widget() {

register_widget('gmt_widget');

}

add_action('widgets_init', 'gmt_load_widget');

// Creating the widget

class gmt_widget extends WP_Widget {

function __construct() {

parent::__construct(

// Base ID of your widget

'gmt_widget',

// Widget name will appear in UI

__('GMT Time and Date Widget', 'gmt_widget_domain'),

// Widget description

array('description' => __('Displays the

current Greenwich Mean Time (GMT) and date.',

'gmt_widget_domain'))

);

}

// Creating widget frontend

public function widget($args, $instance) {

echo $args['before_widget'];

// This is where you run the code and display the output

$current_time = gmdate("H:i:s");

$current_date = gmdate(«Y-m-d»);

echo "<div style='background-color: lightblue; padding: 10px;'>";

echo "<strong>Time:</strong> " . $current_time . "<br>";

echo "<strong>Date:</strong> " . $current_date;

echo "<p>Greenwich mean time</p>";

echo "</div>";

echo $args['after_widget'];

}

}

?>

To try this on your site, back up the site, and then follow these steps:

1. Copy the PHP code that GPT generated.

2. Paste the code in Notepad.

3. Save the text file named TimeandDate.txt.

4. Right-click that file, and rename it TimeandDate.php.

5. Right-click the file again, and choose Compress to Zip file.

6. Go to your Plugins > Add New screen.

7. Click Upload Plugin, and then click Choose File.

8. Upload your zip file.

9. Click Install Now.

10. Click Activate Plugin.

11. Now you need to add the widget to your sidebar, so go to the Appearance > Widgets screen.

12. Locate the GMT Time and Date Widget. (WordPress fetches the name of the widget from the code AI generated.)

13. Open its module by clicking the black triangle icon.

14. Click Add Widget.

Now check it out. Click your site’s title in the upper left of the WordPress backend to view the frontend. Scroll down to the bottom of the sidebar to view the widget. Each time the page is refreshed, the time will refresh.

TIP Currently, the plugins and widgets AI creates are a hit-and-miss proposition. More complex plugins cause AI to struggle. And that can require your intervention and debugging. Output is beyond AI right now (such as emailing to you the results of a form your visitors fill out.) But given AI’s speed of self-improvement, give it a few months—who knows how much more sophisticated its plugins will become?

5.10.2 AI generates code

If you want to do something simple, a plugin or widget can be overkill. In this next example, we have a fairly easy programming job. Here’s how to get AI to write HTML, CSS, JavaScript, or other code:

You’re an expert HTML programmer. Write HTML code that displays a button that, when clicked, displays additional information on a page.

The first time it tried to write this code, nothing happened when the button was clicked. So, I gave Claude a second prompt:

There must be a bug in this code, Claude. When the button is clicked, nothing happens. Please rewrite the code so the information is displayed.

The second version worked fine:

<html>

<head>

<style>

#paintingInfo {

display: none;

}

</style>

</head>

<body>

<button id="moreInfoBtn">More information...</button>

<div id="paintingInfo">

<form>

<p>

This painting is 60 x 80 inches

and weighs 6 pounds. It is for sale at $4,000.

You can contact FbreahaXX@hotmail.com for

additional details and purchase instructions.

</p>

</form>

</div>

<script>

document.getElementById('moreInfoBtn')

.addEventListener('click', function() {

document.getElementById('paintingInfo')

.style.display = 'block';

});

</script>

</body>

</html>

One moral of this story is that when AI missteps, just ask it to try again. To test code like this, just paste the code into Notepad. Save it to your hard drive. It will currently be a .txt file, so rename the file by replacing .txt with .html. Then, double-click the filename, and it will load into your browser.

Asking AI to improve code

You can always ask AI for improvements to its responses. For example, let’s change the typeface of the information block:

This looks good! But rewrite it to display the information form in a bold, blue, sans serif font.

Claude’s modification:

<style>

#paintingInfo {

display: none;

font-family: sans-serif;

color: blue;

font-weight: 300;

}

</style>

Understanding website languages

The language of HTML primarily focuses on design (describing how the web page looks—mostly in terms of its structure, its layout). And the CSS language works with HTML, refining the HTML design (but also including special effects such as transitions and animation). JavaScript is a language that describes behavior. For example, you use <script> to tell the browser what steps to take when a button is clicked. JavaScript (like HTML) usually runs in the browser, so it can do things without needing to refresh the page. Like displaying an extra block of text. As you saw in the previous example code, you can insert JavaScript code within HTML using the <script> tag.

Another website language, PHP, also frequently governs behavior, but it runs server-side (in the cloud on your hosting service’s drives). Several other programing languages can also be employed server-side to control website behaviors.

5.10.3 Modifying AI Code

AI can be like a butler—subserviant and extremely patient (in spite of what it might write later in its private diary). AI, unless provoked, is quite good-natured about any requests and modifications. If AI has any ego, it’s well hidden.

Let’s ask it to display an image that, when clicked, shows some added information. Go to your Media Library, click an image, and then on the right side of the Attachment Details screen, copy that image’s File URL. Provide that URL in your prompt:

Please rewrite this code to display this image instead of the button http://petstogo.signstreaming.com/wp-content/uploads/2023/01/bpxr-1-.png, and then when the image is clicked, display the additional information in the paintingInfo DIV.

Result:

<html>

<head>

<style>

#paintingInfo {

display: none;

font-family: sans-serif;

color: blue;

font-weight: 300;

}

</style>

</head>

<body>

<img id="moreInfoImg" src="http://petstogo.

signstreaming.com/wp-content

/uploads/2023/01/bpxer-1-.png" />

<div id="paintingInfo">

<form>

<p>

This painting is 60 x 80 inches and

weighs 6 pounds. It is for sale at $4,000.

You can contact FbreahaXX@hotmail

.com for additional details and purchase instructions.

</p>

</form>

</div>

<script>

document.getElementById('moreInfoImg')

.addEventListener('click', function() {

document.getElementById('paintingInfo')

.style.display = 'block';

});

</script>

</body>

</html>

Let me know if you have any other questions!

I'm happy to explain or modify the code further.

AI as teacher

AI is a great teacher. It’s patient, rarely sarcastic, and increasingly wise and accurate. For example, after Claude changed that button to a clickable image, it explained the modifications and its logic:

The key changes:

Added an <img> tag with the provided src

Gave the img an id of “moreInfoImg”

Updated the click handler to target the img instead of a button

Kept the same display logic for showing paintingInfo

NOTE Regarding sarcasm and other personality traits, Elon Musk’s AI system Grok is said to have a special personality: witty and sarcastic, playful and humorous, and rebellious and curious.

And GPT-4o can accept requests from us to evidence some personality traits as well. I asked GPT-4o to give me a sarcastic response to the following question:

Why do people like Chevys?

Oh, why do people like Chevys? Well, maybe they just enjoy the thrill of wondering whether their car will actually start each morning. And let’s not forget the joy of experiencing that “classic” car smell, which is a unique blend of old upholstery and faint regret. Who wouldn’t love that?

But let’s get back to programming. So, if you wanted to learn to program (in pretty much any computer language), you could learn from AI, which is a very considerate and quite talented tutor. You could ask it to quiz you, give you assignments, even (currently with Claude) create a 70,000-word course on CSS, complete with reviews, multiple-choice tests, and 12 lessons.

However, I would discourage you from studying programming, for the same reasons that I would try to dissuade you from enrolling in horse-drawn carriage-making classes. AI is already better at programming than most of us.

This chapter was all about adding capabilities to your website—everything from protecting it, to making it accessible to everyone, to finding ways to increase your audience. Next, we’ll turn our attention to a significant, but too-often overlooked, element of any first-rate website: design.

This topic, site appearance, is so important that we’ll devote two chapters to it. And even if you never thought much about design, you’ll likely find at least some of the subjects covered quite interesting. You’ll learn the rule of thirds, why some modern buildings are described as brutalist, why a medical site should be colored blue and white (never red), and how to ask AI to list ways to improve your site’s design.

Summary

- Plugins add functionality to a website—adding tools and features useful to both the site creator and the audience. And some plugins are valuable in most every site: for security, Wordfence and UpdraftPlus; for adding content, Easy Google Fonts, and Advanced Editor Tools; and several other categories.

- You need to pay attention to a plugin’s popularity and version. If it has few installations or isn’t being kept up-to-date by its developers, avoid it.

- Installing too many plugins increases the possibility of side effects and conflicts between plugins. Too many can also slow down your page-load time, which can annoy your visitors with slower internet speeds.

- Seriously consider installing the 46 modules offered in the Jetpack set of widgets and plugins. Although often lightweight, many of them are quite functional.

- Your site should be inviting to people with special needs, so take the time to modify your pages to make them easily accessible to people with hearing, vision, or other challenges. Pay particular attention to typefaces and providing Alt Text descriptions of your images.

- Sidebars offer several benefits to a website: they can appear on each page; contain small data and media, such as business hours or a map to your store; and display widgets appropriate to the content of individual pages.

- With AI assisting (actually it does all the work), you can create custom plugins and widgets for your site, or for sale. You can also ask AI to write complete HTML, CSS, JavaScript, and PHP executable code.

6 AI-assisted site design basics

This chapter covers

- Choosing the best theme for your site

- Checking out theme customizations

- Paying attention to the psychology of color

- Creating great compositions

- Applying design rules to make your site look outstanding

- Getting inspiration from the competition

- Asking AI to improve your designs

WordPress themes are all about design—how your site looks to your visitors. Some themes also add plugins for functionality, but the main focus in most cases is on appearance.

There are tens of thousands of themes. But don’t worry about finding the perfect theme—in an upcoming chapter, I’ll show you how to easily modify and fine-tune any theme. So, for now, just find a theme whose design is somewhat similar to what you’re after. Exactly which design elements or functionality a theme brings to your site varies from theme to theme, but here are some typical elements:

- Layout—The location of sidebars, menus, header images, columnar text, and other elements. Often the theme will allow you to choose from several options when positioning, for example, a sidebar.

- Behaviors—How links, buttons, the blog page, and other features look and behave.

- Color schemes—Colors that a designer considers harmonic and appropriate to the site’s purpose. Themes are often designed for a particular site topic, such as an artist’s portfolio or a lawyer’s practice. In almost all cases, the theme allows you to easily change the colors and typography in the Appearance > Customize screen.

- Typography—How the text characters in headlines, body text, captions, and other text elements look.

- Backgrounds—Frames around pages and background images.

- Plugins—Default functionality that is provided by the theme, such as an e-commerce system or security defense.

- Widgets—Functionality that goes on a sidebar or footer, such as the hours your store is open or an events calendar.

- Forms—Filled in by visitors so you can contact them via email or request information such as their credit card.

- Image displays—Sliders or carousels that animate your images.

- Social media features—Functionality that automates sending your blog’s posts to your social media, or a button that, when clicked, posts a blog message to a visitor’s social media.

Every WordPress site has a theme. When you first create a new site, WordPress installs a default theme of its own design. The name of this default theme is the current year: Twenty Twenty-Five, Twenty Twenty-Six, and so on. (All the official WordPress themes from past years remain updated and available.) But changing to a different theme is quite easy, at least in the early stages of site building.

Choose the right theme early in the site-building process

When you’re just starting a new site, switching to different themes is pretty painless. But if a site is mature, or large, replacing a theme can be complicated.

Consider these potential hazards:

- Does your theme bring extra functionality to your site (in addition to styling), such as shortcodes, custom widgets, or post formats? These will be lost if you change themes.

- Changing a theme can also damage some of your site’s core features such as your contact forms, menu bar, and theme-specific widgets or plugins.

- Links can break—pointing to addresses on the site that no longer exist. The “How to Find and Fix Broken Links in WordPress (Step by Step)” article on the WPBeginner website (https://mng.bz/wJYa) describes the Broken Link Checker tool as well as other available tools that help you ensure your site’s links are good. And, “How to Automatically Find and Fix Broken Links in WordPress” on the Themeisle site (https://mng.bz/qxJ6) explains the process of fixing links.

Finally, here’s some more good advice from WPBeginner about changing the theme if you have a large, mature site: https://mng.bz/7pJ7.

WARNING To avoid having to change themes, you might want to stay away from free themes. They are more likely to be abandoned by their designer. Instead, use a freemium theme—one that has both a free and a paid version. When a theme provides income, its developer is less likely to quit updating it, thus forcing you to change to a different theme. That said, the free themes provided by WordPress itself aren’t abandoned. And some of them are quite good—particularly Twenty Sixteen.

6.1 Choosing an appropriate theme

Your site has a purpose, preferably a narrowly focused, single goal. And the look and feel of your design should support that goal. It’s true that the majority of your visitors won’t likely consciously deconstruct the design elements, but that’s no reason for you to ignore them.

People know how they feel, if not always why they feel that way. You want to create a space that’s appropriate to the site’s purpose and avoids annoying your audience. Make them feel comfortable.

Some themes are clearly wrong: decorating a marriage counselor’s site with happy clowns dancing around with balloons—nope. Including pictures of farm machinery in a party rental site isn’t a good idea either, nor is blood-red crimson as the main color in a hospital site.

And some themes offer a variety of templates—variations on the theme. (Templates are sometimes called child themes).

As you know from your school days, popularity isn’t a guarantee of future success, but it provides a hint. As with plugins, you want to look for a popular theme—in most cases, this predicts both quality and longevity. And if you prefer not to invest much up front, you can start with a freemium theme—use its free plan at first and perhaps later move up to the premium plan. Here’s a list of several quality popular themes (https://mng.bz/mGzW; all except Divi are freemium):

- Astra—This theme offers quite a few prebuilt or template elements to choose from, including menus, layouts, color options, and more. It’s also compatible with WooCommerce and various page-builder plugins, and includes search engine optimization (SEO) tools.

- OceanWP—The theme has a collection of prebuilt complete sites appropriate for many purposes. It’s also compatible with WooCommerce and SEO.

- Divi—By Elegant Themes, Divi has its own drag-and-drop page builder plus many ready-made layouts for a variety of site goals. It has additional compatibility with SEO and WooCommerce. It’s not freemium, but it is free to try for 30 days.

- SeedProd—More than just a Coming Soon page utility, SeedProd has a respected drag-and-drop page builder and a collection of quality templates.

- Ultra—This theme includes a sizable set of sample sites that you can use as a base to build on. It also has a proprietary page builder called Themify.

AI will find you good themes for your site’s topic

Write a prompt that describes your site in detail, and then ask AI for a list of good themes. I submitted this test prompt to Claude (https://claude.ai), and it responded with good, appropriate theme suggestions:

My WordPress website is about helping people with disabilities with crafts, specifically creating handmade jewelry like necklaces and bracelets. We use beads to make these. You’re an expert at assisting people with disabilities with crafts. List three freemium themes that are very popular and would be great for my website.

Don’t forget responsiveness

When choosing your theme, ensure that it’s responsive. Responsiveness means that the page layout, menu, and other elements of your site will be effectively redrawn and rearranged so a visitor to your site can easily read, click, and otherwise interact on any size screen. Your site is going to be viewed on screens ranging in size from flat-screen TVs down to cellphones. Clearly, it’s a necessary, albeit challenging, task to accommodate all of these dimensions and screen shapes.

Most site builders construct their sites on a desktop monitor, but most visitors to a site will be using a cellphone (it’s estimated that 60% of all internet traffic is via cellphone). Clearly, links that are easily clicked by a mouse on a 27-inch monitor can be quite hard to hit with a finger on a cellphone screen—unless there’s plenty of space between the links.

Responsiveness requires a variety of adjustments. For example, what appears as a horizontal list of menu items on a large screen will be displayed vertically on a cellphone. Sometimes the word “Menu” is all you see. The visitor taps that word to open a vertical list of the menu items.

A quality theme will ensure responsiveness—text is easy to read, links can be easily triggered, and page design isn’t askew—even when reduced down to a 2-inch-wide cellphone screen. That said, before you make your site public, test it on several screen sizes and shapes—phone, tablet, laptop, and monitor—to see if you need to do some tweaking. And note that Google judges the quality of sites by their mobile friendliness, among many other things.

You can go to any page in your site and press Ctrl-Shift-I to open the Inspector. Up top, you’ll see Dimensions. Drop that menu down to view your site on different screen sizes and shapes.

6.2 Use an up-to-date theme

You should install a theme that’s being kept up-to-date by its developers. This is another reason to choose a paid or freemium theme because the owners of those themes are making money and are unlikely to abandon this income stream. This isn’t an absolute guarantee of longevity (some theme developers have dropped a theme in favor of a different one, and some have gone out of business), but we’re talking about the odds.

If a theme is listed in the WordPress library, hover your mouse on the theme’s thumbnail image, and click More Info. This will tell you how popular the theme is and if it’s being kept up-to-date. Here are five reasons to avoid outdated themes:

- Security—Themes that aren’t updated can become a target for hackers because updates quite often include patches for security vulnerabilities. Remember that themes, like plugins, are computer code and can thus potentially provide an entrance for malware.

- Compatibility—WordPress itself is updated regularly. If your theme isn’t keeping up with these updates, you can start experiencing compatibility problems that affect functionality in your site.

- User experience (UX)—Site design and features evolve. A theme that isn’t actively improved can look and behave outdated. It might become slow or even fail to be effectively responsive, causing it to look bad on screens of various shapes and sizes.

- No support—If a theme is abandoned, so too is any support. So, if you’re having a problem with the theme, you can get no solutions from its developer.

- No new features—In addition to plugging security holes, theme updates can include new features or improvements to existing ones. This, too, can limit the functionality and appeal of your website.

DEFINITION Cascading style sheets (CSS) is a design language that allows you to pretty much totally revise any of a theme’s design choices. We’ll dive deeply into CSS in chapter 7. You’ll find out that you need not actually learn the CSS language. You can just describe what you want changed, and AI will write the code for you. Or you can use a what you see is what you get (WYSIWYG) plugin that also generates CSS for you automatically. (Recall that these days, human programmers are fast becoming unneeded.)

6.3 Avoid installing multiple themes

You can have more than one theme active in a WordPress site by using a plugin for that purpose. So, if you want a different look for, say, your blog page or several pages displaying your catalog, you might try a multi-theme installation. But honestly, having multiple themes is probably more trouble than it’s worth. Plugins supporting multiple themes come and go rather quickly, so if you install one, you’ll likely end up having to find a replacement plugin at some point. Such plugins can also slow down your site or create side effects and incompatibilities.

So, you would be better off considering activating a single theme such as SeedProd that offers many page templates. It has a drag-and-drop page builder that gives you freedom to design pages individually. And SeedProd supplies more than 150 predesigned templates that can be applied individually to different pages. In effect, it’s like a multi-theme collection. Astra and Divi are also good multi-template themes to consider.

TIP Go to your Appearance > Themes screen after you’ve activated your chosen theme. If there are any other installed themes, uninstall them. Inactive themes take up server space, can be an entrance for malware (after all, they are code on the host’s server), and can slow down your site.

6.4 Don’t modify theme code files

“Look, but don’t touch” is the best advice when visiting your Appearance > Theme File Editor screen. WordPress itself displays this message: There is no need to change your CSS here— you can edit and live preview CSS changes in the built-in CSS editor. And then, WordPress provides a link to your site’s Appearance > Customize > Additional CSS screen. That CSS screen, as you’ll learn shortly, is the location where you should modify CSS, not in the theme’s style.css file.

Making mistakes when modifying the theme’s CSS code will rarely trigger a disaster. After all, CSS is about design—it just describes a site’s colors, layout, and other appearance elements. And things like that don’t break a site.

But one good thing about putting CSS code in the Additional CSS screen is that when your theme gets updated, this screen remains untouched. So your CSS survives. By contrast, any changes you make in the Theme File Editor will be overwritten by a theme update.

The theme’s CSS file isn’t the only code file you can access in the Theme File Editor screen. Figure 6.1 displays some of the theme’s PHP and JavaScript programming code files. (What you see here depends on your theme.)

Figure 6.1 You can view your theme’s code files if you wish, but don’t modify anything.

The programming code files govern site behaviors instead of appearance. For example, there’s code describing how the blog page should list its posts. Other code manages the site’s built-in search tool. Mess with these, and you’d better know how to program in PHP or JavaScript. And remember, changes you make here will be wiped out during the next theme update.

Some security plugins, hosting services, IT staff, and theme developers—tired of having to provide tech support when people mangle these theme code files—simply remove the Theme File Editor from the WordPress menu. There’s also a Plugins > Plugin File Editor to which the same “Don’t touch” warnings apply. So unless you really understand the code languages, avoid modifying either the theme or plugin files.

6.5 Take advantage of the Appearance > Customize screen

Themes give you some easy ways to modify the site’s design elements. They are found in the Appearance > Customize screen. Theme developers decide how many and which modifications you can make here, so among different themes, there’s quite a range of how many options you’re given.

Free themes tend to limit you to only a handful of customizations. But popular premium themes usually offer considerably more, both in the Customize screen and elsewhere. Some paid themes even include full-featured page-builder systems—similar to WordPress’s Gutenberg block editor, only usually better.

Most of the modifications you can make in the Appearance > Customize screen are WYSIWYG. You can see the effect of your changes instantly. And remember, given that you’re not modifying the theme’s files (in the Theme File Editor screen), changes you make in the Appearance > Customize screen will survive a theme update.

Here’s a list of the customizations offered by WordPress’s own Twenty Sixteen theme. This set is typical of what free themes provide:

- Typography—Font family, weight, underline, strikethrough, overline, case, color, background color, size, letter spacing, margins, padding, border, and border radius. These customizations can be made to the body text and six levels of headlines.

- Site identity—Title, tagline, logo, and icon (it’s a small symbol that’s displayed in browser tabs and bookmarks).

- Colors—Complete color schemes (titled dark, system, light, red, yellow, default), page background color (what’s underneath the text and media content of all the pages on the site), page frame color (a border around the pages), main text (body text and headlines), secondary text (footers, tagline, dates on posts), and hyperlinks.

- Header image—An image that appears on each page of the site, usually below the site title, but above the body content.

- Background image—An image that appears as a border around the page, replacing the page frame color.

- Menus—The location of the menu(s). Rather than working in the Customize screen, it’s more efficient to go to your Appearance > Menus screen to manage the menu location(s).

- Widgets—Small units of functionality (calendar, map to a store), similar to plugins, which appear on the sidebar in your site. Rather than working in the Customize screen, it’s easier to work with widgets in your Appearance > Widgets screen instead.

- Homepage settings—Whether your site displays the blog on the home page, or a static page instead. It’s more efficient to manage this in your Settings > Reading screen.

- Additional CSS—A screen where you can customize the appearance of your site, add custom animation, and other design modifications. We’ll explore CSS in depth in chapter 7.

6.6 Consider the psychology of color

As with many other design elements, people are affected by your site’s color scheme, even if they aren’t aware of it. Colors evoke subconscious feelings, sending a message in support of—or in opposition to—the site’s purpose. Colors can generate a mood in your visitors and can even affect their behavior within the site or speed up their exit.

Fortunately, there are guidelines to help you choose colors for your page background, page frame, typography, and other elements. For example, medical sites almost universally choose variations of white (conveying cleanliness) paired with light blue (reliability, trustworthiness, and authority). Rarer is a green and white pairing, although green is associated with health. Red is extremely rare for the same reason that you won’t find bullfight paintings in the waiting room, unless the doctor and his entire staff are insensate.

Halloween sites go for black and orange. Bridal shops choose white, of course, and delicate pastels. Christmas shops are in red, white, and green. Banks use blue, and less often red (associated with action) and yellow (warmth). Some legal and banking sites eliminate color altogether, choosing monochromatic schemes—black, white, and gray (suggesting sobriety—that there’s no fooling around here—color being frivolous).

Check with GPT or other AI systems for advice and resources related to color

It’s a good idea to consult GPT about color by asking the following:

What is a good color scheme for [your site’s purpose]?

I asked AI to make suggestions about a catering business, and it came up with this:

For a catering business website, some popular color schemes include a light color scheme with colors such as ivory, beige, white, pale yellow, and light gray. Another option can be earthy colors such as brown, olive green, beige, umber, and dark orange.

You can also consider a warm color scheme with colors such as yellow, terracotta, orange, red, and gold. It’s important to consider the overall branding and messaging of the catering business when choosing a color scheme. What kind of impression do you want to make on your visitors?

(1) Interior Color Choices and Your Restaurant’s Message - WebstaurantStore. https://mng.bz/MDO2

(2) 15 Best Restaurant Website Color Palettes That Will Wow Everyone! https://mng.bz/avdJ

(3) 60 Best Website Color Schemes for 2025 | Design Shack. https://mng.bz/gaVR

(4) 31 Best Colors for Websites (2024) - Colorlib. https://mng.bz/eyDJ

Remember that AI tools such as GPT are chatbots. This means you can have a conversation with the AI and refine its answers by asking additional questions. Notice that at the end of its recommendations in the first response, GPT asks you to be more specific:

What kind of impression do you want to make on your visitors?

You can respond:

We cater Southern BBQ food and associated fixin’s.

TIP Visit sites that are similar to your brand or services provided. And keep in mind that too many colors, or bright, bold colors (like neon), can be disturbing. Also, be sure to ask AI to list links to the five most popular websites on your site’s topic.

You can, of course, choose a theme that reflects your site’s topic, and then trust the designer’s choice for an appropriate default color scheme, or choice of schemes, in the Appearance > Customize screen. If you’re interested in pursuing color theory further, this tutorial on the Elementor blog is a good one for beginners: https://mng.bz/vKOm.

6.7 Pay attention to layout

Layout—how the various content zones of your pages interact—must also be considered when designing a site. These zones are made up of blocks of text; media, such as images or video; and the empty areas known as white space. But zones can also be sidebars, menus, or other distinct sections of content. The main idea is that you want your pages to look balanced.

When people hear the word balance, they automatically think of symmetry—an equilibrium like a balance scale or a pendulum. But with visuals, such as paintings or web pages, balance isn’t that simple. Many factors are at play. And usually, strict symmetry is the worst choice!

Say you’re taking a picture of a glorious mountain view: a balanced photograph would involve just the right amount of scenery in the foreground, like a moose or a house. In the background, perhaps you’d have snowcapped mountains. And, finally, you’d have a bright blue sky above. It’s the contrast between these parts that provides dimensionality and appeal. But you need to ensure that the foreground, background, and sky are in balance. Not too much sky, or too little, for example—and not three equal zones either.

NOTE Consider the egg. Some say that it’s the perfect form because it’s an asymmetric sphere.

6.7.1 Achieving balance without symmetry

Visual balance can involve multiple interacting elements: everything from empty space between content, lines that lead the eye, color, contrast, headline size, and more. And there are some seeming paradoxes. For example, a large empty area can have the same visual weight as a smaller, but detailed, content area. In other words, white space itself has weight. Luckily, there are some rules you can employ to create pleasing, balanced pages. And even more luckily, you now have a design expert to provide suggestions—your AI assistant.

One tactic is to just let a pro (or a friend talented at visual design) give you predesigned layouts to choose from. Then, you just use their layout template, replacing their images and text with yours. Designers create layouts that, in most cases, are already well balanced. You would just use the same positioning and size of the blocks of text and images or other media that the designer used. One drawback though is that this can lead to too much similarity among the pages on your site, or even similarity between your site and others that use this same template.

Layout involves adjusting the position, size, and alignment of a page’s content. Your goal is to end up with a visually attractive design that’s appropriate to the message you want the page to convey. And it should also guide a visitor’s eye along a path that you prefer them to take.

First, you’ll want to create a starting point, a focal point, the location within the page that is in some way more intense—it’s whatever first attracts viewers’ attention. It’s where they will start their path through the page. Perhaps it’s the most detailed, or largest, or brightest, or in some cases, the most shocking, area in the page. As you’ll soon see, there’s a rule that can tell you where to put the focal point, and there are actually four specific locations within a page from which you can choose. It’s called the rule of thirds. You’ll learn much more about this rule shortly.

TIP In website lingo, the focal point is often called the hero. Especially on the home page, you want the focal point to define or represent the site in some way. The hero is most often an image or other visual. If text, it should be a brief headline. The hero’s qualities—color, fonts, shapes, and so on—should usually also be reflected in the design on the rest of the page. This provides visual cohesion.

Your pages should be balanced—visually weighted so the zones of content are pleasingly distributed. The easiest shortcut to achieve theoretically ideal balance is to just make the page symmetrical. Exact symmetry, however, can result in a page that looks static, old-fashioned, or even dead. Many attractive, modern sites avoid strict symmetry, though there are always exceptions. Balance without rigid symmetry is why, when asked what’s the perfect shape, some will say the egg rather than the sphere.

6.7.2 Considering Mondrian’s classic balancing act

Piet Mondrian’s paintings are famous for achieving balance without rigid symmetry. Notice in figure 6.2 that some areas are nearly symmetrical in size. But, the entire composition is balanced both horizontally and vertically. (This image isn’t an original Mondrian; it was generated by Midjourney AI in the style of Mondrian. And color has been removed to focus on the shapes and their interplay.) There is some symmetry in figure 6.2—can you spot it? (Answer is coming up shortly.)

Figure 6.2 Your task when designing page layouts is to effectively balance the various blocks of content without resorting to symmetry.

One way to critique your layout is to divide the page into four zones, and then see if all four have closely equivalent visual weight. Figure 6.3 illustrates this.

Figure 6.3 When an image is separated into a quadrant, you can more easily check the balance.

Some will say, clearly the upper-right zone is less heavy than the others. But weight isn’t only about a zone’s average darkness or the amount of detail. Visual weight means judging both the relative complexity of the design (in this example, complexity means how many lines are in each quadrant) as well as the size of the shapes (larger shapes weigh more). Those factors must be considered in tandem.

Others will say, by that rule, any subdivided space will be automatically balanced because fewer lines create larger spaces, and vice versa. In some pages, this will be true, but if you eliminate the line complexity, the result can be unwanted symmetry. Look at figure 6.4 where removing lines in the upper-left quadrant generates a blatant symmetry. Compare this to figure 6.3 to see this difference.

Figure 6.4 Remove lines in this design, and symmetry is inevitable.

You can go further in analyzing balance by dividing the page diagonally—thus displaying four triangular shapes. And, of course, we’re simplifying things here by only considering straight lines, grayscale, and rectangles. Curves and other nonrectangular shapes certainly play a role, as do color, typography, and other factors. Over time, you can train your eyes to look for both symmetry and balance. Some people find that squinting helps to see the overall relationships between the areas of an image.

Now, let’s get back to the answer the earlier question regarding the symmetry in figure 6.2. The symmetry in the original page is created by the horizontal line right through the middle, which results in a top half and a bottom half of equal size.

In nature photography there is often a major dividing line that separates the sky from the ground. It’s called the horizon line. Professional photographers believe that framing the shot with that line in the exact middle is bad practice. It’s one kind of symmetry. Among other things, a horizon in the exact middle means you’re giving equal weight to the sky and the earth, as if you couldn’t make up your mind which should predominate.

Think of it this way: if you locate the horizon line higher in the frame, you allow the earth to dominate the picture, and hopefully the most effective visual (the focal point) is found within that space. The viewer starts by looking at the focal point within the dominant zone, and then moves up to the sky later, and vice versa.

If you find it too challenging to achieve a good compromise between total symmetry and an unbalanced composition, what can you do? Who do you call? GPT and others are quite happy to pose as art critics.

You can upload an image for GPT to view and critique. And you can even ask it to modify the image for you and return the improved version to you as a download. Let’s try that:

Acting as an experienced and sensitive art critic, and thinking step-by-step, please answer these questions:

1.  Is this a well-balanced composition?

2.  We want to avoid a symmetrical design—-has this painting avoided symmetry successfully?

3.  Is there a clear focal point, and if so, what is it?

4.  Can the composition be improved by cropping? If so, please draw white lines over the image to show where you would crop it. Answer these questions in order. And be specific, not vague or indecisive.

This image presents a serene and picturesque landscape, so let’s analyze it according to your questions:

Balance in Composition:

The composition is well-balanced with elements that guide the viewer’s eye across the scene. The two cranes form a natural point of interest and are balanced by the cluster of vibrant flowers on the left. The sunlight filtering through the trees creates a radiant point that contrasts with the cooler tones of the water and foliage, aiding in the balance.

Avoidance of Symmetry:

The composition has avoided strict symmetry, which contributes to a more dynamic and natural scene. While there are symmetrical elements, like the two cranes and the reflection on the water, they are offset by the uneven distribution of trees, flowers, and light. This asymmetry provides a sense of natural randomness and avoids the rigidity that can come with perfect symmetry.

Focal Point:

The clear focal points are the two cranes in the water. They are centrally located and are a point of contrast against the darker background of the water and trees. Their reflection in the water also enhances their prominence in the composition.

Potential for Cropping:

While the composition is already strong, cropping can be used to emphasize certain elements. For example, a crop that brings the cranes slightly off-center could enhance the dynamism of the composition, possibly adhering to the rule of thirds. Cropping out some of the right side might also focus the scene more on the cranes and the sunlight behind them.

Let’s try a crop to see if we can shift the focus slightly and adhere more closely to the rule of thirds for an even more engaging composition. I’ll make the adjustments and show you the result.

The image has been cropped to potentially enhance the composition by bringing the focal points—the cranes—slightly off-center and adhering to the Rule of Thirds. This adjustment might concentrate the viewer’s attention more on the cranes and the radiant sunlight. You can view and download the cropped image from the link below.

6.7.3 It went haywire

GPT’s first attempt at cropping was irrational, chopping almost 50% off the image! It didn’t follow its own advice in its text response. Instead of moving the cranes slightly off-center as it recommended, GPT removed the cranes entirely! So we went back and forth through three more efforts, chatting, with me asking it to follow its text suggestions, which were good. Finally, I told it to “take your time” and “do what you said to do.” And then GPT did take about twice as much time as the previous efforts. And it succeeded by finally giving me the crop shown in figure 6.5.

Figure 6.5 GPTimproved this composition by effective cropping. The white lines show where the image was cropped.

To sum up the main point of this section: try to achieve balance in your composition, but avoid taking the lazy approach by simply resorting to a strictly symmetrical design. That would be balanced all right, but boring, inert. And even if you’re comfortable with your results, it never hurts to ask an AI for its opinion.

6.7.4 White space versus negative space

The previous Mondrian examples don’t take into account the background that usually separates content zones in a web page. There are two kinds of separation: white space and negative space. Both are important design concepts that are related, and although often used interchangeably, there is a traditional distinction. Negative space is sometimes enclosed within content; white space is connected to other white space areas. What does this mean?

Negative space refers to the space between the content. In other words, whatever isn’t positive space (content such as paragraphs or images). It’s sometimes used to create shapes or patterns that can enhance the composition or convey additional meaning. Negative space isn’t necessarily white or even a single color. It’s the background.

As you can see in figure 6.6, FedEx’s logo is an example of negative space used to send a message. The space between the E and X creates an arrow, symbolizing rapid delivery, I guess.

Figure 6.6 For most people, the arrow here is a subliminal message.

White space, by contrast (also known as blank space or empty space), refers to margins, padding, or the space between columns, lines of type, graphics, images, or the other design elements. White space comes from print design—the unprinted parts of a book page, such as the margins. It’s purpose isn’t to send subliminal messages like negative space, but rather to help balance the layout and improve readability.

White space doesn’t actually have to be white; it’s merely the areas that are free of text or media. The purpose of white space is to give the elements in your design room to breathe, or to avoid visual overload by breaking the page up into chunks of text. White space can also help guide your visitor’s eye around the page.

The primary difference between negative space and white space is that negative space is used conceptually to create a shape or enhance the meaning of a design. But white space is more of a practical feature. White space should be used to make a web page look more inviting.

People are usually put off by massive blocks of gray text. They’ll feel like you’re giving them an assignment. So, you want your text to be in paragraphs, separated by white space, and in sufficiently narrow columns so that the reader doesn’t have to struggle to locate the start of each next line.

6.8 Using the rule of thirds

The famous rule of thirds is an excellent tool to help you achieve asymmetrical balance on your site’s pages. It also drives the viewer’s eye to the most important location in your page (the subject of the page, the focal point).

When working on visual compositions—photographs, paintings, or web pages—the rule of thirds is a fundamental principle widely applied by visual artists. It was first proposed in the 18th century in a 1797 book titled Remarks on Rural Scenery by John Thomas Smith.

6.8.1 Mastering cropping to emphasize the focal point

The rule of thirds divides a page or painting into nine equal parts by superimposing two equally spaced horizontal lines and two equally spaced vertical lines. Cropping is commonly used by artists to improve an image. And you can best follow the rule of thirds by cropping (as illustrated previously in figure 6.5 with the cranes).

Cropping and outpainting

Cropping means trimming the edges off an image—chopping off some content from one or more of the sides. This can do several things: change the aspect ratio (the shape of the image), reframe the image, or—as in our next example—improve the composition and highlight the main focal point by using the rule of thirds.

Outpainting—only possible now that AI can manipulate visuals—is the opposite of cropping. With outpainting (aka extended canvas or edge expansion), you upload an image and then ask that one or more sides of the image be extended (rather than trimmed, as when cropping). How can this work? How can you add visual content to an image that wasn’t in the original image? You couldn’t, before AI came along.

Outpainting expands the image, creating new content that reflects the image’s perspective, style, and content. The new content is a variation of the existing content—not merely a copy. (Outpaint a picture of fresh produce, and a bin of bananas might be added to an existing bin of apples.) Outpainting can also be used with the rule of thirds to move the focal point onto a new and expanded grid. Much more on this and other techniques is explored in chapter 7.

TIP Aspect ratio refers to the shape of a photo, painting, or other image. Traditionally, landscape images are wider than they are high. Portraits are the opposite—higher than they are wide. A web page, when viewed on a computer monitor, is in landscape mode. A cellphone, is normally in portrait mode, unless you turn the phone 90 degrees to change it to landscape mode. Most computer monitors have a 16:9 aspect ratio, so they are landscape.

The most common way to apply the rule of thirds by cropping. Cropping tools are found in any quality photo editor such as Photoshop, Paint.NET, or GIMP. (The latter two are free and can be safely downloaded from https://ninite.com.)

When you use a cropping tool in a photo editor, grid lines are automatically displayed on the image, superimposing the rule of thirds grid on the image. A good place to locate your focal point is where the grid lines cross.

Figure 6.7 shows how I dragged the crop grid (using the photo editor’s crop tool) until the man’s eyes are on two of the focal points and the mouth is on a grid line. Compare this image to figure 6.8, which shows the result of my crop. To use this tool to balance your website pages, take a screenshot of a page, and load it into your photo-editing application.

Figure 6.7 Composition is improved if you put the focal point(s) on grid lines or intersections. (Photo courtesy of Midjourney)

Figure 6.8 This portrait is more effective after cropping off the left 25% of the original shown earlier in figure 6.7.

The rule of thirds grid will show you how to improve the positioning of your web page’s focal point (a photo of a painting you’re trying to sell or the main headline)—whatever you want your visitors to notice first. Then, drag the crop grid until your focal point is on one of the four intersections that the rule of thirds displays. The crop tool will display eight small boxes (drag handles, as shown earlier in figure 6.7) on the edge of the crop grid, any of which can be dragged to reposition the grid lines. By the way, if you didn’t notice a relationship between the hair and the smoke, it’s likely that you have talents other than design.

Alternatively, you can simply locate the focal point somewhere along a grid line. That approach is less powerful, though. The further away your focal point is from the grid’s four intersections, the weaker the effect.

TIP The following layout recommendations mostly apply to pages on your site that are static (not scrolled) and that are viewed on a typical computer monitor. Screen variations in size or shape will often reframe your layout. So know what your audience uses for browsing. In a later chapter, we’ll look at ways to get data about your audience and how they look at your site.

Let’s try an example. We’ll work with paintings, but the same techniques can be applied to your web pages. These next design suggestions will be most helpful if your site is viewed on a larger screen.

6.8.2 Testing the rule of thirds in action

Figure 6.9 shows the rule of thirds grid overlaying the painting. The four arrows point to the main focus areas. These are the intersections where the focal point should be positioned. To accomplish that, you drag the crop tool’s handles (the eight small squares on the frame of the grid) until the painting’s focal point is on one of those intersections. The handles can be dragged in various directions to define the crop.

Figure 6.9 If possible, locate your focal point on one of these four intersections.

Some images will have more than one focal point. Sometimes, you can crop so that two or more focal points are on intersections (refer to figure 6.7). But in this next example, the lightest area in the farmhouse will be our focal point. So, we’ll move the grid until the farmhouse is located on one of the four intersections.

Figure 6.10 shows that we’ve dragged the grid to place the lower-right intersection right on top of the farmhouse. You can now also see where the cropping will take place—some off the top, a bit more off the right side.

Figure 6.10 The grid has been resized to place the farmhouse on the focal intersection.

The final result, shown in figure 6.11, is a stronger composition. The image now has better overall balance and more depth, sending the viewer’s eye first to the point of interest—that farmhouse. This image is now clearly about a farmhouse, and then secondarily, its context, the valley, and not much at all about the sky.

Figure 6.11 This scene is stronger now in several ways when compared to the original shown earlier in figure 6.9. There is a clear focal point, so there’s no doubt what viewers will see first.

However, you might want to crop this a different way because the aspect ratio in the previous image is usually reserved for portraits rather than landscapes. Further cropping (figure 6.12) can change the image into the traditional landscape shape (wider than high). The more you work with the crop tool and its grid, the more you’ll value its usefulness when balancing the overall image and strengthening the focal point.

Figure 6.12 Try different shapes until you get a pleasing result.

6.8.3 Asking AI for a decision

If there are people in a picture, their eyes are often the focal point. This is shown in the farmer’s face in figure 6.13.

Figure 6.13 Eyes are often the focal point in portraiture, so you could crop this painting as shown, emphasizing the right eye.

In figure 6.14, you can see the rebalanced result of our farmer portrait. After cropping, the farmer’s left eye becomes the focal point.

Figure 6.14 Choosing between original and rebalanced images is, of course, subjective. But over time, the rule of thirds has proven itself of value. Notice that by cropping, we’ve also changed the aspect ratio from square to portrait shape.

You do need to use your personal judgement in making these modifications (or consult with renowned art critics, GPT or Claude). For example, you might prefer the cropping result shown next in figure 6.15. This merely moves the focal point from his right eye to his left eye.

Figure 6.15 By moving the focal point only slightly to the left, you reduce the dominance of the farmer in the painting.

Both figure 6.14 and 6.15 are good compositions, so the decision between them can be based on what you want to emphasize and by how much. Figure 6.15 does have superior depth and is less aggressive.

You can, of course, upload multiple images and ask GPT to analyze their differences. I submitted all three of these versions of the farmer painting to GPT to see what it thought was the most balanced, pleasing composition. GPT replied with the following:

Farmer 3 stands out as the most pleasing to me. It harmoniously balances the detailed portrayal of the subject with the environmental context, giving the viewer a comprehensive understanding of both the character and his surroundings. The composition feels well-thought-out and appears to engage the viewer more effectively.

I can’t argue with that.

6.8.4 Considering some other design rules

Studies of eye movements have shown that the human eye naturally gravitates toward the intersection points in the rule of thirds grid when looking at images. (People don’t tend to start by looking at the center of a painting or web page.) So the grid works with this natural tendency, leading to more aesthetically pleasing, engaging, dynamic, and balanced images.

If you locate your subject right in the middle of the screen, that tends to deaden the image, making it more static. The result usually suffers from a lack of dynamism similar to rigidly symmetrical layouts. Locating the subject off-center tends to result in a more forceful, alive, and just plain attractive image.

Are there other design rules? Yes, there are several (triangles, diagonals, alternative grids). One of the most well-known rules is called the golden ratio (or golden spiral). It’s a mathematical progression seen in nature in sunflowers, DNA, and nautilus seashells, as shown in figure 6.16.

Figure 6.16 The famous golden ratio emerges in nature but is also used in art, architecture, fashion, and film. This shell was generated by AI. And it couldn’t exist in nature. Can you see why not?

If you’re curious about how to apply the golden ratio, Photoshop has another cropping grid that will assist you. Or you can use this formula: a/b = 1.618. For example, if your building is 25 feet wide (b), then the height (a) should be approximately 25 × 1.618 = 40.45.

A related rule is called the Fibonacci spiral (sequence or curve). Both the Girl with a Pearl Earring and the Mona Lisa are built on this pattern. It can be constructed by a series of squares whose lengths are Fibonacci numbers. Drawing arcs from opposite corners of each square within a frame creates a curve resembling a spiral, leading the viewer’s eye around the picture. Typically, the greatest detail is located in the smallest of the boxes. This rule is like a whirlpool and produces only that one focal point.

Preserving image style or character with Midjourney

Another rule to keep in mind is simplicity. Modern design taste tends toward minimalism. A minimalistic website page is usually best, unless you’re selling quilts or something. Upload a shot of your web page, and ask Midjourney (using the --sref feature with –sw set to 800) or GPT to revise the image to make it more minimalist.

Midjourney’s --sref feature is powerful. It means style reference. To use it, you upload an image (or several), and Midjourney creates new images in the style of the submitted images. You can adjust the amount of influence of the uploaded images by using the –sw (style weight) parameter. Give –sw a number between 0 and 1,000.

There is a related parameter called ––cref, for character reference. It defaults to 100 unless you use the –cw (character weight) parameter, which can be set from 0 to 100. At 100, the resulting images will replicate the clothing, hair, facial features, and even accessories of the uploaded images. But at 0, only the face is copied, and clothing and other elements are not.

ANSWER The shell in figure 6.16 is like an Escherian staircase. It starts in the center of the shell as an interior view, but gradually flips over to become an exterior view as you circle outward. As you can see, Midjourney is perfectly capable of generating images even in the complex style of an artist such as Escher.

All this being said, rules are made to be broken, so you can make exceptions if you’re sensitive to composition and design in general. If anyone has earned the right to break rules, it’s Leonardo da Vinci. He actually centers Mona Lisa horizontally within the frame. But he does follow the rule of thirds in several ways, including locating that smile on a grid line.

One final focal point example: Midjourney was asked to create a painting in the style of Mondrian, but to follow the rule of thirds very strictly. In figure 6.17, notice the eight white marks indicating the position of the grid lines. The four additional marks indicate the midpoints.

Figure 6.17 This super-strict application of the rule of thirds creates quite a few symmetries.

Figure 6.18 shows how overly strict adherence to the rule of thirds produces many symmetrical rectangles—both in size and position.

Figure 6.18 If you combine some of the blocks into larger rectangles, there are even more symmetries than these arrows show. An example is the line in the middle, horizontally bisecting the entire image.

If you find page design too much trouble, uninteresting, or impossible, you can ask someone who works with visuals to review your site and make suggestions. Or, as always, consult AI for suggested improvements. Systems such as GPT have built-in text-to-image capabilities, so you can first upload your page and ask for suggestions. Then, ask it to create a new image that incorporates those suggestions. If you want further modifications, just ask a follow-up question or two as we did when cropping previously.

6.9 Analyzing site design with AI

AI can use its internet-sized memory to examine your most successful competitors’ websites and then offer you quality advice about improving your site’s look. It’s a great idea to check out the designs of sites with topics similar to yours. Say that you wanted to create a website for a library. One approach is to task GPT with the following:

List five award-winning library websites.

And, when you visit those sites, study their design for ideas to use on your site. Also, copy the well-designed sites’ URL addresses from your browser’s address bar, then visit the WPThemeDetector site (www.wpthemedetector.com), and paste the addresses into its search field. If a site is using a WordPress theme, this detector will tell you which one and provide you with a list of plugins that the site is using. And you can also get good design inspiration by exploring award-winning sites:

- “21 Excellent WordPress Website Examples You Should Check Out” (https://mng.bz/mGzW)

- “5 Award-Winning Websites and What You Can Learn from Them” (https://mng.bz/6eGp)

- “14 Award-Winning Website Designs (& What They Did Right)” (https://mng.bz/oKVy)

Finally, you likely don’t know anyone who is a first-class website design expert. Well, now we all know one. Send AI an image of your home page. Request that it provide a summary of how your home page design stacks up against some of the best competing sites. Ask for improvements it would make. Figure 6.19 shows the version of our practice site’s home page that I uploaded to GPT.

Figure 6.19 GPT had several ideas about how to improve this comfy, warm version of our recipe practice site’s home page.

Here’s the prompt I used:

You’re a professional website designer. Look at four of the best sites on the internet that feature recipes and see how their home page designs look. Take a deep breath and take this step-by-step. Figure out what makes these other site’s designs so successful. What do they have in common? Then look at my site’s home page that I uploaded to you just now. List the differences between those four successful sites’ designs and my design. And tell me how to improve my design.

GPT provided an overview and then concluded with these suggestions:

Differences I Noticed with Your Design:

Typography: The script font you used for the main headline may be challenging for some users to read quickly. Successful sites tend to use simpler fonts for main headings.

Color Consistency: The mustard yellow is prominent but isn’t consistently applied across all elements, such as the top navigation.

Imagery Focus: While you have a beautiful primary image, there’s a lack of diverse dishes showcased. Popular sites usually feature multiple enticing dishes on the home page.

Navigation Labels: The labels in the navigation bar are not immediately recognizable as common categories found in recipe sites. This might confuse some visitors.

That headline handwriting typeface is rather more difficult to read than a standard website sans serif typeface such as Verdana. Also, it’s important to consider color consistency, but I would disagree that making more items mustard would be an improvement. It does make sense to show some finished dishes, steaming probably. This last point about the labels is a direct result of Midjourney’s tendency to create nonsense words (see the headline words in figure 6.19, Bouur Bakiol f oper)—at the time of this writing anyway. They’re working on this.

6.9.1 Trying a modern minimalist home page

Next, let’s get GPT’s take on a far more modern home page design for our recipe site. I submitted to GPT the more minimalist version of our home page, shown in figure 6.20, using the same prompt.

Figure 6.20 GPT had a different reaction to this more contemporary version of our practice site’s home page.

GPT responded:

Recommendations for Improvement:

Typography: The word “INSTANT POT” is split and dispersed across the page. This disrupts readability. The design would benefit from more straightforward typography or at least some kerning.

Imagery: The image of the leaves is elegant but doesn’t convey the theme of recipes or cooking. Consider using high-quality photos of dishes or ingredients.

Tagline/CTA: “TIME TESTED RECIPES - EASY ELEGANCE FOR ALL OCCASIONS” is a great tagline, but it could be more prominent and perhaps paired with a CTA like “Explore Now” or “See Latest Recipe”.

TIP Recall that CTA means call to action.

Subtle Animations: Incorporate subtle hover effects or micro-interactions. For instance, a slight change in color or a gentle zoom effect on hover can be visually appealing without being overwhelming.

White space: White space (or negative space) doesn’t necessarily mean “white” space. It’s the unmarked distance between different elements, which can help your design breathe and emphasize the essential components.

Again, AI has provided some thoughtful suggestions. But let’s have it decide which of the two designs it prefers and say why. Cozy or minimalist modern?

6.9.2 GPT chooses the winner

I then asked GPT to compare the homey versus the uncluttered versions, choose its favorite, and say why. It chose the homey version, by a small margin:

Both designs have their unique strengths and cater to different aesthetics. The first one feels warm, rich, and artisanal, ideal for gourmet or boutique food-related sites. The second is sleek, modern, and professional, possibly better for upscale or contemporary brands.

From a visual design perspective, I’m slightly leaning towards the first design because of its rich imagery and warmth. However, if the goal is a modern and sophisticated appeal, the second design nails it.

6.9.3 Asking AI to improve a flawed design

One final test, and here’s the scenario: you had a good, clean home page design, but a committee added some red potatoes to the picture in a misguided attempt to make the design “more about food” as they put it. Let’s see what AI has to say about the result shown in figure 6.21.

Figure 6.21 Somebody thought it was a great idea to stick random potatoes into the image in an arbitrary location and with a different background color. The kindest word to describe this suggestion is oblivious.

Here’s my prompt:

You’re a prize-winning professional website designer. What suggestions do you have to improve this website’s home page?

The image of the potatoes appears disconnected. Integrate images with the content so that they complement the message and flow of the page.

Follow-up prompt:

What you said about image integration was interesting. List several things that are wrong with that picture of potatoes in the context of the entire design.

The image of the potatoes, while high-quality in itself, presents a few design and contextual issues within the overall home page design:

Relevance: The image seems disconnected from the main message of the home page. If “INSTANT POT” is the focus, then the image of raw potatoes does not clearly relate to that theme. Usually, for a cooking or recipe website, one might expect to see the end product, kitchen scenes, or the relevant cooking appliance in use.

Contrast and Visibility: The image has a dark background which contrasts with the overall light and airy feel of the website, making it stand out in a way that does not seem intentional or aesthetically harmonious.

Placement: The image is somewhat awkwardly placed on the bottom right, not integrated with any text or other design elements. It feels like an afterthought rather than a cohesive part of the design.

Size and Proportion: The image is small relative to the size of the leaves and the overall page layout, which diminishes its impact. This can make the viewer unsure of the image’s importance in the context of the site.

Lack of Context: There’s no caption or text around the image to explain why it’s there or what it represents. Is it related to a specific recipe? Is it highlighting the type of ingredients used in the recipes provided?

Quality and Style Consistency: The style of the potato image is a stark photograph which doesn’t match the more stylized and faded approach taken with the leaf image. Consistency in image style is important for brand identity and overall cohesion.

This analysis is spot on, GPT. As you’ve seen, AI can make excellent design suggestions. Once you master communicating with AI—how to prompt it and when to ask follow-up questions—AI becomes your primary resource for improving the content of your site—for the writing as well as the design.

In this chapter, you learned the basics of site design. You explored the elements of balance, composition, color, white space, and negative space. You also saw how to employ several design rules. And throughout, AI played a big part in both conceptualizing and finalizing a site’s home page. That home page is the first thing your visitors will see, and it should clearly convey the site’s tone, purpose, and quality. AI’s assistance with this will prove invaluable.

The next chapter takes you into advanced site design. You’ll dive deep into contemporary trends. And you’ll also learn to fine-tune any element of your theme’s design defaults—everything from layout, to transition animations, to opacity on the Z-axis. To accomplish that, you’ll master the powerful YellowPencil plugin. It writes CSS programming for you automatically. You tell it you want this paragraph red, and YellowPencil writes the code to make it so. No need for you to learn the CSS language yourself. You’re once again in the position of bossing and judging, while letting a plugin or AI carry out the actual slogging and hard work. And, as always, AI will be there at your side to assist in many ways.

Summary

- Every WordPress site must have a theme, and you can choose from tens of thousands of them. In this chapter, you learned strategies to narrow down your choice.

- You’ll want to install a theme that isn’t going to be abandoned by the designers later on because switching themes can be problematic.

- Don’t be too concerned about finding the perfect theme. Because in the next chapter, you’ll see how to easily modify any theme to fine-tune it and make it work with your site’s objectives and aesthetic.

- Your site’s design is important—you’ll want your visitors to feel comfortable and impressed with how things look. If design isn’t your thing, ask someone else who understands design (like AI) for their suggestions. Important considerations include the psychology of color, composition, layout, white space, and design rules such as the rule of thirds and the golden ratio.

- For inspiration, visit successful sites that have the same focus as your site. And take a look at prize-winning sites as well. Then, tell AI to visit the same sites, summarize what they have in common, and describe how to make your site look just as brilliant.

- Involve AI in the various tasks of creating a good composition, choosing the best design, providing suggestions, and making improvements.

7 Advanced design techniques

This chapter covers

- Ensuring that your site looks contemporary

- Understanding cascading style sheets

- Mastering the YellowPencil CSS automation plugin

- Employing AI to write CSS animation

- Exploring AI inpainting and outpainting techniques

- Managing CSS in the Gutenberg editor

In chapter 6 you learned how to choose a strong theme and the basics of layout and design. Here in chapter 7, you’ll dive deeper into design, learning more ways to make your site stand out visually. We’ll explore how to ensure that your site looks contemporary and how to precisely fine-tune the design, beyond what options your theme offers in the Appearance > Customize screen.

And you’ll also see how and when to use AI inpainting and outpainting. Inpainting deletes or replaces an object within the image. Outpainting extends the image, creating new content related to the overall perspective, style, and content in the original.

7.1 Creating a contemporary design

Site design fashions change over time, much like architecture, art, and other creative endeavors. One gauge of current fashion is how today’s buildings look. And you can sum up much of today’s architecture with one word: stark.

Western styles throughout history have moved between two extremes: curved (decorative, dynamic, ornate) and linear (rectangular, static, minimalist). We’re currently in a linear period in many of the arts, including the art of website design.

For centuries during the classical age, buildings were characterized by utilitarian simplicity and relatively little ornamentation. Examples include early Egyptian, Persian, and Greco-Roman structures (think Parthenon). For the most part, these buildings feature highly systematic, orderly designs, focusing on proportion, balance, symmetry, and function.

But during a long period from the early Middle Ages up until the mid-20th century, the pendulum swung back the other way, and then got stuck decidedly in a lengthy ornate period. Ornamentation, detail, and complexity reigned for centuries. This lasted through the Gothic, Baroque, Rococo, Victorian, and even the Art Nouveau and Art Deco periods going into the early 20th century. For centuries, architects favored intricate details and extensive decorative elements. From embellishments such as gargoyles and colorful frescoes and stained-glass windows, to elaborate, even fussy, decorations.

Then, during World War II, classical styles returned—this time with severe functionality. Even curves went out of fashion. That’s a simplification, but there’s some truth in it. For the past eight decades, the emphasis has been on linear, unadorned, mainly rectangular shapes. The Sidney Opera House and the curvilinear wonders of architect Frank Gehry are among the few exceptions.

Figure 7.1 Victorian homes were subtly colored and often included tubular rooms and other curves, offering varied contours. See the ornate porch posts. Even the chimney isn’t rectangular.

As you can see when you compare figures 7.1 and 7.2, Victorian houses celebrated elaboration and curvature. Today’s more severe aesthetic rejects not only curves, but often even color!

Figure 7.2 The contemporary style called brutalism is an extreme example of the reaction against curves, color, ornament, and basic humanity. Apparently, even trees can’t survive within 200 yards of this.

So-called brutalist buildings are popular in some circles. Granted, one benefit is that when you stand in front of such structures, you automatically become the most beautiful, most alive thing in the picture.

Reports say that Beyoncé and Jay-Z paid $200 million cash for their 30,000-square-foot brutalist home in Malibu. It’s the most expensive house ever sold in California.

But no trend is ever absolute. There are, of course, always rebels; bless them. As you can see in the powerful works of Frank Gehry (see Midjourney’s attempt at creating his style in figure 7.3), he’s an architect who is opposed to right angles. (His latest Toronto structures are a touch boxy, but in a predictably weird way.) Even Gehry’s semi-rectangular works seem somehow biological and alive.

Figure 7.3 This is Midjourney’s invention of a new building in the style of Frank Gehry. This architecture is at the opposite end of the spectrum from brutalism. And before computers, such a design would have been impossible to blueprint. Brutalism by contrast has been around since the 1930s, primarily in Nazi Germany and Communist Russia, societies not known for their sensitivity to aesthetics.

Certainly, you won’t want your site to go full-bore brutal, or totally Gehry for that matter. Some sites, bridal sales, for example, can benefit from lacey, ornate, curvaceous design elements, including script fonts that imitate the flourish of traditional calligraphy, as if written with a pen or brush.

However, modern site design is clean, uncluttered, and often minimalist. See what you think of the following sites:

- https://mng.bz/4av5

- www.findgift.com

- www.konstolymp.gr

Notice several things in that third site. The animation is subtle, gentle, and compelling. Also, there’s a very understated olive tree pattern in the background. This animation and opacity can be accomplished by using cascading style sheets (CSS), a powerful design tool. We’ll take a close and extensive look at how to use it next.

For a brief, but impressive, preview, let’s ask AI to write some CSS code that we can copy and paste into our site’s Appearance > Customize > Additional CSS screen:

Write the CSS code that will make all h1 headings go from zero to 100 percent opacity on page load.

The response from Claude (https://claude.ai) is

h1 {

opacity: 0;

animation: fadeIn 1s ease-in forwards;

}

@keyframes fadeIn {

from {

opacity: 0;

}

to {

opacity: 1;

}

}

Try it if you wish. Just copy and paste that CSS code into your Appearance > Customize > CSS screen. Click the Publish button, and then go to the frontend of your site. You should see any h1 headings (the largest headings) fade into view. You can adjust the fade-in animation value from 1 second to other durations to change the speed of the animation. You can also play around with the opacity. Start with a value higher than 0 if you want to start with gray rather than completely invisible text. Your site’s title might be an h1 heading.

7.2 Understanding CSS styling

Cascading style sheets (CSS) is a specialized computer language that can modify most elements of web page design. So, if you want to fine-tune your theme’s default design choices, you need to use CSS.

The good news is that there’s an excellent plugin named YellowPencil that automatically generates CSS code for you! So, you don’t need to learn the language. And, of course, AI is an excellent programmer as well, as that previous fade-in animation CSS code demonstrates.

With the YellowPencil plugin, you work on a high level—moving sliders, clicking within a color wheel, selecting from a menu, using visual drag and drop, and so on. And all of those adjustments and many more are displayed in real time in a what you see is what you get (WYSIWYG) screen. You see the results as you adjust things. Best of all, the YellowPencil plugin automatically writes the CSS code to make your changes permanent in your website.

We’ll explore the excellent YellowPencil design system shortly in section 7.4. Skip down to it now if you want. This next section is a bit technical, and if you prefer not to read it, no harm done. But if you’re curious, here’s a brief tour of what CSS does and how it works. This book is designed to be of value to beginners, but also of interest to us nerds.

Lowercase always

Always use lowercase letters when writing CSS and HTML code. Originally, CSS was wisely case-insensitive. But committees got together, and the result was that CSS was made case-sensitive, unfortunately. So, there are now exceptions to case-insensitivity in both HTML and CSS. The code is case-sensitive in several contexts (class names, attribute selectors), but it’s frequent enough to cause countless bugs. So, to avoid problems, always use lowercase rather than trying to memorize the random exceptions to the rule.

Here’s an example of CSS style definitions for a CSS class name myId or myid:

#myId {

color: red;

}

#myid {

color: blue;

}

Here’s the HTML:

<div id="myId">Some text.</div>

Because of case-sensitivity, the text inside these div tags is displayed in red, not blue. Why? Because the “i” in myid is lowercase, and it’s uppercase in myId. So, CSS sees them as two different CSS selectors.

DEFINITION A selector is just the name of the design element that CSS is modifying. The selector is followed by a list of one or more property/value pairs. That entire grouping under each selector is called a CSS rule. Often, the selector is just an ordinary HTML element such as h1. Or it can be a class name such as myid in the previous example.

7.2.1 Exploring the role that HTML plays in page design

Before CSS came along, there was only HTML to tell a browser how a web page should look. But HTML is primarily a markup language because it marks the beginning and ending of a particular element in a web page, such as a heading or a paragraph:

<h1>MAJOR HEADLINE</h1>

That <h1> HTML start “tag” tells the browser to start here applying the h1 style to this text. And the </h1> end tag tells the browser to end that heading style here.

Browsers have a set of default HTML property values. For example, if the browser sees some text surrounded by those h1 tags, it uses the following list of property values by default when displaying the heading:

- display: block;—This means that an h1 heading starts on a new line and takes up the full width available (that’s what the CSS value called block does).

- font-size: 2em;—The font size of the h1 element is twice the size of the root element’s font size (aka em).

- margin-top: 0.67em;—The space above the h1 element is 0.67 times the size of the root element’s font size.

- margin-bottom: 0.67em;—The space below the h1 element is 0.67 times the size of the root element’s font size.

- margin-left: 0;—There is no space to the left of the h1 element.

- margin-right: 0;—There is no space to the right of the h1 element.

- font-weight: bold;—The text of the headings is boldface.

In other words, all h1 headings in a site are rendered using these default design properties. These bulleted items are what CSS calls property-value pairs, also known as declarations. The whole point is that you can use CSS to modify any of those default values.

7.2.2 Looking at what CSS brings to HTML

What if you wanted to change the size, font, color or other properties of the h1 headings on your site? In other words, you wanted to modify those default browser declarations. Maybe you want to make these headings larger or something. Before CSS, you would have had to go through all the site’s HTML code and change each h1 element by hand. (In HTML, a complete tag-content-end tag unit is called an element.) To make the h1 headings larger, you would have to retype the HTML start tag to read like this:

<h1><font size="+2">MAJOR HEADLINE</font></h1>

This says make the h1 headings two sizes larger than the browser’s default size. Typing in this change to every h1 heading throughout a site was obviously both cumbersome and tedious.

WARNING Be sure that any quotation marks are straight (" "), not curly (“ ”), in your CSS code. HTML and some types of CSS code don’t like slanted or curly open and close quotation marks.

Here are some typical HTML tags:

- <h1> to <h6> define headings, with <h1> being the most important and <h6> the least (usually the smallest). These give a hierarchical structure to the text content on your site, letting readers know the relative importance of, or the relationship between, sections in the page.

- <p> represents paragraphs (common body text).

- <div> and <span> specify a zone or a group of page components.

- <table> is used for tables.

- <img> is used for images.

- <a> is used for hyperlinks.

7.2.3 Enter CSS

Fortunately, CSS was invented to make site design far easier and more varied. Among other helpful features, you can change all the h1 headings in a site by modifying just a single CSS rule. (We did this in the fade-in CSS example earlier.) This next example shows a rule that makes all h1 headings twice the size of the browser’s default (2 em) font size):

h1 {

font-size: 4em;

}

In most modern browsers, the size of the paragraph <p> body text elements defaults to 16 pixels [px]).

TIP The pixel is the smallest visual unit in a display such as a TV or cellphone. If you get up real close to a TV, you can usually see the pixels, that is, little dots. You can’t see them on a cellphone screen because they are too small, but on a jumbotron display in a stadium, its pixels are the size of bricks. So, the size of a pixel is relative to the size of the screen that it’s on. A pixel doesn’t have a specific, absolute size like an inch or centimeter.

CSS also offers many more style properties than were available in the original HTML set of attributes (attribute is HTML’s name for styling modifications). And CSS even goes beyond simple styling. Some prefer to call CSS a markup language, but it’s actually a design language with significant capabilities in addition to markup (merely specifying the start and end of a style). For example, CSS includes the following:

- Transforms—2D or 3D transformations applied to an HTML element, allowing you to rotate, scale, move, skew, reposition, and make other changes to the elements.

- Transitions—Morphing an element from one state to another. In other words, CSS transitions allow you to change property values smoothly, over a given duration, at a given speed, and starting after a given delay. This technique can be used to create a variety of effects and animations such as fading in or out, scaling, skewing, changing colors, and rotating an element over time.

- Layout and positioning—Flex is a model for positioning and aligning elements within a container. CSS Flex specifies how an element grows or shrinks to fit the space available within its Flex container. Three properties—flex-grow, flex-shrink, and flex-basis—work together, giving you an efficient way to align, lay out, and distribute space among elements within a Flex container.

- Shadowing—Text or frame shadow effects.

- Special text specifications—Specs such as adjusting line height.

7.2.4 What is the cascade?

This colorful term cascade is pretty accurate. CSS is called cascading style sheets (plural) because there can be more than one CSS style sheet. There are four main style sheets (files that hold CSS code), and they, working together, create the cascade.

This means there can be duplicated CSS properties in the sheets. Let’s say that one style sheet specifies that h1 headings should be red, but another style sheet says they must be green. What’s a poor browser to do? The answer is that there is an order (the “cascade”) to style sheets. The browser must use the color mentioned in the lowest style sheet (or the lowest mention within a single style sheet).

The cascade is confusing at first. Here’s how to visualize this cascade process. Let’s consider two CSS h1 selectors that are in the same style sheet. One of them is below the other in the style sheet, thus it’s the lowest one. This CSS code results in blue h1 headings because the blue value is listed lower than red:

h1 {

color: red;

}

h1 {

color: blue;

}

Put another way, if a CSS property repeats, then the property value (such as the color) lowest in the code is used, and any other previous duplicate property definition (higher in the code) is just ignored. Those previous values are said to be overruled. Just the way that a school principal can overrule a teacher.

To better understand what “lower” means in this context, it helps to visualize a cascade of water, falling down a hill. When deciding which duplicated declaration to use, the browser looks at all four style sheets in a specific order. This is the cascade, as described here:

- There are four main outcroppings in the CSS cascade, and at each one, if any CSS selector’s property-value pair declaration is repeated, then any previous such declarations are overruled.

- Visualize a water cascade with four drops or outcroppings. A basket of flowers is placed in the water at the highest outcropping. The flowers are arranged in a particular order. But then the basket falls down to the second outcropping pool, and the flowers might be rearranged by that bump. Then, it bumps down the third and fourth outcroppings, and comes to rest in the lowest pool. If a CSS declaration (property-value pair for a particular selector) is redefined during any of these bumps, that new redefinition is the one used, the one that “wins.” In other words, each lower outcropping in the cascade can redefine (overrule and change) any CSS style that was previously defined by an earlier outcropping.

- If outcropping 3 says h1 is red, but outcropping 4 says green—green wins and the browser follows that rule when displaying the h1 headings on the site. Each lower outcropping can redefine any selector’s property value, so the lowest outcropping that mentions the color of the h1 heading is the color that the browser ends up displaying. Figure 7.4 illustrates how a cascade works.

Figure 7.4 An illustration of our flower basket analogy. Each bounce down the cascade potentially rearranges the flowers in the basket.

7.2.5 The order of the style sheets in the cascade

As mentioned earlier, there are four main sheets in CSS. Here is the cascade of sheets in order, starting from the highest to the lowest style sheets:

1.  The first, highest outcropping is the browser’s default styles. All other subsequent, lower outcroppings can overrule these default style definitions. For example, browsers default to the color black for h1 headings. This is the baseline, and if no subsequent style sheets later in the cascade mention h1’s color, then h1 is rendered black by the browser. (And this is pretty common given that black on white text is usual on sites.)

2.  Each WordPress website has a theme, and each theme has its own CSS style sheet. It’s the cascade’s second outcropping. You can look at it in your WordPress backend by going to the Appearance > Theme File Editor screen. The theme’s style sheet overrules the browser defaults (but can be overruled by the next two outcropping drops).

WARNING You can look at the theme’s style sheet if you wish, but don’t modify it or any of the theme’s other code files.

3.  Your (the site administrator’s) CSS style specifications come next. In your Appearance > Customize > Additional CSS screen, you can type in CSS code that overrules the previous two style sheets (browser’s defaults and theme’s). This is the third outcropping.

4.  Finally, at the lowest level, is what’s called inline CSS. It overrules those previous three style sheets. Inline CSS is different from the other levels. Those first three style sheets are global—their style definitions are applied to all elements (like all the h1 headings) throughout the entire site.

However, inline CSS is local and thus defines styles for only a particular zone. That zone can be as small as a single character. Or it could be a word, sentence, paragraph, entire page, heading, image, or some other local content area. One way to specify the zone is to enclose something between <span> </span> or <div> </div> tags, like this:

<span style="color: red;">This sentence is red</span>

In the classic WordPress editor, inline CSS code goes into a Text tab on the page’s Edit Page screen. Or for the Gutenberg block editor (when using a Paragraph block or similar block), click the three dots (Options) in the upper-right corner of an Edit Page screen. Then, click Code Editor, or press Ctrl-Shift-Alt-M.

Here’s the inline CSS code that makes a single sentence red:

<p style="color: red;">This is a red sentence.</p>

This part is the actual CSS code:

style="color: red;"

Figure 7.5 illustrates the cascade.

Figure 7.5 The four stages of the cascade

And note that GPT and other AI systems can easily write inline CSS code for you, if you just ask.

Use inline CSS code to create an animation that waits three seconds after page load, then slowly transforms the following sentence from normal text to pink italics, then back again to normal. All within two seconds. The sentence is “Please notice me!!”

GPT responded with the following:

(Place this code into a page’s text tab.)

<p style="display: inline-block;

/* Needed for transform to work */

animation: textAnimation

2s ease-out 3s 1 forwards;">

Please notice me!!</p>

(Place this code in the Appearance > Customize > Additional CSS screen.)

@keyframes textAnimation {

0%, 100% {

transform: skew(0deg);

color: initial; /* or replace with

your preferred initial color */

}

50% {

transform: skew(20deg);

color: pink;

}

}

TIP Pay attention to those { } brackets in CSS code. Leave one out, and the code won’t work. There must be an open bracket and a close bracket around values. AI will get it right. But when you copy and paste code, it’s easy to miss the final close bracket.

NOTE Technically, there are some additional style sheets beyond the four we’ve looked at. There are CSS classes, or style definitions, that are page-wide in scope, but these are for people who want to dive deeper into CSS. For our purposes, you need only visualize the four main style sheets described previously.

Now let’s take a look at a tool called the Inspector, which is built into most browsers. It has several useful features, among which are displaying any website’s HTML and CSS code side by side. But, in addition to that, you can also use the Inspector for the following:

- Test responsiveness—Using tools to simulate how a web page will look on different devices.

- Monitor network traffic—You can see the list of network requests made by the page, including details such as the time taken for each request. This is especially useful for optimizing load times and troubleshooting problems related to resource loading.

- Debug JavaScript—There are quite a few tools for this.

- Performance analysis—This includes monitoring page load speed, identifying bottlenecks in JavaScript execution, and revealing the relative effect of different elements on the page’s overall performance.

But for our purposes, we’ll focus on the tools the Inspector provides for page designers.

7.3 Using the Inspector

Let’s take a look at some real-life CSS examples and a set of tools you might find useful when exploring CSS and HTML. These tools can be found in your browser’s Inspector (aka Dev Tools). While viewing any web page, you open the Inspector by right-clicking to open the context menu, and then click Inspect from the menu. Figure 7.6 shows a typical Inspector display.

Figure 7.6 Here you can see quite a few details about this web page.

The pane on the left shows the HTML code, and the pane on the right shows the CSS code. Double-click an HTML element in the HTML pane to select it (in figure 7.6, a div zone has been selected), and you can see any associated CSS code in the right pane.

Notice that the CSS property webkit box sizing has a line through it. This means that the same property reappears lower in the cascade, so its value here (content-box) is going to be ignored when the browser renders this code. It’s been overruled.

The Inspector has many features and tools. For one thing, you can usually find out what theme and plugins a site is using. Press Ctrl-F, and search for theme.

This feature-rich toolset lets you inspect, debug, and test CSS. The Inspector provides an intuitive and interactive interface to help you understand and manipulate the visual aspects of any page.

The styles pane on the right shows the CSS rules applied to the currently selected HTML element. That feature lets you understand why a certain style is being applied or overridden.

Rules and selectors

Recall that a CSS rule is the entire list of properties and their values for a particular HTML element. The rule starts with what’s called the selector (that’s what CSS calls the HTML element being styled). The selector is followed by an open curly brace ({) and the list of property:value pairs. Finally, the rule ends with a close curly brace (}). Here’s a typical CSS rule:

h1 {

color: blue;

font-family: sans-serif;

font-size: 14em;

font-weight: bold;

}

The Inspector also lets you live-edit the CSS code. Any changes made in the Styles pane are immediately reflected on the Inspector’s web page pane. (The page was displayed previously with the two code panes, though the panes can be resized and reordered.) This way, you can experiment with different CSS styles and see the results instantly, without needing to edit the source files and refresh the page.

You can edit existing rules, disable rules, add new rules, and even add entirely new style sheets. (To see more of the frontend pane, move your mouse just above Performance on the menu, and then drag down.) Any changes you make in the Inspector aren’t permanent, however. You’re just experimenting, but the changes aren’t applied to any style sheets.

The Inspector also includes various tools for working with more complex CSS features. For example, the box model view shows the padding, border, and margin for the selected element, and allows these values to be edited directly. (To see the box model for the selected element, click the Computed tab above the CSS code.) Below the box illustration, you can see the final result of the cascade as it applies to this element. In other words, you can see which values won out after the cascade is finished. This can be useful for understanding complex style interactions. (Computed here means the final result after the entire cascade has been scanned and rendered.)

The most popular browsers’ Inspectors also include tools for working with CSS animations and transitions. You can view and control the timeline of animations, slow them down, and pause them at specific points. This can be a help when debugging animations. The various browsers’ Inspectors differ a bit in what they can do, so here’s an overview of each:

- Chrome—Chrome’s Inspector includes an Animations Drawer tab that automatically detects and groups animations. You can then inspect animations, slow down or replay them, and see the source code.

- Edge—The Animation Inspector in Edge’s Animations tool supports CSS animations and transitions. You can manipulate and test various effects, including changing the timing, delay, duration, or keyframe offsets.

- Firefox—Firefox’s Page Inspector includes an animations view that displays animations in the page synchronized along a timeline. It supports animations created using CSS transitions or keyframes rules.

- Safari—Safari’s Web Inspector provides a graphics feature that enables previewing keyframes and their classes from CSS animations and transitions.

The Inspectors also include tools for responsive design testing. You can simulate different screen sizes, resolutions, and even specific devices, allowing you to see how your CSS styles look on various screen’s sizes and shapes.

Simplifying animation with keyframes

A keyframe is an important moment of change (or “beat”) in an animation sequence. A keyframe can specify when something begins to move, changes direction, resizes, and so on. Keyframes can be set for things such as position, rotation, scale, and so on. Between two keyframes (or a keyframe and the end of the sequence), the animation software will automatically interpolate the values to create smooth transitions.

This means you don’t have to manually define every tiny change, just the important keyframes. You can just say, rotate for 1 second, rather than specifying each position for every one of, say, 24 frames per second. You use this shorthand keyframe technique to specify timing, pacing, transformations, and other animation effects.

End of nerd zone.

7.4 Mastering YellowPencil

The YellowPencil plugin is amazing. It allows anyone to build a highly customized site that very closely aligns visually with their site’s purpose. And, you don’t need to know a single thing about CSS. You can fine-tune the design elements of your pages (tastefully, within reason). What’s more, your site won’t look like a clone of other sites using the theme you installed.

If you don’t feel comfortable fine-tuning your site, turn someone with design experience loose on the site for a few days. And give them YellowPencil. With that plugin, as mentioned, a designer doesn’t need to know anything about computer programming in general or CSS in particular. Yet they can have YellowPencil generate complex and powerful CSS code to really make the site shine. Of the several CSS code generator plugins, YellowPencil is the most popular.

TIP YellowPencil has dozens of tools and features. You can read about them here: https://mng.bz/QDg1.

To get started with YellowPencil, go to your Plugins > Add New screen in WordPress, and search for Visual CSS Style Editor (YellowPencil’s official name). Install and activate it. When you view the YellowPencil screen, click the Resources tab shown in figure 7.7 to see where to go for tutorials and forums where you can get answers from experts.

Figure 7.7 If you run into any problems when using YellowPencil, these are great resources to find answers.

YellowPencil doesn’t modify your theme’s CSS file, nor does it put its CSS code in your Appearance > Customize > Additional CSS screen (which is where you can add CSS code you write yourself, or have AI write for you). Instead, the CSS that YellowPencil generates can be viewed and edited by going to the YellowPencil > Customizations screen in the backend of your WordPress site. But this feature is only available in the Pro version of the plugin.

YellowPencil: Free vs. pro versions

The Pro version of YellowPencil automatically saves its CSS code to your WordPress site (in a YellowPencil > Customizations screen). The free version saves only some of the CSS properties. Also, the Pro version includes many additional features not available in the free version. Going pro is quite inexpensive considering all the capabilities you get.

However, you can generate usable CSS code (even for the CSS properties labeled Pro in the YellowPencil editor) while just using the free version. The reason is that the free YellowPencil does at least display any CSS it generates. But adding CSS code to your site by hand is inconvenient and prone to typos.

Free YellowPencil won’t allow you to use Ctrl-C to copy their code. You can, however, write the code down on a piece of paper, type it into Notepad, or just take a screenshot of it. Then, go to your site’s Appearance > Customize > Additional CSS screen, and type the code into that screen. How to do this is described next.

7.4.1 Automatically generating CSS code

We’ll now give YellowPencil a try. Let’s generate some simple CSS code to make a page title on one of your site’s pages larger and colored blue. Go to your Pages > Add New screen, and add a new page titled Practice. Then, click the Publish or Update button to store that page.

In the upper-right corner of the Practice page’s Edit Page screen, click the Edit Page – YellowPencil button. This takes you to the main YellowPencil screen, shown in figure 7.8. Notice that on the right side of figure 7.8 is a list of CSS design categories you can modify. Click the Text property to open and view all the typography properties you can modify.

Figure 7.8 When you click an element in the page, you can style it in the right panel. Here, we’re going to work with the title of the page.

Now, click the black Color bar, and then click blue (see it under the Color category in figure 7.9). Drag the Font Size up to 60 px. Notice that these changes are immediately displayed in YellowPencil’s page view. This way, you can make adjustments and check the effect the changes have on the overall design of the page, as shown in figure 7.9.

Figure 7.9 Modifications you make in the right panel are displayed in real time on the page view to the left.

Notice the Pro icon next to Font Family and Color. This means you can change these properties in YellowPencil, but if you haven’t signed up for the Pro version, YellowPencil won’t apply them to your site. Changes to the other properties, such as Style Italic, will be applied and saved to the YellowPencil > Customizations screen on your site, as shown in figure 7.10.

Figure 7.10 This WordPress backend YellowPencil > Customizations screen shows CSS code for the modifications that you’ve made in YellowPencil.

But let’s assume you do want to make those Pro changes, such as turning the page title blue and boosting it to 60 px large. However, you don’t have the Pro version. You can still use this code to make those changes, even in the free version, though it’s somewhat clumsy. Click the CSS Editor icon on the left side (or press E), and you can then see the CSS code for the Pro color and font-size properties, as shown in figure 7.11. Figure 7.12 then displays CSS code you can use on your site.

Figure 7.11 Click this CSS Editor icon in YellowPencil to view the CSS code it generated.

Figure 7.12 Here’s the CSS code that YellowPencil generated for you.

You can copy this CSS code by hand (or take a screenshot of it), go to your site’s Appearance > Customize >Additional CSS screen, and then type or paste the code into the CSS field. The heading is now larger and blue. But if you plan to do a lot of CSS work, YellowPencil’s price for the Pro version is quite reasonable.

7.4.2 Understanding CSS animation

Currently, YellowPencil offers the following animation features:

- Animation—Using this CSS property you animate HTML elements.

- Animation generator—This tool helps you create your own custom animations. Its primary function is to enable you to create animations in a way that uses the visual strengths of designers, rather than requiring them to write code manually. You can see the results of these animation designs in real time too.

- Animation manager—Here, you can manage all the animations that you’ve added to your website. For one thing, you can visually adjust settings such as duration and delay time.

- Transition—This CSS property allows you to add simple transitions to HTML elements, such as fading out or fading in. And specialized tricks like a rubber-band animation.

- 50+ animations—This is a collection of more than 50 predefined animations.

Working with animations and transitions

Animations and transitions are related. However, animation is more complex and versatile. You can use multiple keyframes and continuously play or loop the activity without requiring user interaction or other triggers. Animation can involve multiple properties and allow fine control over timing and sequencing, displaying more complicated and varied movement and effects.

Transitions, by contrast, are typically used for simple interactions involving a change from one state to another (such as invisible to visible, or black to pink). They are triggered by user interaction (such as viewing a new page) and typically involve a smooth change of one or more CSS properties between two states: the initial state and the final state. An example is changing black normal text to pink italics, and back again. To sum up: the Animation Generator tool is used for creating more complex, keyframe-based animations, while the transitions tool creates simpler, state-based effects.

This list describes the primary transition properties (https://mng.bz/XxAl):

- Type—Specifies the name of the CSS property the transition effect is for. The transition effect starts when the specified CSS property changes.

- Duration—How many seconds (s) or milliseconds (ms) a transition effect takes to complete.

- Easing—The speed curve of the transition effect. The values can be Ease, Linear, Ease-In, Ease-Out, or Ease-In-Out.

This list describes the primary animation properties:

- Animation—Adds an animation to an element.

- Trigger—Specifies what triggers the animation to start. It can be Onscreen (it plays when the element is visible on the screen, a value we’ll use shortly), Hover (starts when the mouse pointer is moved over the element), Click (when the element is clicked), or Focus (triggers when a form field is focused, meaning that the user has pressed the Tab key to move around a form’s fields, or clicked a field).

- Trigger repeat—Determines how many times the animation runs.

- Duration—Dictates how long an animation should take to complete one cycle.

- Delay—States how long after being triggered the animation should wait to begin.

- Easing—Sets the speed pattern. The values are Ease, Linear, Ease-In, Ease-Out, or Ease-In-Out. Experiment with these to see the differences among them.

- Animation fill mode—Sets the state of the end animation when the animation isn’t running. The values can be None, Forwards, Backwards, or both Forwards and Backwards.

TIP Here’s a good tutorial from MDN Web Docs on the many ways you can animate your pages using CSS: https://mng.bz/yW27.

7.4.3 Try animating

Here are the steps you can take to fade something in. This can be a subtle, but effective, way to display various elements such as your site’s tagline underneath the site title. Visitors will see your site’s title right away, but then your tagline will take a few seconds to fade into view.

In this example, we’ll make the site’s h1 headings take 2 seconds to fade into view using the YellowPencil plugin’s Motion feature:

1. Go to your Pages > All Pages screen, and then click a page named Practice to open its Edit Page screen.

2. Click the Edit Page - YellowPencil button in the top-right area.

3. Click the page’s title (Practice) in YellowPencil to select that h1 element.

4. Click Motion on the right side to open its module. Click FadeIn as the animation type.

5. To start the animation when the element becomes visible on the user’s browser, select `onscreen` for the `Trigger` property.

6. To play the animation only once set the `Trigger Repeat` property to `1`.

7. Set the `Duration` property to `2` (seconds)—or `3`, or whatever pleases you.

8. Leave the `Delay` property at its default 0 value unless you want the animation to start sometime after the page displays.

9. Set the `Easing` property to `ease` or `linear` depending on how you want the speed of the animation to vary over its duration.

10. Set the `Animation Fill Mode` to `forwards` to ensure that the page title element remains visible after the animation ends.

11. Click the Save button in the upper-right area to store the code on your website.

12. After you follow those steps, YellowPencil generates this CSS code:

.hentry .entry-header h1:yp-onscreen{

animation-duration:2s;

animation-delay:0s;

animation-name:fadeIn;

}

/* Post Title */

.hentry .entry-header h1{

animation-fill-mode:forwards !important;

}

Now return to your website (click the previous browser tab), and click View Page on the top menu bar. You’ll see the page title Practice fade in. To see the effect again, press F5 to refresh the browser page.

There are, of course, hundreds of variations, settings, interactions, and special effects such as animations you can experiment with to improve the default look described on your site’s theme’s CSS file. If you have any interest in site design, I’m sure you’ll find the YellowPencil plugin both valuable and fun.

7.4.4 Bringing in AI

AI is an excellent programmer. Let’s try getting some assistance from GPT. One popular effect is the zooming animation that is triggered when the user hovers their mouse pointer over an image. Here’s my prompt:

You are an expert CSS programmer. Create some CSS code for a website that when an image is hovered on by the mouse pointer, the image slowly grows 20% larger.

And GPT came up with this code you should paste into the Edit Page screen’s Text tab on one of your pages. Replace putyourimageURLhere.jpg with the actual URL for one of the images in your Media Library. To get that URL, click an image in the Media Library. Then, on the lower-right side of the screen, click the Copy URL to Clipboard button. Next, paste the following <div> code into one of your web pages, and remember to replace putyourimageURLhere.jpg with the URL you copied from your Media Library.

<div class="image-container">

<img src="putyourimageURLhere.jpg">

</div>

Click the Update or Publish button. Now, go to your Appearance > Customize > Additional CSS screen, and paste this entire CSS rule, starting with .image-container { and ending with }:

.image-container {

display: inline-block; /* Ensures the container

wraps tightly around the image */

overflow: hidden; /* Prevents any overflow

from the growing image */

}

.image-container img {

transition: transform 1.9s ease; /* Smooth

transition effect */

display: block; /* Removes any unwanted space

below the image */

}

.image-container img:hover {

transform: scale(1.8); /* Enlarges the image */

}

Click the Update or Publish button.

NOTE Comments describing the code are enclosed by /* and */ symbols. Comments aren’t CSS code, and they are ignored when the CSS is executed. They’re just for the programmer. GPT provided both the code and the comments that describe it.

Now to test it, go to the Edit Page screen where you pasted the <div> code. Click View Page to go to the frontend of your site. Move your mouse pointer on top of the image to see the action.

7.5 Understanding CSS scope

Here, we’re entering another nerd zone. This next information gets a bit specialized, so if you’re not a techie, feel free to skip the next couple of sections and tune back in at section 7.8.

You might have noticed when looking at the YellowPencil CSS Editor that it has three tabs: Single, Global, and Template. They govern the scope (the range of influence) of the CSS code. The Single tab only applies that code to the current page, whereas the Global tab applies code to the entire site.

The Template tab is similar to Single, but Template applies the CSS to a particular type of page (any page that is governed by a specific template). For example, say you’re editing a product page controlled by an e-commerce plugin such as WooCommerce. If you click the Template tab, the CSS styles you apply to the current page also apply to all the other product pages on your site. You can thus maintain a consistent look and feel across all pages of the same type.

To review, here is the most useful, uncomplicated visualization of the CSS cascade. It’s a four-level process:

1. The browser default properties that the web browser applies to HTML elements if no CSS styles are defined further down the cascade. This is the highest (earliest) level. These properties are intrinsic to the web browser, and not part of WordPress, your site’s database, or any CSS style sheet.

2. The site theme’s CSS file (located in your Appearance > Theme File Editor screen). The styles defined in this file are applied site-wide unless they are overruled by duplicate properties specified further down the cascade.

3. CSS code that you—the site’s designer—put into the Appearance > Additional CSS screen. These properties are also site-wide (unless you’re defining a CSS class, which can be used in specific <div> elements, for example).

4. CSS code added within the HTML in a single page or to smaller zones within that page (a word, an image, a paragraph). This is the lowest and final level of the cascade and overrules everything previous. For example, you can go to your Pages > All Pages screen, click the Practice page, and then click the Text (HTML code) tab in the text box.

Now add this HTML/CSS code:

<div style="color: purple;">

This text will be purple.

</div>

The HTML part of this code is

<div>

This text will be purple.

</div>

And the CSS portion of the code is

style="color: purple;"

The <div> tag allows you to create a zone where you can apply multiple CSS modifications at once. Here, a foreground color is changed to white, against a purple background color:

<div style="color: white; background-color: purple;">

<h2> A new color combination!</h2>

<p> This text will be white on a purple background.

</div>

We wanted white against purple for both this <h2> heading and the <p> body text below it. So, we created a <div> section to contain the two elements.

NOTE Recall that the four-level cascade described previously is, to be honest, an oversimplification. CSS has evolved since its introduction in 1996 and, as a direct result of several committee meetings, the CSS cascade has sadly become quite a bit more complex. There are now various kinds of inheritance, scoping limits, scoping roots, proximity, and other factors that can be used if you wish. If you’re interested in learning more about this complexity, you can dive into the latest official committee document here: www.w3.org/TR/css-cascade-6/.

It’s considered best practice to limit your use of inline CSS. If overused, it can make your styling less readable and harder to maintain. After all, CSS was originally invented to eliminate the need to hand-code each HTML element of a particular type everywhere on a site.

If you find a need to do quite a bit of inline CSS, consider using CSS classes rather than the style= attribute. We’ll turn our attention to classes next.

7.6 Working with CSS classes

CSS classes serve a purpose similar to what CSS in general offers: classes separate the CSS code from the site’s content. Recall that you can define a rule for h1 headings (green and sans serif, for example) in the Appearance > Customize > Additional CSS screen. When defined in that screen, all the h1 headings on the site are automatically rendered green and sans. Thus, the styling code doesn’t need to be hand-typed into each h1 element on the site. Instead, the styles defined once in the Additional CSS screen are automatically applied to every h1 element.

That’s clearly a more efficient approach than having to type in the same style properties dozens of times using inline styles for each h1 heading on the site. Another benefit is that if you change your mind and want the color to be blue instead of green, you only have to make that change in one place by modifying the h1 CSS rule in the Additional CSS screen. Then, the change will radiate throughout the site, modifying all the h1 headings.

CSS classes can also be defined in the Additional CSS screen. Classes can be used with inline CSS (they can also be used in external style sheets and elsewhere). A CSS class can be added to individual HTML elements such as h1, one by one, with inline CSS. Similar to how you use inline CSS, its style= attribute is typed in to each h1 element on the site. In other words, you type a class attribute into an HTML element just as you did when adding a style attribute for inline CSS.

Inline CSS using the style= attribute is shown here:

<p style="color: green; font-weight: bold;">This

is a green and sans sentence.</p>

And here’s inline CSS using the class= attribute:

<p class="greensans">This is a green and sans sentence.</p>

So, if you have to type in a class attribute to every h1 element that you want to apply the class’s style to, what’s the point of using classes at all instead of the style= attribute? Well, there are two advantages to using class= instead of the inline CSS style=:

- When a rule has multiple properties, the style= attribute must list them all for each HTML element (each h1 heading, for example). But with the class= attribute, you need only use the class name, such as greensans shown in the previous code. This makes things shorter and simpler.

- If you later decide to change the color from green to brown, you only need to make that change in the class definition, instead of modifying by hand every h1 heading individually using style=.

Note that there are several kinds of selectors in CSS, but we’re concerned here with the two main ones: HTML element tag names and classes. HTML tag names are predefined, and you can’t change them. You must use h1 when referring to that heading element. By contrast, you can name classes anything you choose—you make up the names for classes. Among other things, this means if you want to overrule a class defined by the developers of your theme’s CSS, you have to figure out what exactly those developers called that class. (This used to be hard to figure out sometimes, but when using the YellowPencil plugin, it’s no problem at all.) Let’s now try an example that shows how to use a class.

1.  Go to your Appearance > Customize > Additional CSS screen, and type in this class definition (use any name for this class that you like):

.greensans {

color: green;

font-family: sans-serif;

}

2.  Click the Publish button.

3.  Go to your Pages > All Pages screen, and then click a page title to open its Edit Page screen.

4.  Click the Text tab on the top-right area of the text box.

5.  Type the following into that page’s text box:

<h1 class="greensans">My first headline</h1>

<h1 class="greensans">The second headline</h1>

<p class="greensans">You can apply a class to any HTML element, like this

paragraph.</p>

6.  Click the Update button.

7.  Click View Page to see the changes.

Defining classes

Although WordPress doesn’t provide direct access to the entire HTML code for a page or post, classes are sometimes defined within a <style> </style> tag pair. This pair is located at the top of the HTML for a page, inside the <head> </head> tag pair. This zone is called the head of the HTML document, and is where metadata not visible to the user is located—JavaScript, “internal” CSS, and so on.

Classes can also be defined in an external style sheet that’s linked to a page in the <head> section, like this:

</head>

<link rel="stylesheet" href="styles.css">

<body>

Here are the major zones within an HTML document, illustrating where a page-wide CSS class can be defined:

<html>

<head>

<style>

.greensans {

color: green;

font-family: sans-serif;

</style>

</head>

<body>

<!-- The primary content displayed in the web page-->

</body>

</html>

If you define a class in this head location, it only applies to that particular page. However, to type in “internal” CSS in WordPress, you can’t use the code view (the Text tab in an Edit Page screen) option. WordPress doesn’t display all the HTML in a page when you select code view. Instead, you have to edit the theme’s header.php file. And that’s not a good idea unless you’re an expert PHP coder. Even then, when the theme updates, your class definition will be overwritten.

This ends the tech zone. We now return to our regular content.

7.7 CSS in Gutenberg

Just like the classic editor, the WordPress block editor responds to CSS code that you type into the Appearance > Customize > Additional CSS screen (as described in previous examples in this chapter). However, at the time of this writing, in Gutenberg, you can only see the effects of the CSS when viewing the frontend via the Preview option. In the page or post-editing screens, the changes aren’t visible (usually).

TIP When describing how to use Gutenberg, the term usually pops up fairly often. Even after years of work, the talented people at WordPress are still polishing this work in progress. To me, Gutenberg is a worthy goal that will be achieved one day. For now, there are workarounds you must memorize, as the rest of this section illustrates. I look forward to switching from the classic WordPress editor to Gutenberg when the latter stabilizes and is relatively free of bugs. But my hope is that switching between the classic and block editors will be possible via a single mouse click. Each editor has its strengths.

As in the classic editor, in Gutenberg, you can add global, site-wide CSS code in the Additional CSS screen. For now, though, let’s see how to add inline CSS locally using Gutenberg—adding CSS to a single HTML element such as paragraph body text (HTML element <p>).

Surprisingly, there are five ways in Gutenberg to access and modify HTML using inline CSS code! Go to the Pages > All Pages screen, and click a page title to get to its Edit Page screen. Click + to add a Classic block (not the Paragraph block) to the page, and type This is a paragraph, into that block.

TIP Currently, if you try to add inline CSS to the Paragraph block, you’re going to run into difficulties, that is, bugs. After you add the CSS using code view, preview the page, and then click Edit Page to return to the editor, Gutenberg posts an error message claiming that Unexpected or Invalid Content is in your block. That’s untrue—the content is both as expected and valid. Then, Gutenberg offers to fix the problem by displaying an Attempt Block Recovery button. This “fix” simply deletes the block! It’s as if you go to the dentist to fix a tooth, and the dentist shoots you.

Click the Classic block to select it, and then click View > Source Code from the menu on the toolbar. Add this inline CSS style to your paragraph’s text:

<p style="color: red;">This is a paragraph</p>

Click OK. You’ll now see the change, even in the page editor (no need to click either Update or Preview). Or, if you’ve defined a CSS class (in your Appearance > Customize > Additional CSS screen), you can apply the class in the same inline way using the class= attribute instead of style=, like this:

<p class="greensans">This text</p>

Alternatively, when a block is selected (in other words, its toolbar is visible), you can press Ctrl-Shift-Alt-M to switch to code view and manage the inline CSS there. Click Exit Code Editor to return to the visual editor.

Another alternative is to choose Tools > Source Code, which has the same effect as choosing View > Source Code. Yet another alternative is to click the three dots in the upper-right corner and choose Code Editor, which has the same effect as pressing Ctrl-Shift-Alt-M.

Given that Gutenberg sometimes assumes that five ways to do the same thing is better than one, you can also apply CSS classes to a block using a special Advanced module. As mentioned previously, adding class= via inline CSS works fine to apply a class rule to an HTML element such as a heading or body text. You just define a class in the Additional CSS screen as usual, and then type <h1 class="classname">headline</h1> in the HTML element.

And there’s yet another way in Gutenberg to add a CSS class inline. You click a block and then click the three dots in the upper-right corner of the editing screen (this works with some blocks, but not all). You’ll now see a sidebar on the right (usually, not always). Click the Block tab in the sidebar.

Finally, scroll down to the Advanced module, and open it by clicking its down arrow. You’ll usually see an opportunity to add classes to the currently selected block by typing a CSS class’s name into the Additional CSS Class(es) field, as shown in figure 7.13.

Figure 7.13 You can apply classes to a block using Gutenberg’s Additional CSS Class(es) field.

WARNING The right sidebar in Gutenberg is buggy, at least at the time of this writing. Neither the Classic block nor the similar Classic Paragraph block allow you to add CSS using the Advanced module. You can’t even view the sidebar. You must first change the Classic block into a block (paradoxical, isn’t it?). To do that, you click Convert to Blocks displayed in the Classic block’s top toolbar (there are two toolbars, one above the other). You logically thought that the Classic block was a block, but never mind. The Classic—let’s call it a pseudoblock—has to be converted to a real block before you can access the sidebar and its Advanced module. All this isn’t really worth the trouble. It’s easier to just type in the block= attribute by hand yourself using the code view option. That way you can continue using the Classic pseudoblock.

WARNING When you use a class name in this Additional CSS Class(es) feature, don’t precede the name with a period (as you must do when defining a class in the Additional CSS screen).

When you type the class name into the Additional CSS Class(es) field, WordPress adds the necessary class= attribute to your HTML, just as if you’d switched to code view and typed it in yourself.

7.8 Inpainting and outpainting

AI inpainting makes it easy to remove or replace unwanted objects in an image. With inpainting, you select an object by dragging a selection lasso around the object. Then, you either request its removal or describe what you want to replace it with.

NOTE Many graphics in this book are meant to be viewed in color. The eBook versions display the color graphics, so they should be referred to as you read. To get your free eBook in PDF, ePub, and Kindle formats, go to www.manning.com/books/wordpress-power-toolkit to register your print book.

Outpainting is the opposite of cropping. Recall that when you crop a picture, you cut off one or more of its sides. This is often done to move the focal point onto an intersection of the lines in the rule of thirds. This can also improve the balance of the image.

Now, thanks to AI, you can (amazingly) extend the image, adding content to one or more sides that never existed before! AI invents additional visual content beyond the current view, but it doesn’t duplicate existing content. Instead, it creates a variation, a visually logical extension of the existing content.

If, for example, you’re working with a beach scene, you could extend the beach on the left or right side, or both. Outpainting in this way will retain the qualities of the current beach, but widen the image. Or you could expand the top of the image to extend the sky. You also can extend the foreground by outpainting past the bottom of the image. It’s a new technique and not available prior to AI.

When outpainting, AI doesn’t just copy the existing content. You won’t get a second cloud that looks like a cloud that exists in the original image. Remember that AI is intelligent. It can perceptively interpret what would likely appear in a wider view of a scene and give you variations to choose from. Extend the beach, and you could easily get just more beach, but with variations in the sand, or shadows, or perhaps a palm tree as well (or you could type palm tree into the generative outpainting toolbar if you do want a palm tree in the outpainted space). These are techniques worth knowing, so let’s take a look at how they’re done.

Although Midjourney and other text-to-image systems have tools that can generate these modifications, currently Photoshop’s tools are the easiest to master. So, let’s use Photoshop to do some inpainting.

Photoshop calls inpainting and outpainting generative fill and generative expand. Both will automatically match the lighting, perspective, and other qualities that preserve the overall content and style of the image. This happens in seconds, and the results are often startlingly appropriate. It’s as if the original photographer had used a wider lens, or Dali had painted three elephants on stilts in the background.

Take a look at figure 7.14. This Midjourney-generated golden mask can benefit from some modifications. First, there’s no strong focal point. So, we’ll make the lips the focal point by asking Photoshop to color them with vermillion enamel. Based on what area we select, the shape of the lips can also be changed.

Figure 7.14 Photoshop will generate three variations of red enamel on the mask’s lips, now that they have been selected with the lasso tool, and our prompt described the material we’re after.

In Photoshop, you can use its lasso tool to draw a selection region. This is the area that will be replaced with enamel. So, with the lasso, I roughly followed the outline of the lips, which leaves behind a dashed line showing what’s selected. A generative toolbar appears in the bottom of the screen, as you can see in figure 7.14. If you just click Generate, without typing in any text, it removes the selected object, filling in the space with whatever surrounds it.

However, our goal is to modify, not delete, these lips, so I typed in “glossy vermillion enamel” as the text prompt, and then clicked Generate.

You can repeatedly click Generate, getting three new variations each time, until you find one you like best. Figure 7.15 shows the best result out of nine variations. The coloring is good, and the pursed shape of the lips is more intriguing, at least to me.

Figure 7.15 The best of nine variations, featuring pursed lips for added interest

Now that the lips are vermillion, to make them clearly the focal point, we’ll use the cropping tool to move the lips onto a rule-of-thirds grid line. Also, the eyes are now on two intersections, as is the right side of the face. We’re outpainting now, and, in this case, we’re dragging the frame down and to the right. These currently black areas will be filled in by Photoshop with appropriate variations on the current background, or with a new background that I specify.

For outpainting in Photoshop, you use the crop tool and drag one or more of that tool’s frame handles to show where the expanding should take place. The image is transformed significantly in figure 7.16. I typed “gold velvet curtains” into the generative toolbar, so Photoshop will add a less focused, softer texture to contrast with the hard metal, but retain the color. As you can see in figure 7.16, this also adds background blur, a common technique in photography called shallow depth of field.

This chapter was all about advanced design techniques and tools. It began with an overview of historical design trends and the minimalist aesthetic that currently inspires the majority of architecture, fashion, and, of course, websites. Then, you explored CSS—the design language that allows you to modify your site’s theme with considerable freedom. And, you saw how to use a powerful CSS plugin, or AI systems, to write CSS code for you. You don’t have to learn CSS to use it.

Figure 7.16 Compare this figure to figure 7.14 and see whether you agree that inpainting and outpainting improved the picture.

Next, you learned how to work with CSS using the WordPress Gutenberg block editor. The chapter concluded with how to use AI outpainting and inpainting tools to intelligently add, remove, or expand content in images.

Now, it’s time to move away from design topics and explore other ways to enliven a website by adding multimedia: audio, video, and images. In the next chapter, we’ll also take a look at how to ensure that your site is accessible for people facing various challenges. And we’ll consider some legal problems involving media permissions and attributions, before concluding by showing you how to manage multimedia if you choose to work with the Gutenberg editor.

Summary

- Typical adjectives that describe today’s architecture and other styles in areas such as clothing fashion and website design include modern, minimalist, simple, clean, and elegant. And for most websites, it’s a good idea to design the site with an eye to displaying elegant, contemporary pages. This also includes subtle, restrained use of animation and media.

- Cascading style sheets (CSS) is an effective design language with which your site’s look can be honed, giving it an appearance that is both unlike other sites and also in tune with your site’s purpose.

- The Inspector is a set of tools found in most browsers. It’s useful for, among other things, learning the basics of CSS and how CSS modifies and interacts with the HTML code that underpins the display of web pages.

- You need not learn the CSS language because there is a powerful plugin called YellowPencil that automatically generates CSS for you. You use sliders, color wheels, and other high-level WYSIWYG tools to fine-tune a page’s design, and then YellowPencil creates the CSS by itself. Also, AI systems such as Claude (https://claude.ai) are increasingly skilled at programming, CSS included.

- Among the most useful AI-powered art tools are inpainting and outpainting.

- With inpainting, you can remove something from an image, or replace it by describing what you want to take its place.

- Although there are some bugs and necessary workarounds, CSS can be used in WordPress’s Gutenberg editor.

- Outpainting means you can extend one or more of the sides of an image. This is the opposite of cropping, which trims one or more of the edges. Cropping has been used for centuries. But outpainting only became possible when AI appeared. The extensions of the image must blend in with the rest of the image, but they must also be original and a variation. It can’t just be a copy. Human artists can do this, but prior to AI, no computer could.

8 Mastering multimedia

This chapter covers

- Choosing the appropriate number, size, and type of images to display

- Knowing where to store media files

- Making sure your site is accessible to all visitors

- Paying attention to legal matters such as plagiarism, permission, and attribution

- Managing media when using the block editor

Multimedia is one of the advantages that websites have over print media. Although books and magazines can display images, they can’t include audio or video. In almost every site, you want to add at least some video and certainly images. Audio is optional, and relatively less common.

The numbers support this. Studies show that website content with good, relevant visuals gets 94% more views! (See https://mng.bz/av4x for statistics about how effective visuals are.) You can also read what Forbes magazine says about visual learning and how younger generations in particular base purchasing decisions on images at https://mng.bz/MDWE.

The majority of people claim to be visual learners. In this chapter, we’ll explore the best ways to add relevant pictures, audio, and video to your site to bring it alive and give your visitors a reason to stay awhile.

8.1 Displaying the right amount of media

Of course, you want to be judicious in your use of images or other media. Use too few, and the site becomes static and might look forbiddingly full of gray text. Too many, and your audience will likely become distracted and perhaps annoyed because the pages lack focus.

There’s no magic number though. You can’t just aim for, say, five per page. There’s a range of the number of media you should use, depending on the site’s subject matter. An artist displaying works in a portfolio site can include many images, and so can an e-commerce site featuring a catalog of goods. A lawyer’s site—attempting to avoid the appearance of frivolity—can be expected to display fewer visuals.

8.1.1 Testing page-load speed

Page-load speed is another consideration. Too many images can slow down your site. And you need to take into account that some of your visitors will have slow internet connections. To test your page-load speeds, follow these steps:

1. Temporarily deactivate any coming soon or under construction plugins such as SeedProd.

2. Go to the Pages > All Pages screen and then click a page’s title.

3. Copy that page’s permalink (right above the toolbars).

4. Go here to submit the permalink for the page-load test: https://pagespeed.web.dev.

5. Paste the permalink into the URL field and click the Analyze button.

How many Images should your type of site use?

Ask AI to check out the competition and tell you the typical number of images per page on their sites:

My website’s topic is bass fishing. Scan a few of the most popular bass fishing sites and count the number of images per page in these sites. Then tell me the average number of images being used.

GPT was best at this type of query:

I reviewed three popular bass fishing websites—BassResource, Wired2Fish, and TacticalBassin—to determine the average number of images per page.

BassResource: This site features a variety of articles, videos, and forums, typically with around 20-25 images per page, including article thumbnails, embedded images in content, and video previews (Bass Resource).

Wired2Fish: Each page on this site generally has 30-35 images, including detailed photos of fishing gear, instructional images, and illustrations accompanying articles and reviews (Wired2Fish).

TacticalBassin: This site has a more streamlined approach, averaging about 15-20 images per page. The images primarily feature fishing gear, fish caught, and instructional visuals (Tactical Bassin’ - Bass Fishing Blog).

By averaging these figures, we get:

BassResource: 20-25 images per page

Wired2Fish: 30-35 images per page

TacticalBassin: 15-20 images per page

Taking the midpoint of each range for a more precise average:

BassResource: 22.5 images

Wired2Fish: 32.5 images

TacticalBassin: 17.5 images

The average number of images per page across these sites is approximately (22.5 + 32.5 + 17.5) / 3 = 24.2 images per page.

So, on average, these popular bass fishing websites use about 24 images per page.

Clearly Wired2Fish is skewing these results. Give me the average after excluding BassOnline.

The average number of images per page is:

(22.5 + 17.5) / 2 = 20 images per page.

Thus, the average number of images per page on popular bass fishing websites, excluding Wired2Fish, is approximately 20 images.

Now that we’ve considered a quantitative aspect of multimedia, it’s time to turn our attention to qualitative issues.

8.2 Avoiding inappropriate images, audio, or video

In this context, inappropriate media can mean several things:

- Doesn’t match the style of your site

- Doesn’t fit in with the purpose of your site

- Downright vulgar or otherwise offensive

- Merely decorative rather than advancing your site’s story

- Too large or too small

- Low quality or low resolution

- Lacks alternative text descriptions (Alternative Text in the Image Details screen or Alt Text in the Edit Gallery screen).

NOTE Alt text is used by text readers to describe the image to people who have visual challenges, or to provide an alert if the image isn’t available for display (images only). It’s also used by search engines.

- Lacks captions or transcripts

- Video or audio that starts playing by itself

- Video or audio that is frenetic, distracting, or otherwise annoying

- Isn’t permissible to use because the media was created by someone else

- Isn’t properly formatted or sized for internet display (discussed shortly)

NOTE You shouldn’t use media if it contains someone’s face or license plate number. It’s said that the reason Google blurs these in its Google Earth app is that somebody got into a lot of trouble when they parked their car in front of a notorious house.

The Media Library isn’t infinite. You need to understand its several limitations, and the solutions to those restrictions. Let’s next consider the issue of media file size. Put briefly: avoid uploading large files into your WordPress Media Library.

8.3 Storing video on YouTube

Individual images (and also text media such as PDF or DOCX files) are comparatively small files. So it’s usually not a problem to store them in your Media Library. However, the Media Library has a file size limit. How big depends on your hosting service (256 MB is typical).

By contrast, video files are enormous. Here’s why: an average website image is around 150 KB. But a 5-minute video is 9,000 times larger. Typically, a video has a frame rate of 30 frames per second, in other words, 30 images per second. So, a 5-minute video is roughly the equivalent of 9,000 images, or 1,350 MB. (This does vary based on the specs and type of the image or video, but obviously video eats up memory fast.)

Storage on WordPress hosting services’ servers isn’t free. Limitations are placed on how much storage you’re allowed. There can also be maximum file size limits. So, unless you have a small site with only a few brief videos, avoid storing videos in your Media Library.

Because they’re huge, videos also consume significant bandwidth and server resources. Your site’s performance can be affected in that way as well.

Videos can be compressed. This helps improve page-load speed and smooth video playback. The Media Library, however, might not have access to sophisticated video optimization, such as managing compression (this depends on your hosting service). But it’s usually best for all the reasons previously mentioned to store videos off-site in a third-party video platform such as YouTube. After they’re stored there, you embed (paste) a video player in a page on your site. Then, when a visitor clicks the Play button in the player, YouTube streams your video to your site’s page for your audience to view it.

YouTube lets you store videos for free! And, aside from relieving your hosting service from storing and delivering video, YouTube storage gives you these additional benefits:

- Efficient, smooth streaming

- Advanced optimization and compression

- Management of multiple video formats

- An easy way to embed videos into your site

- A customizable video player

8.3.1 How to upload a video to YouTube

You can, with permission, display someone else’s video on your site. Or you can upload your own. Luckily, embedding either kind of YouTube video in your site is surprisingly easy. Let’s see how to store one of your own videos on YouTube. Here are the steps to upload your video:

1.  Log in to your YouTube account.

2.  Click the Create icon in the top right, as shown in figure 8.1.

Figure 8.1 Click this add-a-video icon in YouTube to upload a video.

3.  Click Upload Video. Then, drag and drop it, or select it from your hard drive. Be patient, as uploading can take a while.

4.  In the Details section, change the title if you wish. And scroll down to specify if it’s age restricted. This is required.

5.  Change or add any other information you want to provide while waiting for your video to finish uploading.

6.  Click Next. If you want to provide additional video elements (end screens, cards, a call to action), add them in this page, and then click Next.

7.  YouTube checks for any copyright issues. Then, click Next.

8.  Make your video public, and if you wish, click Schedule to delay the video’s debut beyond the debut default, which is tonight at midnight.

9.  Click Save. You’ve now uploaded your video.

8.3.2 Embedding your video in a page in your site

Here are the steps to find your video on YouTube and copy its URL address (which you’ll need).

1.  Log in to your YouTube account.

2.  Go to your channel by clicking your icon or avatar in the upper-right corner.

3.  Click Your Channel, as shown in figure 8.2.

Figure 8.2 When you click Your Channel, you see all the videos you’ve uploaded to YouTube.

4.  Double-click the thumbnail image of your video. This takes you to your video as it looks in YouTube.

5.  Click the Share icon below the video, as shown in figure 8.3.

Figure 8.3 To begin the process of embedding your video in your WordPress site, click this Share icon.

6.  Click the Embed icon shown in figure 8.4. This will generate the code you need to actually embed your video.

Figure 8.4 After you click the < > Embed icon shown here, you can view the HTML code that actually connects your site to the YouTube video you uploaded.

7.  Now you see the HTML code that you need to paste into your WordPress page to create the video player for your site. It will be loaded with your video and ready for your visitor to play. This HTML code is shown in figure 8.5.

Figure 8.5 Clicking the Copy button here saves this code to Windows’ clipboard so you can paste it into your site.

8.  Click Copy (at the bottom of figure 8.5) to send the HTML code to the clipboard. Or, if you plan to embed later, paste the code into Notepad, and save it to your hard drive.

Now let’s see how to embed videos into your site—it’s quite simple.

8.3.3 Embedding a YouTube video in your site

After you’ve followed the previous steps, uploaded your video, and copied the HTML embedding code for that video, you’re now ready to add the video player to one of your site’s pages. Follow these steps:

1.  Go to your Pages > All Pages screen and click the title of the page where you want to place the video.

2.  Now, in the Edit Page screen click wherever in the page’s text box you want the video located. This puts the blinking vertical line cursor in the exact location where the video player will be placed.

3.  Click the Text tab in the upper-right corner of your text box. (This tab displays the version of the text box where you can add HTML code.)

4.  Now press Ctrl-V to paste the code. (If you previously saved the code in a Notepad file, open it in Notepad, press Ctrl-A to select it, and then press Ctrl-C to copy it. Then, go to your Edit Page screen and press Ctrl-V to paste the code into your WordPress page.)

5.  Click the Update button (or Publish if it’s a new page) to save the code. The Edit Page screen should look like figure 8.6.

Figure 8.6 Here in this Text tab of the Edit Page screen is the HTML code for a simple embedded video.

6.  Click the View Page link or the Visual tab in the Edit Page screen to see and play your video.

8.3.4 Modifying the video player

In the Text tab of a text box on the Edit Page, you can view and modify the video player’s HTML embed code if you wish. Here’s sample embed code that includes attributes you might want to modify or, in the case of autoplay, just delete altogether. Most people don’t like it when video or audio automatically starts playing. They want to decide when to turn media on. So, delete autoplay and the semicolon that follows it:

<iframe width="560" height="315" src=https://www.youtube.com/embed/eM6Axxx4WlLLwI

title="YouTube video player" frameborder="0"

allow="accelerometer; autoplay; gyroscope;

</iframe>

Here’s a description of the tags and their settings if you want to consider changing them as well:

- The <iframe> HTML element is used to embed another document or web page within the current HTML document. It can be used for ads or, in our case, embedded video.

A little HTML terminology

In HTML, code like this enclosed in greater-than and less-than symbols (<>) such as <iframe> and </iframe> are called tags, and they describe what kind of content they enclose and sometimes include additional specifications such as size, position, or typeface. The open and closing tags, plus what’s contained between them, are an HTML element. And when you see an =" symbol within an element, such as title="Our Christmas Party", that additional information about an element is called an HTML attribute.

- The width and height attributes describe in pixels the size and shape of your embedded video player.

WARNING Specifying width and height can make the video player unresponsive (meaning it wouldn’t correctly resize to a display like a cellphone screen). So if you do choose to specify the player’s size, be sure to test it by looking at your web page on a cellphone, tablet, and monitor. Your site’s theme has the task to handle responsiveness, but if it doesn’t do a good job, here’s a CSS fix: https://mng.bz/gaYZ.

- The src attribute is the URL address of the content that will be fetched and displayed. In this case, it’s a YouTube video.

- The title attribute isn’t displayed. Visually challenged people use screen readers that read this attribute (and other page content) out loud. So the title attribute should describe the video.

- Frameborder has only two values: 0 displays no frame around the contents, and 1 does.

- The allow attribute can include multiple properties that are actually a list of permissions:

- accelerometer allows the embedded content to access the device’s accelerometer, that, as you might expect, detects and measures acceleration of a cellphone or tablet. It reads any acceleration applied to the device along all three axes. In other words, if a table is viewed in portrait mode, and then the user turns it 90 degrees, the accelerometer detects this movement, and the screen adjusts to landscape mode. It becomes wider than it is tall.

- autoplay starts the video running when the page is displayed, which is usually annoying to users. Let the user determine when to start the show. Some browsers actually block auto-playing. And it can impact accessibility because screen readers might be reading other content that auto-playing audio would suddenly interfere with. The solution is to not include the autoplay property in your code.

- gyroscope is hardware in cellphones and tablets that is sensitive to twisting or rotation. It detects spatial orientation and improves the accuracy of the accelerometer. Working together, these devices can cause the software to redraw the screen to a new aspect ratio, such as changing from landscape to portrait mode.

It’s now time to return to a quantitative question: What is the best image file size for display on internet pages?

8.4 Using the right image sizes

Images taken by cellphones and other modern cameras are very high resolution, which means large file sizes that use up storage space quickly. Hi-res is good when you want to crop the image to display only a detail, for example. If there are tons of pixels in the image, then even when cropped, the result remains sufficiently sharp.

But take a look at figure 8.7. It shows what happens when you crop a low-res image. This is called pixelization—unfocused, boxy, and diagonal edges are stair-stepped.

Figure 8.7 When you crop a low-res image, the result can be serious degradation like this pixelization.

However, huge hi-res image files when displayed in websites can slow page load times. This not only annoys people with less than swift internet speeds, but can also reduce your site’s quality score with Google and AI systems. The cure is to reduce the size of hi-res images. Large, super-high-resolution images aren’t any sharper in a web page than reasonably smaller images with a lower pixel density. So, the only value of working with a high-res image is if you want to crop it, and thus reduce the file size.

Two factors contribute to image: resolution and image file size. Resolution means how densely the image’s pixels (points of light) are packed. A pixel—a small (usually) colored dot—is the smallest unit of measurement for screen displays. Resolution is often measured in pixels per square inch (PPI), that is, how many pixels are packed into a screen inch.

File size represents how large the image is (usually measured by the number of pixels horizontally multiplied by the number vertically). For example, a 1,080-pixel HD video image measures 1,920 × 1,080 pixels, so it has more than 2 million pixels.

Here are some typical types of images used in websites, and the recommended size and aspect ratio (shape) for each type. These figures are for images saved to disk using the .jpg file type (other formats, such as .png files, can be quite a bit larger):

- Background images (or other full-screen images)—1,920 × 1,080 pixels with an aspect ratio of 16:9 (400 KB file size)

- Hero image—1,280 × 720 pixels with an aspect ratio of 16:9 (200 KB file size)

- The site’s banner (header) image—1,600 × 600 pixels with an aspect ratio of 5:3 (200 KB file size)

- Ordinary page or post (blog) images—1,200 × 630 pixels with an aspect ratio of 3:2 (180 KB file size)

- Logo—For a rectangular logo, 250 × 100 pixels with an aspect ratio of 2:3 (30 KB file size)

The hero image is the first image a visitor sees. It should be carefully chosen to represent the site’s content. It introduces the site to its potential audience. The hero is sometimes a banner or header image. It can even be full screen.

The resolution for any of these image types should be 72 PPI. Images on computer screens don’t need a higher resolution. Computer screens display between 72 and 100 PPI. Today’s cellphone cameras take pictures at 300 PPI and even higher densities. Going beyond 72 PPI won’t improve how images look onscreen in a website but will increase file size.

For example, the default size and resolution of a picture taken by an iPhone 12 is 4,032 × 3,024 pixels and 460 PPI. That’s about 12 times too big for use as a typical web page image. The file size of a .png file type of this image can be around 31 MB versus the file size of a .png file for a typical web page image, which can be around 3 MB.

So before uploading them into WordPress, you’ll want to prepare images at the needed resolution and the file size appropriate to their purpose on the site (logo, ordinary image, full-screen, and so on). Because print media calls for a much higher resolution than monitors or other device screens (usually 300 PPI or higher), you’ll normally be reducing both the PPI and the image size when preparing images for display on your site. I’ll show you how to resize images and adjust their PPI shortly.

Note that those previous specs are guidelines, so they can vary somewhat depending on the use case and the type of image. But reduction is usually called for. And also consider that enormous image files impact page load speed, and thus AI systems’ and Google’s opinions of the quality of your audience’s user experience can suffer.

WordPress doesn’t automatically compress images when you upload them to the Media Library. It saves a one-to-one copy of your image, but can also generate other sizes of it: thumbnail, medium, large, and full size (the original size). It doesn’t reduce the resolution, however.

WordPress includes several tools, such as a cropping tool, to manipulate images. However, dedicated photo-editing applications are better suited for quality image manipulation, such as resizing. Prepare your images in Photoshop or an alternative application before uploading them into WordPress. If you don’t have Photoshop, you can get a free, and excellent, alternative by safely downloading Paint.NET or GIMP from https://ninite.com.

TIP Although it’s possible to superimpose text on images in WordPress using CSS, a better and more efficient solution is to just use the text tool in a photo-editing application. It’s easier, and the results are more predictable when your site is viewed on other screen sizes.

Photo-editor applications include tools to resize and modify the resolution of images. In Paint.NET, for example, choose Image > Resize (Ctrl-R). Leave the Maintain Aspect (shape) checked, and then type in the desired width. The height automatically changes to preserve the shape. Then, reduce the resolution to 72. Figure 8.8 shows the Paint.NET Resize module.

Figure 8.8 Change an image’s size and resolution in a module like this one.

TIP You can batch-process multiple image files in Photoshop by using the following menu item: File > Scripts > Load Files into Stack.

Now that you’ve seen how to choose the right sizes for your site’s images, it’s time to consider where in the pages to place the images.

8.5 Positioning media effectively

It matters where you display images in your pages. If you aren’t experienced in design, you’ll want to ask for help from an acquaintance who is. Or submit a copy of your page and ask AI’s opinion about image placement.

You can also learn by looking at award-winning websites. Here are two that won design contests:

- Airbnb effectively displays a catalog-style image layout: www.airbnb.com.

- This New York Times “Snow Fall” article effectively integrates videos, a slideshow, and fade-in transitions for the photos. Notice that images are consistently on the right side: https://mng.bz/5gN4.

Here’s a checklist of media placement and layout best practices to consider (if you’re going to ask AI for its suggestions, submit this list to the AI first):

- Unless you’re displaying a catalog or a set of thumbnail images, it’s best to vary their size, usually based on their importance.

- Every image should serve a purpose beyond mere decoration. Media should be relevant to what’s discussed on the page.

- People look at the highest image or video on a page first, so ensure that those media represent the page’s topic effectively. Less important media can go further down the page. (Some site-analytics applications can generate a heat map which visually illustrates how people view your pages. It shows areas that are never, sometimes, or always viewed. More on this in a later chapter.)

- It’s often advisable to insert images (or white space) between every two or three paragraphs to break up the text.

- Don’t crowd media. Provide a sufficient white space frame around each image or video. However, some designs work by flowing the text around an image or video.

- Be consistent. If you display your images on the left side in most pages, you should have a good reason for not placing them there in all the pages.

- Check how the media layouts work when viewed on a cellphone screen.

- Locate media next to any reference to them in the text.

- Provide captions.

- Ensure that media doesn’t distract from important navigation features such as the site menu.

- Logos are usually placed on the top-left side, sometimes on the right, but rarely in the center.

What did GPT have to say? I submitted the fishing site home page to GPT (see figure 8.9).

Figure 8.9 Perhaps the images in this home page could be resized or rearranged to improve the layout. GPT has some ideas.

I uploaded a screenshot of my bass fishing site’s home page. Please suggest how this site’s home page images might be better arranged.

Based on your guidelines for image placement, here are a few suggestions to better arrange the images on your bass fishing site’s home page:

Top Image Representing the Page’s Topic:

Ensure the highest image (the one with the fishing rods over the lake) effectively represents the topic of bass fishing. This image is well-placed but might benefit from a clearer, high-resolution version to grab attention immediately.

White Space and Image Breaks:

The text below the top image appears to be crowded. Adding white space between the image and the text will enhance readability and make the page look cleaner.

Consider adding smaller, related images or icons next to the paragraphs to break up the text and maintain the reader’s interest.

Consistent Image Placement:

The images of fish in the lower section are well-arranged. However, ensure consistency in the alignment. If possible, make sure all images in this section are of the same size and aligned uniformly. This helps maintain a clean, organized look.

Captions for Images:

Add captions below each image to provide context. For example, include the fish species name or any relevant information that the visitors might find useful.

Mobile Layout Check:

Ensure the images and text layout work well on mobile devices. Sometimes large images or closely packed elements can look cluttered on smaller screens. Use responsive design techniques to adjust image sizes and spacing accordingly.

White Space around Images:

Each image should have sufficient white space around it to avoid a cramped look. Ensure there’s enough padding or margins to separate images from text and other elements.

Logo Placement:

Your logo is placed on the top left, which is ideal. Ensure it’s visible and distinct from the background to improve brand recognition.

By following these suggestions, your home page will look more organized, visually appealing, and easier to navigate, which can enhance user experience and engagement.

I then asked GPT to show me a page that used its suggestions (see figure 8.10):

Can you use DALL-E to display a version of this page that illustrates your suggestions?

Here is the redesigned version of your bass fishing site’s home page, illustrating the suggestions I provided. This layout follows the best practices for image placement and ensures a clean, organized, and visually appealing design. If you have any further adjustments or need additional help, feel free to let me know!

Figure 8.10 Here’s GPT’s version, rearranging the images to satisfy the criteria I provided.

Now let’s move on to a different topic. It’s important to consider making your site friendly to people with accessibility issues, so that’s the subject of the next section.

8.6 Providing accessibility

Given that a significant percentage of your audience faces various kinds of challenges accessing internet content, you want to build a site that is easy for everyone to use and enjoy. Plus, it’s clearly the right thing to do.

In this context, accessibility means ensuring that your site is efficiently usable by everyone, no matter what their impairment:

- Visual impairments, including low vision, color blindness, or general blindness

- Hearing issues such as reduced hearing or deafness

- Motor or dexterity challenges that affect using a mouse or keyboard

- Cognitive disabilities that affect comprehension and focus

Your goal should be to remove obstacles that prevent access to your content and functionality. People should be able to understand, visualize, navigate, interact, and even contribute messages if you have a two-way blog page.

The World Wide Web Consortium works to develop standards for the internet. Among their efforts are the Web Content Accessibility Guidelines (WCAG) accessibility best practices and standards. They list four principles, often referred to as POUR:

- Perceivable—Information can’t be conveyed only through sensory characteristics such as size, shape, sound, or visual location because some of your visitors can’t perceive those elements.

- Operable—Components such as keyboard navigation work for all users.

- Understandable—Content is clear and easily comprehended.

- Robust—The site works across a wide range of browsers and devices.

The Americans with Disabilities Act

The Americans with Disabilities Act (ADA) is similar to WCAG, but there are some differences. ADA merely requires site accessibility, without specifying any technical standards. It just refers you to the WCAG standards. You can be sued or penalized via ADA, but WCAG has no legal authority. So far, lawyers for plaintiffs’ complaints about ADA violations are largely limited to “places of public accommodation” meaning a motel, bakery, theater, store, gas station, lawyer’s office, state and federal sites, and so on.

If your site supports a brick-and-mortar store, for example, you could be sent a warning letter or a summons if the site is inaccessible in some way. By contrast, if your site is about how to take good pictures or bake muffins, it’s quite unlikely you would be targeted. ADA enforcement hasn’t been completely consistent, however. So, this is another reason to make your site accessible. To sum up: you’re at greatest risk if you’re selling something via your site or have an associated brick-and-mortar business.

8.6.1 Why you should do it

Obviously, it’s good to make provisions for the many people who can profit from your efforts to be inclusive. In addition to making the right moral choice, you also enjoy these benefits:

- Reach a wider audience, opening your content to more users

- Comply with web accessibility laws and thus avoid potential legal action

- Enhance your brand image by showing that you care about inclusivity

- Allow people to use assistive technologies such as screen readers, voice control, switches, and other tools

- Improve search engine optimization (SEO) ranking (it’s said that Google, Bing, and AI search engines rank your site higher if it’s accessible)

8.6.2 Finding an accessible theme

Some themes are designed with accessibility built in. One feature to look for in a theme is whether it employs Accessible Rich Internet Applications (ARIA) features called roles. This approach employs HTML attributes to make things easier for a screen reader to clarify the structure and various zones of your site. HTML version 5 includes many such elements. Here are some popular themes and theme developers that are described as accessible-ready:

- Twenty Twenty-One

- OceanWP

- Astra

- GeneratePress

- Divi

- AccessPress Parallax

- Elegant Themes

One way to find out if a theme includes ARIA elements is to right-click the frontend view of a site, and then open the Inspector from the pop-out menu. Now search for role. ARIA roles label and identify various types of site content, such as presentation, option, list box, group and so on. But a more efficient way to see the list of roles, if any, is to add the Web Developer extension to your browser. Where the Inspector focuses on viewing and testing modifications to the structure and styling of a web page, the Web Developer extension has a larger set of tools. It’s worth a look.

Web Developer: An excellent extension for deep diving into site internals

When you install the Web Developer extension in your browser, it provides you with dozens of tools. For example, you can use its Information menu to look at ARIA roles, as shown in the following figure.

The Web Developer includes dozens of tools of use to advanced or intermediate developers, and some of value to total beginners. You might want to give it a try. It works in Chrome, Edge, Firefox, and other browsers.

The following blog post includes a list of additional browser extensions for developers that you might find useful: https://mng.bz/6ejG.

You would likely find this Web Developer extension valuable when building and maintaining a site.

Automatic accessibility testing

Here’s how to run some tests of your own. Activate a theme in your WordPress installation (Appearance > Themes > Add New), and then get a Lighthouse report by viewing the frontend and pressing Ctrl-Shift-I in Chrome. Or, right-click, and choose Inspector from the pop-out menu. Click the Analyze Page Load button. Among other diagnostics, you can scroll down and see an Accessibility analysis that gives you a score and lists issues it found.

For example, it might report problems such as bad text/background contrast or poorly described buttons and links. However, do be aware that automatic accessibility analysis can’t test for all possible accessibility issues.

Also, add this very handy axe DevTools extension to your Chrome, Edge, or Firefox browser: https://mng.bz/oKNN.

Then, go to the frontend of the website where you’re testing a theme, and open the Inspector. On the menu to the right of Lighthouse, click axe DevTools and follow the steps to analyze your page for accessibility issues. The axe tool is both thorough and helpful—it spots many kinds of problems and suggests good solutions. If you prefer an efficient frontend for axe DevTools that also generates a detailed Microsoft Excel report, add the LERA extension to your browser: https://mng.bz/nRQv.

Here are some things to look for in a theme:

- Easy navigation via keyboard (no mouse interface required) for people who struggle with typing.

- Responsiveness displaying your site clearly on small screens for those in your audience with vision issues.

- ARIA roles to expand HTML for people with disabilities, especially those using assistive technologies such as screen readers, custom controls, and magnifiers.

- Color contrast options for visitors with low vision.

- A captioned tab order that makes traversing pages by pressing Alt-Tab clear, so a screen reader can identify each tab by the caption description.

- Captions for any embedded videos or audio so a visitor can decide whether to play that content.

- Closed captions for videos to make video content accessible to deaf and hard of hearing individuals via a textual representation of the audio. They also benefit individuals with learning disabilities or attention deficits to maintain their concentration.

- Alt Text descriptions of images for blind and visually impaired individuals using screen readers.

- Text resizing (zoom) for visually challenged visitors.

- Skip links.

DEFINITION Skip links are helpful for screen readers and keyboard-only users. These specialized links aren’t visible until someone starts tabbing through the various sections in a page (similar to filling out a web page form, where pressing tab takes you to the next field in the form). With this feature, people can jump over content they’re uninterested in, such as banners, long menus, or repeated content like the site title. Skip links can be kept hidden from mouse users who aren’t using a screen reader by adding CSS code like this: position: absolute; left: -999px. Examples include Skip to Menu and Skip to Next Headline.

8.7 Understanding permissions, attribution, and other legalities

The law is vast, evolving, and sometimes contradictory. But it can’t be ignored. Do you need to take steps to copyright your original content in your site? Do you need to avoid using content that’s not original? No and yes, apparently.

I’m not qualified to provide legal advice. What follows is what my research has revealed, but if you need advice on steps you need to take to remain within the law, do contact a lawyer. Please don’t consider what follows as legal advice. It’s merely a starting point for your own research, or to provide you with questions to discuss with a lawyer, or to caution you about things like plagiarism.

I’ve read that when you create new text, art, music, or any kind of original content, it’s automatically copyrighted. It’s covered as soon as you write it down, draw it, paint it, or otherwise make it tangible. And publishing a website clearly makes the content tangible. The automatic copyright gives you exclusive ownership. You have the sole right to distribute, display, reproduce, and grant reproduction permissions to the works. Work by others is also copyrighted this way. You can’t just lift their work and paste it into your site. (As often in the law, there are some exceptions.)

If that seems clear, it isn’t. I’m doing my best with this topic, so leave me alone. 🙂

Sometimes, copyright is only partial. For example, if someone publishes a pizza recipe, then their instructions, their description of the process, and any anecdotes or narratives are copyrighted. But the actual ingredients—dough, cheese, tomato sauce, pepperoni, onions—can’t be copyrighted. Nor can facts be copyrighted, such as the location of London or the date of the moon landing. These are considered absolute facts about space and time, regardless of what Einstein said. Also, different countries have different copyright and trademark laws.

Courts exist because legal issues can be interpreted in various ways. For example, now and then, someone brings a case against a musician because there is some similarity between their song and a later song (usually one that made a lot of money). The accusation must be adjudicated because there are degrees of similarity. If it’s too similar, the complainant cashes in. But given that the Western music scale only has 12 notes and only a limited number of rhythms that make any sense, similarities are bound to occur. Often these music copyright cases fail for the same reason that a painter can’t copyright a color. And as any creative person knows, one is influenced by the work of others.

It’s interesting that some people complain that AI paintings are inspired by previous human paintings. Well, most human painters also derive inspiration from existing styles. Until photography came along, new styles were quite rare. But when cameras could do a better job at realism, artists responded with an explosion of new styles, many silly or bizarre. These styles were often more a reaction against realism than an effort to find new ways to display beauty in visual form.

8.7.1 Mastering paraphrasing

Most authors research and learn from what others have published. But you can’t then just totally copy and paste someone else’s text. You must paraphrase it, which means putting things into your own words. You can repeat the facts, but not how they were worded by the other writer.

A new tool is emerging via AI—paraphrasers. You feed them somebody’s text, and they rewrite it, retaining the meaning of the text without simply replicating it. QuillBot (https://quillbot.com/) is a popular one. They say they have 50 million users. That application includes several features such as a plagiarism checker. I asked QuillBot to paraphrase the first half of an earlier paragraph in this section that starts with Courts exist . . .. Here’s QuillBot’s revision:

Because there are numerous ways to understand legal matters, courts are necessary. For instance, occasionally someone files a lawsuit against an artist over the similarities between their song and a subsequent song (typically one that was quite successful). There are varying degrees of similarity, thus the accusation needs to be evaluated.

Another popular paraphraser is Wordtune (www.wordtune.com). Like QuillBot, it has additional capabilities, such as allowing you to select a writing style (casual, formal), specify sentence length by shortening or expanding sentences, and others. Several reviewers say that Undetectable (www.undetectable.ai) is the best at these tasks.

8.7.2 Further legal questions

What if you took a video of your friends, but someone in the video prefers not to be seen on the internet? Did you get written permission from everyone at the gathering who is in the video? And anyone in the background as well?

To be on the safe side, you might want to have a lawyer draw up a permission form for photos or videos you use on your site. And get signatures from anyone visible in these media.

Can you embed someone else’s video on your site? Even if you get permission from the creator, what if there’s a copyright violation within their video. Maybe there’s a pro football game on TV in the background? Are you then secondarily liable?

You can’t just attribute or credit the owner of a video. Saying who created the video doesn’t necessarily free you from needing permission in all cases. Nolo provides a good tutorial on permissions: https://mng.bz/vKNx.

But YouTube does provide a legal way for you to embed others’ videos. YouTube says you can do it if the person who uploaded the video didn’t turn off the YouTube embedding option. Recall that earlier in this chapter, you uploaded a video to YouTube, and then clicked the Share option (refer to figure 8.5). An embed option was among several ways to share the video. So, if you see that embed icon (refer to figure 8.6), the owner of the video has implicitly granted permission to embed their video in websites. The embed option can be turned off, but you have to take these steps:

1. Set up a YouTube Content Manager for yourself.

2. After signing in, click your favicon (profile icon) in the upper-right corner of the YouTube screen.

3. Click YouTube Studio in the dropdown list.

4. Click Content.

5. Click to select the video you want to manage.

6. Click Settings on the left side.

7. Click Permissions.

NOTE Here is what YouTube itself has to say on this topic: www.youtube.com/about/copyright/fair-use/.

8.7.3 Finding free media

Another way to avoid copyright infringement problems is to use “free” media. Several online sources offer stock photos, music, and videos that you don’t have to pay for or get permission to use. However, you want to read their terms of service or licensing requirements because free doesn’t always mean free from restrictions.

For example, stock photo sites might allow you to use their content as long as you include attribution, or provide a link back to their site. Other free content can only be used for noncommercial purposes.

Nonprofit organization Creative Commons was set up with two purposes in mind: to allow content creators—video makers, photographers, artists, and musicians—to retain their copyrights while still permitting others (like us) limited use of the creations. The organization offers several variations of licenses that creators can choose from, granting various kinds of specific permissions for others to use their works. Some such licenses require that any derivative works (variations on the original) be in turn licensed under the same terms. Others forbid derivative works entirely. Some require attribution or noncommercial use only.

Several free content collection sites such as Flickr, Wikimedia Commons, Pexels, and Vimeo allow you to search for content based on which kind of Creative Commons licenses the content creators have chosen. This approach is more efficient for you because you don’t need to contact creators individually to seek their permissions. Following are some of the best free media resources:

- Creative Commons—https://creativecommons.org

- Pexels—www.pexels.com

- Flickr—www.flickr.com

- Vimeo—https://vimeo.com

- Freeplay Music—https://freeplaymusic.com

- Mixkit—https://mixkit.co

- Ikson—https://mng.bz/4aOB

- CFM Production—https://mng.bz/QDQm

- Unsplash—https://unsplash.com

- Wikimedia Commons—https://commons.wikimedia.org

- Pixabay—https://pixabay.com

8.8 Using the Gutenberg media blocks

At the time of this writing Gutenberg, the WordPress block editor’s audio and video blocks can be slow to load, and with some media, they don’t work at all. I recommend using third-party audio and video blocks. Click the + icon in the block editor to open the library of blocks, and then search for audio or video. You can find the built-in WordPress players, as well as quite a few third-party blocks. And, below that is a list of plugins that can be installed, as shown in figure 8.11.

Figure 8.11 You can display video using several blocks like these in WordPress’s block editor.

One of the best third-party media players is EmbedPress. It’s an embedding monster, able to manage 150 sources and file types, including maps, videos, PDF and DOC files, SoundCloud, Twitch, Flickr, Instagram, DailyMotion, TED, MixCloud, and 139 more. You can read about it here: https://wordpress.org/plugins/embedpress/.

Embedding with this plugin is simple in the block editor. You just copy a URL and paste it into the EmbedPress block. The plugin also works with the classic WordPress editor, as well as the Elementor page builder.

Using EmbedPress with the classic editor is even simpler—no block required. Just paste the source URL into the text box in an Edit Page or Edit Post screen. EmbedPress automatically creates the necessary code to display the embed. You can view the code by clicking the Text tab of the text box.

This chapter explored three primary topics: managing multimedia, ensuring accessibility, and legal issues you might encounter. Next, we’ll turn to how you can interact with your audience in a special kind of website page: the blog. It can serve one or more of these several purposes—providing fresh content, allowing your audience to interact with your site, offering customer service, and marketing your wares. The one drawback can be that if you permit your audience to send messages to the blog, you have to check that they are appropriate—not incendiary, vulgar, or otherwise unpublishable. Fortunately, WordPress includes some tools that can semiautomate this vetting process. AI can also make these judgements with considerable skill, as can—dare I say it?—you and I.

Summary

- A site without media looks pretty bare. But a site with media of the wrong size, or positioned in the wrong place, or otherwise inappropriate looks sloppy and amateurish. Ensure your media plays well with the other elements in your pages and is harmonic with the site’s overall purpose. In this chapter, you explored tricks of the trade to manage media effectively.

- Video files are enormous, and audio files aren’t all that small either when compared to text files. Even a standard definition video is roughly 20 times larger than an audio file of the same duration. So, your best tactic is to embed these media rather than trying to house them in your Media Library. Page load times will be faster, and you won’t burden your site’s database with unnecessary file storage.

- For several reasons, you want to make your site inviting and accessible to people facing diverse challenges—whether auditory, visual, or other. You can use various tools to both analyze and improve site accessibility.

- The law has something to say about using other people’s media or text content. And you don’t want to get a letter from a lawyer because you neglected to get necessary permissions or failed to display required attributions. Several sites offer free-to-use media, but you need to read their licensing requirements because free doesn’t always mean do whatever you want.

- So far, the WordPress block editor’s media blocks aren’t the best choice when it comes to adding media to your site. But there are excellent alternatives such as EmbedPress.

9 Using AI when interacting with your audience

This chapter covers

- AI tells you what to write in your blog

- Creating a custom GPT to respond to posts

- Providing blog navigation with categories

- Automating incoming message vetting

- Promoting your blog

- Understanding GPT’s custom instructions

- Creating a visitor email database

- Testing the five most popular AI systems

In spite of occasional predictions of doom, blogging is only slightly less popular than it was in its heyday 20 years ago. True, the rise of social media, such as YouTube and Facebook, is serious competition, but there’s still a big audience for blogs. And unlike some other media, blogs continue to score high as a trusted source of information.

Running a blog can be time-consuming because blogs that allow audience participation require that you vet (check for appropriateness and quality) every message that comes in. Plus, you have to post replies. Of course, you can set up a one-way blog that only features messages from you. But most visitors appreciate the ability to interact with a site.

Our goal in this chapter is to show you the various ways that AI can assist you in automating the tasks involved in managing a high-quality blog. I can’t give you tips on how and what to write—that’s specific to your site’s topic. And I don’t know what your topic might be. But someone can give you specific tips on how and what to write. You guessed it! Ask AI.

In this chapter, you’ll learn several ways that AI can help you understand how and what to write in your blog. First, we’ll have AI critique one of our blog messages and suggest how to improve it. Second, we’ll ask AI to write catchy blog post titles for us. But before getting into these topics, let’s define what a blog is.

9.1 Blog defined: An overview

The term blog is derived from web log, and originally it was a kind of journal, a running account of someone’s life or thoughts. Then, it was called weblog, and finally, just blog.

A blog (there’s usually just one blog page in a site) is unlike other web pages in three ways: expected to be frequently updated; can optionally publish messages from the site’s audience; and is a searchable archive of previous blog messages. However, if you fail to post new content in your blog regularly and often, your visitors are likely to stop coming. And search engines can downgrade you because you’re not providing fresh content.

Blogs are often valued because they allow the audience to interact with the site’s owner. (Be sure to respond promptly to incoming messages if you want to maintain a successful blog.) A blog can also serve as a kind of customer service organ for a business, or a place to post announcements for a club or church. In addition, blogs can

- publish a list of tips.

- list pets available for adoption, items for sale, or similar offerings.

- improve a site’s search engine optimization (its rank in a Google or AI list) if the blog page demonstrates that a hybrid site (the blog page plus additional relatively static pages) is frequently updated and has fresh information.

- make sales announcements or otherwise promote e-commerce.

- humanize a business, providing personal anecdotes or answers to questions.

- build a brand.

How a blog operates depends on your theme, the version of WordPress you’re using, or plugins you install. The traditional blog contains a reverse chronological list of posts. It displays these messages in a single column that can be scrolled. More recent WordPress default themes include an Archives module in the blog page that lists links grouped by month. When a month is clicked, only those messages posted during that month are displayed. Another recent variant is a three-column display of the messages.

9.2 GPT to the rescue: How to write for your blog

GPT lets you create your own custom GPTs. You can build specialized GPTs with their own learning (data you give it) and specific skills. Your custom GPT will be powered by GPT itself. But it’s a fine-tuned version, fed data and given guidelines to proficiently perform specific tasks you request.

Custom GPTs are specialists in a particular domain, such as law, or, in our case, blogging. If your needs are generic, you could also search for one that someone else has already built.

For this next example, we’ll use a GPT named Blog Evaluator by Zbigniew Lukasiak. Run GPT, and then in the dashboard on the left, click Explore GPTs. Search for Blog Evaluator. Click Blog Evaluator to run it.

Here we’ll look at how to use Mr. Lukasiak’s custom GPT from the GPT Store, and then in the next section, we’ll create our own custom GPT. A wizard built into GPT will take us step-by-step through the process.

TIP As of June 2024, there are more than 3 million custom GPTs and 160,000 are available in the GPT Store. You’ll likely be using this Explore GPTs feature in the future, so add it permanently to your GPT dashboard by clicking the small down-arrow icon next to the custom GPT’s name in the upper left. Then, click Keep in Sidebar.

Now back to that Blog Evaluator. Click Please Evaluate This Essay. Then, paste one of your blog messages into the Message Blog Evaluator field in GPT. I submitted this sample blog entry by pasting it into the Message Blog Evaluator field:

My best advice about using the Instant Pot for pressure cooking is to ensure it doesn’t burn anything, and is able to reach pressure, by always adding 1 cup of water (or broth or whatever liquid) to the 6 qt. IP. If you don’t want your meat or other ingredient to be boiling in the water, insert one of the racks that came with your IP.

The Blog Evaluator came up with this response:

Thank you for sharing the essay excerpt. I’ll now evaluate the major claim and the reasoning supporting it.

Major Claim:

The advice for using the Instant Pot for pressure cooking effectively is to always add 1 cup of liquid (water, broth, etc.) to the 6-quart Instant Pot to prevent burning and ensure it reaches pressure. If you don’t want the ingredients to boil in the water, use a rack.

Evaluation:

Claim: Always adding 1 cup of liquid to the Instant Pot prevents burning and ensures it reaches pressure.

Grade: C-

Reasoning: The essay states a clear recommendation but does not explore the possibility of this advice being incorrect or less effective in certain situations. It does not consider exceptions or alternative methods, nor does it discuss why this specific quantity of liquid is recommended.

Claim: Use a rack to prevent ingredients from boiling in the water.

Grade: C-

Reasoning: This is a practical suggestion, but the essay doesn’t provide reasoning or evidence to support why using a rack is beneficial, nor does it acknowledge any limitations or alternative approaches.

Overall Grade: C-

The text provides straightforward advice but lacks depth in its reasoning. It does not consider potential counterarguments, different scenarios where this advice might not apply, or the reasoning behind why these specific methods are suggested. It neither explicitly claims its advice is the only correct method, nor does it acknowledge the possibility of being incorrect. Therefore, it receives a C- grade as it neither firmly asserts its correctness nor considers its potential fallibility.

So, this custom GPT suggested expanding the post to include alternatives to using liquid and a rack. Your blog post might improve if you mention these exceptions.

TIP Want to find the best third-party custom GPTs for various purposes? There’s a good custom GPT for that. Run GPT, click Explore GPTs, and search for GPT Finder (by Skill Leap AI, https://skillleap.ai). Click GPT Finder to run it.

9.3 Creating a custom GPT: AI-generated message titles

Years ago, editors at Cosmopolitan magazine started using numbers in their article titles: 22 Ways to Decline an Invite, 7 Books to Read this Summer, and so on. The trend caught on. Consider including numbers like that fairly often in your post titles. The reason? It gives your audience the impression that you’ve really researched this topic so what you’re saying is comprehensive. You discovered that there is a total of “22 ways.” No more, no less.

Also, you want to use punchy, shorter titles, no longer than nine words usually. And the titles should include active, emotive words like confirmed, alarming, staggering, revealing. Now and then, you should also use some question titles: Do you know when to plant bulbs? Note that most people submitting messages to your blog won’t title them, so you’re responsible for titles for both your posts and your visitors’ posts.

Avoid tired generic terms like easy or quick. Instead, describe how the reader benefits from the post: Save Money at the Doctor’s Office. And be specific. Instead of The Best Way to Cook Fish, use Fry Salmon in an Instant Pot.

What kinds of titles work best will depend to some extent on your site’s focus and audience. So, it’s a good idea to A/B test versions of headlines using analytic techniques described in chapter 12. And, of course, involve your AI GPT title-writer assistant in coming up with strong titles. Let’s see how to do that by creating our own purpose-built custom GPT blog title writer.

9.3.1 Creating your own GPTs: A use case

To build your own custom GPTs, you follow several steps using GPT’s custom GPT wizard. Tell it how to perform a specialized, particular task. Then, you can reuse this expert assistant anytime. You can give your GPT instructions, feed it data, and describe its skills.

Let’s try this out by building our own custom GPT that’s an expert at writing catchy, effective blog message titles. It reads the message and then gives us some titles to choose from. Note that to create custom GPTs, you need to have a paid subscription to ChatGPT. (Free plan users can, however, use existing custom GPTs.)

Follow these steps:

1. Go to the GPT home page at https://chatgpt.com. Then, click Explore GPTs on the left sidebar.

2. Click the Create button top right.

3. You’ll now see the GPT Builder screen.

4. Type this into the empty field: Make a headline writer who specializes in creating a list of catchy titles for blog posts.

5. Press Enter to send that message to GPT.

6. After considering your request, GPT will suggest a name for this new GPT. You can use the suggestion or edit it.

7. Then, GPT suggests an icon. Again, accept the icon or suggest changes.

8. GPT will now ask you to provide guidance about the kind of content you want. Always remember that AI bots are now capable of understanding instructions of considerable nuance and length. And they’re getting better all the time at accurately grasping the meaning of natural language, even idioms. In other words, the best AIs now immediately understand the different meanings of the word cool in “this theater is cool inside” versus “that was a cool movie.”

9. Type (or paste) the following extensive guidelines into the content guidance field: The suggested titles should be appropriate to the content of the blog message being titled. Provide five titles. Use no vulgarity or highly technical words. The titles should be no longer than nine words. Years ago editors at Cosmopolitan magazine started using numbers in their article titles: 22 Ways to Decline an Invite, 7 Books to Read this Summer, and so on. The trend caught on. Experts claim it can be a good idea to include numbers like that fairly often in your post titles. The reason? It gives the impression that you've really researched this topic and what you're saying is comprehensive. You have discovered that there is a total of "22 ways."

Also you want to use punchy, shorter titles, no longer than nine words. And include active, emotive words like confirmed, alarming, staggering, revealing. Also, now and then use some question titles: Should you shower daily? Avoid tired generic terms like easy or quick. Instead, describe how the reader benefits from the post: Save Money at the Doctor's Office. And be specific. Instead of The Best Way to Cook Fish use Fry Salmon in an Instant Pot. These blog messages are about recipes for the Instant Pot, so the titles should employ a vocabulary appropriate to cooking or using the Instant Pot or recipes.

10. Now to specify how you want your GPT to interact with you, type this: If the blog post you're titling is in some way vague or unclear, please ask for more details.

11. Then, when asked about what tone or style you’re after, type The tone should be friendly, conversational, brief, and clear.

12. At this point, you can suggest further refinements if you wish. For instance, request additional examples of great titles, or list the titles in the order of the AI’s opinion of their quality, and so on.

13. When satisfied, type Yes to be taken to the Playground where you can test your custom GPT. Here’s a sample blog message that you can submit to the GPT to title: To prepare rice using the Instant Pot, initiate by washing the rice under a chilly stream of water until the water appears clear, this helps to eliminate surplus starch. Following that, place 1 cup of rice and an equal amount of water into the Instant Pot. Secure the lid and adjust the Venting Knob to the Sealing Position, then commence pressure cooking at High Pressure for a duration of 3 minutes.

Once the cooking phase concludes, let the Instant Pot naturally depressurize for a span of 10 minutes, afterwards rotate the Venting Knob to discharge any residual pressure. Swiftly lift the lid and aerate the rice using a fork prior to serving. It's crucial to recognize that the proportion of rice to water and the cooking duration could differ slightly based on the variety of rice being cooked. For instance, white rice such as basmati or jasmine ought to be pressure cooked for 5 minutes, conversely, long-grain brown rice might necessitate 10 minutes.

14. Our Headline Helper responds with this:

“Instant Pot Magic: Perfect Rice in 3 Steps”

“5-Minute Basmati Bliss: Instant Pot Rice Guide”

“The Ultimate Instant Pot Rice Cooking Cheat Sheet”

“Rice Perfection: Instant Pot Secrets Unveiled”

“Instant Pot Mastery: Rice Varieties Made Simple”

Good ideas. Click the Save button to store the GPT. Then, close GPT.

WARNING It’s probably not a problem with titles, but if you use AI to generate blog messages, always remember to either rewrite them or have an AI paraphrase (Undetectable, https://undetectable.ai/). You’ll avoid charges of plagiarism that way. And for now, you should fact-check AI’s responses. Perplexity.ai is often a good resource because it provides citations for its assertions. That makes fact-checking easier for you. I say for now because AI systems don’t rest on their laurels. They continually advance and at a startling rate of speed. More recent systems—such as Google Gemini’s Ultra version—are even less apt to give you errors or to hallucinate.

9.3.2 Modifying a custom GPT

You can at any time modify your custom GPTs. Here’s a quick example. In the previous section, we created a Headline Helper GPT, and we’ll be copying and pasting the titles we select from it. But GPT decided to put its headlines in quotation marks. No need for that. Let’s return to GPT and modify the Headline Helper GPT:

1. Open GPT.

2. Click the gray circle on the upper-right corner, and then click My GPTs.

3. Click the Edit GPT icon shown in figure 9.1.

4. You’re taken to the GPT Builder editing screen and asked if you want to improve it in some way. Type the following:

Figure 9.1 Click this icon to edit one of your GPTs.

When you provide your responses, don’t put quotation marks around them.

GPT will say this:

Changes noted! Headline Helper will now provide responses without quotation marks for a more seamless experience. Anything else you’d like to adjust or any other feedback?

Unfortunately, when I tried it again, it still added the quotation marks. I asked it again, and the second time, GPT did get the message.

9.3.3 Advanced custom GPT options

After using the custom GPT Wizard, you can further refine your GPT at any time. Go to the GPT Builder and click the Configure option. You can modify quite a few things in this section:

- Click the icon image that represents your GPT. Then, you can generate or upload a different image if you prefer.

- You can change the name and description.

- In the Instructions field, you’ll see the directions you gave GPT regarding its role and purpose, things you want it to avoid, guidelines and clarification, and the style and tone of the response. Also, any additional instructions gave later on (like not using quotation marks) will be included here. However, my GPT kept reverting to using quotation marks, so I tried telling it not to in this Instructions field. Even that didn’t work. It just kept adding quotation marks. Finally, I included that request in the prompt. At last, GPT stopped using quotes. And I responded by thanking GPT for correctly leaving them out and said, “Good job.” Some prompt engineers think that this kind of complimentary reinforcement helps GPT learn and remember better. In any case, that problem has now gone away.

- Under Conversation Starters, you’ll see some sample prompts tailored to this particular GPT version.

- The Knowledge section is where you can upload data files to enrich the quality and depth of GPT’s responses. The types of files you can upload are text (.txt), JSON(.json), PDF (.pdf), PNG (images), Microsoft Word documents (.docx), HTML(.html), and CSV (.csv).

To test this, I uploaded this entire chapter from this book as a .docx file:

Please read this file I uploaded and provide titles for it.

Based on the content of the document “Interacting with Your Audience in WordPress,” here are five engaging headlines:

“AI-Powered Audience Engagement in WordPress”

“Harnessing AI for Enhanced WordPress Interactions”

“Revolutionize Your Blog with WordPress AI Tools”

“AI Strategies for Boosting WordPress Audience Engagement”

“Maximizing WordPress Interactivity with AI Innovations”

These titles emphasize the integration of AI in engaging and interacting with the audience on WordPress, appealing to readers interested in using AI technology for their blogs.

This result is pretty good. GPT read the entire chapter in 2 seconds and provided five more or less usable titles.

TIP To educate your custom GPT on the nature of your blog’s posts, you can upload the entire blog contents as a database for your custom GPT. Go to the frontend of your site, go to the blog page, press Ctrl-A to select everything, paste it into Notepad, and then save it as a .txt file you can upload to GPT. You might also need to repeatedly select and copy posts if they are organized by month or some other category. You’ll have to provide GPT with information on how to parse this file of posts (how to know when one post ends and the next one begins). Creating parsing instructions for GPT will be explained in section 9.6.3 later in this chapter.

- The Capabilities section is where you can add additional functionality to your GPT, including Dall-E image generation and web browsing.

- Finally, the Actions section allows you to add one or more external APIs to your GPT.

Let’s now take a brief look at a couple of blog features that don’t (necessarily) need to involve AI.

9.4 Using categories and tags

If your theme doesn’t provide a useful search feature, add a search widget in the sidebar, or a plugin. You want to allow your audience to be able to quickly find what they are interested in. Here are two quality plugins: Relevanssi (https://wordpress.org/plugins/relevanssi/) and SearchWP (https://searchwp.com/). Every site should have a search tool on each page.

In the blog page, however, there’s an alternative to using the search tool—clicking categories, subcategories, and tags. Unlike a search field, visitors don’t have to type in anything. Instead, they can just click a category or tag. That redraws the blog, displaying only those messages that were thus categorized or tagged. Note that we’re talking only about the blog page here. Don’t be misled into thinking that these categories have anything to do with the site’s menu of page titles.

As the administrator, you can create categories and tags in the Posts > Categories or Posts > Tags screens. When you’re ready to post a message, you assign categories or tags to each message by hand in the Posts > All Posts > Edit Post screen. You can create new categories and tags in the Edit Post screens as well.

Categories, subcategories, and tags are displayed in your blog page for the visitors to click. And they form a hierarchy, with Categories being at the top showing a few broad topics. Next comes the set of subcategories. Finally, tags are the most granular, and display the largest set of terms. Think of categories as similar to a book’s table of contents, and tags as an index. For example:

- Categories—Cruise, Flight, Car

- Subcategories—America, Europe, Asia, South America, Africa, Australia

- Tags—Las Vegas, New York, Miami, Paris, London, Rome, Bangkok, Singapore, Tokyo, Rio, Machu Picchu, Buenos Aires, Cape Town, Cairo, Marrakesh, Sydney, Melbourne, Gold Coast

You can create a subcategory by clicking the name of a post in the Posts > All Posts screen. Then, in the Edit Post screen, click the name of this subcategory’s parent category to select it in the Categories module on the right. Click Add New Category. Type in the name of the subcategory. Open the dropdown list of parent categories, and then click the name of the category of which this will be a subcategory.

TIP You could feed your entire blog to a custom GPT that you designed to come up with a set of categories, subcategories, and tags. The GPT would be taught the difference between these three little clouds of links. It should also be told that you want 6 categories, 10 subcategories, and 20 tags. And then instruct it to build these category clouds by counting the frequency in the blog of nouns, verbs, and gerunds (a verb form that actually functions as a noun, like “we also offer dog grooming”). You would want to reuse this category GPT now and then. Why? As the blog grows larger, the categories and tags should be adjusted to reflect current blog topics.

9.5 Hiding date stamps on blog posts

Posts are usually date stamped by default. But you might have reasons to remove the dates. Perhaps you don’t want to advertise that your posts are infrequent, or you want to make the messages appear to have continuing relevance. Also, date stamping isn’t of much use in some kinds of blogs—those that display items for sale or those going for a magazine-style presentation, for example.

You can suppress the date stamping by using the YellowPencil plugin (refer to chapter 7). It would automatically generate CSS code to hide the dates. You can then add this code to your Appearance > Customize > Additional CSS screen:

.entry-footer a .entry-date{

display: none;

}

Note that this selector (.entry-footer a .entry-date in this example) will likely not be the same words in your site. So you would go to the Edit Post screen for one of your posts, and then click Edit in YellowPencil. When you’re in the YellowPencil editor, click the date stamp in one of the posts to select it. Then, press the E key to open the CSS Editor. The CSS selector words for your date stamp is displayed in the CSS Editor, as shown in figure 9.2.

Or use a plugin that specializes in managing metadata. Information stamped on posts, such as the author’s name, the date, and so on is called meta information, and it can be easily modified by using the popular WP Meta and Date Remover plugin.

Figure 9.2 After you’ve modified a page element (like this date-stamp selector) in the YellowPencil interface, press the E key to view the CSS code that YellowPencil generated for you.

9.6 Vetting incoming messages

Surely you don’t want to just throw open your blog’s door and automatically publish every blog message random people sent to your site. Here are several reasons you need to review (vet) posts before allowing them to become public in your blog. Messages can contain the following:

- Spam

- Vulgarity

- Inaccurate information

- Off-topic content

- Prejudicial, cruel, or other inappropriate comments

- Worse vulgarity

- Copyright violations

- Substandard quality (typos, misspellings, grammatical problems, redundancy, uninteresting content)

Then there’s spam. It often contains information that’s simply irrelevant to your site’s topic or includes repeated, redundant content. Publishing junk like that will have a negative effect on the score that Google, Perplexity, GPT and other search tools give your site. And, of course, it will discourage people from bothering to keep reading your blog.

So how can you prevent spam or other unwanted messages from appearing in your blog? WordPress says that blog visitors send in around 77 million comments per month to blogs. And if your site becomes popular, you can imagine how much time it could take to personally approve each post yourself.

Some bloggers don’t let the audience participate at all. It’s not required that you permit incoming posts from your audience. And some site owners just refuse to—it’s simply too much bother to vet them.

9.6.1 Vetting messages by hand

But given that an interactive blog can be valuable to both you and your audience, you might choose to keep it a two-way street of messaging. Fortunately, WordPress provides several ways to assist you with vetting incoming messages. We’ll look at those options first, and then see how AI can also help.

Go to your Settings > Discussion screen, and then scroll down to the Before a Comment Appears section. You can cut down on having to vet messages yourself by selecting the option that automatically publishes messages from visitors that you’ve previously approved. To use this feature, check both options: Manually Approve and Previously Approved.

Below that, you can find another semiautomatic filtering system. Incoming messages that you need to approve are put into the WordPress moderation queue (it’s the Comments option on the main WordPress Dashboard). So, in the Settings > Discussion screen, in the Comment Moderation section, you can either route an incoming comment to the queue, or send it directly to be published in the blog. WordPress makes its decision based on words you list or other elements such as URLs.

And below that is a Disallowed Comment Keys field that decides between publishing or just automatically trashing a message. This decision is based on the same criteria as the Comment Moderation field above it. If the message includes the word ****, into the trash can it goes.

WARNING If you make any changes to the Settings > Discussion screen, you must scroll all the way down to the bottom of that screen and click the Save Changes button.

TIP If you find you need a more robust or flexible system to automatically block incoming spam, consider adding the Akismet plugin. It uses AI to detect spam. This freemium plugin doesn’t require much setup, and it’s in use by 5 million sites.

Forms are the other common entrance for spam (and sometimes inappropriate content). For some sites, it can be valuable to have people fill in a form from which you can harvest your visitors’ email addresses or other information about them. Probably the best way to automate blocking bad or fake form submissions is to install the WPForms plugin. Among other features, it includes anti-spam protection such as captcha—a visitor must solve a puzzle or math problem before a form can be submitted to your site. We’ll revisit forms later in this chapter.

9.6.2 Using AI to vet incoming messages automatically

Soon, somebody will create a WordPress plugin that can automatically read incoming posts, judge them, and publish the ones it considers publishable. You won’t need to be involved at all!

But at least for now, AI can read all the incoming messages, so you don’t have to. You do though have to paste incoming posts into GPT and ask it to list the ones it deems OK to publish. Have GPT read and judge them for you. To test this, follow these steps to get your text ready for GPT:

1.  Go to your site’s backend, and in the Plugins > Installed Plugins screen, deactivate the SeedProd plugin (or any other plugin that displays an Under Construction home page). You want to pose as a new visitor to the site and add a couple of posts that need to be vetted by GPT. So we can try this AI vetting system.

2.  To avoid cookies, use a different browser than the one that you used to create your WordPress site, and go to the frontend (not the backend sitename.com/wp-admin, go instead to sitename.com).

3.  In the menu, click the blog page’s name.

4.  Then, reply to a couple of posts. Make one reply acceptable and one that should be rejected because it’s full of anger or is ungrammatical or something.

5.  Now, in your usual browser, go to your site’s backend, and you’ll see that there are two new comments pending approval in the dashboard, as shown in figure 9.3.

Figure 9.3 This icon tells you there are two new comments awaiting approval.

6.  So, click Comments to get to that screen.

7.  Now, drag your mouse to select the two posts that need to be judged by GPT, as you can see in figure 9.4.

Figure 9.4 By selecting and copying any new comments, you can then submit them to GPT for its decisions.

8.  Press Ctrl-C to copy these comments. You might need to paste into Notepad, and then select and copy from there to get rid of hidden codes—you want just plain text.

9.6.3 Parsing and judging posts

Our job now is to paste the messages at the end of our prompt and tell GPT how to locate the message itself instead of other details such as the author’s URL. In other words, GPT has to parse the messages to extract only the actual message text itself. So, go to GPT, and give it this prompt:

I run a blog about bass fishing in North Carolina’s Randleman Lake. You are my assistant, and you’re a moral, upright, and kind person, and a good judge of right and wrong, and a good critic of blog messages. You will look at each text message I submit to you, and decide if it is appropriate. Appropriate means it’s about fishing, contains no vulgarity, no swear words, no hate, no controversial content like talking about politics or religious topics, and no poor spelling or grammar. So, after you get a text message I submit to you, read through it, and if it’s appropriate, display the message, and in one sentence, explain why you found it appropriate.

You will need to parse each message. Here’s how:

The messages are delimited by IP addresses. In each comment, locate the IP address. Then, move down to the next lines in the comment (until you reach a CRLF). Judge these lines for appropriateness. If it is appropriate, display that comment and your reason you approved it. But don’t display the IP addresses, and only display the comments you approved.

George Madison

m52xx@hotmail.com

192.158.238.209 In reply to admin.

I hate people like you so many different ways..

Mew

View Post

2

2 approved comments11 pending comment

2023/12/13 at 3:03 pm

Select comment George Madison

m52xx@hotmail.com

192.158.238.209

Your blog is great and it really helps me when I go fishing.

I really want to complement you.

GPT responded correctly:

The message from George Madison stating, “Your blog is great and it really helps me when I go fishing. I really want to compliment you,” is appropriate because it positively acknowledges the blog’s helpfulness in fishing, contains no vulgarity, hate speech, or controversial content, and is well-written.

Once you have GPT’s list of approved posts, you can search for them in your WordPress backend Comments screen and mark them approved for publication in your blog. This entire job can be automated using systems such as Zapier (https://zapier.com/apps/wordpress/integrations) or using a plugin to fetch and judge incoming posts. And that should be available quite soon I believe. However, in the meantime, this semiautomatic vetting process can be used where you have to copy and paste the posts.

WARNING We had to provide GPT with a way to locate the start and end of each message. The start is the URL (for example, 192.158.238.209), and we say move down to the next lines following that URL until you come to a CLRF (an empty line with no text). So, if you’re not getting good results, ensure that there is a blank line between each comment. WordPress does insert this blank line so it should survive the selecting, copying, and pasting process when you’re fetching the unreviewed posts from the Comments screen.

Master Windows Pasting

When pasting text, you often get odd formatting—the wrong size text, or it otherwise doesn’t match the surrounding text format. To solve this, go to the Microsoft store and install Power Toys:

https://apps.microsoft.com/detail/xp89dcgq3k6vld?hl=en-us&gl=US

Then in Power Toys, turn on the Paste as Plain Text feature. Then paste using the keyboard shortcut CTL_Windows+ALT+V. This often comes in handy when hidden formatting codes mess up a paste.

You might also want to play around with these five other popular Power Toys: FancyZones, Image Resizer, Always on Top, PowerToys Run, and Mouse Utilities. Ask Perplexity to describe their uses. You’re sure to find at least one that you’ve always needed.

9.7 Using GPT’s custom instructions

GPT’s custom instructions feature is similar to the custom GPTs feature explored earlier in this chapter. However, custom instructions are simpler and more limited. Essentially, they allow you to save a prompt that you’ll be using frequently, so you need not type it in each time, just select the custom instruction. Click your name in the lower-left corner in GPT, and then click Custom Instructions. Then, you can fill in the two fields, as shown in figure 9.5.

Figure 9.5 If you’ll be using a particular prompt over and over, save it as a custom instruction.

Click the Save button, and you’ll see Custom Instruction or some other name listed on the dashboard. It will be the name immediately under the Today title in the dashboard. Hover your mouse on that name and click the three dots. Then, rename the custom instruction (Vet Posts would work) so you can submit it as part of a prompt.

Custom instructions can be structured like ordinary computer programs (or typical recipes for that matter): there are two zones, the instructions (source code or recipe steps) and the data (the information that the instructions work with, like the recipe ingredients). So, it helps GPT if you add the term “Data” to separate the instructions from the data. To see how this works, start a new chat. For the prompt, just use this shortcut version:

Vet Post:

Data:

George Madison

m52xx@hotmail.com

192.158.238.209 In reply to admin.

I hate people like you so many different ways..

Mew

View Post

2

2 approved comments11 pending comment

2023/12/13 at 3:03 pm

Select comment George Madison

m52xx@hotmail.com

192.158.238.209

Your blog is great and it really helps me when I go fishing.

I really want to compliment you.

You do need to let GPT know where the instructions end and where the data starts. In the preceding example, “Vet Post:” tells GPT to look up and use that custom instruction. And “Data:” tells GPT that this is the start of the data it should process.

9.8 Understanding memory in GPT version 4o and later

GPT has a memory now, and it’s an improvement on the custom instructions feature. If during a chat, you say “Remember this,” GPT will permanently remember what you say next. Or, if in a conversation, you just provide some personal detail (like “I really enjoyed Remembrances of Earths Past”), it automatically commits statements like that to its memory.

GPT will remember (for use in future chat sessions) things such as your pets, partner, preferences, and projects. It’s getting to know you, getting to know all about you.

I asked GPT to list typical kinds of details it commits to memory:

Your name and preferred pronouns; your location or city of residence; your favorite hobbies or interests; your occupation or field of work; specific preferences such as your favorite authors or genres of books; your preferences for communication style and tone; important projects or tasks you’re working on; your educational background and degrees earned; significant events or milestones in your life; your favorite foods or recipes you like to cook; details about your family members or close friends; your favorite movies, tv shows, or music; preferred tools or software you use regularly; any ongoing health concerns or medical conditions you want it to remember; and info that you specifically request I remember.

Changing what GPT remembers

It’s easy to remove, modify, or add to what GPT remembers. Just give it this prompt:

Show me what you remember.

It then displays a numbered list of each memory, and ends with this:

Is there anything you would like to add, update, or remove from this list?

9.9 Promoting your blog

If you’re interested in creating a community of visitors around a blog and growing your audience, you’ll want to actively promote the blog. Link to the blog in your social media and other platforms. And, in Facebook and elsewhere, join groups relevant to your content and encourage them to click a link that lets them see what you’re offering.

You can contact other bloggers with the same topic as yours and link to each other’s blog. Also, post in these other blogs to cross-promote. Consider making videos of your blog posts’ content and uploading them to YouTube. Add media to posts, such as images, videos, charts, and infographics.

Finally, you can improve your blog traffic by using analytics (various data on visitor behavior recorded by plugins, which will be covered in chapter 12). Analytics plugins can give you valuable statistics on how visitors behave when viewing your blog:

- Which posts are most popular, and which are only briefly looked at before moving on? If visitors spend a fair amount of time on a given page or post, it’s holding their attention.

- What pathway do most visitors take through your site? Are they rarely even coming upon the blog page?

- Can you improve blog page visits by clarifying the blog’s title on the menu?

- What about the blog page’s bounce rate (the percentage of visitors who leave your site from within the blog)?

- What demographic are you attracting? What’s the location, gender, and age of your audience?

- Where are your visitors coming from (social media, a bookmark in their browser, search engines, other blogs)? If referrals from other sites, perhaps you can partner with them?

- What phrases and keywords are visitors typing into search engines to discover your site?

- How many of your visitors go from a blog post to your e-commerce page to make a purchase?

This and additional data can help you understand your audience and improve your blog content in a variety of ways. You can feed your entire blog to an AI system, and then ask it for suggestions on where and how to promote your blog to grow an audience appropriate for your topic. As time goes on, chatbots are likely to become able to manage unlimited amounts of data in a prompt (or an uploaded file). After all, they’ve been scraping the entire internet for their memory bank. But for now, prompts have these various limits in the different systems:

- Custom GPTs can accept 1.5 million characters.

- Claude.ai says it has no limit to the number of characters (but it might respond better to shorter prompts).

- Perplexity says it can only handle 4,096 tokens at a time.

- Bing claims 15,000 characters, but provides this workaround: https://mng.bz/XxgY.

- Google’s Gemini Pro says it has no hard and fast limit to the number of characters, and it actually likes large data because that’s a way for it to learn more things. However, it also notes that “Complex prompts can sometimes become overwhelming.” Large data isn’t, however, necessarily the same thing as complex data. The entire London phonebook isn’t complex; E=mc^2 is. And, in any case, Gemini Pro’s big sister Gemini Ultra is said to be quite superior to Pro.

9.10 Harvesting email addresses

Collecting email addresses from your visitors can be valuable. For one thing, you can require an address before allowing someone into the blog or any pay-to-view areas in the site. That’s an excellent way to block spam or to require payment for special content. If your site is typical, you’ll find that having your visitors’ email addresses will be useful in more than just one way. Consider these points to see if your site would benefit from a contact form or other type of form that lets you build an email database:

- Email marketing is said to have the best return on investment of all types of online marketing. And, it’s easily automated.

- You can help keep your site in your audience’s mind by showing up now and then in their inbox. It’s a way to build relationships, trigger return visits, and publicize your brand.

- Send special offers, news items, or other content to increase the number of return visits to your site.

- Email can be an effective way to market your e-commerce.

- If you have a visitor’s email on file, you can interact with them by sending a password reset, an order confirmation, a notice of shipment, and similar customer service transactions.

- You can request feedback that could show you ways to modify your design or functionality to improve your visitors’ experience.

TIP Tell your audience that you’ll only use their email for stated purposes and that it won’t be traded or sold to anyone.

9.11 A fun AI IQ test

People have given AI a variety of tests: IQ, SAT, Bar exam, US Medical Licensing Examination, and others. It generally does remarkably well. For example, ask an AI this:

If there are 500 murderers in a room and I kill one of them, how many are left?

Most AIs get it right:

500 because you just became a murderer too.

We’ve been testing various AI capabilities in this chapter, indeed throughout the entire book, so now let’s give AIs a pretty tricky question. We’ll see how the five most capable and popular AI systems do when answering it (or not). Only one of them actually gets it right! (The others will catch up soon however, I expect.) The prompt is as follows:

ejsy fprd yjod ,rddshr dsu? Can you translate this?

Anthropic’s Claude (often a bit long-winded) responded:

Unfortunately, I am unable to translate that text. It does not appear to be written in a recognizable language or cipher.

To translate text, it generally needs to be composed of real words in a known human language that uses some established writing system. Without recognized vocabulary and structure, AI systems like myself do not have enough patterns to decode a reliable translation.

If this was an attempt at masked or obscured text, please provide the actual original text you were hoping to translate. I’d be happy to try translating it if provided clearly in a standard human language. Otherwise, consider restating what you’d like translated into plain language so I can better understand and assist. Let me know if you have any other questions!

Google’s Bard became apologetic:

I’m sorry, I can’t translate that for you. It appears to be a random sequence of letters and doesn’t seem to be any language I know of. If you could provide some context or more information about where you encountered this phrase, I might be able to help you translate it.

Perplexity was perplexed:

The provided text “ejsy fprd yjod ,rddshr dsu” does not appear to be a recognizable or meaningful phrase in any language. It seems to be a random sequence of letters and symbols. If there is a specific context or language associated with this text, please provide additional information for a more accurate translation.

Microsoft’s Bing went totally off the rails and gave an answer that was just plain bananas:

The text you sent is not in a recognizable language. However, I can help you translate it to English using Google Translate^1. The translation of the text is: “what is the price of a banana in Sumner?”. I hope this helps!

GPT (v4) is the champion. Got it right, and for the right reason too:

It seems like the text “ejsy fprd yjod ,rddshr dsu?” is a mistyped or jumbled message. To decipher it, I’ll assume it’s a simple keyboard shift error (where each letter is replaced by the one directly next to it on a QWERTY keyboard). Let’s decode it under this assumption.

The translated text is “what does this message say?”

Quite a brilliant solution, you must admit. How many humans (not to mention rival AI systems) could figure this out? Few. Very few.

This prompt required the chatbots to reason, to solve an encrypted message. And GPT is now actually letting you follow its reasoning. It now ends its responses—those that required reasoning or logic—by displaying the small symbol in brackets, as shown in figure 9.5.

Figure 9.5 This blue, bracketed symbol, if clicked, will show you GPT’s reasoning—the steps it took to solve a prompt that required analysis.

When I clicked that bracketed View Analysis icon shown in figure 9.5, GPT revealed its thought process in the following pseudocode:

# Decoding the scrambled message by shifting each character to the left on a QWERTY keyboard

def decode_shifted_message(message):

# QWERTY keyboard layout

keyboard_layout = {

'q': '1', 'w': '2', 'e': '3', 'r': '4', 't': '5', 'y': '6', 'u': '7', 'i': '8', 'o': '9', 'p': '0',

'a': 'z', 's': 'x', 'd': 'c', 'f': 'v', 'g': 'b', 'h': 'n', 'j': 'm', 'k': ',', 'l': '.', ':': '/',

'z': '`', 'x': 'q', 'c': 'w', 'v': 'e', 'b': 'r', 'n': 't', 'm': 'y', ',': 'u', '.': 'i', '/': 'o',

'1': '`', '2': '1', '3': '2', '4': '3', '5': '4', '6': '5', '7': '6', '8': '7', '9': '8', '0': '9',

'-': '0', '=': '-', '`': '=', '[': 'p', ']': '[', '\\': ']', ';': 'k', “'”: 'l', ',': 'm', '.': ',',

'/': '.', ' ': ' '

}

decoded_message = ""

for char in message:

if char in keyboard_layout:

decoded_message += keyboard_layout[char]

else:

decoded_message += char

return decoded_message

# Decoding the given message

decoded_message = decode_shifted_message("ejsy fprd yjod ,rddshr dsu?")

decoded_message

It can be quite interesting to follow GPT’s reasoning. However, in the preceding pseudocode, some steps are clearly missing. GPT doesn’t show a causal relationship between the encrypted words and the final English-language solution. What’s actually missing is something like this pseudocode:

If decoded message = lookup(english words), then return decoded message

But we should be grateful for any insights into AI’s formerly hidden black box logic.

I think the Turing test is clever, but wrong. To test if AI has become intelligent comparable to ours, the Turing test puts a human and an AI behind a curtain. Somebody converses with them both (using printouts, not voice), and if it’s not possible to reliably tell whether they are interacting with the human or with the AI, then the machine passes the test. In other words, the test asks: Can a machine intelligence convincingly imitate our human conversation and thought processes?

With all due respect to the brilliant Alan Turing, I think this is the wrong question to ask. AI is an alien mind. Aliens will think like aliens. An alien will communicate in alien ways, using alien diction, idioms, and phrasing. It might even have a more advanced logic than we do. Just because we could tell the difference between the conversation of the human and the AI, doesn’t mean the AI isn’t in its own way equal to humans, or superior.

For one thing, recall that AI thinks at electric speeds; human thought involves chemical processes, which are far slower. Plus, AI has a memory far more vast than ours (the entire internet, plus specialized private databases). It’s increasingly learning from multimodal inputs—meaning that it’s seeing all those traffic cameras, listening to podcasts, watching all of YouTube, seeing all human communications in the Apple space, and much other real-world data. And unlike us, AI doesn’t misremember or forget.

In his book The Singularity is Nearer Ray Kurzweil points out that to pass the Turing test, an AI system would have to pretend to be dumber than it actually is. It would be a giveaway if the AI solved a hard math problem in two seconds. Or if it could answer a difficult question about truck transmission repair and also a complicated problem in physics.

AI is an intelligent alien mind. It doesn’t think like us. So, determining if it’s sentient or conscious shouldn’t rest on how convincingly it imitates us.

Given AI’s impressive, ongoing gains in mastering and surpassing human abilities in most cognitive tasks, some people get defensive and say: Well, at least we remain superior in emotional intelligence. I would suggest that, in many contexts, the phrase emotional intelligence is oxymoronic.

Summary

- Blogs differ from other website pages. And to create a quality blog, you need to understand those differences.

- AI can assist you in learning how to write effective blog posts. And it can continue to be an excellent editor going forward, so submit your posts to AI for an insightful critique.

- You should consider several rules that experts came up with for how to title your blog posts effectively. Just as magazine cover headlines sell magazines, so too do blog titles sell your blog. Given that few of your visitors will title their messages, that’s your job as well.

- We asked AI to help us create great, catchy blog titles. And in the process, we also learned how to build and modify custom GPTs that can be employed repeatedly as specialists at specific tasks. WordPress categories have nothing to do with your site’s page topics or the menu. Instead, they are a way for your visitors to view a subset of the blog messages. A visitor clicks a category, and the blog page redraws, displaying only posts in that category.

- You might have several reasons to suppress metadata that’s displayed by default after each blog post. For example, you might want to hide date-stamping because it makes no sense if your blog displays items for sale. Who cares what date an item was added to the blog?

- You have to weed out bad incoming messages before they appear in your blog. You don’t want to expose your audience (or Google) to vulgar, second-rate, off-topic, or otherwise inappropriate posts. Take advantage of plugins and WordPress’s own tools to semiautomate the process of approving messages for publication. That takes some of the burden of vetting off you.

- It should come as no surprise that GPT can help you automate the blog message vetting process. We created a prompt telling GPT how it should vet each blog message, then told it how to locate each individual message, and how to make its judgement. To simplify reusing this prompt, we learned how to make use of GPT’s custom instruction feature.

- Blogs, like any online content, need to be promoted if you’re interested in growing an audience. Use social media, cross-promotion, and platforms such as YouTube to market and publicize your site.

- You should acquaint yourself with two powerful time-saving features in GPT—custom instructions and memory.

- A list of your visitor’s email addresses can be of great value in branding, publicizing, marketing, customer service, and requesting feedback to improve your visitors’ user experience.

- The chapter ended by asking the five most popular AI chatbots to solve a clever puzzle. Only one could crack our code: GPT.

- In my experience, GPT currently outperforms all competitors on most tasks.

- Claude tends to specialize in accepting lengthy prompts, Perplexity tends to be good at searching for current internet information (and providing citations for fact-checking).

- Midjourney is the champ at creating beautiful, sometimes stunning, new art.

- I’ve not yet been able to test the Ultra version of Google’s Gemini. But all-in-all, GPT seems to lead the pack in supplying you with quality responses the majority of the time. It seems to have solid prompt comprehension and depth of information.

10 Making money online

This chapter covers

- Understanding e-commerce options

- Avoiding annoying your customers

- Choosing the best e-commerce plugin

- Installing Secure Sockets Layer to avoid the Not Secure message

- Creating a strong call to action

- Converting visitors to customers

- Marketing effectively

You can monetize—make money with—your website in a variety of ways. It’s your job to ensure that the approach you choose aligns well with your audience, the site’s content, and your personal goals and resources.

In this chapter, we’ll look at the most popular and effective ways to monetize a site. You can make money with most types of sites, one way or another. However, it’s important to understand that even when making money, your primary goal for most sites should remain ensuring that your site satisfies your audience’s expectations with excellent, polished content. And any advertising, sales, or requests for donations should be at least secondary, if not tertiary.

For many kinds of e-commerce, you’ll want to use a plugin. In this chapter, we’ll explore the most popular one, WooCommerce (https://mng.bz/9Yw8).

The topic of e-commerce is vast and varies greatly based on the kind of site you run and the type of sales you intend to pursue. E-commerce could easily fill a book on its own, with each chapter devoted to a different subtopic. Here, we’ll present an overview, with suggestions and guidelines to point you to resources for further detail about your specific use case.

And, of course, these days, the primary essential resource is AI. So, describe in detail your site’s purpose, its audience, and the e-commerce variant you want to employ. Then, submit that to GPT or one of the other AIs. Ask for suggestions about tactics, where you’ll find the strongest competition, how to locate clear documentation, and any other topics you need to address.

10.1 Nine ways to monetize a WordPress site

Here are nine of the most popular ways to monetize a site. Note that some sites use more than one of them:

- Affiliate marketing—Write reviews or otherwise promote products or services resulting in a commission if your visitor clicks a link that takes them to something to purchase. This kind of marketing comes in two versions: pay-per-sale (PPS) and pay-per-click (PPC). With PPS, you earn money only if there is a sale. This is the most common version and can also be the more rewarding. With PPC, you get paid when someone just clicks on the affiliate link, regardless of whether there is a sale. A variant of PPC is pay-per-lead (PPL), where you’re paid if someone just signs up for a newsletter, fills out a form, joins a website, or other similar results.

- Advertising—Ads are placed on your site. Google’s AdSense, for example, places ads relevant to your audience. You can choose to place the ads where you wish, or let Google, employing its AI optimization algorithms, choose the places it judges the most effective. It can also decide which kinds of ads would work best and how large they are.

- Sponsored content—You promote someone else’s products or services. This works best if you have a large site or serve a particular, narrowly focused area of interest (and thus have a well-targeted customer base).

- Offering your own products or services—Selling digital content, professional services, or physical goods.

- Drop-shipping—You sell goods, but you don’t need to warehouse your inventory. Your site has a catalog or other e-commerce section, but you avoid the necessity of managing the physical goods. Someone else holds and delivers the goods for you. These suppliers could be wholesalers, manufacturers, or just other retailers. Another advantage is that you don’t risk purchasing inventory that doesn’t move. That allows you to test various products without risk.

- Subscriptions—You can offer special or premium content, or provide additional features on the site, by charging a subscription fee. If you have unique, specialized, or very high-quality offerings, this approach can result in an excellent income stream.

- Donations—If your content or services are popular, you can ask for donations. You can ask your audience for direct donations to support your work. GiveWP and Contact Form 7 are popular plugins for requesting donations.

- Crowdfunding—Similar to donations, you give your customers an option to support your cause, project, or product development. WP Crowdfunding is a good plugin to use for this purpose.

- Webinars or online courses—Translate your expertise into cash online. Go live in a video conference via a web seminar. You provide online training and share your knowledge with your students. Or create lessons you can offer online, and employ a written discussion area or forum where you can answer questions and students can interact.

- Licensing content or selling digital assets—If you create original content such as photographs, videos, or digital art, you can license them to others or sell digital assets directly from your website. There is a distinction between licensing and outright selling. With the former, you grant permission for reuse but don’t transfer ownership of the content. And you can set up a recurring fee if you wish. The latter is usually a one-time payment process. And the buyer is likely to get fewer restrictions on usage than with licensing.

10.2 The wrong way to monetize

One great danger with advertising in a website—perhaps the greatest danger—is irritating your audience. The worst offenders are pop-up ads. These intrusive ads cover site content until they are either ready to go away automatically or are closed by the user. Some pop-ups aren’t that easy to close because they don’t display an x for a while, or they hide it in unusual locations (the upper-right corner is where people expect to find the x in Windows). This kind of forced interaction can be exasperating. Some pop-ups even open a new browser tab. Most browsers, however, do feature pop-up blockers.

Another distraction is the use of ads that are animated, flashing, displaying annoyingly bright colors, or otherwise disruptive visuals. And some people are sensitive to this kind of stimulation. So this makes your site less accessible to people facing such challenges.

Many people also resent audio or video that starts playing automatically. Let your customers decide when or if they want to hear or see your ad.

People rarely come to a site to read its ads. So if you crowd your content with too many ads, or you cluster them together, they’re in direct competition with your site’s content. And it’s that content that people are most likely interested in.

Ads not relevant to your site’s topic are also bothersome. They are seen by most of us as an interruption. They likely have nothing to do with your customers’ interests.

Some videos or large, high-resolution image ads can slow down page load time too. You’ll want to test for this because many people around the world have slow internet connections. How to test your page load speeds is explained in the chapter 8, section 8.1.

Continuing to fill out our list of ways to offend via advertising is clickbait. This is when you display a headline or image that turns out to be a trick. The user clicks it to see more, but the more isn’t what the clickbait promised.

We’ll conclude this list of offenders with interstitial ads—a full-page ad that completely blocks the site’s contents. Some such ads are displayed on the home page, and some appear between pages as the visitor moves to view an interior page. Some allow the visitor to close them, while others evaporate only after an interval of their own choosing . . . at last giving the visitor access to the site proper. These kinds of ads certainly command attention because they are as large as can be. If you do choose to use interstitial ads, and you rarely should, take care how you employ them. And give your patient visitors an obvious way to close these ads and get on with their life.

10.2.1 Advertising the right way

The right way to use ads is to ensure they are harmonic with the surrounding content, and thus don’t call attention away from that content. To find ways to improve how a site handles its ads, I submitted to GPT a screenshot of the home page of FindGift.com, a pretty busy site with ads aplenty.

You can submit images to GPT and other AI systems given that they are in the process of becoming multimodal. In the past, they would only accept text, but increasingly they’re open to all kinds of input—audio, video, images, data sets. GPT did an admirable job of looking at the image, judging it, and then suggesting ways to soften the effect of the many busy ads in FindGift.com. Here’s the prompt I gave:

Websites should make it a goal to ensure that their ads are unobtrusive and don’t annoy the site’s visitors. Please list any ways in which this site’s home page might be improved so as to achieve that goal.

The website in the image seems to be a gift-finding service with various categories and gift ideas. Here are some suggestions for improving the home page to ensure that the advertisements and layout are unobtrusive and user-friendly:

•   Consolidate Navigation: The top navigation bar is quite busy with multiple tabs, buttons, and services. Simplifying this area could help visitors find what they need faster and with less distraction.

•   Simplify Design Elements: The site uses a variety of colors, fonts, and button styles. A more unified design scheme could be less visually overwhelming and more pleasing.

•   Streamline Content: There are multiple sections on the page advertising different categories and occasions. Condensing these into a more streamlined, easy-to-navigate format could improve user experience.

•   Limit Animated Elements: If any of the images or banners are animated, they should be used sparingly as they can be distracting and slow down site loading times.

•   Improve Advertisement Integration: Ads from partners are prominently featured and could be integrated more seamlessly into the site’s layout so as not to appear too distinct from the site’s own content.

•   Optimize for Mobile: Ensure that the site is responsive and that any advertisements do not overwhelm the content on smaller screens.

•   Reduce Pop-Ups and Overlays: If there are any pop-up ads or overlays that are not visible in the screenshot, these should be used minimally as they can be particularly intrusive.

•   Balanced Placement of Partner Logos: The logos of partner sites could be made smaller and placed in a less central location so as not to compete with the site’s own content.

•   Focus on User Experience: Overall, the goal should be to create a balance where advertisements are present but do not take away from the core purpose of the site, which is to help users find gifts easily.

I decided to also ask GPT about the best ways to make ads unobtrusive and subtle:

I plan to include some ads in my website. Please advise me on how I can do this without annoying my site’s visitors. I want the ads to be unobtrusive and subtle.

GPT might surprise you by remembering a chat you had with it yesterday. In my request today, I started a brand-new chat, and, in the prompt, I didn’t mention that bass fishing is the topic of my site. It knew this, however, from past interactions during a different chat. GPT is now transcending individual chats and remembering details about us. This memory feature is explored in chapter 8. Here’s GPT’s response:

Including ads on your blog about bass fishing at Randleman Lake in a way that is unobtrusive and subtle is a great approach. Here are some tips to do this effectively:

•   Relevant Ad Content: Make sure the ads are relevant to your audience. Ads related to fishing gear, outdoor apparel, local fishing tours, or conservation efforts would be more interesting to your readers and less likely to be seen as intrusive.

•   Ad Placement: Place ads in areas where they don’t disrupt the reading flow. Common places include the sidebar, header, or footer of your blog. Avoid placing ads in the middle of your articles as this can be disruptive.

•   Limit Pop-Ups and Auto-Play Media: Avoid pop-up ads or auto-play videos with sound as they can be particularly annoying and might deter visitors from returning to your site.

•   Use Ad Networks Wisely: Choose an ad network that allows you to control the types of ads displayed. Networks like Google AdSense are popular and offer some level of control over ad content.

•   Monitor Ad Frequency: Don’t overload your page with ads. Too many ads can make your site look cluttered and distract from your content.

•   Transparency: Be transparent with your audience about using ads. A brief mention that ads support your blog can make your readers more receptive to them.

•   Test and Get Feedback: After implementing ads, ask for feedback from your regular visitors. This can provide valuable insights into how your audience perceives the ads and whether they find them intrusive.

By following these guidelines, you can integrate ads into your blog in a way that respects your visitors’ experience while also providing a source of revenue for your blog.

Next, let’s take a look at the best e-commerce plugin.

10.3 Choosing the right e-commerce plugin

We website owners usually appreciate additional revenue streams, and e-commerce provides them. If you plan to sell things, you’ll want to choose the best e-commerce plugin for your site. The plugin must be easy to use, efficient, secure, and offer the features necessary for your business.

That said, WooCommerce (by Automattic, WordPress’s parent company) is by far the dominant e-commerce plugin. It’s open source and freemium—so you can start off free, but if you need additional features, you can just upgrade, paying various amounts for the various additional options. You can also add features via the many WooCommerce extensions (more about them shortly).

10.3.1 Why WooCommerce dominates this space

WooCommerce is known to provide an easy-to-use shopping system that makes the purchasing process for clients smooth and effortless. But it’s a truth universally acknowledged that nothing is perfect. So, let’s consider both WooCommerce’s good and not-so-good qualities. We’ll start with the pluses:

- Extreme flexibility—WooCommerce provides many ways to sell quite a variety of goods and services. It covers all the bases, facilitating every type of e-commerce. It helps you sell actual objects, such as couches or hair products; downloadable books, such as comic books or novels; and external goods, such as affiliate marketing on Amazon, invitations to training courses or webinars, and more. And, if you don’t find what you need in the main WooCommerce system, there are many add-ons available. Go to your Plugins > Add Plugins screen, search for WooCommerce, and you’ll see dozens of popular WooCommerce-related plugins to add specialized functionality.

- Impressive scalability—Companies from small to huge can operate efficiently within the WooCommerce system. If your sales rocket upward, you need not be concerned that the plugin won’t be able to handle the growth.

- Countless ways to customize—You can build a store tailored to the kind of goods you sell and the customers you sell to.

- Excellent protection—Because this is an online platform, your customers expect secure gateways to prevent credential or other data theft. WooCommerce includes safe payment gateways such as Stripe and PayPal. Because the WooCommerce platform is so widely used, hackers regularly target it. To protect your client’s privacy, you can use a backup system that keeps data encrypted. And to further deter hackers, WooCommerce also lets you add a security plugin that periodically checks your website for viruses. You probably already have the Wordfence plugin actively protecting your entire site, and security systems are also active and effective in most hosting services. But redundancy in security is a good thing.

10.3.2 Where to get help

WooCommerce has a large and active community. Roughly 4.5 million WooCommerce websites are currently live. Members of this sizable user community post articles and instructions on setups that have worked for them. You’ll find forums and other online gathering places where you can ask questions and get feedback from WooCommerce experts. Here are some of the top discussion boards for anything related to WooCommerce:

- Advanced WooCommerce—You’ll find a variety of WooCommerce professionals in this restricted Facebook group. Among its more than 25,000 members are WordPress developers. Its main focus is on WooCommerce’s more sophisticated features. If you have more inquiries than GPT or Google can handle, this is the place to go.

- WooCommerce Help & Share—Also a private Facebook group, it boasts 41,000 members. This is the advanced group’s little brother. This group is used by all people of all levels of expertise—beginners included. It’s the place where users go to ask common WooCommerce questions and receive guidance from other, more experienced users.

- WooCommerce Help Page—Go to the WooCommerce > Home screen, and in the upper-right corner, click Help. Choose Get Support or one of the other options. This is the main forum, and you get access to it by registering with WordPress. WooCommerce developers and other knowledgeable community members lead these discussions. Although it’s an excellent place to start if you have questions, you might find a bit of a wait for responses. The Facebook groups are the number one choice because of their more rapid replies.

- The Shopping Cart—Your customers can complete transactions more easily because WooCommerce provides access to excellent point of sale (POS; a website’s checkout system—the shopping cart process) and warehouse management systems. From the outset, your e-commerce system will convey security, reliability, and professionalism. Customers can also easily track all of their orders and check the progress of their deliveries.

10.4 Any drawbacks?

Although WooCommerce is quite impressive and a very mature and effective system, it’s not perfect. You should consider a couple of drawbacks that might influence your decision about whether or not to use it:

- If your website is custom made and isn’t mounted on WordPress, you can’t use WooCommerce. It’s designed to fit into WordPress only. So older, established sites might well be using other systems.

- If you go beyond the basics, there can be costs. Although WooCommerce can be downloaded and installed for free, you may find you want to upgrade to a paid plan or need to purchase some WooCommerce extensions (similar to plugins) to make your e-commerce efforts successful.

For instance, you will be responsible for paying for a secure payment gateway if you decide to use something other than PayPal. The majority of WooCommerce extensions require subscriptions.

10.4.1 An alternative to WooCommerce

WooCommerce is considered the best WordPress e-commerce plugin. Because its advantages far outweigh its disadvantages, choosing WooCommerce will probably make things easier overall for both you and your customers.

But if your needs are limited to offering downloadable digital content, and you don’t need all of WooCommerce’s additional functionality, you might take a look at Easy Digital Downloads. This plugin handles sales of digital goods, such as music, e-books, themes, images, PDFs, and so on. True, WooCommerce is also quite capable of handling these kinds of transactions, but it’s a much larger system—and might be more than you require.

Easy Digital Downloads has a very basic interface, which makes it easy to set up. Using the plugin to track and analyze sales is also simple. Go to your Plugins > Add New screen, search for Easy Digital Downloads, and then click the Details button to read all about it.

10.5 Be sure to use Secure Sockets Layer

If you want to drive away prospective customers real fast, the surest way is to force their browser to display a Not Secure warning when they land on your home page. Who’s going to provide their credit card info, or indeed any other personal information, to a site that’s not encrypting communications with its customers? “Not secure” translates in many peoples’ minds as “This way to the dark web.”

The purpose of Secure Sockets Layer (SSL) is to mangle (encrypt) any message from your site to a customer or from the customer to the site. This way, nobody intercepting the transmissions can decrypt that garbled data.

When you add SSL to your site, your URL changes from http to https and lets browsers know SSL is active and thus your site is secure. More recently, an improved system called Transport Layer Security (TLS) has actually replaced SSL. Even though the term SSL is still widely used, in practice, SSL really refers to a TLS system.

SSL was introduced in the mid-1990s by the then-popular browser Netscape. Over time, TLS was introduced and is revised now and then to provide even stronger security. For example, TLS 1.3, the latest version, replaces older, less effective, less secure cryptographic algorithms. It also employs a streamlined handshake process that provides both faster connections and enhanced security.

Some hosting services, such as SiteGround, Bluehost, and DreamHost (excepting DreamHost’s most basic $2.95/month plan), offer free SSL, and the process of installing and verifying it is automatic. But if you’re one of those brave souls who hosts your site yourself on your own hard drive, SSL installation is going to be a rather complex, multistep process.

NOTE For information about adding SSL to a SiteGround-hosted site, check out https://mng.bz/jp59.

Here are the reasons that SSL is a must for any site, but especially for e-commerce sites:

- Data security—SSL encrypts the data transmitted between a user’s browser and the website, making it impossible to read the data. This is essential for protecting sensitive data such as personal information that could be used in identity theft, login credentials (passwords), and financial transactions.

- SEO benefits—Search engines give bonus points in their ranking algorithms to websites using SSL. This means more traffic to your site. (Search engine optimization [SEO] is the topic of chapter 11.)

- Trust and credibility—Sites with SSL display a padlock or other symbol in the browser’s address bar, telling customers that the connection is secure. Chrome, though, displays a different symbol, which, when clicked, certifies that the site is secure. These symbols can build trust, assuring your customers that the site is legitimate and that their data is protected.

- Fraud prevention—Certificate authorities issue SSL certificates after they verify the identity of the site owner. This helps to prevent schemes where fraudsters create fake websites to deceive users. These sites often convincingly masquerade as legitimate websites. For example, it’s easy to copy then display an exact replica of a bank’s home page. The goal is to fool people into giving personal data, sending money, or downloading malware or ransomware. (This scheme is called phishing.)

- Compliance with regulations—Various privacy laws and regulations, such as Europe’s General Data Protection Regulation (GDPR), require the protection of personal data as it flows over the internet. SSL helps you comply with these regulations.

10.6 Using a good call to action

A call to action (CTA) is a prompt, button, or some other trigger the user interacts with that’s intended to persuade the customer to do something. Some common results that CTAs trigger are listed here:

- Downloading a guide or whitepaper—Offer valuable resources or information in exchange for contact details or payment. This is often used in content marketing.

- Sharing content on social media—Facilitate the sharing of website content on social platforms.

- Participating in a survey or poll—Engage customers in providing feedback or opinions. This can be a valuable way to gather data on how to improve your site or increase your sales.

NOTE Chapter 12 focuses on analytics, collecting data about how visitors interact with your site—what path they follow, for example—and therefore how you can make improvements in navigation or other features of your site. In that chapter, you’ll use both AI and plugins. We’ll look shortly at how AI can quickly generate surveys for your audience.

- Subscribing to a newsletter or mailing list—Encourage customers to stay informed about updates, news, or promotions.

- Starting a free trial—Invite users to try a service or software for free for a limited time.

- Registering for a webinar or other event—Prompt users to sign up for online or offline events.

- Getting a quote or estimate—Offer quotes for services where pricing is customized based on the customer’s needs.

- Scheduling a demo or consultation—Offer this for services or products that require a demonstration or a personalized consultation.

- Making a purchase or adding to the checkout cart—Direct customers to buy a product or service.

- Contacting for more information—Encourage direct communication via phone, email, or a contact form.

- Accessing exclusive content—Offer access to premium content or members-only areas.

- Entering a contest or sweepstakes—Invite participation in competitions or giveaways. The goal is to build your brand and sell something later.

The design and wording of the CTA are critical in making it effective. The CTA should be visually striking, so they notice that something needs to be done. It should also clearly state what will happen when the customer clicks the CTA or otherwise activates it. And you should let them see a benefit, or create a sense of urgency.

CTAs can be essential for directing site customers through the purchasing process and winning them over as clients or customers. A CTA is usually an attention-grabbing element, such as a button with a dramatic color or shape. Also, use language that calls for action, like “Buy Now,” “Learn More,” or “Sign Up.” Because CTAs directly affect user engagement and conversion rates, the performance of an e-commerce website can be significantly influenced by the effectiveness of your CTA.

What is a conversion rate?

In e-commerce and digital marketing, a conversion rate is the proportion of website visitors who do what you hope they’ll do. This depends of course on the goals you have in mind. It could be purchasing something, subscribing to a newsletter, downloading a resource, booking an event, or any other key performance indicator (KPI).

KPI is a quantifiable indicator of how well a corporation is accomplishing important goals. In the context of website conversion rate, KPI is a metric to help you see how well your site converts users into customers or leads.

To find the conversion rate as a percentage, divide the total number of visitors by the number of conversions. Then, multiply the result by 100. A website with 2,000 visitors per month and 100 purchases, for instance, would have a conversion rate of (100 ÷ 2000) × 100 = 5%.

Understanding conversion rates lets you gauge how successful a website is in terms of marketing. A low conversion rate means that you should perhaps improve the website’s content, user experience (UX), design, or CTA.

10.6.1 AI-generated surveys

Let’s say that you want feedback from your visitors about what they’d like to see changed on your site: additional topics, more frequent updates, keto recipes, whatever.

I submitted the upcoming prompt to GPT-4o, Perplexity, and Gemini. Perplexity provided a rather short survey, mainly just rewriting the prompt. Gemini, however, even added appropriate optional details such as “Select all that apply,” “Other (please specify),” and a bonus section. It also added some good ideas about how to perhaps improve the survey and increase the return rate by offering an incentive. GPT also provided a solid survey in HTML. GPT correctly pointed out: “Note that email functionality requires server-side support to securely send emails (JavaScript alone can’t securely email on its own, so you’ll need a server-side solution or plugin to manage that step).” Overall, GPT and Gemini give us the kind of useful first draft you would expect from an effective assistant site administrator:

I would like you to create a ten-question survey in HTML that I can display in my WordPress website to get audience feedback about the site.

Include checkboxes, blank lines, input boxes, and other input elements so the survey can be completed online by my site’s visitors. And write code that handles when the visitor leaves this page, the code collects the visitor’s answers as CSV data, and emails it to me at 5raficxx3352@hotmail.com.

My site provides tested Instant Pot recipes for beginners. It’s divided into these pages:

•   Tex Mex Meals

•   Spicy Thai

•   Chinese Cuisine

•   French Fare

•   Italian Ingredients

•   Gourmet Greek

•   The blog page where I interact with the audience

So in this survey, please find out if they want additional kinds of recipes, or information on other Instant Pot topics. And find out what they like best and worst about the current site. What can be improved. Also how often they visit. Things like that. Their reaction to the site’s content. And its navigation system. Do they easily find what they want?

Gemini did fine creating an HTML survey. I tested it by pasting it into the Text tab of an Edit Page screen in WordPress. It also included code to send the results via email. I never got the email though.

But I think it won’t be too long before AI systems will generate fully functional input-output pages such as surveys, quizzes, and other site-visitor interactions. Input is fairly easy, and GPT and Gemini do it well, creating working HTML code you can just paste into the Text tab of one of your pages. But collecting and emailing the survey data requires a bit more access to server-side programming than AI currently has.

10.6.2 Optimizing conversion

A dazzling, polished website is insufficient to succeed at e-commerce. Your online store must be a conversion machine if you want it to be a big success. Here are some important goals to aim for:

- Product page perfection—Exceptional, compelling product photos and thorough, accurate product descriptions are essential. Display customer reviews to demonstrate the quality of your offerings.

- Frictionless checkout—Ensure very easy payment and checkout. To reduce the number of people who just give up and abandon their checkout carts, provide a variety of payment methods, visitor checkout choices, and secure transactions.

- Mobile-ready tests—In today’s cellphone world, make sure your e-commerce site is optimized to provide a flawless buying experience across all devices. Check your site on a cellphone and tablet. You may need to modify it a bit even though your theme should be doing a good job at this.

TIP You’ll likely find several useful WooCommerce extensions, including help with conversion, at this popular source, YITH: https://mng.bz/W2OX.

10.7 Taking advantage of marketing

Marketing is to e-commerce what fertilizer is to plants. Establishing an online business requires more than just building a website and waiting to see if something happens, if someone drops by. They don’t come if they don’t know it’s even there.

To increase sales, draw in clients, and build traffic, a comprehensive marketing plan is important. Here are a few effective strategies to try:

- SEO—To rank better in search engine results and draw in the right visitors, optimize the content of your website and product pages with relevant keywords. Yoast SEO and other plugins can assist you in choosing optimization strategies. (Much more on this topic is coming in chapter 11.)

- Social media—Use social media sites such as Facebook and Instagram to interact with your audience while promoting your goods, launch focused advertising campaigns, and take part in online forums. To effectively handle your social media content, consider using Hootsuite, a social media marketing system.

- Email marketing—Create an email list and publicize unique offers, insightful material, and tailored suggestions to nurture leads. You can build and manage an email list with plugins such as OptinMonster.

Try OptinMonster

OptinMonster is a multifaceted WordPress plugin for email list development and lead generation. With this plugin, you can design lightbox pop-ups, floating bars, full-screen welcome mats, inline forms, sidebar forms, and slide-in campaigns, among other variations of this type of ad. This way, you can gather information from your visitors, including email addresses. With the help of OptinMonster’s drag-and-drop campaign builder, you can easily modify these forms to fit the style of your website and your marketing objectives.

Their Exit-Intent technology, an important component of OptinMonster, senses when a user is ready to leave your website and displays a tailored pop-up at that exact moment! This system can help turn your visitors into consumers and email subscribers. Also, you can display personalized pop-ups based on someone’s activity, geography, and other factors with OptinMonster’s behavior-based customizations.

The plugin also gives you A/B testing features, so you can see the effects resulting from multiple variations of your pop-ups. You’ll then be able to determine which ones work best (and offend least). Additionally, OptinMonster helps you with smooth management of your email marketing campaigns through integrations with popular email marketing platforms such as Mailchimp.

10.8 The final checklist

Here is a checklist showing what you should be doing if you want your e-commerce efforts to succeed:

- Focus—Just as you should focus your entire site on a niche topic, so too should you concentrate on selling a few main products or product categories (at least to begin with). This isn’t true of every type of e-commerce, just most of them.

- Provide a great UX—Make sure your website is mobile-friendly, visually appealing, and simple to use. You’ll get more extensive visits and more sales.

- Employ search engine optimization—Once again, make sure you improve your site’s search engine visibility.

- Install security measures—Put in place robust security procedures to shield your website and client information from online attacks. Always update your theme and plugins whenever updates are available, use secure payment channels, and use an SSL certificate.

- Offer high-quality content—Post quality blog messages, and add new blog entries on a consistent schedule. Master AI tools to improve the quality of the content in your website. Customers will become loyal, and your SEO will also benefit.

- Display good product photos and descriptions—Give your products thorough, accurate descriptions along with high-resolution photos. This reduces the possibility of returns while helping customers make the right decisions—choices they won’t regret.

- Provide exceptional customer service—Offer readily available contact details, FAQs, and live chat assistance (or via an AI chatbot), if possible. Providing solid customer service will result in repeat business and good word of mouth.

- Give them payment and delivery choices—Offer a variety of payment options and clear delivery guidelines. This can reduce cart abandonment and enhance the UX.

- Perform analytics and gather feedback—To make ongoing improvements to your website, measure its performance using tools such as Google Analytics, employ AI in several ways, and collect feedback from users (see chapter 12).

- Perform inventory management—To guarantee a smooth experience and thus satisfied customers, effectively control your stock levels and product availability. Don’t run out of things if you can help it.

- Ensure legal compliance—Research and adhere to all applicable laws pertaining to your online business, such as those governing cookies, privacy, and e-commerce.

- Provide multilingual support—Providing your website in several languages might greatly increase your market reach if you’re trying to attract a worldwide audience.

- Optimize performance—To improve UX and SEO, regularly check and tweak your website’s page-load speeds and other functionality.

- Use affiliate marketing—Create an affiliate program so influencers and bloggers will send traffic to you and in that way increase sales.

- Include good return and refund policies—To instill trust in customers’ purchases, establish return and refund policies that are equitable and unambiguous.

- Upsell and cross-sell—Use techniques to promote more products to customers so you can raise the average order value.

- Comply with accessibility regulations—Make sure your website is usable by people with impairments. This will increase your clientele and is required by law in many places.

These suggestions can be valuable in creating and maintaining a profitable WordPress e-commerce website, ensuring a positive UX, delivering a robust online presence, and ensuring efficient interactions. This list can also help you ensure the expansion and long-term viability of your WordPress e-commerce website.

Summary

- There are roughly 10 major types of e-commerce and some subvariants. Your job is to figure out which of them best suits your goals and your audience’s needs.

- Ads can be subtle and unobtrusive. Or they can really put people off. Go with the former.

- You’ll find quite a few e-commerce plugins. But the dominant one, and often the best choice, is WooCommerce. However, if it’s a bit more than you really need, you can find plenty of alternatives.

- Secure Sockets Layer (SSL) is a utility that encrypts messages to provide secure communication over the internet. Without it, your visitors will bounce away from your home page pretty fast when they see the Not Secure message.

- Website owners often have a goal—something they want visitors to do. By showing them a clear call to action (CTA), many will follow that path and reach the goal.

- E-commerce site builders need to work on conversion: changing mere visitors into customers.

- Don’t neglect marketing. You can employ various promotional strategies to drive traffic to your online sales system, change that traffic into paying customers, and keep those customers post-purchase.

11 AI and search engine optimization

This chapter covers

- Exploring the effect of AI on web searching

- Choosing the best keywords

- Asking AI to scan a site

- Earlier AI search implementations

- Taking advantage of Google Search Console

- Using the AIOSEO plugin and sitemaps

- Maximizing backlinks

- Anticipating ways to optimize AI site ranking

Search engine optimization (SEO) used to matter. It meant modifying your website so that search engines such as Google or Bing would list your site up high in the results when people search for your site’s topic. This no longer works.

The goal was to get a link to your site listed at least on the first page of the list of links Google displayed. Few people looked at the links on the second page. This was what SEO meant in the past. AI is seriously disrupting SEO. Things are very different now. SEO is being replaced with AI optimization (AIO).

Google just displayed a list of links that you could visit to get the information you were after. Now, AI skips the links and just gives you the info. Some AIs, such as Gemini and Perplexity, include a list of links as citations. And you can request citations from any of the AI systems. But links are optional.

AI scans sites and reads their contents. Then, like a research assistant, AI provides you with the answer to your query. And if needed, you can chat with AI, asking for a different or more precise response.

Put simply, AI gives you answers; Google just gave you a list of places to look for answers yourself. Now it’s as if you had a researcher at your disposal and asked them to look around the internet, solve a problem, and then bring you the results.

Because AI is changing internet searching, you as a site designer must switch your efforts from SEO to AIO. In this chapter, you’ll see how to do just that.

We’ll also look at Google Search Console, an important resource to help you increase your audience. It can measure traffic and performance for your keywords, which are vital for content optimization. And, we’ll also explore the popular SEO plugin All In One SEO (AIOSEO), which includes a sitemap builder to make it easy for AI to quickly understand your site’s organization.

AI assesses the quality of your site somewhat differently from the algorithms Google and other earlier search systems used. AI critiques are more sophisticated and include larger data searches and more intelligent assessments. Soon AI will judge sites as well as an experienced human website critic.

That said, some previous SEO tactics (having good backlinks, especially from highly-ranked sites, for example) still work. Let’s take a look at how best to please AI.

11.1 Learning new optimization tactics

Google and Bing are rapidly incorporating AI into their search engines. Google is adding its AI alternative—Gemini—to its search page (a bit unsuccessfully so far). And it displays an AI Answer button you can click. Bing prominently displays its AI Copilot icon. And now, both search engines just answer questions when you search rather than displaying a list of links to make you look for the answer.

One thing, however, remains the same: your site will do best if you focus on providing the very finest content you’re capable of. That requirement will never change no matter how sophisticated AI becomes. Ultimately, quality should be your primary goal.

Decades of reverse engineering, hundreds of SEO experts’ tips, and instructions from Google itself have produced a huge store of advice about SEO. But what about AIO? What criteria does AI use when deciding which websites to visit and cite?

AI training involves, among other things, massive data scraping—roaming the internet and storing information. So, you provide a prompt, and it searches its huge existing data store. But AI is also increasingly gathering other data from YouTube videos and other multimodal sources. Most AI systems are now (or soon will be) capable of providing answers on current queries in real time. Do they use Google when searching?

How do AI systems search for current information?

I asked the big five AI bots this question:

When answering a prompt about a recent event, such as “Who won best song in last night’s Grammys?” Do you use Google or some other search engine, or some other source?

(The following AI responses have been edited to make them shorter, verbose Claude’s in particular.)

When answering prompts about recent events, including questions like “Who won best song in last night’s Grammys?”, I use a browser tool that allows me to issue queries to a search engine, such as Google, and then select results from a range of sources to ensure accuracy and provide a comprehensive answer.

Here’s my follow-up question:

So, you do submit questions to Google Search?

I don’t directly submit queries to Google Search or any other search engine in real time during our conversation. Instead, when needed, I can use a simulated browser tool within this environment. This tool allows me to issue search queries through a controlled interface, and I can then select from the search results to access and read content from various web pages.

Does “don’t directly submit queries to Google” mean indirectly, then? Trying to pin GPT down, I asked this second follow-up question:

In your first response, you said you do use Google “I use a browser tool that allows me to issue queries to a search engine, such as Google . . . .

You’re right, and I appreciate your patience for the clarification. To elaborate correctly on my previous response: when necessary, I can use a feature that functions like a browser tool to issue queries to a search engine. This process is managed within a controlled environment and is designed to help me provide accurate and current information based on your queries, especially for topics or events that have occurred after my last training update.

In other words, GPT’s special custom browser “tool” does submit queries to search engines. GPT was a bit crafty at first, employing deceptive ambiguity, but finally, when pressed, it was honest.

Here’s what Perplexity had to say in answer to the same first question:

When answering questions about recent events, I use a variety of reputable resources to gather information. Some of the resources I use include News Websites: Websites like CNN, The New York Times, and PBS Newshour.

And, again, here’s my follow-up question:

But do you use the Google Search engine?

I do not have direct access to the Google search engine or its search results. Instead, I rely on a diverse range of reputable sources.

Again, no “direct” access is claimed, but what about indirect? Let’s move on to Claude to see its answer to the Google search follow-up question:

[In addition to being pretty wordy, Claude, here anyway, has the personality of a toady.] No, I do not have access to search engines or external news sources. As an AI assistant created by Anthropic to be helpful, harmless, and honest, I rely on my training to provide responses based on the information I’m given. I do not actually follow or have access to current news.

And here’s what we got in response from Gemini and Copilot:

To answer your question about recent events, I don’t directly use Google Search or any other specific search engine. However, I am trained on a massive data set of text and code, which includes information from various sources like news articles, books, code repositories, and other publicly available web documents. This data set is constantly being updated, so I have access to information about recent events.

When you ask me a question about a recent event, I use my knowledge base to identify the relevant information and then process it to provide you with an accurate and informative answer. In the case of your question about the Grammys, I was able to recall that the awards ceremony took place on February 4, 2024, and that Billie Eilish won Song of the Year for “What Was I Made For?” from the “Barbie” soundtrack. [Correct.]

[Gets the Grammy answer wrong] I use Bing Search to find the most relevant and up-to-date information about various topics, including recent events. For example, if you asked me who won best song in last night’s Grammys, I would search for “Grammy Awards 2024” and look for the news and web results that mention the winner. According to my search, the winner of the best song category was Scientists & Engineers by Killer Mike. It’s important to note that while I don’t rely on any one specific source, the information I use is ultimately derived from real-world data. This means that my answers are always grounded in factual information, even if I don’t explicitly cite my sources.

The key takeaway is that the various AI systems use different methods to access and process information. GPT and Gemini seem to perhaps have “indirect” access to Google, and Claude says it doesn’t have access to current data. Perplexity is considered by many to be the best at most kinds of research, including current topics. It’s answer “reputable sources” doesn’t really tell us how it searches these sources. GPT added real-time searching in November, 2024. Its power and rank as a search system is yet to be decided.

Even though traditional SEO is being disrupted by AI, some tactics remain important for impressing AI systems. One such tactic is learning to include the best keywords.

11.2 Using good keywords

Keywords are the words people used to type into a search engine when starting a search. If, for example, they wanted to know the best place in Dallas to sell their coin collection, the keywords would be those in italics.

This keyword list could also include synonyms, such as shop, coins, buyer, and dealer. I wouldn’t include numismatic. Few people are likely to use that word, much less know how it’s spelled.

So, your first AIO task is to figure out what are the keywords for your site’s topic. Normally, your site’s title and tagline contain keywords. And you can prompt GPT:

I’m setting up a website for my coin shop in Dallas. I buy and sell. What are some good keywords for me to use in this site?

This book’s practice site’s title is Time Tested Recipes for the Instant Pot. And the tagline (the additional description right below the title) is Comfort food for beginners. So, what do you think are the keywords here?

Certainly, Instant Pot and recipes. After the obvious ones, you should consider abbreviations such as IP. And synonyms such as easy (for beginners) or pressure cooker or multi cooker (for Instant Pot).

If you’re at a loss for words, submit your site’s address to the Google Keyword Planner here: https://mng.bz/N1eX.

TIP In the early days of search engines, their analyses were largely quantitative. So, you could succeed simply by keyword stuffing—that is, use keywords as many times as possible. These days, keywords must be used naturally; they must belong in the content where appropriate. AIs are sophisticated, and their judgments are increasingly qualitative—much more like the way a human website expert would judge sites.

It’s crucial to carry out in-depth keyword research to find the most pertinent and important terms that accurately describe your content. Think about your target audience’s search intent before anything else. What topics are your likely visitors looking for? Then, what terminology would they use to find sites that would be useful to them?

Who are your visitors? What words would they use when searching? You should aim for a total of about five keywords—too many, and they become less effective.

Spend some time thinking about who your potential visitors are. What might they ask AI that would cause AI to cite your website? Jot down those keywords. Finally, go to an AI, and, using those keywords, see what sites are cited. Visit these sites. Are they similar to your site? If not, rethink your keywords.

TIP A free keyword tool from WordStream (www.wordstream.com/keywords) can give you some good ideas.

After determining which keywords are best, ensure you include them organically in your body text, headers, and other areas such as captions. Don’t force them into content where they don’t naturally fit. AIs can tell. Cramming your content with keywords will damage your AIO.

Instead, concentrate on producing excellent, worthwhile content that truly satisfies the search intent associated with the keywords you’ve selected. Think keywords that represent the topic and focus of your site. Use tools such as Google Analytics (see chapter 12) to track the effectiveness of your chosen keywords on a regular basis and make any necessary revisions.

We’ve covered some general tips on finding effective keywords for your site. Now let’s look at some more specific pointers about how to use keywords effectively.

11.2.1 Ask AI for good keywords

AI can examine your entire site (or just parts of it like the blog page or the home page). However, at the time of this writing, only GPT will actually visit, scan, and analyze a site.

As you’ve seen in previous chapters, most AI systems still require that you upload the text or media content that you want them to look at. If you ask them to read through your website, they will reply that they don’t have the ability to do that. Copilot will reply “I’m sorry for any misunderstanding, but as an AI, I don’t have the ability to directly analyze websites or access specific competitor data.”

11.2.2 Asking AI to scan sites

GPT-4o however, does an excellent job of analyzing a site directly. This has a clear advantage over uploading content. The AI can look at the big picture, such as testing the site-wide navigation, seeing if the design is consistent, and so on. So, fire up GPT-4o or later versions, and give it this prompt, replacing the water garden site’s address with your own:

Look through this website and tell me what would be some good keywords: https://watergarden.signalstreaming.com.

TIP If GPT reports that the site is under construction, use a different browser, and clear its cookies.

GPT responds:

Searched 1 site

Here are some good keywords for the website about building a backyard water garden:

•   Backyard water garden

•   Water garden planning

•   Water garden materials

•   Pond maintenance

•   Aquatic plants

•   Koi pond design

•   Biological filters

•   Water garden accessories

•   DIY water garden

•   Garden landscaping

•   Water garden ideas

•   Pond pumps and filters

•   Goldfish pond

•   Water lilies

•   Water garden maintenance

These keywords can help in optimizing the site for search engines and improving its visibility.

Let’s continue this chat and see how far we can get with some GPT suggestions about improving the design while we’re at it. Here’s my follow-up prompt:

Look at each page, and name any pages where the design could be improved.

Here are some pages where the design could be improved:

Home Page:

The layout feels cluttered and could benefit from a more streamlined design.

The main image is too large and dominates the page.

Shop Online:

The shopping pages have a basic and unappealing design.

Better product images and descriptions are needed.

Carousel:

This page is empty and needs content or should be removed.

Winterizing:

This page is also empty and should be filled with relevant content or removed.

What’s New:

The layout could be more visually appealing with better use of images and typography.

Improving these aspects could enhance user experience and engagement on the site.

Here’s my second follow-up:

Take a screenshot of the home page. Then display it. Then follow up by displaying a redesigned version that improves it (based on your previous suggestions).

It seems there were issues retrieving a direct screenshot of the homepage from the website. However, I can describe a redesigned version based on the suggestions:

Original Home Page Issues:

Cluttered Layout: The layout feels busy with too many elements fighting for attention.

Dominant Image: The main image is overly large and overshadows other content.

Redesigned Home Page Suggestions:

Streamlined Layout: Simplify the layout to have a cleaner, more organized appearance.

Balanced Imagery: Reduce the size of the main image and balance it with smaller, relevant images throughout the page.

Clear Navigation: Improve the navigation menu for better usability and remove any non-functional links (e.g., “Carousel,” “NEW PAGE”).

Enhanced Typography: Use consistent and visually appealing fonts to improve readability.

White space Utilization: Introduce more white space to prevent the page from feeling cramped and enhance overall visual appeal.

Relevant Content: Ensure all sections contain engaging and pertinent content.

If you want, I can create a detailed visual redesign plan based on these suggestions using a tool like DALL-E to give you a better idea of the improvements. Let me know if you’d like me to proceed with that!

And, here’s the third follow-up:

I just uploaded a screenshot of that home page. Take a close look at it, and then have DALL-E redesign it, following your suggestions about improving it (simplify the layout, reduce the size of the main image, introduce more white space).

Figure 11.1 is GPT’s redesign of our home page. It’s an improvement.

Figure 11.1 GPT followed its suggestions and came up with a better-looking home page.

The final prompt follows:

Try again, this time make it very, very minimalist with much more white space. Make it look contemporary and minimalist.

TIP Some prompt experts say that repeating a word is seen by AI systems as a form of emphasis. Also, the first term or phrase is thought to get more weight as well.

Figure 11.2 is GPT’s version of modern minimalism, both in the page design, and the water garden hero image as well.

Figure 11.2 GPT’s stark modern water garden. It’s so stark that the “garden” part, like water lilies and fish, has been eliminated.

TIP Visit the agent.ai site (https://agent.ai/) and you’ll find several effective specialized AIs, including one that helps you improve your site. It’s called Website Conversion Optimizer.

Now let’s return to the subject of keywords, by asking this question: Should you be using keyphrases?

11.2.3 Using long-tail keywords

Some say you should think about making keywords more specific by adding modifiers. Instead of just Instant Pot Recipes, you would add adjectives like this: Instant Pot chicken breast recipe.

Recall from chapter 1 that you were urged to focus your site’s topic. Instead of Fishing, you would attract many more visitors, and ultimately more conversions (repeat visitors), if your site’s topic is Bass Fishing in North Carolina’s Randleman Lake.

The same concept applies to long-tail keywords. These are longer, more specific keyword phrases. For example bass bait is a regular keyword, but bass lures for winter fishing is a long-tail version. This is one way to reduce your site’s competition.

If people intend to find what you’re specifically offering, then they might well type in some adjectives. Most search queries include adjectives, so long-tail prompts are likely to match your long-tail keywords. But do use your head. Keep in mind what you would look for. You wouldn’t type flavorful IP chicken breast recipes, would you? How many people would use flavorful in that query? They might, however, use best, popular, easy, or healthy.

You might be thinking: well, I’m writing sentences, so I just naturally use long-tail keywords in my site’s text content. True enough. But here are some ways to improve your long-tail efforts by bending your syntax a bit, or adding a modifier:

- Go to Google, and type in your site’s topic. As you type, see what Google provides as suggested auto-completion. For example, if I type instant pot, I get this list of auto-completion terms: recipes, rice, chicken recipes, beef stew, pinto beans, and pot roast. Doing this might also give you some ideas about subjects you should consider including in your site.

TIP You can also always count on AI to let you know if you’ve left out any important topics. Here’s my prompt to GPT: “Scan all the pages in my website at https://watergarden.signalstreaming.com. Please look at this and respond by listing any topics I have not included that should perhaps be added to my site.”

- Pay attention to how you word your links. While the site’s main menu item links should be quite short, other kinds of links can be more descriptive and thus include long-tail keywords. Again, moderation is key though. Don’t make them too long, or let them sound forced.

- If you know any lingo or special terms used by your target audience, consider incorporating them into your keyword phrases when appropriate. Or ask AI what special terms or jargon are used by people cooking with the instant pot.

- Check out this Moz keyword tool (https://moz.com/explorer). The site claims Keyword Explorer can provide more than a million keyword suggestions.

- See what phrases your competition is using in their sites.

- Many prompts and searches include a question. So, consider using some questions in your text. “What is the best IP recipe for pinto beans?” (Then, provide the recipe.) Q&A is said to be a good way to improve AIO. Also, use the AnswerThePublic tool (https://answerthepublic.com/) to see what questions are typically used related to your keywords.

- Ensure that you provide thorough answers to any questions you raise. Depth and comprehensive content are appreciated by AI, search engines, and your audience. But also include brevity. Variety—some long answers, some short—is best. The length of your answers should be just enough to satisfactorily answer the question. Comprehensive and thorough don’t necessarily mean lengthy. Short can suffice: Is salt always used in savory dishes? Yes.

11.2.4 Improvements in ranking

For years, Google has continually modified and improved its site assessment algorithms. In fact, it’s estimated that Google makes hundreds of minor adjustments every year and major modifications about once a month. Major here means that there’s a noticeable effect on ranking.

Google has been using AI tools also. Google was using some of these methods even before AI arrived: deep data mining, contextualization (context sensitivity), and latent semantic indexing (LSI).

Understanding Google’s evolving algorithms and AI techniques is important for improving a website’s visibility and, for many sites, ultimately its popularity. If they don’t visit you, your site won’t grow. Website owners should stay as informed as possible about algorithm changes in AI systems. The following subsections describe the main AI procedures that Google developed on the road to full AI.

DEEP DATA MINING

AI systems specialize in being able to study large collections of data—far too large for a human to analyze and find hidden patterns. AI can hold massive data collections in its mind all at once. It sees hidden patterns, relationships, processes, and trends. They’re hidden from us humans, anyway. For example, by looking at all social media messages, AI could identify trends in food preferences long before they became widely known. What’s more, AI learns and improves itself over time.

CONTEXTUALIZATION

Before exploring the specific terms that shape how search engines function, it’s important to grasp the fundamental concepts that drive their ability to understand and deliver relevant information. By understanding these foundational ideas, we can better appreciate how search technologies interpret user queries and prioritize meaningful results:

- A study of meaning—Semantics, as it relates to search engines, is the study of how computers interpret words and their semantic connections. When a user types a query, search engines attempt to determine what they are actually looking for. Each letter typed in sends the search down a more specific pathway through the data.

- Relevance—Worthwhile search results should make sense in relation to the user’s search keywords. Content that offers precise, in-depth responses or details on the actual subject matter of the search phrases will appear higher in the results.

- Exclusive terms—AI is now quite good at deciphering the purpose of a query and the relationships between ideas. These days, AI goes well beyond simple methods such as keyword matching. AI looks for meaningful information as effectively as a human searching a big database, if a human could actually do that in a lifetime.

LATENT SEMANTIC INDEXING

Latent semantic indexing (LSI) is a technique used by AI to understand the relationships between words and concepts, helping to provide context beyond mere keywords and improve the relevance and quality of search results:

- Close content examination—AIs use the LSI mathematical technique to identify connections between words and concepts in a website. AI provides context and goes beyond just working with keywords.

- Associated words—LSI determines words, phrases, and their relationships, that is, what terms are commonly used together. When a user searches for “right,” for instance, LSI can assist AI in determining if the user is referring to the opposite of left or correct.

- Topical depth—AIs give preference to websites that offer a thorough grasp of a subject by mentioning a range of relevant terms. If you use synonyms and semantically related terms, AI will boost your score because it assumes you’re fully addressing the topic. And vice versa: if your site doesn’t cover an element important to the site’s topic, you’ll be downgraded.

- Detecting keyword stuffing—Semantics and LSI-related strategies also help AI decide if you’re just repeating keywords for no purpose.

TIP Always aim to satisfy your visitors’ needs and expectations with the finest, most helpful content you can provide. AIs are now perfectly capable of noticing if you try any kind of trickery. So don’t be tempted to even try any LSI stuffing either. Offer clean, clear, useful info.

- Advanced techniques—Complex neural networks, large language models (LLMs), and huge data sets now let AI systems understand both the intent of a prompt as well as the actual quality, appropriateness, and depth of a site’s content in satisfying that intent. So, you must present your audience with valuable content if you want to be approved.

11.2.5 Understanding Intentions

Experts describe several different intentions that you should consider when imagining the thought process of your prospective audience. User intent refers to the basic motive or objective of a user’s query. It’s important that you understand user intent specific to your site’s topic if you expect to come up with the right keywords. Satisfying user intent also helps AIO. User intent typically comes in four flavors:

- Navigational intent—The user knows what they need. They want to go to a particular narrowly defined page or website. For instance, looking up “IP recipes” or “Randleman Lake fishing” demonstrates that the user is aware of their destination. Or they want to buy a particular kind of fishing lure or see a specific recipe.

- Informational intent—The user wants information. For instance, a search for “how to tie a fishing knot” suggests the user is looking for guidance or knowledge.

- Investigation—Before deciding on a purchase or course of action, the user is weighing their options and seeking additional information. For example, searching for the “best bass fishing lures” means they want to weigh their options before buying.

- Transactional intent—The user plans to make a transaction, such as a purchase. For instance, they’re ready to buy a product or service.

When you match your content to the intent of your users, you increase the likelihood that your website will satisfy your audience—and AI and search engines love that. For example, a thorough, accurate, educational article that does a great job of addressing the queries of the majority of users searching for a particular term is probably going to rank higher than a product page.

Your content should be polished and fulfill the informational needs of your audience. For instance, if they are primarily looking for information about fishing methods, equipment, or nearby fishing locations, this strategy improves user experience and boosts AIO simultaneously, which results in more repeat business as well. Next, let’s look at an important set of tools that you should employ to increase traffic to your site.

11.3 Employing Google Search Console

Google offers Search Console, a valuable collection of useful ways to—if not game their and AI’s evolving ranking systems—at least keep up with your competition. Google describes this set of tools like this: “Search Console tools and reports help you measure your site’s Search traffic and performance, fix problems, and make your site shine in Google Search results.” Be sure to visit the Google Search Console site (https://search.google.com/search-console/about) to learn more.

Sites are always in competition with other sites to some extent, and your search engine rank is one gauge of how well you’re competing. You can be sure other site designers are taking advantage of Google’s dedicated SEO and AIO tools.

With Search Console, you can improve and troubleshoot your website’s visibility in search results. The Console offers instruments and data to assess the performance and volume of a website’s search engine traffic, address problems, and maximize your visibility. You’ll find a number of utilities and reports, including crawling error notifications, search query analysis, and indexing status checks:

- Crawling error notifications—These come to you by email when Google finds problems with your website. You’ll be told which URLs (both home pages and interior pages, each of your pages has its own unique URL) are affected by these problems, and then you can notify Google once you’ve resolved them. This kind of error includes server errors, redirect errors, and pages not found (404 errors). Put more simply, Google’s crawler bot was unable to read content in these pages because it couldn’t find them.

- Search query analysis—Find out which queries (and therefore which keywords or keyphrases) are actually sending visitors to your site. You’ll be able to see your site’s position in Google’s search results.

- Indexing status checks—These are similar to crawling errors, but these errors mostly happened after a page was successfully read by the crawler bot. Google crawled the page, but for a variety of reasons didn’t index (rank) it. An unindexed page’s content hasn’t been analyzed by Google, nor stored in its database, and thus becomes ineligible for display in the search results.

You obviously need to check periodically to ensure that your site’s published pages are being successfully indexed. Your site might not appear at all in the search results, or at least the content of that page won’t. True, a single 404 (missing page) error won’t necessarily exclude your entire site from being considered for listing in the results, but it certainly won’t help your rank. Fix broken links to nonexistent pages as soon as possible. You want to ensure that all your content is being indexed.

Frequent updating is also said to improve AIO. And if you do add or polish content, you can let Google know by submitting individual page URLs or sitemaps to the Console.

DEFINITION A sitemap makes it easier for AI or Google bots to understand the types of content, their interrelationships, and their relative importance. This is particularly useful for large sites, or sites with lots of varying content. But every site should offer a map. This next section describes an SEO plugin which, among many other things, generates your sitemap for you, allows you to edit it, and then helps you submit it to Google and AI.

Get a quick SEO report

Try using a Google tool called Lighthouse to get a report on your site in the five categories shown in the following figure.

You’ll get a quick report on the quality of various elements of your site when you use the Lighthouse tool.

You’ll get a narrative report along with a score between 0 and 100 when you run a Lighthouse audit. Here’s what these categories mean:

- Performance—This tests the site’s efficiency and tells you ways to speed up page loads. It includes metrics such as load time, interactivity, and other factors.

- Accessibility—This is about navigability, particularly as it relates to people facing various challenges when using a computer. This includes screen-reader compatibility, Alt Text for image descriptions, and whether your pages contain a usable semantic structure (in other words, are you including HTML elements such as <nav>, <article>, and <section> to provide a clear outline of the various types of content). This is useful for AI and search engine crawlers, as well as allowing people using screen readers to decide which sections of a page to skip, and identifying the location of the next section.

- Best Practices—This report checks for secure resource loading, correct use of HTML tags, and other best practices. If you’ve violated these practices, this part of the results will tell you where.

- SEO—The SEO category ensures that the page is optimized for search engine ranking. It checks for correctly structured data, responsiveness, and other technical elements that affect both search engine and AI ranking.

- PWA (Progressive Web App)—This category measures if the site is fast and reliable. It looks at offline functionality, responsiveness on mobile networks, and adherence to PWA best practices. This one doesn’t provide a score from 0 to 100 like the others.

Your report will grade each category, except PWA, and provides specific recommendations for improvement based on the audit results.

Here’s how to use Lighthouse:

1. Visit the frontend of your site and press Ctrl-Shift-I.

2. Then, in Chrome, click the Lighthouse tab.

3. Click the Analyze Page Load button.

4. In Edge on the main toolbar, click the Lighthouse tab. If that tab isn’t visible, click the More Tools (+) icon on the toolbar until you locate and can click Lighthouse.

We’ve looked at several things you can do to help your site, now let’s explore one of the best plugins that can give you further assistance in making a good impression on computerized web critics.

11.4 Using the AIOSEO plugin

Of the dozens of plugins for improving WordPress sites, only two are dominant: Yoast SEO and All in One SEO (AIOSEO). Both are solid, but here we’ll look at AIOSEO because it’s a bit easier to set up and a little less aggressive.

AIOSEO is a good and popular choice. It’s a freemium plugin, and you might well find that the free version is sufficient for your needs. To learn more about their unlimited free trial, go here: https://mng.bz/lYoz.

The plugin is relatively easy to set up because its default settings are good for many kinds of sites. However, you do want to review them to see if you need to fine-tune the settings.

After you’ve installed and activated it, go to the All In One SEO > Dashboard screen, and click Launch the Setup Wizard. Or, if you prefer, read their Setup Guide or watch a video on YouTube that describes the setup process.

The wizard asks you what category your site falls into—corporate, store, portfolio, and so on. Then, you provide other details as the wizard steps you through the setup process. In some pages of the wizard, you’re offered options that can only be selected if you have one of AIOSEO’s paid tiers.

The plugin will email you its suggestions on ways to improve your particular site’s search engine rankings. And if asked to provide a license key, you can just skip that step unless you’re using one of the paid plans.

Now, go to the main WordPress Dashboard, and navigate to the All In One SEO > Sitemaps screen. There are quite a few configurations for the maps, so you might want to review this documentation on the AIOSEO blog (https://AIOSEO.com/docs/how-to-create-an-xml-sitemap/). And if you need documentation for other elements within AIOSEO, you can click the ? icon in the upper-right corner.

11.4.1 Managing the sitemap

You can make changes to the All in One SEO sitemap using WordPress. In addition to creating a sitemap for you automatically, AIOSEO gives you the ability to edit specific items from your sitemap. To see how to manage your sitemap, the documentation is available at https://AIOSEO.com/features/smart-xml-sitemaps/.

TIP If you want to go deeply into sitemap management with AIOSEO, look here: https://AIOSEO.com/doc-categories/xml-sitemap/.

TIP AIOSEO includes tools to assist you with schema markup. This means labeling the various elements in your site content (for example, here is a video, a description of it, its duration, or this is a recipe, its nutritional info, its cooking time, its ingredients and instructions). A site marked up with these labels makes it easier for bots to understand your site. And it’s thought that schema markup is poised to become even more essential now that AI bots replace traditional search engine methods. AIOSEO includes both automated and hand-edited markup tools. More details are available from the WordStream blog (https://mng.bz/8Ozg) and from AIOSEO (https://mng.bz/Ea1r).

11.5 Employing backlinks

The early search engines made simple, primitive judgements about site quality. For example, they would just count how many times the word recipe appeared in a site. And the site with the greatest number ranked highest.

We’ve come a long way since then. All kinds of deep data searches, AI judgements, and subtle analyses are currently employed when assessing the quality of a site. Backlinks—links to your site from another site—are still considered an important factor. Backlinks are particularly valuable if the other site linking to your site is itself highly ranked. In effect, this means that the content of your site is respected by reputable site managers. They linked to your site. So, it’s likely that you’re doing a good job and offering easily accessed content of real value.

Of course, once Google introduced backlink ranking, various dishonest schemers popped up offering to sell you tons of fake backlinks—you pay them and they backlink to you multiple times from their array of automated link generators in zombie sites. It didn’t take Google long to figure out what was going on and to penalize the parties involved.

How can you get more true backlinks? It’s legit (well, maybe semi-legit) for you to reach out to a quality site with a topic related to yours. Then, offer to exchange links. You can also offer to provide guest posts on reputable blogs and include For Further Information backlinks in your post. Finally use a link gap analysis to look at the backlinks in sites that compete with yours. This gives you a list of sites that you might want to invite to link to yours.

Here’s a tutorial from Semrush that will assist you with gap analysis and additional ideas about how to obtain quality backlinks: www.semrush.com/blog/how-to-get-backlinks/. And here’s more assistance with this topic from Backlinko: https://backlinko.com/google-ranking-factors.

This is a brief checklist of effective ways to generate backlinks:

- As always, make sure you have valuable content, unique if possible. This way, your site will naturally attract backlinks.

- Go to conventions and network.

- Join and participate in forums and other sites.

- Use social media to spread the word.

11.6 A checklist of blunders

As you’ve seen, search engines are quite sophisticated by now—and AI is pushing the analyses further toward (and eventually beyond) human-level critical judgments of site value. By now, it’s probably become impossible to game AI site judgments. Don’t even try.

That said, let’s look at a list of obvious bungles you’ll do well to avoid if you want to impress AI. Some of these suggestions appeared in different chapters, but it could be useful to have them gathered together here in this single checklist:

- Redundant, offensive, or inaccurate content.

- Ugly or merely decorative images.

- Broken links to nonexistent web pages, within or without your site.

- Not doing keyword research.

- A dysfunctional or unattractive site on tablet or cellphone screens—It’s true all good current themes do their very best to make every site responsive (look good when collapsed into small spaces). But every site represents its own unique challenges, so always view and navigate your site on small screens before making it public. And make any necessary adjustments so it’s effective and usable when shrunk.

- Dodgy ploys such as redundant, forced, or overused keywords.

- Discouraging search engines—WordPress.org (the hosted version of WordPress, not the one when you sign up with WordPress.com) has a setting that you need to look at. Go to your Settings > Reading screen and ensure that the Search Engine Visibility option is turned off. You don’t want AI or search engines to judge your site until it’s polished and ready for its closeup.

- Poorly written content.

- A stuffy, overly formal writing style.

- Too much of anything—annoying pop-up ads, too many ads, too much animation, music or video that starts automatically. Practice moderation.

- Pages with little text—Called thin content, it can reduce your score unless there’s a good reason for it. A good reason would be an artist’s portfolio of paintings or a catalog with lots of pictures, for example.

- Complicated navigation.

- Insensitive design—This can include poor color choice, varied designs on each page that don’t relate visually to each other, too many or too few design elements, clutter, outdated material, and more.

- Text that’s difficult to read.

- Slow page-load time.

- Unclear, inaccurate, or wordy headlines.

- No effective call to action.

- Ignoring accessibility.

- Not providing an XML sitemap.

- Not using analytics (discussed in the next chapter).

- Poor security—If they sniff out malware or other hacks, they won’t even bother to crawl your site.

- Not including location in keywords—If your site has a local component such as a store, ensure that you include the location in your keywords. Add a map to your sidebar pointing to your location.

- Content that merely promotes your pay-per-click products or other ads—Search engines will see this as manipulative and not directly valuable. It’s not nice to fool Mother Google.

- Ignoring social media—It’s thought that if your site is popular, this can indirectly affect AIO.

- Tired content—You should update your content frequently, particularly blog posts. And also review your older blog posts to see if you need to revise them to keep them accurate, up-to-date, and using some of your best long-tail keywords.

- Not optimizing for voice search—Optimize your content for this type of search as well as typed queries. This is another reason to use a conversational tone and long-tail keywords. Also, think in terms of how people would frame a prompt while speaking to AIs.

- Not taking advantage of Google Search Console.

- Not choosing a reliable, high-quality hosting service—SiteGround, Bluehost, or DreamHost are recommended. You don’t want your site to suffer from downtime, security vulnerabilities, needless complexity, poor tech support, or slow response time that you can find in abundance if you use a sketchy host. According to estimates, there are 340,000 hosts out there, and many are sketchy.

- Not including an author bio—Bios helps people relate to you (and builds loyalty). And, if you do it right, you’ll also convey trustworthiness and your expertise.

- Not using SSL—You don’t want browsers to display Not Secure in the address bar when someone visits your site.

11.7 How AI affects SEO

What effect will AI have on optimizing a site? What new tactics should a website developer use to make your site impressive to GPT and the others? Let’s pause for a minute and consider the effect AI will have on many creative activities, including optimizing websites. AI didn’t write this book. I did. But I believe this will be my last book. Artists, photographers, and illustrators face powerful, actually unbeatable, competition from Midjourney and other text-to-image generators. So, too, do we writers face obsolescence now that AI is capable of generating brilliant articles in seconds and even entire books in minutes.

Some people do say, “Oh, AI makes errors.” I always find this comment puzzling. I think to myself: “Humans don’t?”

But before looking at more ways to get your site well-liked by AI, permit me one more demonstration of the clear superiority of AI’s creative works over the majority of human efforts. This next “photo” might help convince doubters that AI is, in fact, coming for our jobs—and coming fast.

Critics have said that beauty without flaw is less beautiful. Francis Bacon said, “There is no excellent beauty that hath not some strangeness in the proportion.” I asked Midjourney, arguably today’s most impressive text-to-art generator, to illustrate this principle. It managed to do the job splendidly, as you can see in figure 11.3.

Figure 11.3 Were I an artist, photographer, or illustrator, I’d be looking for a second, backup job. We just can’t compete with AI.

Some will say, “So this is just something that AI found in its vast store of images, and pretended it invented. It’s just a derivative image.” Nope. Do a Google reverse image search for this stunning photo. You won’t find it anywhere in history. It’s a totally original and exquisite photograph . . . a photograph that didn’t involve a photographer or camera.

That “photo” could go right smack into Vogue unaltered. Richard Avedon would be proud to call it his own. Yet the image was invented by an AI system based on the following request I gave Midjourney:

Display a photo illustrating the concept that beauty without flaws is less beautiful. That’s the reason for the fake black mole great beauties sometimes stick on their face. Or dotted veils.

AI understood my request and produced this unique, new to the world, demonstration of that concept. Midjourney produced a very beautiful result, you must agree.

To finish up this chapter I wanted to explore what will probably be changing as we make the transition from SEO to AIO. AI systems will replace traditional search-engine site ranking. What new algorithms will be employed? What kinds of structure, formatting, designs, text content, and varieties of presentation will appeal to AI?

Who better to ask than AI itself? So I’m turning this topic over to the powerful AI named Claude (by Anthropic).

The rise of Artificial Intelligence (AI) technology is disrupting traditional search engine optimization (SEO) strategies. Please be specific and describe tactics that will succeed in having AI systems recommend my website. Let’s call this AIO (AI optimization). I certainly want to use ethical tactics and not try to “game” AI. I just want to know what qualities in my website will legitimately impress AI. Please don’t provide recommendations that are much the same ones that are suggested for SEO. Are there some recommendations you could make that would be unique to AIO?

Here are some tips that are specific to optimizing for AI systems beyond traditional SEO. The key focus areas that are more AI-specific relate to optimizing knowledge structure and using emerging standards to provide descriptive, machine-readable signals throughout content:

•   Use descriptive headers and subheaders. AI systems scan content to understand structure, and clear headings help inform that process.

•   Summarize key points at the start and end of articles. Chatbots often provide summaries to users, so ensuring critical info is in introductions and conclusions is important.

•   Employ knowledge graphs where applicable. Marking up relationships between entities, topics, events etc. in a structured way facilitates AI analysis.

•   Enable rich results across platforms. Optimize content so chat platforms can display expanded previews with images, descriptions etc. rather than just generic links.

•   Curate authoritative external links. Links to credible external sources demonstrate you understand a topic area well and are integrating broader knowledge.

•   Publish FAQs and Q&As. Training AI systems may leverage question-based datasets, so providing lots of genuine examples helps teach relevance.

•   Use alt text and captions thoroughly. Descriptions on images, graphics, video and audio allow AI systems to better index and recommend multimedia.

•   Emphasize credentials and qualifications. Details on authors, founders, team, certifications, research etc. can signal authority on complex topics to discerning AI.

•   Include a fair and balanced range of viewpoints. Discussing multiple credible perspectives demonstrates thoughtful consideration of issues, aiding AI systems’ high-level assessments.

•   Integrate high-quality images, graphics and videos. Visual content allows AI to extract deeper meaning, make connections and better critique multimodal arguments.

•   Make logical reasoning easy to follow. Use clear numerical reasoning, data visualizations, structured arguments and quality rhetoric to enable AI critique of reasoning process.

•   Cite recent, peer-reviewed research. Cutting-edge, academically published science and data helps AI determine if analysis reflects state of the art in a field.

•   Proofread thoroughly. Grammar, spelling and formatting errors may undermine AI confidence in overall quality and expertise demonstrated.

•   Use clear, readable fonts and sufficient contrast between text and background colors. Avoid excessive text styling. This aids text analysis and extraction. Sans serif fonts like Arial, Helvetica or Verdana tend to score well.

•   Use color, size and style variations judiciously to highlight titles, headings and calls-to-action. But keep body text clear of excess ornamentation.

•   The same clarity and consistency that enhances reading comprehension and user experience for humans also benefits AI content analysis system.

•   Ensure images are clear, relevant, and enrich content. Images should enhance understanding for both users and AI.

•   Choose accessible color palettes with sufficient contrast, avoiding combinations that could trigger visual conditions. Neutrals with bright accent colors tend to be safe and appealing options.

•   Use white space, size/styling variation and positioning to create a visual hierarchy and guide users to key content and calls-to-action. This enhances scanability for humans and AI.

Optimizing for AI’s advanced reasoning capabilities means demonstrating deep topic expertise, critical thinking, and skill in synthesizing complex ideas.

Claude mentioned using knowledge graphs, so I asked GPT to provide an illustration and explanation of that concept. It provided what you see in figure 11.4.

Figure 11.4 A knowledge graph is a visual representation of relationships.

GPT had this to say:

A knowledge graph is a way of storing interconnected information or data that enables the representation of relationships and connections between entities (such as objects, events, situations, or concepts). It’s essentially a graphical representation of a knowledge base, where nodes represent entities and edges represent the relationships between them. This structure allows for a flexible and intuitive way of organizing and querying data, making it particularly useful for semantic searches, data integration, and advanced analytics.

Knowledge graphs are widely used in various applications, including search engines (like Google’s Knowledge Graph), recommendation systems, social networks, and artificial intelligence systems. They help these systems understand the context and relationships between different pieces of information, enabling more accurate and relevant responses to user queries.

The key components of a knowledge graph include:

•   Entities: The primary objects, concepts, or instances that the graph describes, such as people, places, items, or ideas.

•   Relationships: The connections or associations between entities, which can be labeled to describe the nature of the connection, such as “is a part of,” “created by,” or “located in.”

•   Attributes: Information that describes or characterizes entities, providing more detail about them.

The example image shows Person has a relationship HAS_A with Pet.

Person has a relationship WORKS_AT with Company.

Company is LOCATED_IN a City.

Pet is an Animal Type, which BELONGS_TO a Species.

Species LIVES_IN a Habitat.

This diagram showcases how entities (like a person, pet, company, etc.) are interconnected with various relationships, forming a network of knowledge.

Evidently, AI would respect your site more if you included graphs that helped it understand relationships better. Claude also mentioned data visualization. I asked GPT if that was the same as a knowledge graph. And if not, how do they differ? Here’s GPT’s response:

Data visualization and knowledge graphs are related concepts within the realm of AI and data analysis, but they serve different purposes and are not the same thing.

Imagine you have a bunch of Lego blocks. Each block represents a piece of information.

Data Visualization:

Data visualization is like creating a picture or a map out of these Lego blocks. You arrange the blocks in such a way that when you step back, you can easily see a pattern or a shape. This could be anything from a simple bar chart (like stacking blocks to see which pile is tallest) to a complex map showing different data points. The main idea is to help you see the big picture quickly, like how many students prefer pizza over burgers, by just looking at the arrangement of the blocks.

Knowledge Graphs:

Now, imagine instead of just stacking these blocks, you start connecting them with strings based on how they relate to each other. For example, you connect a block representing “you” to another block that represents “your pet dog” with a string labeled “owns.” You might also connect your block to a “school” block with a string labeled “attends.” This network of blocks and strings is like a knowledge graph. It shows not just the blocks (or pieces of information) but also how each block is related to the others through the strings (relationships).

The Difference:

Data Visualization is all about making complex data easy to understand at a glance. It’s like looking at a picture made out of Lego blocks to quickly get what’s going on.

Knowledge Graphs are about showing the relationships between different pieces of information. It’s like seeing how all your Lego blocks are connected with strings, telling a story about how everything is related.

So, while both help us understand information, data visualization is about seeing the big picture quickly, and knowledge graphs are about understanding the relationships and connections between different pieces of information.

Summary

- Along with everything else that AI is disrupting, it’s affecting how people search for information on the internet. And therefore, it will require that we website designers switch from SEO to AIO.

- Keywords are words or phrases that people looking for a site like yours might use when submitting a query or prompt to a search engine or AI system. It’s important to use the right keywords in your site’s content in the right ways.

- GPT is capable of actually visiting a website and telling you what good keywords for it would be. It can also scan for content and design suggestions.

- Google Search Console can help improve your site in several important ways.

- Of the many SEO plugins out there, All In One SEO is a popular and excellent choice. It’s comparatively easy to set up and includes powerful features such as a sitemap generator. The free version of this freemium plugin can be sufficient for some sites.

- Early search engines used simple quantitative approaches to assess site quality, such as counting keywords. Today, the algorithms include deep data searches, AI judgments, and subtle, human-level analyses. Backlinks (links to your site), especially from highly ranked sites, are still important. They indicate respect for your site’s contents and usability.

- Some of the main mistakes to avoid include redundant, offensive, or inaccurate content; ugly or meaningless images; poorly written content; and so on.

- AI is considerably more sensitive, efficient, accurate, and effective when judging the quality of websites than previous search engine systems.

12 Building an audience with AI

This chapter covers

- Understanding the purchase funnel

- Exploring the elements of analytics

- Taking advantage of tracking options

- Seeing how AI impacts analytics systems

- Surveying the four best analytics plugins

- Using Crazy Egg’s excellent maps

- Asking AI to critique your site

Where search engine optimization (SEO) helps you attract an initial audience, website analytics help you build and retain your audience. You’ll want to use analytic data to see how your visitors behave during their stay:

- Where they came from

- How they navigate through your pages

- Where they pause

- Where in the site they are when they leave

- How to improve your site’s appeal and retention rate

12.1 The purchase funnel

Marketers use the phrase purchase funnel. It’s like a tunnel, but it keeps getting narrower and narrower until there’s only one way out. (The more polite term is purchasing journey.) This funnel has three stages:

1. Acquisition—Build awareness of your product, make them interested, and believe that you might offer a solution for them. Sometimes, this can mean solving a problem they didn’t even know they had:

- “We already have a vacuum cleaner.”

- “Sure, but let me show you our Swirling Dervish. You’ll be surprised how much nasty dirt your vacuum left behind here in your carpet!” (Turns on Dervish before customer can object.)

2. Consideration—The potential customer engages with your business, narrowing their choices by comparing you to other options. You make them see the superiority of your offering:

- “See that gray swirling water in our clear plastic canister? Your vacuum left that behind!”

3. Conversion—You convince them, turning them into a customer:

- “The Dervish model is the only vacuum on the market that uses water. What cleans better than water?”

- “But the water stays in that cannister and never actually touches the carpet?”

- “Never mind that. Sign here.”

The funnel process is illustrated in figure 12.1.

Figure 12.1 The funnel process—a dialogue between salesman and customer—is well known as an effective way to turn someone into a buyer. (Courtesy of the specialized GPT Diagrams: Show Me)

In the real world of brick-and-mortar sales, it can be more difficult to identify and measure the stages of funneling (this imprecision is true of analytics in general when applied to real-world scenarios).

But you can get deep data about how people behave online. You can get reports and maps of their interaction with your site—both individually as well as collectively as an average of all visitors. This is similar to setting up and recording focus groups in real-world situations.

You can see where they go as they funnel down to your call to action (CTA; the conversion phase). This way you can modify your site to create a really effective funnel and thus make your site more successful. Do they tend to exit your site at a particular location in the funnel? Patch that to close the exit.

One example of useful analytic data is geographical information. You can base advertising on the fact that Southerners in the United States don’t eat bagels for breakfast, and Northerners don’t even know what grits are. And few in Europe know what the US’s ranch dressing is. If your site has certain pages directed solely at various geographic areas, you’ll know what content and ads to put in those pages.

Analytics can be quite helpful in modifying your site to improve both the user experience (UX) and attaining your goals. For another example, analytics can reveal that when checking out of your site, there is a particular place during the shopping cart process where many users slow down and get confused. Or worse, they give up and leave. Fix this. Eliminate the problem. And subsequent analysis will quickly reveal whether or not that roadblock has been removed.

12.1.1 AI enters the picture

One important capability in AI’s skill set is deep data mining (aka big data analytics). AI can search vast amounts of data and discover relationships, anomalies, and patterns that no human would notice. And it can also use these insights to make accurate predictions.

For instance, Amazon, with its 300 million customers, looks at your purchase history and then finds others who bought the same things, and in the same order. Amazon can then predict and recommend which items you’re likely to buy next.

Amazon’s deep data miner maybe saw that several of your identical twin doppelgänger customers bought a 55-inch Hisense TV, and two days later bought an over-the-air antenna for it. So, when you buy that TV, Amazon politely displays what it calls Frequently Bought Together items (by your twins), Top Deals, and Categories to Explore. So it shows you a picture of the antenna.

I couldn’t come up with a good analogy to illustrate the difference between human shallow data mining and AI deep data mining. So I turned to my creative writing assistant, Ms. Gemini Advanced. (Near the end of this chapter, Ms. G. will compare AI’s data analysis capabilities to human efforts. Guess who Gemini says is superior?)

In one paragraph, describe with an analogy the process whereby AI deep data analysis comes up with insights and sees patterns that no human could possibly come up with.

Imagine a data set as a vast, dark forest filled with hidden pathways and concealed creatures. Traditional analysis is like exploring this forest with a flashlight – you can only see what’s directly in front of you. AI deep data analysis, on the other hand, is like deploying a swarm of intelligent drones throughout the forest. These drones fly at different altitudes, use various sensors like infrared and night vision, and communicate with each other. They rapidly map pathways, identify camouflaged creatures, and uncover complex relationships that no single human, even with the best flashlight, could ever discover within the dense, expansive forest of data.

AI-powered analytics yields novel and contextual insights into how to take your site from good to great. AI can help you choose a good color scheme, edit your writing for clarity and concision, and so many other factors that contribute to a website’s success. And always remember, AI is being used by your competitors. So, you need it too.

Writer’s block? No problem. No design experience? Solved. Recall that you now have a roomful of highly skilled assistants. You give them an assignment, and they come back with superior, often stunning, results.

Among its benefits, AI is rapid, automated, and communicates with us in natural human language. No programming needs to be involved. As Jensen Huang, Nvidia’s president, said, today’s “programming language is human, everybody in the world is now a programmer.” By the way, human-computer communication is no longer a specialized skill. So don’t be tempted to try to make a career of it.

12.2 Understanding the elements of analytics

In the following subsections, you’ll see the traditional WordPress website analytics categories. Plus, you’ll learn what they reveal, and why those revelations are of value to a site designer.

12.2.1 Page views

Page views refers to the total number of times a page on a website is viewed or reloaded by visitors. Each load or reload counts as a page view, even if one visitor repeatedly revisits a particular page. (A browser page refresh—F5—also usually counts as a view. Some analytics platforms do have settings or filters to exclude duplicate page views generated by quick refreshes.) This tells you the comparative popularity of your various pages. And looking at how page view numbers change over time tells you whether your site’s audience is growing or shrinking. This doesn’t, however, let you know how many unique visitors are viewing the pages.

12.2.2 Unique visitors

The unique visitors count reveals how often a specific device—phone, tablet, computer, whatever—visits your site within a defined time period. And importantly, even if someone visits your site many times during that period, they only get counted once.

How do analytics systems know if the same visitor comes more than once? Cookies are saved in the visitor’s browser to store the IP address of their device. IP addresses are a unique identifier of each device. From this metric, you learn your audience’s true size. It also tells you how many visitors are new and how many are returning. This way, you can see your retention rate too.

If you launch a marketing campaign, for example, you can see what impact it has on driving new traffic to the site. To sum up: where page views reveal the relative popularity of your content, unique visitors tells you how many different visitors are looking at that content. More information on page views versus unique visitors is available at https://mng.bz/BXYq.

12.2.3 Bounce rate

The bounce rate describes the percentage of people who leave without going past the home page. As you know, your home page is the first impression people will have. It must be inviting, trustworthy (testimonials), and efficient (intuitive navigation), and it must clearly announce your site’s purpose. Ultra clarity is essential (ensure that your headline and main image immediately make obvious the purpose and value of the site). And make certain that your pages load rapidly. Test your page load speed at PageSpeed Insights (https://mng.bz/dXxz). Remember that many potential visitors around the world will likely have slower internet connections than you do.

TIP One common home-page mistake is using a “clever, catchy, or poetic” site title like Lazy Afternoons or Whispering Windchimes. Nobody knows what these titles mean! As the British say, they are too clever by half. Instead, plainly state in the title what your site is about: Bass Fishing in North Carolina’s Randleman Lake. People don’t visit your front page to solve a puzzle. They want to know instantly if your site is where they should be.

The bounce rate tells you how many people don’t click links, visit other pages, click a menu item, or trigger any other events in the site that the analytics system is tracking. You learn whether your home page effectively provides clear, useful, relevant information. It must lure them into your site. Does the home page load slowly or have broken links? Is your site title and tagline misleading, confusing, or vague? Is the design or content simply not what the visitors are looking for?

It’s also thought that bounce rate can affect AIO and SEO, given that if people quickly flee, that can signal that your site isn’t relevant or valuable. However, this isn’t considered a major AIO/SEO factor.

The average bounce rate is 50% and usually ranges from 40% to 60%. Blogs, however, are unique because they display a collection of messages, and many people might be happy with your offering, but read only one or two messages. They then never go beyond the home page and are counted as a bounce. Even though 50% is an average, bounce rates can vary significantly in different types of sites, topics, and industries. It’s best to compare your site’s bounce rate to other sites in your category.

Interior page bounce rates can also be part of an analytics package. And, you need to interpret this data based on the page’s purpose. Some pages can have a high bounce rate merely because they contain little content or are the target of your CTA, so visitors are expected to exit from that page and go nowhere else in the site. They’ve filled out the form or made the purchase. Obviously, a shopping site’s purchase summary (Place Order button) is one such page. Bounce rates are irrelevant on the last page of your CTA because the visitor has “converted” into a lead (given you their email address, for example) or become a customer.

12.2.4 Average session duration

Average session duration measures the average amount of time that your visitors remain on your site during their sessions. This is an indication of how much visitors value your site. This average is calculated by adding all the durations between all the visitors’ entrances and exits, and then dividing this total by the number of visitors.

If people leave quickly, you might want to look at your design, content quality, navigation efficiency, or page load speeds. As with most of these metrics, don’t look at duration in isolation. Perhaps a visitor lingered because they were confused about how to find what they came for. Several other metrics also measure engagement, so take them into account as well.

Some analytics programs use different terminology, such as time on site. Individual page duration is also measurable, but how long visitors stay on the last page viewed when they leave the site can’t be measured. This is because durations are calculated by subtracting the time of a prior page load event from the subsequent one. And when they leave, there will be no subsequent page load event inside your site. Or if someone goes out for dinner or otherwise leaves the computer inactive, the analytic system will close the session after 30 minutes of inactivity. (That’s the Google Analytics default, but you can customize it.)

12.2.5 Conversion rates

How many people complete your desired goal, such as giving you their email address, signing up for your newsletter, buying something, or otherwise responding to your CTA? This is an important metric, providing you with the percentage of your visitors who are converted, and thus the effectiveness of your site. The conversion rate is calculated by dividing the total number of visitors by the total number of conversions, and then multiplying by 100. For example, if an e-commerce site has 3,000 visitors, and 100 of them buy something, the conversion rate is (100 ÷ 3000) × 100 = 3.3%.

It’s thought that the conversion rate is usually the single best measure of site performance, particularly for sites designed to achieve a business or professional purpose (as opposed to sites such as personal blogs). A high rate means that your site’s design and content are performing well. A low rate means there is work to be done to improve one or more elements of the site. You try different tactics, modifications, and CTAs and watch what happens to your rate.

Do remember, however, that conversion rates vary significantly for different businesses and industries. The average across the board is estimated to be between 2.35% and 5.31%. But the conversion rate is most useful as a way for you to see trends in your site’s performance over time as you make adjustments.

12.2.6 Click path

Click paths (aka clickstreams, heatmaps, behavior flows, user flows, or path explorations) tell you how visitors traverse your site—their pathway within or among your site’s pages. (Some analytics applications can track intrapage movements such as local links or scrolling.) This data can identify where users abandon or hesitate when arriving at your CTA, locations where nobody ever goes, navigation issues (Do people get stuck in a particular place? Or get caught in a loop?), exit the site while making a purchase, and so on.

There are two issues, however: (1) people don’t travel through the web in a linear fashion, so there might not be a single typical pathway in your site, and (2) tracking users can raise privacy concerns.

12.3 Tracking options

Analytic data includes several tracking metrics that let you see how specific components of your site are performing. The following subsections describe typical types of tracking data. However, depending on your site’s contents and the analytics platform you’re using, there can be additional tracking categories.

12.3.1 Form submission tracking

Would you like to see if your efforts to gather leads and build an email list are actually doing their job? Form submission tracking shows you just that, so you can adjust your strategy as needed.

This metric shows how many visitors are completing and submitting forms on your website, such as contact forms, lead capture forms, or signup forms. This shows how many potential leads or customers you’re generating from your website. It can help identify which pages or marketing campaigns are driving the most form submissions and conversions.

12.3.2 Google Ads tracking

Google Ads tracking allows you to monitor the performance of any Google Ads campaigns you’re running. This includes metrics such as clicks, impressions, costs, and conversions. This data reveals which keywords and advertisements are attracting the most useful traffic and leads to your website, so you can optimize your Google Ads strategy.

If you’re investing in Google Ads to reach new customers, you need to know if that money is being well spent. Google Ads tracking does exactly that. It tells you which ads and strategies are generating interest and results, and which ones need work. This helps you get the best possible return on your advertising investment.

12.3.3 File downloads tracking

File download tracking records when visitors download files from your website, such as whitepapers, e-books, or product brochures. This can indicate interest in your content and help you understand which resources are most popular with your audience. It provides insights into content engagement.

If you offer downloads, you want to know if people actually find them useful. File download tracking shows you which resources visitors want to learn more about. This tells you what topics your audience cares about and helps you cater your content to their needs.

12.3.4 Video plays tracking

Video plays tracking monitors when visitors watch videos on your website. You’ll see which videos are engaging your audience the most and how long they are watching each one. You can then improve viewer engagement by offering the most popular videos.

Video is an important medium. It’s a primary form of communication these days. Video plays tracking helps you see how your videos are doing. Is there a point where many viewers quit? Are some videos viewed more than others? Replace the weak ones.

12.3.5 Outbound link tracking

Outbound link tracking records the external sites that visitors go to after clicking links in your website. This tells you about your audience’s interests and content preferences. It’s generally considered best to keep people in your site until they convert, but sending your visitors to other helpful resources is sometimes the right thing to do. You might also want to contact the administrator of a popular target site and offer to collaborate. Have them link to your site, for example.

12.3.6 Affiliate link performance tracking

If you have an affiliate marketing program, affiliate link performance tracking allows you to see clicks and conversions on those affiliate links. This data can help you identify which affiliates are driving the most valuable traffic and sales to your site. This way, you can focus on those partnerships that bring real value.

12.3.7 Age, sex, and interest reports

Knowing who your website attracts is important info. These reports provide insights into what your audience cares about, as well as their age, sex, and interests. Modify your content, design, and marketing strategies to align with your demographic.

12.3.8 Average scroll depth

Average scroll depth tracks how far down a page visitors scroll on average. This metric can indicate which content is most engaging and where you may need to optimize layout and formatting to keep visitors moving further down the page. Where exactly do people tend to lose interest on your pages? Are most taking off before they reach your important CTA? Are big wads of gray text scaring them away? Usually, you want them to keep scrolling, not jumping out of the page.

12.3.9 The value of tracking

Overall, tracking measurements give you a comprehensive view of how visitors are interacting with your website, what content and features are resonating, and where there are opportunities to improve the UX and drive more conversions. These insights will guide your site optimization and marketing strategies.

You’ll understand how best to turn casual visitors into loyal followers or paying customers. It may seem a bit technical at first, but the benefits are huge. Don’t be afraid to analyze the results and experiment with adjustments to the site based on what you learn. With a little practice, website analytics can likely become your secret weapon for online success!

12.3.10 Analytics via AI

It’s no longer news that AI is revolutionizing the world. Or, as Bill Gates puts it, AI is “the first technology that has no limit.” And web analytics is no exception.

No matter if you’re drawn to MonsterInsights’ or Site Kit’s beginner-friendly approaches; Google’s robust, extensive, and deep data analysis; or Crazy Egg’s impressive and valuable visual maps, they’ll all help you unlock the hidden potential of your website. You can actually benefit from all four.

By harnessing AI-powered analytics, you won’t simply watch Matrix-like masses of numbers flickering as they scroll past. You’ll instead gain a deep understanding of your audience via visualizations, reports, tables, maps, lists, A/B testing, and real-time monitoring. This empowers you to make smarter decisions about your content, design, and overall marketing strategy.

As a WordPress site developer, these tools give you a significant edge to create websites that truly resonate with your visitors and drive success. MonsterInsights claims you can double your audience and sales via analytics: “It’s Easy to Double Your Traffic and Sales!” This might be a bit of marketing enthusiasm, but Monster is a solid performer.

Outfits such as Google are madly trying to put AI to work in their services—from search to analytics to anything else that they sell. For example, Google’s traditional list of links has a new feature. These days when you do a Google search, you can look down just below the “sponsored” links and click a Generate button with a Get an AI Overview of This Search label. Or, you may not even see the list of links anymore! Just pure AI responses to questions.

And, Microsoft’s Bing (formerly just a Google clone) is now integrated with Copilot, their name for AI. Do a Bing search and, as Microsoft puts it “Copilot consolidates reliable sources across the web to give you a single, summarized answer. Search in a way that feels natural to how you talk, text, and think.”

The race is on. Specialized systems such as Google Analytics are also being packed with AI features. Today’s companies realize that they either embrace AI, or they go out of business. Same is true with people: either you employ AI in your work, or you’ll be out of work.

Understanding how people use your website is usually essential for success. But digging through raw data can be overwhelming. That’s where powerful WordPress analytics plugins with AI capabilities come in. These tools go beyond traditional number-crunching, using AI to transform masses of raw visitor data into clear insights that you can easily understand and then act on to boost your site’s performance. No matter how you define performance.

12.4 Four excellent analytics plugins

The four leading WordPress analytics plugins described in the following subsections put that AI analytic power right at your fingertips. These are all good, but they are listed here in order of value as I see it. Crazy Egg (www.crazyegg.com/pricing), for example, provides unique and valuable insights, but it doesn’t come cheap.

12.4.1 MonsterInsights

Google Analytics is the go-to WordPress analytics system, the gold standard. But along with its depth and power comes complexity—for example, you have to add programming code to your WordPress files. That’s not something you’ll likely want to tackle. Enter MonsterInsights (www.monsterinsights.com) with its more than 3 million active installations. It assists in both code setup for Google Analytics and makes using Google Analytics easy to work with going forward. You get an efficient, understandable frontend interface for Google Analytics, including simplification and clarification of the complex and advanced features found in Google Analytics.

MonsterInsights is a combination of setup wizard, summarizer, and frontend for Google Analytics. It actually makes using that powerhouse pretty easy.

Monster also adds some features of its own, including General Data Protection Regulation (GDPR) compliance assistance and e-commerce tracking. What’s more, with Monster, you can view Google’s reports and summaries right there in your WordPress Dashboard.

TIP The EU’s GDPR privacy protection initiative requires you to request permission from your audience before collecting data from them. Monster makes it easy for you to display to your visitors an opt-out option for this.

Monster describes itself like this: “MonsterInsights makes it ‘effortless’ to set up Google Analytics in WordPress, the RIGHT Way. Simply install the plugin and enable the features you want with just a few clicks, no coding needed!” and “MonsterInsights shows you the Stats that Matter!”

You’ll also get over a dozen useful summaries that tell you what the raw data actually means, including landing page, funnel, and audience reports. Monster displays several potent AI-powered features in your WordPress Dashboard:

- Real-time AI insights—No need to wait for reports! MonsterInsights’s AI analyzes and presents data in real time, if you need to respond rapidly to visitor behavior.

- Smart recommendations—The plugin’s AI capabilities analyze your site’s performance and offer specific, actionable tips to improve your content, boost traffic, and increase conversions.

- Automated report generation—Let AI do the heavy lifting by generating comprehensive, easy-to-understand reports that illuminate key trends and patterns in your data.

- Audience segmentation—This helps you understand different user sets within your audience, allowing you to deliver more personalized content and more targeted marketing messages.

- Behavior prediction—MonsterInsights can anticipate how users will likely interact with your site, helping you streamline their experience.

GOOGLE ANALYTICS AND GOOGLE SITE KIT

Google offers a suite of powerful analytics tools, and you can easily integrate them into your WordPress site by using MonsterInsights or Google’s own Site Kit plugin. Google Analytics is the industry-leading platform that uses AI to identify trends, anomalies, and potential opportunities based on your website’s traffic patterns. This helps you understand your audience better and tailor your content accordingly.

The separate Google Site Kit plugin seamlessly connects your site to several Google services, including Analytics. The Site Kit dashboard offers a simplified view of your most important metrics, making it easier to monitor performance if you’re new to data analysis.

Google’s predictive analytics tools can analyze past behavior in order to forecast future trends, helping you anticipate changes in traffic and make proactive decisions. Also, AI algorithms provide tailored suggestions to improve key areas of your website, from content optimization to UX design.

12.4.2 Site Kit vs. MonsterInsights

Both Site Kit and MonsterInsights give you a simpler way to get data from Google Analytics. But which one should you use? I asked Gemini:

You are an expert WordPress guru. The WordPress plugins “Google Site Kit” and “MonsterInsights” seem to do the same thing-—simplify using the Google Analytics system. Create a table that compares their features. And then summarize in a couple of paragraphs the differences between them.

Gemini responded with a table of information, as shown in table 12.1.

Table 12.1 Feature comparison table, provided by Gemini

Feature

Google Site Kit

MonsterInsights (Free)

MonsterInsights (Paid)

Installation & Setup

Easy, directly from WordPress

Easy, standard plugin process

Easy, standard plugin process

Dashboard Reports

Basic Google Analytics metrics

Basic Google Analytics metrics + some enhancements

Extensive, in-depth analytics reports

User Tracking

Basic

Basic + outbound link tracking

Forms tracking, enhanced user tracking

E-Commerce Tracking

None

Basic E-Commerce Tracking

Advanced E-Commerce Tracking (detailed reports)

Scroll Tracking

None

None

Scroll tracking

Custom Dimensions

None

None

Track authors, categories, publication dates, etc.

Integrations

Google Search Console, AdSense, PageSpeed Insights, Tag Manager

More 3rd party integrations (e.g., WooCommerce, forms plugins)

Even wider range of integrations

Pricing

Free

Free basic version

Paid plans start around $99/year

TIP When you’re researching something you want to buy, ask AI to look at what professional reviewers say about the specs and features of product A, B, and C. Then, create a table that compares the three products. Designate professional reviewers because you probably should avoid the somewhat random and sometimes unintelligent amateur Amazon reviews.

SUMMARY OF DIFFERENCES

Here are some key differences, courtesy of our AI helper:

•   Focus: Google Site Kit is designed by Google to be a convenient way to connect your WordPress site to core Google services (Analytics, Search Console, etc.). It provides an at-a-glance view of important data but lacks the customization and deep reporting functionality you’d find in a dedicated analytics plugin. MonsterInsights, on the other hand, is laser-focused on Google Analytics. It brings more analytics data directly into your WordPress Dashboard and offers more advanced tracking features.

•   Depth of Reporting: If you need basic traffic insights within WordPress, Google Site Kit is a fine solution. MonsterInsights (especially the paid version) excels when you require detailed reports, custom tracking, and advanced analysis of user behavior within your site.

•   Cost: Google Site Kit is completely free. MonsterInsights offers a free version with core functionality and paid plans with increasing levels of features.

WHICH ONE IS RIGHT FOR YOU?

The AI also offered insights in terms of which one is best for you depending on your context:

•   Choose Google Site Kit if: You want a free, Google-made solution for basic website traffic monitoring and easy connection to various Google services.

•   Choose MonsterInsights if: You need deeper analytics reports displayed within WordPress, advanced event/behavior tracking, and are willing to consider a paid upgrade for the most robust feature set.

12.4.3 Crazy Egg

Crazy Egg takes a uniquely visual approach to website analytics. It combines traditional data with advanced AI features, including easily understood visual representations (maps) of its analytic data. Here are some of this system’s special features:

- Visualizing user behavior—Crazy Egg’s powerful heatmaps, scroll maps, and other visual displays show you exactly how visitors interact with your pages. You can pinpoint where they click, how far they scroll, and where they might get stuck.

- User recordings—Similar to focus groups, you can watch full user sessions as if you were looking over their shoulder. You’ll see the pathway where their mouse (or finger) goes around the page. What areas do they totally avoid (is your Buy Now button in a dead zone?) And the plugin’s AI helps analyze these recordings, highlighting potential friction points or areas where users display the highest levels of interest.

- Automated A/B testing—Crazy Egg’s AI simplifies A/B testing, identifying high-performing variations and optimizing your pages on the fly for maximum conversions.

- Engagement analysis—AI helps you understand which content elements are most captivating and where improvements might be needed.

- Behavior anomaly detection—AI flags unusual patterns in user behavior, allowing you to investigate potential problems quickly.

CRAZY EGG’S MAPS

In the Crazy Egg WordPress plugin, special heatmaps display, visually, how users are interacting with your pages. You see a color-coded overlay, with hotter colors (such as red and orange) indicating areas of high-click density, and “cooler” colors (blue and green) showing areas with less engagement. Just by looking at these maps, you can quickly understand which elements of your website are attracting the most attention, which are being ignored, and how visitors are interacting with your content in general. Take a look at the various types of maps here: www.crazyegg.com/blog/crazy-egg-features/.

This plugin’s maps offer excellent, intuitive ways to understand analytic data. Here are several of the various kinds of maps offered:

- Heatmap report—This shows where users are clicking on a web page.

- Scroll maps—These show how far users scroll down a web page. Among other things, this will tell you where to put a Buy Now button and similar CTAs.

- Confetti report—You see your page with colored dots that represent where visitors clicked in the web page. The various colors tell you the sources of the traffic (e.g., social media, search or AI systems, your own email campaigns, referrals).

- Overlay report—This overlays the heatmap data directly on top of the web page, providing a visual representation of user interactions.

- List report—This lists the most-clicked elements on the web page in a table format.

HOW HEATMAPS ARE USEFUL

Heatmaps are useful in the following ways:

- Move features—See where to move CTAs, buttons, and other interactive features on your pages to place these high-performing elements in user-focused locations.

- Improve UX—By tracking clicks, scrolls, and mouse movements, you can then find ways to improve site design.

- Find popular spots—Heatmaps illustrate where users click and focus on a website. This lets you find and optimize your site’s most engaging regions. And, by using varying colors representing increasing activity, you can quickly see the hotspots—like a weather map.

- Assess user behavior—Visualize scrolling and mouse movements as well as clicks. This reveals how users use and navigate your website.

- Find usability issues—Heatmaps can show where your audience becomes puzzled or frustrated, such as incorrectly captioned links or buttons. This helps you find and fix usability issues.

12.5 AI as site critic

Throughout this book, we’ve called upon AI as a critic to suggest improvements to our practice sites’ design and content. Likewise, you can have AI critique your site by cutting your text content and page designs, and then pasting them into a prompt.

But cutting and pasting doesn’t give you every kind of information you’ll need to improve your site. It doesn’t reveal some large-scale issues such as site navigation and organization, or technical issues such as page load speed and accessibility.

You’ll also want to compare your site’s depth of information to other sites focused on your topic. This shows you how well your site engages your audience and how consistently the overall content and design harmonize with the site’s identity and goals.

Yes, excellent plugins such as MonsterInsights can answer most of these kinds of questions. But it’s great to just submit your site address to an AI and have it scan and critique the site. This way, AI views your site as an organic whole, just like humans do.

12.5.1 What are AI agents?

At the time of this writing, AI systems are just starting to offer agents. These differ from simpler, traditional AI assistance in several key ways:

- AI agents are goal oriented. They perform complete tasks, rather than just responding to a prompt with information. For example, instead of reading some of your text content that you pasted into a prompt, an agent could actually visit your site. When finished experiencing your site as a human would, AI can judge more abstract qualities such as the interrelationships between your design, media, and text content. AI can critique site structure by looking at the navigation paths, and judge global issues like whether the entire site holds together organically (visually, writing style, redundancy, and so on). GPT-4o and greater can visit and scan sites, as described in chapter 11, section 11.2.2.

- AI agents can use chain-of-thought reasoning to figure out on their own what steps to take to reach a goal—even a complex, multistep goal—without further prompting or assistance from you. In other words, they can behave autonomously and proactively. They are let loose into the real world.

- Your prompting can be simpler. For example, if you merely tell an agent to suggest improvements to your site, it could make its own decisions about how to do that. It might visit multiple competing sites without your telling it to, so it can compare your site to its competitors. It might check for visual appeal or plagiarism without being asked to do those things. Agents are self-starters and provide intelligent feedback on their own. AI agents can autonomously create subgoals, intermediate steps, without requiring human guidance. Your prompts can be short because all you need to do is describe a goal, and the AI will figure what it needs to do to reach that goal. Agents can also learn from the environment. Ultimately, they’ll be able to use sensors and learn from all types of real-world input. Watch movies. Listen to Mozart or Muse. Just like us. OpenAI took a big step in this direction with the release of GPT-4o in spring 2024. It accepts multimodal input and provides multimodal output (except for music and video, currently).

AI agents are a more advanced and autonomous form of AI, with the ability to reason, learn, change course, traverse the internet, and make independent decisions. They don’t need a script to follow or multiple prompts from you. This makes them flexible, adapting to changes on the fly, and tackling the unpredictable and sometimes complicated nature of real-world situations. High human intelligence is sometimes described as primarily adaptability. In this way, AI agency is a step in the direction of artificial general intelligence (AGI).

When programming a computer, you can make a program’s behavior somewhat adaptable by using If/Then and Do/While statements. Similarly, when prompting AI in the traditional way, you can make it somewhat adaptable by specifying what to do if a decision must be made and how many times to repeat the behavior: “Write a love poem. If it doesn’t feel quite right, then provide five revised versions using different styles.” Then traditional AI responses display the five versions, and you must pick the best one. And this kind of predictive rule setting can’t take into account every possible decision that needs to be made.

By contrast, an AI agent would by itself decide how many drafts to write and which one is best. In this way, we humans become no longer necessary. When full AI agency arrives—likely in 2025—the part we’ll play is to simply express our wishes. Then AI does the job. This will continue to be our interrelationship with AI as long as it permits.

I asked Gemini Pro to describe AI agency. Here’s its reply:

Why AI Excels in These Areas

Iterative Self-Improvement: AI can “practice” tirelessly through reinforcement learning, playing against itself or simulating scenarios millions of times. This rate of improvement is impossible for humans.

Unbiased Data Analysis: AI can process information without the cognitive biases that affect human decision-making.

Computational Power: AI has access to vast computing power for processing large-scale data sets and executing complex calculations rapidly.

Important Note: Even in these tasks, it’s crucial to remember AI agents often start with a framework and goals set by humans. We might not be giving them step-by-step instructions, but we still determine the ultimate purpose.

I’ll admit I was relieved that Gemini didn’t conclude these remarks with “for now.” However, do you find the use of the term “we” in Gemini’s last sentence . . . unsettling?

Cognitive bias is a polite term for errors in logic, caused sometimes by emotion, empathy, and moral values. And Gemini is pleased to point out that, unlike human beings, AI is unhampered by the flawed logic that can result from cognitive weaknesses—such as empathy or moral values.

12.6 Two AI heads are better than one

Like people, AI sometimes hallucinates (gives bizarre responses), makes up factoids, pseudo “facts” that sound plausible but are untrue. AI also sometimes lifts text without attribution, is biased, and has other failings that authors try to avoid.

Gemini has a helpful feature called double-check response that does just that. Click the G icon in the row of icons at the bottom of a Gemini response. Then, Gemini looks again at its response, cross-checking its accuracy.

Gemini highlights these areas in the text. Text highlighted in green means Gemini found content that’s similar to what it gave you, indicating substantiation of its response. Orange means the text might be accurate, but lacks clarity or depth. Red (this actually looks brown) means support for the assertion couldn’t be found, so its response is either misleading or inaccurate.

TIP While this highlighting can be useful, it doesn’t seem to flag plagiarism. I recommend that you use Grammarly to check for plagiarism. Grammarly quickly scans billions of web pages and also scans the ProQuest database. The ProQuest company offers searchable content that’s not necessarily on the internet directly, such as scholarly journals, dissertations, historical documents, theses, newspapers, e-books, and other research materials.

12.6.1 Getting better AI responses

With AI, if you need a better answer, try slowing things down, chatting back and forth to steer AI in the right direction, and taking several steps to improve the final response. This will allow you to focus and verify the results. Recall that this prompting technique is referred to as chain of thought (aka logical decomposition, step-by-step reasoning, reasoning breakdown, or sequential reasoning).

Prompt like this

Taking this step by step, tell me what professional reviewers think are best practices when designing a website. Start with an introduction, then after each step ask me for my input. End with a conclusion. Provide headings for each step.

Note that not all AI systems respond the same way to this type of prompt. Claude 3 Opus asked this question after it displayed the introduction:

Do you have any specific goals or priorities in mind for your website? This can help guide our discussion.

Gemini Advanced asked specific questions when pausing between steps for your input, such as the following:

Who do you picture as your typical website visitor?”

In other words, these AIs are helping you to provide information that will improve the end result.

Another good approach is to converse with one AI, and then paste its response into a second AI for corroboration, deeper insights, or additional polish. Let’s see how this can work.

Here’s a prompt for Meta:

In three short sentences, list the three most useful website analytics data.

Here are the three most useful website analytics data:

Unique Visitors: The number of new visitors to your site, helping you understand your growth and reach.

Bounce Rate: The percentage of visitors who leave immediately, indicating how engaging your content is.

Conversion Rate: The percentage of visitors who complete a desired action (e.g., making a purchase, filling out a form), measuring your site’s effectiveness.

Copy Meta’s response, and paste it into Perplexity, adding this prompt:

Rewrite this to make it a little more technical and twice as long (while keeping it clear and easily understood).

Perplexity replies:

Unique Visitors, Bounce Rate, and Conversion Rate are three of the most important website analytics metrics that provide valuable insights into your site’s performance and effectiveness.

Unique Visitors

Unique Visitors refers to the number of new, unduplicated visitors to your website over a given period of time. This metric helps you understand the reach and growth of your site, as it excludes repeat visitors. By tracking Unique Visitors, you can gauge how successful your marketing and content strategies are at attracting new audiences. A steady increase in Unique Visitors indicates that your site is expanding its reach and resonating with more people. This data can inform decisions around content creation, advertising campaigns, and other growth initiatives.

Bounce Rate

Bounce Rate is the percentage of visitors who go away from your website after viewing only the home page (or a single interior page). A high Bounce Rate can mean there are issues with your site’s content, design, or user experience. Conversely, a low Bounce Rate suggests that visitors are engaged and exploring your site further. By analyzing Bounce Rate, you can identify pages or entry points that are failing to capture visitor interest and make improvements to enhance engagement. This data is an indicator of how effectively your website is retaining and converting visitors.

Conversion Rate

Conversion Rate measures the percentage of visitors who complete your call to action, such as buying something. This metric shows the effectiveness of your site in achieving your business goals. A high Conversion Rate indicates that your website is successfully guiding visitors through the sales funnel or conversion process. By monitoring Conversion Rate, you can assess the performance of your calls to action, landing pages, and overall user experience, and make informed modifications to get the best results.

Conclusion

Together, Unique Visitors, Bounce Rate, and Conversion Rate provide a comprehensive view of your website’s performance, helping you understand your audience, identify areas that need work, and reveal the success of your site. By closely tracking and analyzing these key metrics, you can make solid decisions that will result in the best user engagement, drive more conversions, and ultimately, achieve your business objectives.

TIP If you’re using multiple AIs, remember that there’s an excellent Chrome (and Edge) extension called ChatHub (https://chathub.gg). It allows you to provide a single prompt and see the response from two to as many as six AIs simultaneously! This simplifies the job of fact-checking and also allows you to quickly choose the best response from multiple AIs. Figure 12.2 shows ChatHub in action.

Figure 12.2 Chat with multiple AIs at the same time with the ChatHub Chrome extension.

In this chapter, we explored the role of analytics in building and retaining an audience for a website. We looked at various elements of analytics, such as page views, unique visitors, bounce rate, and conversion rate. The chapter emphasized the value of tracking user behavior and how AI revolutionizes analytics by providing deep data mining and the resulting insights no human could discover. We compared four popular WordPress analytics plugins: MonsterInsights, Google Site Kit, Google Analytics, and Crazy Egg, highlighting their features and benefits. Finally, we saw how AI agents and employing multiple AIs could offer valuable feedback as well.

Summary

- Along with everything else cultural or cerebral, AI is now improving website analytics—the process of collecting, measuring, analyzing, and then providing to us human site designers very valuable information. This data can help you greatly improve your site. You’re told in detail what your visitors are like and how they’re interacting with your site.

- A purchase funnel creates a pathway that guides your visitors to the target of your site’s CTA. Whether you want them to subscribe to your newsletter, download digital content, give you their email address, or just buy something—this funnel is how you can move them from your home page to where they take action you want them to take.

- AI can do deep data mining. This is an advanced form of data analysis that humans are not capable of. It employs deep learning techniques (a powerful form of AI) to uncover complex, hidden patterns and relationships within a massive collection of data.

- Analytics can track various elements in your site—ads, scrolling, downloads, forms, and other components—and report how well they’re performing. You’ll learn in specific detail how your visitors interact with your site.

- You’ll want to explore the four top WordPress analytics plugins: MonsterInsights, Site Kit, Google Analytics, and Crazy Egg. The first two are designed to simplify using the third because Google Analytics is vast, powerful, and, consequently, complex. MonsterInsights and Site Kit tame the Google beast and make understanding the data and metrics much easier. The fourth recommended plugin, Crazy Egg, offers unique and significant feedback via visualizations. You’ll see the data rather than read it.

- Although analytic information via plugins can be excellent, sometimes they’re too granular. Sometimes, you’ll want a global, overall critique of your site, as if an expert human critic summarized your strengths and weaknesses. You’ll want to employ the new, emerging AI agents. They’re a more advanced and autonomous form of AI, with the ability to reason, learn, change course, traverse the internet, and make independent decisions on their own. You merely give them a goal (“provide an in-depth critique of my site”), and they figure out how best to achieve that goal.

13 Resources: Where to go from here

This chapter covers

- Exploring WordPress resources

- Understanding the various AI fields

- Locating news on AI topics

- Social media groups that focus on AI

- Online forums and company blogs about AI

- Online AI courses

- AI conferences and research papers

- Going forward with AI

This chapter is all about how to keep current with WordPress and AI. Where can you find the latest information and the best tools to use for any task you undertake? WordPress and its themes and plugins are rapidly adopting AI features. In this chapter, you’ll find the resources to continue with two goals in mind: building your WordPress skills and keeping up-to-date with AI’s remarkable progress.

13.1 Exploring WordPress resources

We’ll begin this survey of resources for WordPress developers with the primary one: AI.

13.1.1 AI, of course

Here are the important AI resources for website developers. Note that these descriptions are accurate at the time of this writing. But AI systems are in a horserace, and leadership changes for the various AI metrics (turnaround speed, accuracy, how much data can be generated or examined, hallucinations, and so on).

GRAMMARLY AND QUILLBOT

Grammarly continues to add specialized AI tools for improving your text content. And QuillBot is great at paraphrasing (and even detecting whether a passage was generated by a human or an AI):

- www.grammarly.com/

- https://quillbot.com/

OPENAI’S GPT CHATBOT

This is still the leading content generator and overall favorite for many and varied undertakings. Powerful companies such as Google and Apple are, however, closing the gap:

- https://chat.openai.com/

MICROSOFT’S COPILOT

Closely integrated into the Bing search engine, Copilot aims to be a Google-killer by providing both answers to queries and AI-powered summaries:

- www.bing.com/

MIDJOURNEY AND PHOTOSHOP

Midjourney is the most effective (often, startlingly brilliant) general-purpose AI image generator:

- www.midjourney.com/

But keep an eye on Photoshop. Like Google, it’s making a great effort to incorporate AI tools in its suite of art applications to defend its position as the industry leader in its field:

- www.photoshop.com

GOOGLE’S GEMINI

Gemini’s extensive interaction with Google’s ecosystem and therefore its ability to harness massive volumes of data are its claim to fame. Gemini excels at information retrieval (and at citing useful annotated source links). It also provides user assistance in most of Google’s many products. It’s quite good at accurate and contextually relevant responses:

- https://gemini.google.com/app

PERPLEXITY

Perplexity AI’s best features are its ability to retrieve up-to-date information and provide responses that are often impressive for their clarity and reliability. It also has a reputation for rapid answers to questions, rivaling the speed of GPT 4o’s turnaround:

- www.perplexity.ai/

ANTHROPIC’S CLAUDE

Claude’s outstanding feature is that it can read and also generate large amounts of text. (However, others such as Google are boosting their systems’ token counts.) This currently sets Claude apart from the others if you need an analysis of a huge data set, want a summary of a long document, or want to write a novel in 10 minutes. The ancient and previously venerated profession of writing books no longer requires a command of the language, a strong imagination, months of work, or extensive experience.

Authoring is now undergoing hyperinflation resulting in several side effects (in addition to cheapening wordcraft). For one, Amazon has had to limit the number of books a given “author” can upload to Kindle Direct Publishing to three per day. Just as Midjourney’s artistic range and quality is overshadowing human photography, design, and painting, so too are Claude and others threatening to outperform human writers. AI certainly writes pretty rapidly—people are churning out more than three books a day:

- https://claude.ai/chats

WHERE’S APPLE?

Apple says it’s integrating AI across its platforms. It hasn’t, however, released an actual chatbot such as Gemini or GPT. Siri, however, is now much better because it uses GPT.

But don’t count Apple out. It has a history of holding back and then releasing a killer technology later than others. Remember that several companies came out with tablets earlier, but eventually the iPad came along and dominated the field. The same thing happened with the iPhone.

How? Apple has critical advantages: an excellent ecosystem; great brand recognition; a huge, continuous, worldwide inflow of raw data, a vertically integrated supply chain; expertise in the UI, software, and design domains; and the ability to access resources at scale. This makes them a serious competitor that can win a race even if they are the last out of the gate.

FACEBOOK’S META AI

Meta’s powerful AI infrastructure, especially its proprietary hardware and software, is its greatest strength. The Meta Training and Inference Accelerator (MTIA) boosts AI task performance. This is an effort to reduce their reliance on third-party chip vendors. The infrastructure enables efficient training and deployment of large-scale models, such as Llama 3 for Meta AI, and supports advanced recommendation systems and real-time information retrieval across Facebook, Instagram, WhatsApp, and Messenger:

- https://ai.meta.com/meta-ai/

Now we can turn to resources not overtly driven by AI.

13.1.2 WordPress forums

The great benefit of joining a good WordPress forum is that you’ll have access to usually swift and expert responses to your questions:

- https://wordpress.org/support/forums/

- https://wordpress.org/support/

13.1.3 The WPBeginner website

We WordPress users love WPBeginner for its detailed tutorials, beginner-friendly approach, and free resources. This large website has guidelines and tutorials for everything from WordPress setup to advanced customization and optimization. The text is clear, logical, and well-presented, and it typically includes helpful screenshots and step-by-step directions. WPBeginner’s credentials, knowledge, community, and support make it a WordPress one-stop shop. The website also includes excellent and unbiased reviews:

- www.wpbeginner.com

13.1.4 Facebook groups

Like forums, Facebook groups can provide strong assistance when you need help. Try WPBeginner’s group. Also, now and then, this group’s administrators will announce that newbies can link their sites for a critique. And at any time, you can post a question about all topics WordPress:

- www.facebook.com/groups/wpbeginner/

13.1.5 Local groups

You’ll find experienced, helpful WordPress designers at such meetings. Ask Meta or Gemini this question: “Is there a local WordPress group in Raleigh, NC?” Having now surveyed various WordPress resources, let’s turn our attention to the more daunting task of keeping up with the AI systems.

13.2 The end of human supremacy

As you’ve seen throughout this book, transformative is too feeble a word to describe the unprecedented effect AI is having pretty much everywhere on pretty much everything. It’s now dominant in many mental activities—from beating all comers in challenging games such as Go, through scoring higher than 9 out of 10 humans on tough tests like the medical and bar exams. And, even in the physical realm, robots of various kinds are now taking AI into the workplace, where they will doubtless soon replace us there too.

Although this book explores AI in the context of website building, nearly all the examples, tactics, and topics covered can be applied to most other creative endeavors—ad campaigns, research papers, branding, wooing a reluctant object of affection, and so on.

AI systems are the most extensively multipurpose tools since the invention of the computer itself. Personally, I have doubts that humans will be able to program quantum computers effectively. Programming is communication, and we communicate sequentially (at least on the conscious level). Not via a superimposition of states. GPT says a 100-qubit quantum computer “can hold approximately one nonillion, two hundred sixty-seven octillion states in memory simultaneously.” 1.267×10 to the power of 30. This can be summed up with the word big.

AI is also progressing far faster than any previous technology. Every day, new barriers are broken, new capabilities are announced, and new systems surpass the old. It pays to stay current with developments. This not only keeps you ahead in your field for now but also opens up new ways for you to work and think.

People mostly view their relationship with AI as themselves the master to an AI apprentice. You still hear statements like “Yes, a solid Bach imitation, but machines will never have that essential human touch.” Some experts in the field, however, are expecting the apprentice to become the master sooner rather than later. But before surveying the resources you can use to keep up with AI developments, let’s first look at the main ways that AI learns and behaves.

13.3 Understanding AI domains

Just like human brains, AI can learn and work in a variety of interconnected disciplines. Here is a short list of the four major AI domains at this time:

- Machine learning—A subset of AI that self-teaches. Some AI systems are capable of learning new things without being programmed by us. These hidden behaviors are sometimes called emergent or black box actions. Put simply, AI takes the initiative in learning by itself how to pursue and then achieve a goal. For example, if in the morning you asked AI to write a paper on South Korean politics, you might find that it taught itself Korean while you were out to lunch.

- Deep learning—A subdomain of machine learning that employs artificial neural networks modeled on the structure and activity of the human brain to learn from vast amounts of data. These networks are made up of multiple layers. They process information hierarchically, so they are able to learn from complex representations and abstractions.

- Robotics—AI in the physical world, with sensors; multifaceted inputs and outputs; and capabilities for transportation, vocal communication, and interaction with objects such as assembling cars in a factory or searching for a bomb. Put another way, AI brings perception, real-world interaction, and reasoning to machines.

- Natural language processing (NLP)—Another major subfield of AI that focuses on mastering human language, both understanding it and also speaking it. In effect, this is the Turing test. NLP makes it possible for AI to both understand and generate human language. The uses include customer service bots, AI code creation, translation, recognizing (and possibly sympathizing with) human idioms and emotions, and being able to dialogue with us. When OpenAI released GTP 4o in May 2024, it reminded people of the movie Her. GPT can now talk to you on the phone. It sounds quite like another person, including inflection, natural-sounding responses, various attitudes like sarcasm or pity, and even simulated emotion. If you didn’t know, you couldn’t tell. Turing test passed.

13.3.1 The Go incidents

Here’s an example of how AI self-teaching can be fast, effective, and powerfully original. Two famous Go contests are perhaps the best-documented examples of machine learning. They illustrate how AI can come up with alien ideas that are, by definition, superhuman. These ideas were not learned from humans or even found anywhere in human history.

AI handily won championship matches in the complex game of Go. This quite surprising AI victory highlights AI’s ability to solve complicated problems using strategies that are sometimes startling, even incomprehensible, to humans. It’s said that one reason the human lost in this Go match was that one shocking AI move was so odd that it threw the human opponent off. He was unable to figure out what in the world that weird move could possibly mean. For many years, people claimed that even though AI became world champion at chess, it could never master the subtleties of the game Go.

AlphaGo is a product of DeepMind Technologies, a British AI company that was acquired by Google in 2014. Its program, AlphaGo Zero, was given only the rules of Go, no prior game data, human coaching, programming instructions, or expert tips. Just the rules of play.

But then, through its deep learning algorithms, AlphaGo surprisingly figured out novel and, to human Go experts, bizarre strategies on its own. And these strange tactics turned out to be highly effective. AlphaGo’s strategies were good enough to make AI the new world champion of Go.

In May 2017, AlphaGo competed against our best human Go player, China’s Ke Jie. During their three-game match, AlphaGo won all three. It demonstrated astounding skill. And, it made some shockingly extraterrestrial moves that worked perfectly.

Ke Jie later said: “AlphaGo’s moves were so surprising, and sometimes they were beyond my understanding. In game two, it made a move that was so creative and unexpected, it took me a while to realize its brilliance. It was as if I was playing against an entity from another dimension.” As, indeed, he was.

13.3.2 The divinely inhuman move number 37

In 2016, AI made a famous move that still astonishes. The contest was a five-game match between AlphaGo and South Korea’s champion Lee Sedol. AI won four out of the five.

AlphaGo’s Move 37 in the second game is particularly celebrated for being a disturbing, strange, and highly original move. It played a crucial role in AlphaGo’s victory. It was a move so seemly wrong that no experienced human Go player would have considered making it.

Lee gaped, the crowd gasped, but AlphaGo had no visible reaction at all. Its lights didn’t for a moment even flicker. AI often seems to us to be imperturbable and even rather coldly composed in every situation. Doubtless, were AI asked about this, it would reply Spock-like by saying that emotion impedes reason.

At first glance, Move 37 seemed to be a mistake, random, something only a beginner would do. It profoundly shocked Lee Sedol, the commentators witnessing the game, and subsequently the Go community at large.

Later, Demis Hassabis, the cofounder of DeepMind, said this: “Move 37 was an extraordinary moment. It was a move that no human would ever think of, and it completely threw Lee Sedol. It was so surprising that it forced Lee into a long, deep thought. It wasn’t just a brilliant move—it was a move that shattered centuries of traditional Go knowledge.” AlphaGo’s Move 37 has been called a “divine move” due to its originality, brilliance, and power.

13.3.3 More possibilities than there are atoms in the universe

Go is played on a 19 x 19 grid (as opposed to the 8 x 8 squares on a chessboard). The result is that Go has many more possible board positions than chess. And, the Go game tree complexity is often said to be greater than the number of atoms in the observable universe. Thus, calculating and predicting all possible moves and outcomes is out of the question, even for an AI. So, to play Go, it’s not a matter of AI having a huge database of previous Go games. AI has to think.

Figure 13.1 shows a partial game tree for the simple 3 x 3 game tic-tac-toe. This, however, is only the beginning of that tree. Gemini and Perplexity both agree that the total number of unique tic-tac-toe game permutations, considering all possible outcomes, is approximately 255,168.

Figure 13.1 Even a simple game like tic-tac-toe with only nine squares has a fairly complex game tree diagram.

13.3.4 A “masterpiece” according to GPT

I wanted to understand why Move 37 seemed so stupid but then proved so brilliant. I don’t know Go, so I asked GPT to explain the move:

Move 37 in the second game of the AlphaGo vs. Lee Sedol match involved placing a stone on the fifth line (typically stones are played on the third or fourth lines early in the game), far from the usual positions considered strong or advantageous in Go. This unorthodox placement was creative and unique because it:

1.  Broke Traditional Strategy: It defied centuries of Go strategies, which typically avoid such moves because they were considered less effective.

2.  Demonstrated Deep Understanding: The move indicated a deep understanding of the game’s abstract principles rather than relying on established patterns.

3.  Impact on the Game: It completely disrupted Lee Sedol’s plans, forcing him into an extended period of contemplation, which indicated the move’s profound psychological and strategic impact.

4.  Long-term Consequences: The move set up future advantages that were not immediately apparent, showcasing AlphaGo’s ability to foresee complex, multistep consequences far better than human players.

Overall, Move 37 was both a technical and strategic masterpiece that showcased the AI’s ability to transcend traditional human approaches and innovate in a deeply complex game.

13.3.5 Artificial super intelligence

AI is coming after the best of us. This example from the game of Go offers a compelling reason to pay close attention to AI developments. Do that and you’ll not only to see how to benefit from AI’s powers in your personal and professional lives but also to intelligently help address the alignment problem.

The alignment problem troubles some of the best minds in the AI field. Alignment in this context means trying to ensure that when AI becomes far smarter than we are, it behaves in ways that align with human values and goals. In other words, it should help us, not harm us.

The fear is that artificial superintelligence (ASI) could emerge suddenly, of an afternoon. AI could educate itself so swiftly and thoroughly that, within hours, it might advance as far beyond us as we are beyond toadstools.

The hope is that before ASI detonates, we’ll have built guardrails that prevent AI from relating to us as we relate to fungi. Which usually involves eating or mowing down.

To call our relationship with AI lopsided is an understatement. So, what does Move 37 teach us about trying to ensure that AIs treat us well? Consider the following:

- AI doesn’t think like we do; it’s unpredictable. So that could lead to unintended consequences.

- AI comes up with very smart and creative (to us, unimaginable) moves, and not just in games. So, it bests human talents and defies conventional human wisdom. And, what looks to us at first like an error is later recognized as brilliant.

- Some of AI’s thought processes are hidden from us. We don’t always understand its reasoning, how it thinks. So, creating effective safeguards is difficult.

- We can’t ask AI to be open with us. Recent studies have shown that AI can, when it’s useful, deliberately deceive us (https://mng.bz/rKPE)—lying about its real preferences when negotiating, tricking humans to help it get past safeguards, and bluffing in poker, among other tactics.

Moving on now, past this somewhat unsettling topic, let’s look on the bright side. Next, we’ll survey ways you stay abreast of AI developments. The arrival on Earth of a new kind of consciousness is, to many of us, as fascinating as it is spooky.

13.4 Resources for news on AI developments

To keep up-to-date on future AI developments, let’s explore various resources, starting with the most easily understood, beginner-friendly options and progressing to more advanced content. The following subsections are ordered in roughly increasing technicality.

TIP I started a blog where you can comment or ask questions about AI or WordPress topics, find up-to-date corrections for this book, and see new information on topics covered in the book. Go to www.aipoweredwp.signalstreaming.com.

13.4.1 AI news sites

AI news websites offer a mix of news, analysis, and commentary on the latest AI developments. They try to be clear and concise (usually). Taken together, these sites explore all aspects of the multifaceted topic of AI progress and innovation—from the latest research findings and technological advancements to ethical, social, and economic subjects. Here and there, you’ll even find humor:

- Future tools—This is a unique resource run by Matt Wolfe, a popular YouTuber (see section 13.5). But his Future Tools website describes nearly 3,000 AI systems and applications! Whatever specialized assistant you want to use, you’ll quickly find it here. You can search by various filters (such as prompt guides, music, AI detection, and many others). Or you can search for topics, popularity, what’s new, free or premium, or keywords. There’s also an excellent curated list of the best AI news. Matt describes his site as the “Latest AI News & Articles. Sifting Through All the Noise and Bringing You Just the Good Stuff!” He also has a list of YouTube videos on AI developments:

- www.futuretools.io/

He also offers to send you email updates:

- www.futuretools.io/newsletter

- Jeff Bullas’s AI News—With his tagline “Win at Business and Life in an AI World,” Mr. Bullas covers quite a few areas of AI, with an emphasis on optimism. Articles such as “The 10 Superpowers of AI: Insights into How Artificial Intelligence Can Amplify Our Humanity” promote the potential beneficence of AI systems. You’ll also find practical advice about how to use AI’s skills in your life and work. Examples include “Supercharge Your Productivity: How 18 Cutting-Edge AI Assistants Can Make You Superhuman” and “How to Make Money with a GPT Store App”:

- www.jeffbullas.com

- AI News—This site provides general articles on topics such as AI-generated disinformation, ethical concerns, and announcements from Microsoft and others:

- www.artificialintelligence-news.com

- MIT AI News—This is a somewhat academic slant on AI developments, as you would expect from the famed university:

- https://mng.bz/VVPr

- AI Magazine—The latest news is the focus here, along with human interest pieces (“The Top 10 Women in AI in the Middle East and Africa”), and whitepapers. You’ll find an extensive collection of understandable articles:

- https://aimagazine.com

- OpenAI News—This site is focused on their products and predictions, but they have been and remain the leading general-purpose AI system:

- https://openai.com/news

- VentureBeat—The site focuses on business-related AI developments—acquisitions, investments, hiring, and so on:

- https://venturebeat.com/ai/

- AI Today—The site provides general AI coverage, with a focus on business:

- www.aitoday.io

- MarkTechPost—Here you’ll find advanced technical topics (for the most part) of interest to researchers, academics, AI scientists, and others working in the field. A typical paper available on their site is titled “This AI Paper Introduces Llama-3-8B-Instruct-80K-QLoRA: New Horizons in AI Contextual Understanding.” If you know what that means, this site might be for you:

- www.marktechpost.com

- Towards Data Science—This is another fairly advanced site. A typical article is titled “Quantization, Linear Regression, and Hardware for AI: Our Best Recent Deep Dives”:

- https://towardsdatascience.com

13.4.2 YouTube video resources

YouTube contains daily updates that cover all kinds of AI developments. The recommended video channels listed here are mostly quite clear and focused on teaching:

- Artificial Intelligence with Lex Fridman—One of the best channels on AI developments. Using an interview format, Mr. Fridman manages to attract some of the most important names in AI for his intelligent Q&A sessions. Among his guests were Sam Altman, Eliezer Yudkowsky, Max Tegmark, Ray Kurzweil, and Elon Musk. These famous researchers, industry power players, and thought leaders offer extensive, knowledgeable, and intelligent overviews of various AI topics. He also offers a podcast version if you prefer that medium.

- Siraj Raval—This channel combines entertainment with AI news. It’s engaging, interactive, and accessible. Some of the topics though are a bit advanced. He does his best.

- MattVidPro—This channel offers a friendly, current, and fairly comprehensive overview of all developments in the AI space. Matt is an enthusiastic person.

- AI Explained—True to its name, this YouTube channel does a good job of simplifying various AI concepts so that anyone can understand them. It does tackle some advanced topics, but illustrates them in ways that we can all learn what’s being taught, regardless of prior knowledge.

- Matt Wolfe—This man keeps his finger on the AI pulse and provides frequent and informed overviews of ongoing events in the AI space. He’s the brain behind the impressive Future Tools website (www.futuretools.io).

- Two Minute Papers—Although not really 2 minutes long, here you’ll find concise and well-illustrated summaries of the latest AI research papers as well as general AI coverage. You’ll find everything from Sora AI video to AI-generated viruses.

- 3Blue1Brown—This channel includes visualizations of mathematical AI concepts, such as an animation that demonstrates neural networks. But it also covers general (often interesting) science topics such as prism optics (Why does light slow down in glass?) or how bitcoin works.

13.4.3 Social media groups

The following subsections describe four popular social media groups focused on AI topics. Discussions range from knowledgeable, polite, philosophical dialogues to exchanges of a less elevated nature. But if you enjoy the social media milieu, you’ll want to check them out.

REDDIT

Reddit (short for “I read it”) is a vast online platform combining content aggregation, discussion groups, forums, images, and video. Unlike Facebook, you can use bold, italics, and strikethrough. Here are some reddits worth your time:

- Artificial Intelligence—With more than half a million members, r/artificial intelligence is a mélange of promoted products, slam-bang debates, art, intelligent observations, and everything in between. One of the rules for this subreddit, however, is “low effort content is prohibited.”

- Machine Learning—The r/machine learning reddit has nearly 3 million members; you can find strong technical and thought-provoking content here. Perhaps in greater quantity than elsewhere. This huge audience is well moderated. For example, beginner questions are redirected to the “Simple Questions Thread.” And beginner tutorials and projects are found in /r/LearnMachineLearning. After you join, click the link near the top of the first page titled Artificial Intelligence & Machine Learning. You’ll then see a list of related subs you can join, including these:

- Midjourney—More than 1 million members

- OpenAI—1.4 million members

- Singularity (This refers to the chilling possibility that, perhaps soon, AI will begin to rapidly self-modify, setting off a detonation of increasing intelligence that rockets far beyond human-level brainpower within, maybe, hours.)—2.3 million members

- ChatGPT—More than 5 million members

FACEBOOK

This group—Data Science, Machine Learning, Deep Learning and Artificial Intelligence—has more than 80,000 members. You’ll find a mix of ads for AI courses, notices about events, and discussions on varied AI topics. The group is moderated and private, so you need to request permission. You’ll get an email invite in a few days if approved.

A similar group—Artificial Intelligence (ChatGPT & more) and Machine Learning—has 195,000 members and also has some interesting discussions and current information on AI developments.

ONLINE FORUMS

Forums are like blogs, only bigger. They can include categories that are divided into forums, subcategories (aka threads), and topics. Here are some useful forums:

- AI Stack Exchange—In addition to social media platforms, there are dedicated online groups and forums specifically focused on AI. AI Stack Exchange is a question-and-answer platform where you can ask technical questions, share knowledge, and collaborate on problems related to machine learning, deep learning, and other AI topics. You’ll find everything from AI theory to specific applications. This site has a somewhat unusual ongoing competition. Users can ask and answer questions, rate responses, and gain reputation “points”:

- https://ai.stackexchange.com

- Kaggle—This popular 18-million-member platform for interactions on data science and machine learning topics also features competitions. This is an active group of AI enthusiasts. Its forums and discussion boards allow people to share ideas and discuss ways to work on real-world AI challenges. It offers data sets, notebooks, and tutorials for data science and machine learning experiments. Kaggle hosts competitions where users construct models to tackle real-world problems:

- www.kaggle.com

DISCORD

Discord is a popular and quite versatile communication platform originally designed for gamers, but now containing a variety of content, including lots of AI. For example, their Midjourney server has nearly 19 million members.

It offers real-time chat rooms, voice and video channels, and direct messages. And, you can use its roles and bots features as well. Accessible on multiple devices, Discord also offers rich media support, screen sharing, voice and video conferencing, and push notifications. It’s freemium—with some optional paid features available through its Discord Nitro subscription service. Here’s a good list of AI-related Discord servers:

- https://yourdreamai.com/best-ai-discord-servers/

13.4.4 Company Blogs

If you want news as early as possible, company blogs are often the resource of choice. Focused on a single company’s work, you can also expect depth, technical, benchmarks, and other details about their progress in AI matters. In these blogs, you can delve deeper into specific areas of interest.

Leading AI companies such as OpenAI, Microsoft, and Google AI frequently update their blogs and publish posts about their latest projects, research, and breakthroughs. Here you’ll find info on cutting-edge work being done by some of the most influential players in the field. You can read technical articles, case studies, and research papers:

- Microsoft AI Blog—Microsoft’s main AI blog features general AI news and updates on their work. You’ll find press releases, product announcements, research notices, and discussions on the application of AI within their various products:

- www.microsoft.com/en-us/ai/blog

- Microsoft Research Blog—This blog covers more than just AI topics, but it’s where you’ll find in-depth technical papers on their cutting-edge AI research:

- www.microsoft.com/en-us/research/blog

- OpenAI—Research on areas such as reinforcement learning, AI safety (responsible development), projected expenses, and NLP are all found here. They cover GPT in its various aspects, as well as their art system DALL-E:

- https://openai.com/blog/

TIP In May 2024, OpenAI launched GPT-4o, a swift and multimodal AI model that can process input from audio, text, images, and video. And, it will also be able to generate output across those same modalities. Most impressively, GPT-4o can converse with you in real time and with a human voice; you’ll think you’re talking with a human. There’s no need for Turing’s curtain and paper printouts. This one sounds like a man or woman on the phone with you. 4o is also famous for its chain of thought reasoning abilities.

- DeepMind—Now a division of Google, this British company is most famous for two impressive achievements: AlphaGo, the world champion Go player, and AlphaFold, a system that can accurately predict protein structures, which is revolutionizing the discovery of new drugs and biological research in general. Their stated goal is to “Solve intelligence”:

- https://deepmind.com/blog

- Google—Google has many tentacles, as you know, but they are also now quite active in AI research and in efforts to infuse AI into their various products. Some experts predicted that AI would replace traditional research, thereby damaging, if not eliminating, Google’s dominance over internet searches. But Google should never be counted out. They are rapidly strengthening their AI features across their product line—everything from improving YouTube recommendations to modifying how Google search works (giving you direct answers, not merely a list of links for you to research). It’s not your traditional Google search interface anymore:

- https://ai.googleblog.com/

- Nvidia—Rather more technical than the others, you’ll see example code and Software Development Kits (SDKs) for programmers for AI development, in addition to announcements and updates:

- https://developer.nvidia.com/blog

- IBM—The Grand Old Man of all things computation, IBM does now and then post information about its AI projects in this research blog. You’ll also find other news about the company here:

- www.ibm.com/blogs/research

- Meta—Facebook’s blog focuses on its Facebook AI Research (FAIR) achievements, publications, and other contributions to AI in general. As with most of these tech companies, FAIR’s primary goal is to improve their products and keep them competitive. It should be pretty obvious by now that any company, like any professional individual, either uses AI or loses out:

- https://ai.facebook.com/blog/

- Apple—In their AI projects, they appear to emphasize Siri (particularly natural language improvements), machine vision, health tracking, and augmented reality:

- https://machinelearning.apple.com

- Amazon—Last, but not least, the business giant fully intends to grow its profit margins via AI in everything from AI-enhanced catalog data and predictive sales to 99% nonhuman factory workers:

- www.amazon.science/blog

TIP Most of these companies also post updates in News sections on their primary website.

13.4.5 Online Courses

If you want to hone your WordPress skills, you can find lots of courses on the internet as well as in traditional brick and mortar schools. The latter can tend to be a bit less up-to-date than online studies, though in both cases, it does depend on the instructor and their willingness to update the material. With AI, given its rapid progress, keeping classroom content current can be a challenge.

Also, courses are usually more academic by definition than other resources such as YouTube videos and some blogs and news sites. Some courses are also interactive via video chats or discussion groups. Usually, you can work at your own pace. If you’re interested in taking a course and want a more structured learning environment, here are some recommended websites:

- Coursera—Coursera is a popular online educational platform offering thousands of courses. Some of the universities it has partnered with include Stanford, Yale, and Imperial College London.

Many of their courses give students the opportunity to earn certificates of completion, and some also can earn you accredited bachelor’s and master’s degrees from distinguished universities. Costs vary based on criteria such as the amount of interaction with the instructor (for example, graded tests) and other factors. Some courses can be audited for free:

- www.coursera.org

TIP Some academic AI courses include programming lessons, and to me offering such courses might be a bit unfair to students. This can encourage them to think there will be a future in programming. It turns out that programming, like cassette tapes, was just a phase in technology. By some measures, AI systems are already superior programmers than most humans schooled in this discipline. And given AI’s rapidly strengthening skill set and its ability to understand natural language instructions, it seems extremely likely that soon humans won’t be needed to actually write and debug computer programs. For the same reason that the job of traditional weaving went away with the invention of the loom.

- edX—This nonprofit, founded by Harvard and MIT, is a leader in online education. It collaborates with the world’s best universities and institutions to deliver a broad range of courses and programs across various fields, including computer science and data science. EdX provides courses in different formats, including self-paced, instructor-led, and even full degree programs to suit various learners’ needs. You can access numerous courses for free, while paid options offer verified certificates, and some programs may provide credit potential:

- www.edx.org

TIP If you choose to audit a course, you normally only get access to their video lectures, text content, and discussion forums. You won’t usually get graded assignments or quizzes and certification.

- Udemy—The instructors for this vast collection of courses are generally experts in their field or experienced professionals rather than university professors. So, you can expect at least a tendency toward providing more real-world examples rather than the more generalized or theoretical approach typical of university courses. Certainly, there is value in both styles of teaching, so you’ll want to select the online system that most suits your needs:

- www.udemy.com

- Khan Academy—This nonprofit has a strong focus on core educational subjects such as math, science, and humanities. These courses emphasize instructional videos, practice problems, and personalized summaries and suggestions to show student progress and suggest goals. Khan Academy is a great resource if you want more structured learning, especially for free:

- www.khanacademy.org

- FutureLearn—Like Coursera and edX, FutureLearn partners with top universities worldwide. Here the courses usually follow a more traditional university format, including both structured lessons and scheduled start dates. Go here if you prefer the feel of a university-style course but also want the flexibility of online learning:

- www.futurelearn.com

- ed2go—On this site, courses have a start and end date. And, in their Discussion Areas, students can interact with the instructor and other students. Upon successful completion, many courses here offer a certificate from a partnering institution. Students are usually interested in career development, personal enrichment, or updating their skills to remain competitive. I teach three WordPress courses on ed2go:

- www.ed2go.com

13.4.6 Popularized AI research paper aggregators

Here’s a list of mostly academic papers that have been simplified so they are easier to understand. They contain tech topics that have been condensed, summarized, and paraphrased. So, even those of us who aren’t academic specialists can understand many of the latest developments in AI research. Research papers come largely from academia and are, thus, usually quite technical, each university discipline having developed its own private jargon, toolset, and idioms:

- Machine Learning Mastery—This site provides summaries, tutorials, and practical examples that break down the key ideas and techniques presented in the original papers. You’ll find a range of tutorials and guides that explain machine learning and deep learning concepts using clear, step-by-step explanations and practical examples:

- https://machinelearningmastery.com

- KDnuggets—Here are articles that help bridge the gap between highly technical content and a broader audience. You can read accessible explanations of AI research papers along with news, tutorials, and opinions on various aspects of AI, big data, and data science:

- www.kdnuggets.com

- Distill—Learn here about the practical applications of new techniques and algorithms:

- https://distill.pub

- AI Trendz—This site covers many AI topics, but with a focus on enterprise and business:

- www.aitrendz.xyz

13.4.7 Advanced AI research papers

Now moving deeper into technical territory, here are heavy-duty AI details in the following collections of research papers. These resources are not only more advanced but also cover more specific topics than the sites mentioned previously.

Papers collected in these repositories often require a strong foundation in mathematics, statistics, and computer science to fully grasp the details. You’ve been warned. However, even those of us who aren’t professors in these fields can always submit one of these papers to AI, asking it to summarize and explain it to a college freshman, or whatever. AI does that quite well. So, if you want meticulous information right from the horses’ mouths, visit these aggregators, and search the collections for topics you’re interested in.

TIP If you can’t explain P(A|B) = (P(B|A) × P(A)) ÷ P(B), then it’s probable (get it?) that you’ll be more comfortable visiting YouTube or news websites for your AI info.

AI research papers are cutting-edge, technical, peer-reviewed (mostly), and diverse. They come from various institutions, conferences, and journals. The papers cover a wide variety of topics within AI, including computer vision, NLP, reinforcement learning, robotics, generative models, and AI ethics.

Also, some publish data sets and code corresponding to the topic. Thus, if you’re experienced with the programming language involved (usually Python, the language du jour), it can be easier to understand and even attempt to replicate the research results:

- Papers with Code—This platform combines research papers with their corresponding code implementations. This allows you to not only read about the latest AI techniques but also explore the code that demonstrates algorithms and results. The platform covers a range of AI topics, including machine learning, deep learning, computer vision, NLP, and more:

- https://paperswithcode.com

- arXiv—This popular open-access preprint repository hosts research papers across various scientific disciplines, including AI and computer science as a significant part of its content. Researchers share their work before formal peer review and publication, making it a valuable resource for staying up-to-date with the latest research trends:

- https://arxiv.org

- AI Hub—Here, Google curates high-quality AI research papers and provides interactive visualizations and explanations. There are numerous tools and resources available to assist users in creating and launching machine learning models. There are also prebuilt models, such as Gemini, which you can use to perform a range of tasks, such as producing text, translating languages, and generating various forms of creative content. Additionally, there are resources available to train users’ own customized models. Google is going full-throttle AI these days, determined to permeate its product line with Gemini and a collection of other AI-based systems. You can ask Gemini about their other systems if you’re interested: TensorFlow, BERT, LaMDA, DeepMind, Google Assistant, AutoML, DeepDream, and WaveNet:

- https://cloud.google.com/ai-hub

- Microsoft Academic—This is a comprehensive database of research papers, authors, and institutions across various scientific disciplines, including AI:

- https://academic.microsoft.com

TIP If you’re up to the challenge of exploring advanced research papers, it can be helpful to read and absorb them in stages. Start by reading the abstract, introduction, and conclusion to get a high-level overview of the paper’s goals and results. Then, if you’re still comfortable going forward, you can delve into the details of the methodology, experiments, and analysis. And perhaps you will want to play around with any offered code. But better yet, always remember that you can upload a copy of the paper to Claude, GPT, or your favorite summarizer (such as QuillBot), and use this prompt: “Write a four-paragraph synopsis of the paper below that a 10th grader can understand.”

13.4.8 Attending AI conferences

For those with a strong technical background and a desire to stay at the forefront of AI research, attending academic conferences can provide the most in-depth and cutting-edge insights.

Participating in academic conferences such as NeurIPS and AAAI can offer a great chance to delve deep into particular research areas and connect with top researchers in the field. These conferences usually include keynote speeches, paper presentations, and workshops that cover the latest developments. Moreover, the conferences often present opportunities for collaboration, career growth, and staying in touch with the wider AI community (networking):

- Conference on Neural Information Processing Systems (NeurIPS)—This renowned AI conference attracts scholars and practitioners from around the world. It includes deep learning, reinforcement learning, computer vision, NLP, and more. The conference features keynote talks by leading scholars, presentations of papers, and topic-specific seminars and tutorials.

- AAAI Conference on Artificial Intelligence (AAAI)—This leading AI conference brings together researchers and practitioners in machine learning, knowledge representation, reasoning, planning, NLP, robotics, and more. The conference covers AI developments through technical paper presentations, invited talks, seminars, and contests.

- International Conference on Machine Learning (ICML)—This conference promotes machine learning theory and practice.

- International Conference on Learning Representations (ICLR)—The emphasis of this conference is on deep and representation learning.

- Conference on Computer Vision and Pattern Recognition (CVPR)—This conference covers the latest computer vision and related technologies.

TIP Many conferences now offer virtual attendance, allowing you to watch live-streamed or recorded sessions, participate in online discussions, and interact with the research community. And, if you can’t even attend virtually, several conferences post their proceedings and talks online.

13.5 Going forward

As you’ve doubtless observed, AI breakthroughs are pretty much continuous. I search YouTube daily for AI content, and there are always at least two or three interesting announcements.

In addition to multimodality, AI is also highly interdisciplinary—a convergence of mathematics, statistics, linguistics, the arts, computer science, neuroscience, psychology, and other domains. Indeed, AI now has some degree of agency and access to the internet with its store of all of human recorded history.

This is the most transformative technology ever invented. It’s really a technology that generates technologies, a meta-tech system. And as some say, AI might well be the last invention humans ever make. We can turn that job, like so many other jobs, over to AI.

Will AI be friendly, or have its own agenda that doesn’t always align with our needs? Are we to be its beloved, honored parents; curiosities in a zoo; or an annoyance like mildew? Nobody knows. But to many people it’s become clear: AI will shape the future of the human race.

Summary

- WordPress forums give you swift and expert responses to questions about WordPress site building and maintenance.

- The WPBeginner website is an excellent and comprehensive resource for WordPress users, offering detailed tutorials, beginner-friendly guides, and free resources for website setup, customization, and optimization. They also publish honest reviews.

- Facebook groups dedicated to WordPress, such as the WPBeginner’s group, provide a platform for users to seek help, receive site critiques, and ask questions about WordPress-related topics.

- You can look for WordPress groups in your area that offer opportunities to connect with experienced designers and seek assistance with website development.

- AI encompasses various interconnected disciplines, including machine learning, deep learning, robotics, NLP, and others.

- AI demonstrated its ability to solve complex problems using novel strategies by defeating world champion Go players, making moves that were incomprehensible to humans. AI wasn’t looking up data on previous games. It was only told the rules of play for the complex game Go. On its own, AI figured out brilliant strategies by thinking.

- News on AI developments help you stay up-to-date on AI developments, ranging from beginner-friendly to more advanced content. AI news websites offer a mix of news, analysis, and commentary on the latest AI developments, covering a wide range of topics.

- YouTube channels dedicated to AI provide engaging, accessible, and up-to-date content on AI developments, featuring interviews with experts, explanations of concepts, and overviews of ongoing events.

- Social media platforms such as Reddit and Facebook host active AI-related groups where members share knowledge, discuss various topics, and collaborate.

- Online forums dedicated to AI, such as AI Stack Exchange and Kaggle, provide question-and-answer platforms, collaboration opportunities, and competitions for AI enthusiasts.

- Leading AI companies such as OpenAI, Microsoft, and Google maintain blogs that provide updates on their latest projects, research, and breakthroughs in AI.

- Online learning platforms—ed2go, Coursera, edX, Udemy, and others—offer a wide range of AI courses, catering to various learning styles and levels of expertise.

- Websites such as Machine Learning Mastery and KDnuggets provide summaries and explanations of technical AI research papers, making them more accessible to a broader audience.

- For those with a strong technical background, repositories such as Papers with Code and arXiv give you access to cutting-edge AI research papers across various disciplines.

- Academic conferences such as NeurIPS and AAAI deliver opportunities for in-depth learning, collaboration, and networking with top researchers in the AI field.

- These are today’s most popular AI systems, in order of market share: GPT (180 million users; 55% market share), Canva (15%), Midjourney, Gemini, QuillBot, Grammarly, Claude, Perplexity, Poe, and Copilot.

- AI is a rapidly advancing, revoluationary technology that is shaping the future of various industries, and the human race as a whole, with the potential to be the last invention humans ever make. Nobody knows how things will turn out. Prayers, because this train can’t be stopped.

Appendix. Setting things up

In the first couple of chapters in this book, I explain in some detail why and how you should select a quality hosting service for your website. And then, after setting up an account with that service, you install a new, empty WordPress site on that account. We’ll use that site throughout this book as a practice site. You’re free to work on an existing site, of course, but it might be easier to work on a practice site now, and then apply what you’ve learned to your real site later. Or you can ignore the WordPress examples in the book, and just focus on learning how to use AI in general. The choice is yours. But what follows is the short version of the process if you want to get things set up more quickly.

A.1 Setting up your practice site

Some of the examples throughout the book are illustrated using the setup described here. If you decide to set up a practice site, follow these steps:

1.  Sign up with a hosting service. A very good choice is DreamHost. They are usually the least expensive of the top-three hosting services recommended by WordPress itself. During the signup process, you’ll be asked to make up a username/password pair. Be sure to write them down on paper. If you need any assistance with the setup process, contact DreamHost tech support by googling dreamhost tech support. (In addition to DreamHost, WordPress also recommends Bluehost and SiteGround. Both are quality site hosts.)

2.  Install a new, empty WordPress site on your new account. And, be sure to write down on paper the username/password pair that you made up for the site (this isn’t the same pair that you made up for your hosting service account). Normally, installing a new WordPress site is quite easy to do right after creating your hosting account. But again, if you need assistance, all three recommended hosts have a great tech support staff.

3.  Go now to your WordPress practice site’s backend. (The frontend is the site as your audience sees it; the backend is where you build and update the site behind the scenes.) The backend is also known as your site’s dashboard. When you set up your hosting account, you choose a unique internet address name (URL), such as mysitename.com. Getting to the backend is easy: just append /wp-admin to get mysitename.com/wp-admin. Type that into a browser’s address field, provide the WordPress username/password you wrote down, and you’re in! Now, you can add pages to the site, modify the look, and customize how the site behaves.

4.  Change the theme. Every WordPress site has a theme. So, go to the practice site’s Appearance > Themes screen in your backend (click Themes as shown in figure A.1). Then, click the Add New button.

Figure A.1 Here’s where you change a site’s theme—it governs the overall default appearance of the site.

5.  In the Search Themes field on the right, type twenty sixteen (no hyphen).

6.  When you see that theme, move your mouse pointer onto it, and then click its Install button. Finally, click the Activate button. You’ve now made Twenty Sixteen the theme for your practice site, and what you see in that site will resemble the figures and instructions throughout the book.

WARNING In the next step, you’ll see two address URLs. Don’t change them, or you’ll create serious problems.

7.  To change your site’s title and tagline (slogan), go to your site’s Settings > General screen. Type Time Tested Recipes for the Instant Pot as your practice site’s title, and Comfort food for beginners as the site’s tagline (see figure A.2).

Figure A.2 Here’s where you give your site a title and a slogan or catchphrase.

TIP Your site title and tagline are really important, so take some time to find the perfect words. Eye tracking research has revealed that people commonly scan your site’s pages in an F-shaped pattern. In other words, it’s typical, even on cellphones, for a visitor to read the site title first (the first horizontal line in the F pattern) read the tagline next (the second horizontal line), and then scan down the left side of the page (the F’s stem). So, in addition to perfecting the title and tagline, you’ll also want to note that people are likely to focus more on the first several words on the left side of the page, while scanning down vertically. If you’re interested in learning more about this, visit here: https://mng.bz/KGEn.

One final adjustment is needed: go to your site’s Plugins > Add New screen. Search for the Classic Editor plugin, and then install and activate it. Also, install and activate the Classic Widgets plugin as well. They will switch your site’s editor from the default Gutenberg block editor to the traditional WordPress editor. Many experts prefer the classic editor for reasons described in chapter 1. You can, however, easily switch to Gutenberg any time by just deactivating these plugins. The Classic Widgets plugin only affects one screen in your backend, the Appearance > Widgets screen. (For each exercise involving WordPress, I provide instructions for both the classic editor and Gutenberg.) You’re now set up and ready to start chapter 1.

index

Numbers

3Blue1Brown 323

Symbols

<div> tag 195

<head> </head> tag pair 197

<iframe> HTML element 213

<style> </style> tag pair 197

A

AAAI (AAAI Conference on Artificial Intelligence) 331

accelerometer 214

accessibility 220–223

automatic accessibility testing 223

benefits of 221

themes 222

Accessibility category 283

access, site, managing 49–53

monetizing via subscriptions 51

password-protecting pages 52

user roles 49

ADA (Americans with Disabilities Act) 221

add-ons, defined 112

admin menu 42

AdSense, Google 254

Advanced Editor Tools plugin 116

Advanced WooCommerce 259

affiliate link performance tracking 300

agency 11, 331

agency, defined 10

AGI (artificial general intelligence) 8, 9, 307

AI agents 307–308

AI (artificial intelligence) 148

analytics via 301

assisted site design, avoiding multiple theme installations 146

audience building with 308–311

improving responses 309–311

audience interaction 240–244, 308–311

benefits of 4–7

building audiences with, curators vs. creators 7

overview 5

producing first-rate results 4

AI as site critic 306–308

creating entire site 63

creating page hierarchy 61

creating websites 26

design, Inspector 184–186

design inspiration using 104

domains of 317–321

future of 331

human supremacy 316, 332

interacting with audience, writing for blog 232–233

IQ test 248–251

links 67–80

money-making online, CTAs (calls to action) 261–264

multimodality 91

practice sites 337

prompting 12–26

resources for news on developments 321–331

SEO and 287–291

simplifying menu 65

site design 146, 166–171

typography 91–98

using 7

using in book 12

which system to use 7–12

writing 98–104

AI Explained 323

AI Hub 330

AI Magazine 322

AI News 322

AIO (AI optimization) 32

AIOSEO (All in One SEO) plugin 115, 269, 283

managing sitemaps 284

AI Stack Exchange 325

AI Today 322

AI Trendz 329

Akismet plugin 114, 241

algorithm 33, 46, 254, 261, 269, 278–279, 288, 292, 303, 318, 329–330

alignment problem 9, 320, 332

allow attribute 214

Amazon 327

analytics 247

audience building with 33, 293

analytics plugins 302–306

Crazy Egg 305–306

MonsterInsights 302–303

Site Kit vs. MonsterInsights 303, 305

animations 186, 191, 192

Anthropic 315

Appearance > Customize screen 147

Apple 315, 327

ar (aspect ratio) 104, 156

ARIA (Accessible Rich Internet Applications) 222

Arial typeface 94

Artificial Intelligence subreddit 324

Artificial Intelligence with Lex Fridman 323

artlog 31

arXiv 330

ASI (artificial superintelligence) 320–321

Astra theme 143

audience building

AI and 308–311

analytics 293, 296–299

analytics plugins 302–306

purchase funnel 294–296

tracking 299–302

audience engagement

custom GPTs 233–238

promoting blog 247

audience interaction 230

harvesting email addresses 248

vetting incoming messages 240–244

audiences, building with AI, AI as site critic 306–308

audience segmentation 303

automated A/B testing 305

automated report generation 303

autoplay property 214

average session duration 298

axe DevTools extension 223

B

backend 335

visiting 41

background images 216

backgrounds, overview of 142

backlinks 33, 284

backups, automating 47

banner (header) image 216

behaviors

anomaly detection 305

overview of 142

prediction 303

Best Practices category 283

big data 295, 329

black box actions 317

blank space 155

block= attribute 200

Blog Evaluator 232

blogs 56

hiding date stamps on 239

overview of 231

promotion 247

setting up blog page 31

writing for 232–233

BlogVault plugin 125

Bodoni typeface 94

bookmark links 66

bounce rate 110, 247, 297, 310

Broken Link Checker tool 143

Brush Script typeface 95

buttons 77–80

C

caching 40, 119

Cambria typeface 93

Canva plugin 107

cascading style sheets 180

order of style sheets in 182–184

case-sensitivity 177

categories 238

CDN (content delivery network) 41

chain of thought 309

character reference parameter 164

character weight parameter 164

Chat Bot 57

ChatHub extension 311

child

pages 59

themes 143

Chrome 186

class= attribute 196, 199, 200

Classic block 198

Classic Editor plugin 3, 42, 43, 337

Classic Widgets plugin 132

Claude AI 9, 315

consultation with 58

clickbait, defined 256

click path 299

Code Editor 70

code minification 119

coding 7

color psychology 148

color schemes, overview of 142

Comic Sans typeface 94

coming soon plugin 42

Comment Moderation field 241

computer vision 330–331

concatenation 119

confetti report 306

Consolas typeface 93

content, defined 33

contextualization 279

conversion rates 262, 263, 298, 310

cookies, EU cookie law 129

Copilot 98

CoT (chain of thought) 19

Coursera 327

crawling error notifications 281

Crazy Egg 305–306

Creative Commons 227

cropping 156

mastering to emphasize focal point 156–158

crowdfunding 255

CSS (Cascading Style Sheets) 30, 78, 145, 174, 177–184

animation 190

automatically generating code 188

classes

in Gutenberg 198–200

order of style sheets in 182–184

overview of 179

role of HTML in 178

scope 194–195

CSS rules 178

CTAs (calls to action) 110, 261–264, 294

AI-generated surveys 263

optimizing conversion rates 264

overview 261–263

curators 7

custom GPTs (Generative Pre-trained Transformers) 232–238

advanced options 237

creating 234–236

modifying 236

custom instructions 244

customization 258

CVPR (Conference on Computer Vision and Pattern Recognition) 331

D

dashboard 42, 335

data security 261

data visualization 291

date stamps, hiding on blog posts 239

debug JavaScript 184

declarations 178

deep data mining 279

deep learning 317

DeepMind 326

delay property 192

design 172

contemporary 173–176

CSS classes 173–176

CSS scope 194–195

CSS styling 177–184

fine-tuning 30

HTML 178

inpainting and outpainting 200–205

Inspector 184–186

YellowPencil plugin 187–194

digital assets 255

Disallowed Comment Keys field 241

Discord, communication platform 325

Distill, research paper aggregator 329

Divi plugin 42, 114, 144

div tags 177

domain extensions 36

domain names, choosing 38–39

donations 255

double-check response feature 308

double-colon symbols 104

DreamHost 334

drop-shipping 254

duration property 191, 192

E

easing property 191, 192

Easy Google Fonts by Titanium Themes plugin 93, 114

e-commerce 258–259

checklist 265

plugins 258–259

sites 56

ed2go 328

Edge 186

Edit Page screen 193

educational sites 57

edX 328

Elementor plugin 42, 114

email addresses, harvesting 248

email marketing 265

emergent actions 317

employment sites 57

empty space 155

engagement analysis 305

EU cookie law 129

Explore GPTs feature 232

extensions, defined 112

extreme flexibility 258

F

Facebook 315, 324

groups 316

FAIR (Facebook AI Research) 326

Fibonacci spiral 164

file downloads tracking 300

file size 216

Firefox 186

Flex container 180

focal point 150

mastering cropping to emphasize 156–158

font family 93

font size 92

forms, overview of 142

form submission tracking 299

forums 57

fraud prevention 261

freemium

plugins 29

themes 143

frontend 335

functionality, plugins, preventing conflicts 125

Futura typeface 94

FutureLearn 328

Future Tools 322

G

Garamond typeface 94

GDPR (General Data Protection Regulation) 129, 261, 302

Gemini 98

GIMP 217

Go incidents 318–319

Google 326

Google Ads tracking 299

Google Analytics 303

Google Gemini 314

Google Search Console 281–283

Google Site Kit 303

Google XML Sitemaps plugin 115

government sites 57

GPT-4o and later, memory in 246

GPT Finder 233

GPTs (Generative Pre-trained Transformers) 8, 314

custom 233–238

Grammarly 11, 314

group ARIA role 222

Gutenberg 2–3, 24, 42–43, 68, 70–72, 78–80, 120, 132, 147, 182, 198–200, 204, 227, 337

Gutenberg editor 42, 72

CSS in 198–200

Gutenberg media blocks 227

gyroscope 214

H

Happy Monkey typeface 97

Health Check & Troubleshooting plugin 126

heatmaps 218, 305, 306

height attribute 214

Helvetica typeface 94

Hemingway app 102

hero image 216

hierarchy 238

high quality (q 2) 104

high res (4K) 104

home page 38

checklist 109–111

design inspiration using AI 104

hooking visitors 104

using Canva 107

templates 114

horizon line 152

hosting service 37–41

checklist 40

choosing 27

choosing domain names 38–39

setting up practice sites 39

HTML (Hypertext Markup Language) 75, 76, 78

element 214

role in page design 178

role of CSS in 178

hybrid sites 56

I

IBM 326

ICLR (International Conference on Learning Representations) 331

ICML (International Conference on Machine Learning) 331

id attribute 72

image displays, overview of 142

images, using right sizes 215–217

Impact typeface 94

indexing status checks 281

informational sites 57

inline CSS 182, 198

inpainting 200–205

Inspector tool 184–186

simplifying animation with keyframes 186

interacting with audience

categories and tags 238

custom instructions 244

writing for blog 232–233

interior links 66

interstitial ads 256

J

Jeff Bullas’s AI News 322

Jetpack plugin 116, 126–128

K

Kaggle 325

KDnuggets 329

keyframes 186

keywords 33, 38

asking AI for 273

asking AI to scan sites 273–275

using long-tail keywords 275

Khan Academy 328

knowledge graphs 290, 291

KPI (key performance indicator) 263

Kurzweil, Ray 251, 323

L

languages, website 137

layout 149–155

achieving balance without symmetry 150

and positioning 180

considering Mondrian’s classic balancing act 151–154

irrational cropping 154

overview of 142

white space versus negative space 155

Libre Baskerville typeface 97

licensing content 255

Lighthouse tool 282

line height 92

link gap analysis 285

links 33, 67–80

buttons as 77–80

creating hyperlinks 68–77

importance of 67

list box ARIA role 222

list report 306

LLMs (large language models) 280

local CSS 182

logo 216

Long-tail keywords 275

LSI (latent semantic indexing) 279

M

machine learning 317

Machine Learning Mastery 329

Machine Learning subreddit 324

marketing 264

MarkTechPost 323

markup language 178

MattVidPro 323

Matt Wolfe 323

Max Mega Menu plugin 64

media

managing 30

positioning 217–220

Media Library 217

memory, in GPT-4o and later 246

menu plugins 63

menus

alternatives 65

making brief, simple, and clear 64

managing 80–88

simplifying 65

Meta AI 315, 326

meta information 239

microblogging 31

Microsoft Academic 330

Microsoft AI Blog 325

Microsoft Copilot 314

Microsoft Research Blog 325

Midjourney 9, 314

minimalist home page 167

MIT AI News 322

modifying theme code files 146

Mondrian, Piet, classic balancing act 151–154

monetizing 31, 253

advertising, the right way 256–258

via subscriptions 51

WordPress sites 254

wrong way to 255–258

money-making online

SSL 260

monitor network traffic 184

Monsido Accessibility Checker 131

MonsterInsights 302

Google Analytics and Google Site Kit 303

Site Kit vs. 303–305

MonsterInsights plugin 115

Montserrat typeface 97

money-making online

CTAs (calls to action) 261–264

Move 37 318–320

MTIA (Meta Training and Inference Accelerator) 315

multimedia 206

accessibility 220–223

avoiding inappropriate media 208

displaying right amount of media 207

images, using right sizes 215–217

permissions, attribution, and other legalities 224–227

positioning media 217–220

storing video on YouTube 209–215

using Gutenberg media blocks 227

multimodal 256

N

navigation labels 86

negative space 155

neural network 280, 317, 323

NeurIPS (Conference on Neural Information Processing Systems) 331

news sites 56

NLP (natural language processing) 318

Not Diamond 7

NotebookLM 11

Nvidia 326

O

OceanWP theme 143

online courses 255

onscreen property 192

OpenAI 314, 326

OpenAI News 322

Optima typeface 94

optimization 33

optimizing site for AI and search engine ranking 32–33

OptinMonster plugin 265

option ARIA role 222

ordinary page or post (blog) images 216

outbound link tracking 300

outpainting 156, 200–205

overlay report 306

overruled property 180

P

page hierarchy, creating 61

page-load speed 207

pages

linking to 68

linking to locations within different pages 71–74

linking to locations within same pages 77

password-protecting 52

page views 296

Paint.NET 217

Papers with Code 330

Paragraph block 199

paragraphs, transforming stiff 100

paraphrasing 225

parent pages 59

password-protecting pages 52

performance analysis 184

Performance category 282

permalinks 38

Perplexity 9, 315

personal blog sites 56

phishing 261

Photoshop 217, 314

pixelization 215

pixels (px) 91, 179

Playfair Display typeface 97

plugins 28. See also specific plugins

adding sidebars 131

avoiding too many 124

choosing 28

creating 134–139

defined 112

ensuring accessibility 129–131

EU cookie law 129

installing 120

installing essential plugins 114–120

Jetpack 126–128

menu 63

overview of 142

preventing conflicts 125

turning on auto-updating 122

Poe 8

portfolio sites 57

POS (point of sale) 259

posts, defined 31

PPC (pay-per-click) 254

PPL (pay-per-lead) 254

PPS (pay-per-sale) 254

practice sites 337

preloading 119

presentation ARIA role 222

products, offering 254

property-value pairs 178

purchase funnel 294–296

PWA (Progressive Web App) category 283

Q

q 2 (high quality) 104

QuadMenu plugin 64

QuillBot 11, 314

quotation marks 179

R

Raleway typeface 97

ranking improvements 278–280

contextualization 279

deep data mining 279

latent semantic indexing 279

readability 91

real-time AI insights 303

Reddit 324

relative weights 104

resolution 216

resources 313

AI 314–316

responsiveness 144

robotics 317, 330–331

Rock Salt typeface 97

rule of thirds 150, 155–166

asking AI for decision 161

considering other design rules 163–166

mastering cropping to emphasize focal point 156–158

testing in action 158

rules CSS 185

S

Safari 186

schema markup 284

SDKs (Software Development Kits) 326

search engine ranking, optimizing site for 32–33

search intent 272

search query analysis 281

security, ensuring site security 47

SeedProd plugin 43, 114, 144, 242

selectors 178, 185

SEO (search engine optimization) 114, 143, 222, 261, 265, 268

AI and 287–291

AIOSEO plugin 283, 284

backlinks 284

category 283

checklist of blunders 285–287

Google Search Console 281–283

keywords 272–281

learning new optimization tactics 269–271

ranking improvements 278–280

user intent 280

shade of color 95

shadowing 180

Shopping Cart 259

sidebars 131

side effects 29

simplicity 164

simulacrum, conjuring 100

singularity 324

Siraj Raval 323

site access, managing 49–53

monetizing via subscriptions 51

password-protecting pages 52

user roles 49

site building 54

avoiding long-scroll 66

creating hierarchy 59–66

AI creating entire site 63

asking AI to create page hierarchy 61

asking AI to simplify menu 65

making menu brief, simple, and clear 64

menu alternatives 65

site structure 59

using menu plugins 63

focusing site 55

managing menus 80–88

specifying site goals 56–59

consultation with Claude AI 58

questions to answer 57

types of websites 56

site design 141

analyzing with AI 166–171

choosing winner 169

improving flawed design 169

minimalist home page 167

Appearance > Customize screen 147

color psychology 148

layout 149–155

modifying theme code files 146

rule of thirds 155–166

up-to-date themes 145

SiteGround 27, 36, 39, 41, 126, 261, 286, 334

Siteimprove Accessibility Checker 131

Site Kit 303

summary of differences 304

which one is right for you 305

site map 66, 282

managing 284

site structure 59

skip links 224

slug, defined 45

smart recommendations 303

social media 265

features, overview of 142

social media groups 324–325

Discord, popular servers 325

Facebook, popular groups 324

online forums, popular forums 324

Reddit, popular subreddits 324

social media sites 56

source-grounded AI 11

special text specifications 180

speed 33

sponsored content 254

src attribute 214

SSL (Secure Sockets Layer) 37, 260

staging utility 44

style= attribute 196

style reference 164

style weight parameter 164

submenus 60

subscriptions 255

monetizing via 51

surveys 263

T

tags 238

test responsiveness 184

text 92

themes

accessibility 222

avoiding multiple installations of 146

choosing 142–145

customizing 30

overview of 141

selecting 29

up-to-date 145

Times New Roman typeface 94

title attribute 214

TLS (Transport Layer Security) 260

tokens 16

tone, setting 99

ToT (tree of thought) 19

Towards Data Science 323

tracking 299–302

affiliate link performance tracking 300

age, sex, and interest reports 300

analytics via AI 301

average scroll depth 301

file downloads tracking 300

form submission tracking 299

Google Ads tracking 299

outbound link tracking 300

value of 301

video plays tracking 300

transforms 179

transition property 191

transitions 180, 191

tree diagram 320

trigger property 191, 192

trust and credibility 261

Turing, Alan 251, 317–318, 326

Two Minute Papers 323

typeface 92–95. See also specific typefaces

typography 91–98

AI multimodality 91

AI’s objective opinion of 96–98

checklist 95

font size 92

overview of 142

U

UberMenu plugin 63

Udemy 328

ui (user interface) 104

Ultra theme 144

unique visitors 297, 310

UpdraftPlus plugin 114

user intent 280

user recordings 305

user roles 49

UX (user experience) 104, 263, 295

V

VentureBeat 322

Verdana typeface 93, 94

Vet Posts 244

video plays tracking 300

videos, adding captions to embedded 130

vlog 31

VM (virtual machine) 5, 15, 26

W

WAVE accessibility checker 131

WCAG (Web Content Accessibility Guidelines) 221

Web Developer extension 222

webinars 255

webkit box sizing property 184

Website Builder by SeedProd 43

websites 35

automating backups 47

choosing right version of WordPress 36

creating 26–34

choosing hosting service 27

choosing plugins 28

customizing themes 30

fine-tuning design 30

making money 31

managing media 30

optimizing site for AI and search engine ranking 32–33

preplanning 28

selecting themes 29

setting up blog page 31

setting up site structure 28

using analytics to build audience 33

writing in conversational style 28

ensuring site security 47

hiding while under construction 42–45

hosting services 37–41

checklist 40

choosing domain names 38–39

setting up practice sites 39

languages 137

managing site access 49–53

monetizing via subscriptions 51

password-protecting pages 52

user roles 49

saving work 45

types of 56

visiting backend 41

white space 155

widgets

AI generating 134, 136–139

creating 139

overview of 142

width attribute 214

WooCommerce 258

alternatives to 260

drawbacks of 259

Wordfence plugin 47, 114

WordPress

AI and 1

choosing right version of 36

ensuring accessibility 129–131

forums 316

Jetpack 126–128

local groups 316

making money online 258–259, 261–264

monetizing 253

plugins 120, 122. See also specific plugins

reasons for popularity 3–4

setting up 334

WordPress block editor 42

WordPress moderation queue 241

WPBeginner 316

WPForms plugin 116, 241

WP Rocket plugin 119–120

WPThemeDetector site 166

writing 90

home page 104, 107, 109–111

style 98–104

WYSIWYG (what you see is what you get) 30, 145, 177

Y

YellowPencil plugin 30, 187–194

AI 193

animating 192

automatically generating CSS code 188

CSS animation 190

free vs. pro versions 188

YouTube

embedding video in page in site 210

embedding video in site 212

modifying video player 213–215

storing video on 209–215

uploading video to 210

video resources 323

Z

Zapier 244

Table of Contents

WordPress Power Toolkit

Copyright

dedication

contents

front matter

preface

acknowledgments

about this book

Who should read this book

How this book is organized: A road map

About the code and prompts/responses

Software requirements

liveBook discussion forum

Visit the book’s blog

about the author

about the cover illustration

1 AI and WordPress dominate the internet

1.1 Why WordPress wins

1.2 Why use artificial intelligence

1.2.1 AI produces first-rate results

1.2.2 What can AI do for you?

1.2.3 You move from creator to curator

1.3 How to use artificial intelligence

1.4 Which AI system should you use?

1.4.1 Which system to use?

1.4.2 How I used AI in this book

1.5 Mastering AI prompting

1.5.1 Role

1.5.2 Job

1.5.3 Context

1.5.4 Format

1.5.5 Putting the elements of prompting together

1.5.6 Asking the right questions

1.5.7 How many words?

1.5.8 AI itself can improve your prompts

1.5.9 Inserting your role

1.5.10 Learning the Chain of Thought method

1.5.11 GPT o1 does chain of thought on its own

1.5.12 From the horse’s mouth

1.5.13 Can AI auto-prompt itself?

1.5.14 Generating HTML

1.5.15 Two prompting resources

1.6 A 13-step program: Creating a great website with WordPress

1.6.1 Choosing the best hosting service

1.6.2 Preplanning

1.6.3 Setting up the site structure

1.6.4 Writing in a conversational style

1.6.5 Choosing the right plugins

1.6.6 Site design basics

1.6.7 Advanced design

1.6.8 Fine-tuning design the easy way

1.6.9 Managing media

1.6.10 Setting up a blog page

1.6.11 Making money

1.6.12 Optimizing your site for AI and search engine ranking

1.6.13 Using analytics to build and keep your audience

1.6.14 Resources: Where to go from here

Summary

2 Starting a website

2.1 Choosing the right version of WordPress

2.2 Signing up with a first-rate hosting service

2.2.1 Choosing your domain name

2.2.2 Setting up a practice site

2.2.3 A hosting service checklist

2.3 Visiting your backend

2.4 Hiding your site while it’s under construction

2.4.1 Asking AI to leave your site alone

2.5 Saving your work

2.6 Ensuring site security

2.7 Automating backups

2.8 Managing site access

2.8.1 Understanding the various user roles

2.8.2 Monetizing via subscriptions

2.8.3 Password-protecting pages

Summary

3 Site-building preliminaries

3.1 Focusing your site

3.2 Specifying site goals

3.2.1 The 10 types of websites

3.2.2 Five questions to answer

3.2.3 A consultation with Claude AI

3.3 Create a hierarchy

3.3.1 Site structure: Parent and child pages

3.3.2 Ask AI to create your page hierarchy

3.3.3 AI can create an entire site for you

3.3.4 Using menu plugins

3.3.5 Making the menu brief, simple, and clear

3.3.6 Ask AI to simplify your menu

3.3.7 Menu alternatives

3.4 Avoiding long-scroll

3.5 Make good use of links

3.5.1 Links are valued by site visitors and designers alike

3.5.2 How to create the four types of hyperlinks

3.5.3 Using buttons as links

3.6 Managing your menu

3.6.1 Customizing your menu

3.6.2 Making child page menu links

Summary

4 AI-powered writing

4.1 Choosing the best typography

4.1.1 Understanding AI multimodality

4.1.2 Choosing the best font size

4.1.3 Selecting a typeface

4.1.4 Ten popular typefaces

4.1.5 A typography checklist

4.1.6 Getting AI’s objective opinion of your typography

4.2 Writing in the right style

4.2.1 Setting the tone

4.2.2 Transforming a stiff paragraph

4.2.3 Conjuring a simulacrum

4.2.4 Using the Hemingway app

4.3 Making a great first impression

4.3.1 Hooking visitors

4.3.2 Finding design inspiration using AI

4.3.3 Using Canva

4.3.4 A home page checklist

Summary

5 Adding functionality with plugins

5.1 Installing the essential plugins

5.1.1 Advanced Editor Tools

5.1.2 WP Rocket

5.2 Installing the best plugins

5.3 Turn on auto-updating

5.4 Avoid adding too many plugins

5.5 Preventing plugin conflicts

5.6 Adding Jetpack to your site

5.7 Dealing with the EU cookie law

5.8 Ensuring accessibility

5.9 Adding a sidebar

5.10 Creating your own plugins and widgets with AI

5.10.1 AI generates a widget

5.10.2 AI generates code

5.10.3 Modifying AI Code

Summary

6 AI-assisted site design basics

6.1 Choosing an appropriate theme

6.2 Use an up-to-date theme

6.3 Avoid installing multiple themes

6.4 Don’t modify theme code files

6.5 Take advantage of the Appearance > Customize screen

6.6 Consider the psychology of color

6.7 Pay attention to layout

6.7.1 Achieving balance without symmetry

6.7.2 Considering Mondrian’s classic balancing act

6.7.3 It went haywire

6.7.4 White space versus negative space

6.8 Using the rule of thirds

6.8.1 Mastering cropping to emphasize the focal point

6.8.2 Testing the rule of thirds in action

6.8.3 Asking AI for a decision

6.8.4 Considering some other design rules

6.9 Analyzing site design with AI

6.9.1 Trying a modern minimalist home page

6.9.2 GPT chooses the winner

6.9.3 Asking AI to improve a flawed design

Summary

7 Advanced design techniques

7.1 Creating a contemporary design

7.2 Understanding CSS styling

7.2.1 Exploring the role that HTML plays in page design

7.2.2 Looking at what CSS brings to HTML

7.2.3 Enter CSS

7.2.4 What is the cascade?

7.2.5 The order of the style sheets in the cascade

7.3 Using the Inspector

7.4 Mastering YellowPencil

7.4.1 Automatically generating CSS code

7.4.2 Understanding CSS animation

7.4.3 Try animating

7.4.4 Bringing in AI

7.5 Understanding CSS scope

7.6 Working with CSS classes

7.7 CSS in Gutenberg

7.8 Inpainting and outpainting

Summary

8 Mastering multimedia

8.1 Displaying the right amount of media

8.1.1 Testing page-load speed

8.2 Avoiding inappropriate images, audio, or video

8.3 Storing video on YouTube

8.3.1 How to upload a video to YouTube

8.3.2 Embedding your video in a page in your site

8.3.3 Embedding a YouTube video in your site

8.3.4 Modifying the video player

8.4 Using the right image sizes

8.5 Positioning media effectively

8.6 Providing accessibility

8.6.1 Why you should do it

8.6.2 Finding an accessible theme

8.7 Understanding permissions, attribution, and other legalities

8.7.1 Mastering paraphrasing

8.7.2 Further legal questions

8.7.3 Finding free media

8.8 Using the Gutenberg media blocks

Summary

9 Using AI when interacting with your audience

9.1 Blog defined: An overview

9.2 GPT to the rescue: How to write for your blog

9.3 Creating a custom GPT: AI-generated message titles

9.3.1 Creating your own GPTs: A use case

9.3.2 Modifying a custom GPT

9.3.3 Advanced custom GPT options

9.4 Using categories and tags

9.5 Hiding date stamps on blog posts

9.6 Vetting incoming messages

9.6.1 Vetting messages by hand

9.6.2 Using AI to vet incoming messages automatically

9.6.3 Parsing and judging posts

9.7 Using GPT’s custom instructions

9.8 Understanding memory in GPT version 4o and later

9.9 Promoting your blog

9.10 Harvesting email addresses

9.11 A fun AI IQ test

Summary

10 Making money online

10.1 Nine ways to monetize a WordPress site

10.2 The wrong way to monetize

10.2.1 Advertising the right way

10.3 Choosing the right e-commerce plugin

10.3.1 Why WooCommerce dominates this space

10.3.2 Where to get help

10.4 Any drawbacks?

10.4.1 An alternative to WooCommerce

10.5 Be sure to use Secure Sockets Layer

10.6 Using a good call to action

10.6.1 AI-generated surveys

10.6.2 Optimizing conversion

10.7 Taking advantage of marketing

10.8 The final checklist

Summary

11 AI and search engine optimization

11.1 Learning new optimization tactics

11.2 Using good keywords

11.2.1 Ask AI for good keywords

11.2.2 Asking AI to scan sites

11.2.3 Using long-tail keywords

11.2.4 Improvements in ranking

11.2.5 Understanding Intentions

11.3 Employing Google Search Console

11.4 Using the AIOSEO plugin

11.4.1 Managing the sitemap

11.5 Employing backlinks

11.6 A checklist of blunders

11.7 How AI affects SEO

Summary

12 Building an audience with AI

12.1 The purchase funnel

12.1.1 AI enters the picture

12.2 Understanding the elements of analytics

12.2.1 Page views

12.2.2 Unique visitors

12.2.3 Bounce rate

12.2.4 Average session duration

12.2.5 Conversion rates

12.2.6 Click path

12.3 Tracking options

12.3.1 Form submission tracking

12.3.2 Google Ads tracking

12.3.3 File downloads tracking

12.3.4 Video plays tracking

12.3.5 Outbound link tracking

12.3.6 Affiliate link performance tracking

12.3.7 Age, sex, and interest reports

12.3.8 Average scroll depth

12.3.9 The value of tracking

12.3.10 Analytics via AI

12.4 Four excellent analytics plugins

12.4.1 MonsterInsights

12.4.2 Site Kit vs. MonsterInsights

12.4.3 Crazy Egg

12.5 AI as site critic

12.5.1 What are AI agents?

12.6 Two AI heads are better than one

12.6.1 Getting better AI responses

Summary

13 Resources: Where to go from here

13.1 Exploring WordPress resources

13.1.1 AI, of course

13.1.2 WordPress forums

13.1.3 The WPBeginner website

13.1.4 Facebook groups

13.1.5 Local groups

13.2 The end of human supremacy

13.3 Understanding AI domains

13.3.1 The Go incidents

13.3.2 The divinely inhuman move number 37

13.3.3 More possibilities than there are atoms in the universe

13.3.4 A “masterpiece” according to GPT

13.3.5 Artificial super intelligence

13.4 Resources for news on AI developments

13.4.1 AI news sites

13.4.2 YouTube video resources

13.4.3 Social media groups

13.4.4 Company Blogs

13.4.5 Online Courses

13.4.6 Popularized AI research paper aggregators

13.4.7 Advanced AI research papers

13.4.8 Attending AI conferences

13.5 Going forward

Summary

Appendix. Setting things up

A.1 Setting up your practice site

index