WordPress – Presto Carol

Accelerated Mobile Pages

Purpose and how it works

Serve pages FAST on mobile devices. Stripped-down pages load quickly because of less data and cached on Google servers.

AMP pages are displayed only when clicked on from Google search results, and only to mobile users.

Your AMP should offer a user experience equivalent to the corresponding non-AMP page, as much as possible

Google favors AMP pages

Backlinks to AMP pages found through Google search won’t transfer any link equity to your site

Limitations

AMP HTML: no forms allowed.
Limited JavaScript. All CSS must be inline and is limited in size.

It’s not clear why can’t an AMP page link to non-AMP page that contains the form: “”AMP pages must be recognized as being fully isolated. There is no navigation to the rest of your site, nor is there support for your homepage, blog indexes, etc.” Really? Doesn’t this rule break the web?

How important is it for WP theme to be AMP-compliant? All the standard templates are plus Genesis Framework and two Genesis child themes. Docs claim other themes can be made compliant with minimal changes

AMP pages’ enhanced load speed and boosted search rankings come with an ironic trade-off: backlinks to AMP pages found through Google search won’t transfer any link equity to your site.

Strategies to implement AMP:

Use WordPress AMP plugin

Code your AMP pages by hand, as separate pages, and served from a folder within the main website (my untested idea)

Steps for WordPress and how it works:

Install the AMP plugin, configure for reader mode (another mode codes ALL pages as AMP)
https://wordpress.org/plugins/amp/
Install Yoast SEO plugin if not already there
Install the plugin “Glue for Yoast SEO & AMP”
– might be needed to config AMP for more than single post pages
Create your AMP
– create AMP pages in AMP HTML
– set your AMP link strategy
– create the two canonical links in the <head> section of both pages via Yoast
Add structured data to enable AMP-specific features in search results e.g. in top pages carousel – step might be optional
Add structured data to enable AMP-specific features in search results.
Check your AMP and fix problems
– AMP must be valid in order for Google to accept/index
Update the Google Cache for your AMP – get your AMP onto Google servers
– How? And, Google cache is part of why pages serve so quickly
Check AMP at Google Search Console
– Search Appearance > Accelerated Mobile Pages
– it may take some time (how long?) for your AMP to appear

Some Details:

How to tell Google there’s an AMP variant of your web page? We add information about the AMP page to the non-AMP page and vice versa, in the form of <link> tags in the <head>.

Add the following to the non-AMP page:

And this to the AMP page:

AMP URL scheme: Your AMP URL scheme should make sense to the user.

Canonical page:

https://urban.realtor/myarticle

AMP options:

https://amp.urban.realtor/myarticle
https://urbanlrealtor/myarticle/amp
https://urban.realtor/amp/myarticle
https://urban.realtor/myarticle.amp.html

Tutorials:

WPBeginner: brief introduction, there’s gotta be more, such as how to update Google cache?
– set “reader” mode if you want to set up a limited set of AMP pages, for the most important or most visited pages
– focuses on changing APPEARANCE of AMP – why?
– Yoast plugin? will set up the canonical URLS

amp.dev: Specifics for implementing AMP outside of a CMS, should be helpful in using WP AMP plugin

Getting Started with AMP on Google Search: https://developers.google.com/search/docs/guides/enhance-amp

Codelabs: Seem like tutorials to learn AMP, E.g. the AMP Foundations “lab” is here:
https://codelabs.developers.google.com/codelabs/accelerated-mobile-pages-foundations/#0

Tools and Resources:

Validate AMP pages: article is here: https://amp.dev/documentation

AMP test tool is here: https://search.google.com/test/amp

Validate structured markup on pages: https://search.google.com/structured-data/testing-tool

https://www.wpbeginner.com/wp-tutorials/how-to-properly-disable-google-amp-in-wordpress/:

– Google does not penalize websites for not using AMP.
– alternatives: improve your website’s speed and performance on mobile to compete for mobile search audience

Auto-Updating WordPress – core, plugins, themes?

I was surprised to see that my big client’s LIVE website was automatically updated to WP 5.0.1. It appears my client is letting SiteGround’s auto updater do this. What is your philosophy of allowing WordPress automatic updates vs. doing them manually?

I see WPBeginner describes how we can fine tune the type of auto updates by installing the Easy Updates Manager plugin:

Easy Updates Manager

It’s highly rated, does anyone have experience with this plugin, or recommend a different plugin, or would you rather set variables in wp-config.php to configure the auto updates?

WordPress default is to auto update WP core minor updates only. However you can control: whether to automatically update plugins, themes, WP core MAJOR updates, or disallow ALL auto updates.

More info on this topic, including pros and cons of auto updating, can be found here:
https://www.wpbeginner.com/wp-tutorials/how-to-disable-automatic-updates-in-wordpress/

Note that the likelihood of a WordPress update breaking your website can depend on whether you’ve modified core WordPress files of your website, or whether you have a LOT of plugins which can conflict with each other.

My preference is to apply ANY update manually, at a time of my choosing, so I can backup before, apply the updates, then check the website. But that’s time consuming. Has anyone experienced a WordPress (or plugin) update that broke a website? What turned out to be the cause?

How to Override PHP Files in Your Child Theme

I figured how how to override an arbitrary file in a child theme. It is ALMOST as simple as placing the override file in the corresponding folder for the child theme. The step I didn’t know about, was to add a require_once() for the specific file in the child theme’s functions.php. Here is my example step by step:

My example is how to replace the font list in Customizr theme, with my own font list.

1) If I were to “hack” the parent theme to make this change, I’d change the file wp-content/themes/customizr/core/init-base.php

2) Make a copy of core/init-base.php, make your changes, and place it in the child theme’s folder: wp-content/themes/customizr-child/core/init-base.php. Note you must create a “core” folder in which to place init-base.php — you must replicate the full path of the overridden file (or whatever file you refer to in step 3).

Screenshot of Windows Explorer — The overriding file is in the “core” folder

3) Modify your child theme’s functions.php to include the overriding file, by adding the following line:

require_once( get_stylesheet_directory() . 'core/init-base.php' );

Why? According to the WordPress codex: https://codex.wordpress.org/Child_Themes, about half way down, see …

Referencing / Including Files in Your Child Theme

When you need to include files that reside within your child theme’s directory structure, you will use get_stylesheet_directory(). Because the parent template’s style.css is replaced by your child theme’s style.css, and your style.css resides in the root of your child theme’s subdirectory, get_stylesheet_directory() points to your child theme’s directory (not the parent theme’s directory).

Here’s an example, using require_once, that shows how you can use get_stylesheet_directory when referencing a file stored within your child theme’s directory structure.

require_once( get_stylesheet_directory() . '/my_included_file.php' );

In my case, I’ll add this line to my child theme’s functions.php:

require_once( get_stylesheet_directory() . 'core/init-base.php' );

Screenshot of TextPad with Filezilla behind — Adding the “require_once” line to the child theme’s functions.php

4) Upload the new file and the modified functions.php to your web server, and the next time you access the font choices in the customizr, you’ll see your new font list.

How to Add a Title Tag to your Image in WordPress

It seems both WordPress and Joomla make the website editor go the extra mile to add a title tag to an image in a post. This is the tag that allows you to describe the significance of the image. Browsers usually display the tag’s value as a “tooltip” when the visitor hovers over the image. Not to be confused with the “alt” tag which describes how the image looks to a visually impaired person and helps Google to rank the image.

Try hovering over this image to see how your browser displays the title tag.

Both CMS’s automatically build an alt tag value when the image is first used in an article or post. Joomla hides the setting for the title tag behind an “Advanced” tab in the JCE image editor. That’s not helpful for encouraging a novice author to provide text for the title tag.

Today in WordPress I wanted to add a title tag to the image in my new post. I dutifully filled in the caption, description and alt tag values in the image editor when I uploaded my image. A title tag was automatically filled in for me. But when viewing my post in a browser window, no tooltip on hover!

So, I went to text mode in my post and added the title tag “by hand.” This time on hover I got an entire paragraph of text with embedded HTML markup. So that didn’t work. On close examination of my markup I could not see what was wrong. So I found this helpful article by WPBeginner.

WordPress post editor, showing image selected — WordPress image editor, showing an image selected, pointing out the edit button

It explained the purpose of alt and title tags, and even explained that the “title” setting WordPress uses when the image is first uploaded, is NOT the title tag that shows as a tooltip. The article’s directions said that, in my WordPress visual post editor, click on the image then click the edit button that appears.

Look in the “advanced” section to find a field you can fill in with the value of the title tag.

I had to hunt a while to find the “advanced” section, as it was out of view within the popup box. But finally, “success!”

I have figured out how to add the title tag in two ways now: if nothing special is going on with captions or other shortcodes, you can simply add a title attribute to the image in question in the post editor’s text mode; or you can use the image editor, scroll down to “advanced” settings and fill in the tag there.

By the way, in adding those last two images, I was reminded of how easy it is in WordPress to display a CAPTION for the image: you just fill in the caption field within the image source. In Joomla how the caption is used depends entirely on the template, and it requires tricky CSS overrides on the web developer’s part, and perhaps CSS knowledge on the editor’s part, to make it look good.

Also, I accidentally selected two images and found BOTH were inserted into my article. Does anyone have a good use for such a feature?

A Post in Two Categories

What will its permalink be?

WordPress says its this: http://wp.elizahost.com/blogging/a-post-in-two-categories/ and that the higher numbered category (slug=wordpress) won’t be used. Yet the following two links lead to this article as well:

http://wp.elizahost.com/posts/a-post-in-two-categories/
http://wp.elizahost.com/foobar/a-post-in-two-categories/

Note I have set a custom permalink style: /%category%/%postname%/ .

Shortlink to previous post.

Reminder: A link to all posts in the category “Posts.”

About Categories and Tags

The main purpose of categories and tags is to improve the usability of your site, by letting a visitor browse through your content by topic rather than browsing chronologically (which is how blogs were initially set up).

A secondary purpose is to help your post be found by search engines, when someone wants information but has no idea who you are or that you’ve posted exactly the answer they are looking for.

A tag cloud: several words of different sizes

Categories are meant for broad grouping of your posts, like a table of contents. Categories can have sub-categories — they are hierarchical.

Tags are meant to describe specific details of your posts. They are like a post’s keywords (not in the SEO sense of the word) that you can use to loosely relate your posts – like in the tag cloud or site search. Tags form the index of your website as though it were a book.

Every post must have a category, even “uncategorized,” whereas tagging a post is optional.

Tips:

Authors often rename the uncategorized category to something like Other, Ramblings, Misc. etc.
Blogs evolve: there is no way you can come up with all the right categories from the start. Still, imagine your site after being up and running for several months: what posts does it have? How will visitors find the content they want? Choose five generic catgories to start with and add more as your blog evolves.
This author suggests starting with top categories that have generic, future-proof meanings, then use tags to identify specific topics that may fall in and out of favor over time.
Use the Redirection plugin if your category renaming will affect existing posts’s URL’s.
If you find you often want to assign your posts to more than one category, consider restructuring your categories.
Categories should distribute your posts well. If a single category holds 90% of your posts, you probably need new or different categories.
Choose categories that highlight the content you want to promote. In my case, I hope to help others to learn WordPress, so I’ve chosen (sub) categories based on my ideas of the aspects of website development using WordPress.
A good rule of thumb is assign no more than 10 tags to each post unless you have a good reason.
WordPress will automatically list a post’s category and tags in the post’s byline. The category name and tag names are linked to browse similarly categorized and tagged posts.
The Tag Cloud widget shows your most popular tags sorted alphabetically and sized in proportion to their usage. I like this use of visual cues. This post’s image shows this website’s tag cloud just before I added this post.

Remember your purpose in choosing categories and keywords is usability: to organize your website content to help your visitor find the information she seeks.

Resources:

My WordPress book, WordPress, the Missing Manual, has an excellent description on how to choose good categories on p. 109.

Using categories and tags to organize your content. This author, Syed Balkhi, has an easy-to-understand writing style, seems to keep his content up to date and I like the level of detail provided. Each article includes links to his other related articles. I found his articles when I searched for answers to my questions.

Even going back to what appears to be his parent article, Beginner’s Guide for WordPress, in case that’s where you want to start, the content is not an introduction to WordPress but his latest WordPress articles. It’s as though he has read my mind, as March 29th’s article is “How to Create a Contact Form in WordPress (Step by Step).” Of course I want to know how to do that … from my experience creating non-WordPress websites.

He loses credibility in my eyes though, with his footer ad “WPBeginner users Get a Free Domain and 50% off Bluehost Web Hosting.” Don’t get me started.

Twenty Sixteen Theme

I am trying out the Twenty Sixteen Theme at my second WordPress practice site, wp.elizapro.com. I changed the background color and created a child theme.

My child theme differs from the parent theme only in that there’s a custom CSS file. More about Twenty Sixteen Theme:

Introduction
Download (this page includes a download button)
Features (it took me a while to find this page. Why?)
- The “Features” are NOT described in the sidebar list entitled “Features.” Each of those links shows you a selection of WordPress themes that let you customize that feature … as far as I can tell
- I can’t find further details on this theme’s features. I thought there was more than the custom colors and header described somewhere. In the meantime, as with any Theme, to see its theme-specific customizations go to your WP dashboard -> Appearance -> Themes, find your theme and hit Customize.

How Did my WordPress get Automatically Updated?

I got an email the other day saying my site was automatically updated to WordPress 4.3.2. How did that happen? I’m self-hosting this website, and I’d not logged in for a couple of months.

It turns out whenever your site requests a page, that is, someone visits your website, this page load will trigger a check for updates.

The update runs in the background via wp-cron. wp_cron checks whether there are any scheduled events in the database. If yes it calls spawn_cron(), which starts another PHP process to do all the actual work.

Lots of processes in WordPress are handled by the cron system: scheduled post publishing, processing pings, update checks, etc.

The automatic update only happens when wordpress.org releases a new minor or security update. Otherwise (for a “major” release like WP 4.3 to 4.4) you must do the update manually by logging in to the back end.

I got this information from http://wordpress.stackexchange.com/questions/131334/how-exactly-do-automatic-updates-work. Thanks to “DisgruntledGoat” for asking and others for answering and explaning.

Where are my Pages? Page Permalinks & Featured Image

The permalink of my first page is here: wp.elizahost.com/here-is-my-test-page/

Perhaps I need to create a menu bar?

And I appreciate how post and page’s “featured image” feature makes it really easy to provide an image for each page or post, but can I make the “featured image” float right near the top of the post text, rather than sitting above the post or page title?

Akeeba Backup for WordPress

I am far enough along in my WordPress training that I decided it was time to come up with SOME backup solution. Reading through the section of my WordPress book, Backing Up a WordPress Site, I found that, as with Joomla, backup isn’t built in. Instead our main choices are:

choosing an automated backup service such as VaultPress or BackupBuddy for a monthly fee;
backing up with a free plug-in such as Online Backup for WordPress;
or manually: backing up your files over FTP and backing up your database via an SQL dump from PhpMyAdmin.

I found popular backup plug-ins listed at the WordPress Plugins Directory and this comparison article. The list included BackUpWordPress, which also sounded like the “Online Backup for WordPress” mentioned in the book. However Akeeba Backup was on neither list, but it did receive a favorable comment in another backup plugins review list.

I settled on BackUpWordPress as being very popular and free, installed it, looked it over, and found that you RESTORE your website from backup via FTP and PhpMyAdmin. It seems the only benefit to this tool is it facilitates MAKING the backup. Restoration requires about the same steps as restoring a manually made backup, as described above. Are you kidding me?

I went over to the Akeeba Backup for WordPress website and downloaded and installed the plugin. It looks like as with Akeeba for Joomla, there’s a Pro paid and Core free version. I got the free version for now, installed it and was happy to see its familiar user interface at my WordPress dashboard (see this post’s featured image above, and the “manage backups” image below).

A screenshot from Akeeba Backup for WordPress — Akeeba Backup for WordPress – Manage Backups

The video tutorial showed me that websites are restored or moved using the familiar (to Joomla users) kickstart.php process:

Make a new database if necessary
Upload kickstart.php and the Akeeba archive file to the website’s home directory
Run myWebSite.com/kickstart.php and follow the instructions to restore the website.

I don’t know why Akeeba Backup for Joomla is not listed in the WordPress plugins website, but once it’s there I predict it will become one of WordPress’ most popular plugins.

What’s your favorite backup solution for WordPress?