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.

Small five-petaled pink flowers - Leptosiphon montanusTry 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!”Editing image title attribute - screenshot

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?

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.

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:

  1. Make a new database if necessary
  2. Upload kickstart.php and the Akeeba archive file to the website’s home directory
  3. 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?

Formatting Shortcuts for Editing WordPress Posts

Styles My Text as a Heading

“###” that is.  The formatting shortcuts are a new feature of WordPress 4.3.

  • Starting a bullet list with “*”
  • Asterisk that is, followed by space then a character
  • To get out of the list, hit two newlines

Here comes a numbered list:

  1. Item one
  2. Start it with digit followed by )
  3. “1)” that is

End of my list.

Note, to get the link to open in a new window, I don’t see the option in the add link menu.  I added “target=’_blank'” in “text” mode.

green plastic dinosaur head
Dino the bike horn dinosaur

Since every post should have an image, I’ll provide a copy of my “sites icon” here.  Sites icon is a feature that came along in WP 4.3.

By the way, how to center the caption?  It looks like I’ll have to modify the theme’s CSS, to style figcaption or class=”wp-caption-text” to have style text-align: center.  Maybe when we get to child themes?  I’ve tagged this post with “learn” to indicate something TO learn.  Maybe I can have an additional tag “learned” to indicate posts demonstrating things I’ve learned.

Paragraph Breaks vs. Newlines

  • Enter/newline starts a new paragraph
  • Shift-Enter gives you line breaks

Pendergast Ave.
Cupertino, CA  95014
(408) 255-3767

Yup, one less reason to go to HTML view.  Does shift-enter work in JCE as well?

Spell Checking

Use Firefox: turn it on here: options > advanced > general > check my spelling as I tyyyype.  (It took looking in options again to start checking.)