WordPress

Info, Tips and Helps for using WordPress, including Gutenberg.

Featured Image
Responsive Image Strategy
WordPress Releases
Copy a Block
Bulleted List line-height
Test page content to existing page
JFP Brand shape for image
Make a page not searchable
Schedule update to existing page

Featured Image

What is a Featured Image and how do I put one on my page?

The Featured Image, which is also called the Post Thumbnail (per the WordPress Codex), is the representative image of a post or page. It is very important to select a featured image for your posts and pages, because this is most often what will show when shared on social media, or texting platforms.

Importance of Featured Images:

Visual Appeal: They make your site look more appealing and professional.
Engagement: They help attract visitors and encourage them to click and read your content.
Social Media Sharing: They are used as thumbnails when your posts or pages are shared on social media.
Search Engine Optimization (SEO): They can help improve your search engine rankings by providing a visual representation of your content.
Branding: They can help establish a consistent visual identity across your site.

How to use Featured Images in Gutenberg:

Edit Post/Page: Open the post or page you want to set the featured image for.
Access Featured Image Settings: In the right-hand sidebar, find the "Featured Image" section.
Select or Upload: Choose an image from the Media Library or upload a new one.
Set Featured Image: Click the "Set featured image" button to assign the image.

For most WordPress themes, a featured image size of 1200 x 628 pixels is generally recommended. This size works well with a variety of themes and ensures the image looks good when shared on social media platforms. However, the optimal size can vary slightly depending on the specific theme and its layout.

Details video on YouTube

WPBeginner.com article

Responsive Image Strategy

Image Optimization for Devices

The website's responsive design generally scales images for different screen sizes. However, specific images may require optimization for mobile, tablet, and desktop displays.

Previous Approach

Prior to the current method, a custom CSS solution was used to manage image variations across devices.

New Method

A new and improved method for handling different images for smartphones versus monitors is now available.

Training Resource

View the instructional video for detailed guidance on implementing the new image optimization method.

Please watch the video to see how it's done.

WordPress Releases

Info on the latest versions

https://wordpress.org/news/category/releases/
More info:
https://make.wordpress.org/core/

Plugins:

Gravity Forms-
https://docs.gravityforms.com/gravityforms-change-log/

Rank Math SEO-
https://rankmath.com/changelog/free/

WP Popups-
https://wppopups.com/docs/changelog/

Copy a Block

How do I copy a Block from another page?

First, go to the page that has the Block you want to copy
Next, click on the Document Overview at the top left (or Shift+Alt+O)
You will now see a dropdown of the List View of all your Blocks
Find the Block you want to copy and click on it
In the List View that Block will now be highlighted.
Click the three dots for that Block and then click Copy
Now go to the page where you want to copy the Block to
On that page, click the plus sign where you want to copy that Block
Type in the Block name and when it comes up on the page, click the icon and then the Ctrl & V keys
You should now see that Block with all the copied data from the other page

Bulleted List line-height

Is there any way to reduce the line-height of a bulleted list?

On the page, highlight the entire list
On the right, click the three dots in Typography in the Block section
In the dropdown, click Line height
Click just outside of dropdown
Adjust line height

Example: jesusfilm.org/unpacking-parables

Test page content to existing page

I’m redesigning a page in a test area. How do I move that page when I’m done to replace the old page?

First, when in the new design, click on the three dots in the upper right of screen
Click the Code editor in the dropdown to switch to code view
Copy all the code (Ctrl A and Ctrl C)
Go to the page that you will update
If you want to keep a copy of the old look, then click duplicate
Now on the page that you will update, click to edit
If still in the Code editor mode, just hit Ctrl A, then Ctrl V
Go back to Visual editor (back in the three dots dropdown) mode and check your work
If all is okay, then save and the page will be updated

JFP Brand shape for image

How do I get my image on a page to have the JFP Brand shape?

Go to the page with the image you want to update
Click the image
On the sidebar on the right, click the Styles tab
In the Styles area click the Clip Path button
You will see the image change to the JFP Brand shape
Update the page and you’re done

Example: jesusfilm.org/resources/pray/2025-06-country

Make a page not searchable

How do I make a page so it’s not searchable when someone does a Google search?

First, go to the page
In the upper right, click on the Rank Math button
In the dropdown, click from General to the Advanced tab
You will see the ROBOTS META
Click the No Index and Nofollow checkboxes
For more info on those choices, click the question mark next to each
Update the page to save your work

Schedule update to existing page

Can I schedule an update to an existing webpage?

Yes, it’s called a Revision
Find the page you want to update and click Revision (not Edit)
When page opens, click the Publish link on the upper right
Add date and time, and close
Now edit the page and click purple Save draft button when done
You can edit more or even come back later if needed
When finished, click Save draft again and then the purple Approve button (do not need to Submit for approval)
When you leave the page, you can see the status of your update in the Revisions tab on the left
If any further updating is needed to the page before it publishes, open that page in Revisions