“Let’s Fix Your Website” Recap for August 25th, 2020

Video recording of the August 25th, 2020 “Let’s Fix Your WordPress Website” Meetup event.

This post recaps the exchanges and tips from the Let’s Fix Your WordPress Site 2020-08-25 | WPTO Meetup. This was our sixth online session using Zoom.

These notes are in 2 parts. The first are notes taken during the session and then cleaned up and supplemented and a summary compiled and list of links added. The notes cover most of the discussion and make the video more useful. The second part of this post is the chat transcript with light editing of the URLs where necessary.

The requests for help were made in the event page’s comments and in Zoom’s chat messages and discussed more or less in chronological order.

In this post, we introduce WPTO’s showcase on Vimeo.

The session started at 6:30 and ended at ~9:15.

The next session is Let’s Fix Your WordPress Site 2020-09-14 | WPTO Meetup.

WPTO's showcase on Vimeo screenshot image.

WPTO’s showcase on Vimeo

The videos for the last 6 sessions are now in a Vimeo showcase, a screenshot of which is at right.

About our sponsor Weglot

The WordPress Toronto Meetup groups is sponsored by Weglot and the Canadian Management Consortium.

Weglot is the fastest and most flexible way to translate your website. Check out a short demo.

Try Weglot out for yourself and then get 15% off as a WordPress Toronto member.

Session notes

Summary

There were 7 people assisted in the session:

  • Andy asked for a volunteer’s help with his site
  • Kathy wanted assistance integrating MLS listings
  • Fernne asked for a refresher on image optimization
  • Reema wanted advice whether to delete a plugin she didn’t install
  • Natalie needed help changing a featured image in a post
  • Reema requested a way to remove a gray background on image captions
  • Asif asked if the OS used by a host’s servers mattered and how WP hosting works

List of links in the session

Andy

His post: This COVID has given us a huge blow. Look for some generous soul who could help me with fixing a website and building another one for me for me to get going. (He didn’t attend but Wally Wormstrom offered to help him.)

Kathy Sterman

She wanted to know if anyone has had experience with integrating MLS listings on a WordPress site?

Patrick Boake I don’t have _experience_ but just did a quick search and there are multiple plugins for this.

Kathy Sterman I’m trying to assess if a plugin is the best solution and how much work is involved. I’ve talked to a few companies and they say it’s very complicated to do the integration and charge up to $1,500. I thought it would be good to be able to offer services to realtor’s that want a personal branded site but I’m finding that it may not be worth the trouble.

Kathy has researched the issues and wanted to discuss them and arrive at a decision on how to proceed with a client project.

Her client is an agent. The issue is MLS integration in WP site. Use listings to attract traffic to what’s available in addition to that agent’s listed properties. Issues. MLS is a service operated in each of the real estate boards in Ontario and requires a licence by a registered agent to obtain a data feed. US firms sell site packages with MLS services integrated. Plugins are for all US boards plus the large ones in Ontario, etc. (i.e., there’s Toronto plus all the other ON boards). Hard to break into this niche market on a one-site basis. The client in question is resistant to paying for a developer to build a site and implement MLS listings. MLS involves 2 costs, the integration (plugin) and the data feed assuming the search UI provided is acceptable and doesn’t require any work.

For example, see MLS RESO Web API Import Solutions for WordPress.

Given that most agents’ sites use a standard search UI for listings, there is an opportunity to differentiate an agent and add value by designing one with a better frontend.

Kathy‘s conclusion is to leave MLS integration to the people specialized in this niche requirement. Not a good area in which to dabble. She also faces the risk of being taken advantage of by a client who doesn’t value the work involved. Agents are already paying fees to brokers and are disinclined to pay additional recurring fees.

Fernne Kane

19:00. Her site is fernnekane.com.

She continues to find optimizing the images on her site difficult and asked to review the method we had used in assisting her several Meetups ago. She has cleaned up her site over the past few months so there are fewer images now to optimize.

The steps to optimize an image are:

  • ensure that the file format is an appropriate one such as PNG or JPEG and convert if necessary (her example image was a 27 MB Adobe stock GIF image)
  • check that the resolution is appropriate (72 dpi is good)
  • crop to appropriate size (for headers, 2000×1280; post images <1,000 in width)
  • optimize size (use lossy comprehension)

Melroy took her through the workflow in Photoshop on one image. These steps reduced the file size from 27 MB to ~150 KB.

Fernne uses Photoshop, a relatively expensive program. Image optimization services are a free alternative. TinyPNG was recommended because up to 20 images may be uploaded in a batch and the individual file size limit is 5 MB.

Reema

19:25. She found a plugin, VafPress Post-formats UI, installed but not activated on her site and doesn’t know how that occurred. The plugin is VafPress Post Format UI Plugin / Sculpture Qode (s: VAFPress Post-formats UI). There isn’t any reason to retain the plugin so it should be deleted. She needs to change the site’s admin password because plugins don’t appear on their own except when installed by another plugin as a addon or must-use.

Natalie

She is working on a non-profit site. She has used WP.com for a site and is now trying a WP.org one on SiteGround hosting. Using the Elementor pagebuilder.

In this post, WP.com refers to a site hosted on WordPress.com; WP.org, to one self-hosted using code downloaded from WordPress.org.

Questions:

How to change a featured image in a post.

We had difficulty finding the edit UI in which we can change the featured image. That is normally a widget at the bottom of the right sidebar. The UI has been rearranged and that widget disappeared. We noticed that the setting gear icon had been turned off. Now that its on, the featured image box appeared and she can now change the image in question.

On the first post in the blog, the background image doesn’t work. Remove the background image or at least change it to be a background that’s less intrusive. Alternatively, take down the opacity to (say) 25% or blur the focus.

How do you add some pages to a drop-down menu as a menu sub-category? We went through the menu editing procedure to add the pages and demonstrated how to indent a menu item (drag it to the right) to make it a sub-category.

This was a good opportunity to emphasize the importance and value of the message window that appears at the top of the page to report that a procedure, for example, a menu saved, has occurred or been completed. We tend to ignore these messages but they’re valuable and should be noted.

Reema

Her question was in regard to her site, The Culture of Pearls, a gallery blog using the Nisarg | WP.org theme.

She wanted to know how to change an image caption (metadata). Captions are displayed with a gradient gray background. How does she remove that? Captions may be supported by the site’s theme or not. Through trial and error, we determined that the theme adds a gray box as a background when a caption is added.

To change an image caption, the brute force method is to replace the images with ones from the Media Library or use a caption as text under each image.

Initially, we deleted the captions and the background was gone.

We found the image in the Media Library and added the caption to its metadata. That didn’t work which confirmed that it is the theme controlling the background.

This isn’t the first time this question has arisen. For example, see Getting a gray line under captions | WordPress.org.

In the Customizer, we didn’t find anything relevant.

Using the browser’s Inspector, we found the CSS that sets the caption background to gray.

The Chrome Web Inspector and Debugger are conveniently built-in with Chrome. You can launch it by hitting F12 while in your browser or by right clicking on a web page and selecting the Inspect menu item. S: How to use the Chrome Inspector and Debugger (an excellent tutorial).

See also Chrome DevTools | Google Developers.

We found the fig-caption element with the blocks-gallery-item__caption class which controls the caption text in question. We found the class’s properties by trial and error and copied the styles using the right click menu.

If that HTML element is unfamiliar (as it was to all of us), see HTML figcaption Tag.

An excellent CSS learning resource is HTML and CSS on the The Odin Project site.

For a fascinating story of the evolution of CSS, see a recent post from the penultimate in web authority’s blog, ‘CSS X’ | W3C.

Here’s a question we didn’t have time to address.

We found the relevant property element, blocks-gallery-item__caption, which lead us to the blocks-gallery-item. At th end of the blocks-gallery-item__caption snippet, == $0 CSS appeared. What does it mean?

“It’s the last selected DOM node index. Chrome assigns an index to each DOM node you select. So $0 will always point to the last node you selected, while $1 will point to the node you selected before that.” S: What does ==$0 (double equals dollar zero) mean in Chrome Developer Tools? | Stack Overflow.

What’s the significance of the double underscore? double underscore in a CSS class name?

Asif

What is the difference between Linux and Windows hosting servers and WP hosting. Hosting just means that the WP application runs on that server, a trivial matter since every OS can do so. Every host offers WP and one-click WP installs. There are several hosting service tiers above the basic one. The first such tier is managed WP which runs 5 to 10x the price of basic service and includes more automation, security, resources, etc. In hosting, the sky is the limit. Check out WordPress VIP.

His WP.com site, WebWurx’s Blog can be migrated to self-hosting.

MDDHosting was recommended for basic hosting. SiteGround is one of the leading hosting providers and popular amongst WPTO members.

Many hosts offer a free domain name and become the new domain’s registrar in the process? Can you use it on another hosting account? Check with the host but its likely that you can start off using such a domain name on another host. You can definitely move the domain name to another registrar and host in due course since you own it and transfers are straight forward. One advantage of the host also being the registrar is that the host handles the sites DNS records.

Chat transcript

The transcript is missing the first half of the session as you can see from the time of the first message.

  • 01:05:38 Robin Macrae: Did anyone get the name of the person with the previous question on the VafPress plugin?
  • 01:08:25 David Schargel: I need to go. Thank you all!
  • 01:25:39 Attendee: I just jumped in. sorry for being so late.
  • 01:41:48 Attendee: may be this might help: https://wordpress.org/support/topic/getting-a-gray-line-under-captions/
  • 01:41:53 Attendee: Me
  • 01:42:02 MB: Yes
  • 01:45:03 Attendee: Developer Tools
  • 01:46:20 Patrick Boake: easy free way to learn HTML and CSS
  • 01:46:35 Attendee: but I think that is being modified due to the class being applied
  • 01:46:42 Patrick Boake: The Odin Project: https://www.theodinproject.com/
  • 01:48:17 Attendee: she shrunk the bottom part too much low.
  • 02:00:22 Jacques Surveyer: Have to go I have my own Meetup tomorrow on Gallery plugins
  • 02:07:41 Dale: Have to leave – have a meeting with client – good meeting – lots to learn – thanks.
  • 02:12:19 Paul Warner: Really interesting meeting. A CSS breakthrough for me. Gotta go if I want to stay married.
  • 02:13:56 Asif: Hi all. before this session ends. I have a ‘beginner level’ question about hosting. sorry. I was unable to locate the option to ‘raise my hand’.
  • 02:14:29 Natalee Johnson: Thank you for sharing the information.
  • 02:14:58 MB: Thanks for sharing the resource Patrick.
  • 02:15:41 Asif: Yay. just found the option to raise my hand. embedded way deep!
  • 02:17:02 Robin Macrae: https://www.w3.org/blog/2020/03/css-x/
  • 02:17:58 reema: Thank you so much!
  • 02:20:57 Patrick Boake: https://www.w3schools.com/.
  • 02:21:43 Patrick Boake: another free course for lots of stuff htm CSS JavaScript SQL.
  • 02:24:07 Patrick Boake: “For public Internet servers, Linux is generally counted as dominant, powering well over twice the number of hosts as Windows Server – which is trailed by many smaller players including traditional mainframe OSes.” https://en.wikipedia.org/wiki/Usage_share_of_operating_systems?wprov=sfla1.
  • 02:28:45 Asif: webwurx.wordpress.com.
  • 02:29:50 Alex Sirota: https://www.mddhosting.com/.
  • 02:29:51 Asif: https://www.mddhosting.com/.
  • 02:29:57 Alex Sirota: and don’t forget Mozilla’s MDN web docs – https://developer.mozilla.org/en-US/docs/Web/CSS.
  • 02:38:02 Asif: Thanks everyone. for all your help and views.
  • 02:38:14 Asif: I have to unfortunately leave now.
  • 02:43:52 Natalee Johnson: Is mddhosting okay to use then?
  • 02:44:23 Natalee Johnson: Thanks.
  • 02:44:42 Natalee Johnson: Thanks, this was great.
  • 02:44:43 MB: Thank you!

Robin Macrae (LinkedIn)

That’s it for this month’s Meetup notes and chat transcript.

The next is another online session, Let’s Fix Your WordPress Site 2020-09-14 | WPTO Meetup. RSVP and post your question or request.

Robin Macrae (LinkedIn)