Please review general WordPress Classic documentation on my website, https://www.madriverweb.com/client-pages/wordpress-basic-documentation/, WordPress Block documentation on my website, https://www.madriverweb.com/client-pages/wordpress-basic-documentation-blocks/, or search the internet as needed. Below information is specific to this site.
In Classic mode: A reminder that the Screen Options in the upper right of any panel or page can help you de-clutter or find a feature not currently visible. In Blocks mode: my page above discusses the icons at upper right and left.
Tip: Use Shift Enter to make a single line break (instead of a double line new paragraph).
Posts (Specials, Events, Nature, News)
While looking at the Posts list, to order the posts as desired for display on News, Category pages (Events, Specials, Nature), and bottom of Home page (if full-width), hover over the white space to show the 4-arrow icon, then drag and drop. Clicking on a column title will temporary reorder these (alphabetically or by post date) but they go back to the manually specified order when the Post list is re-entered.
Input title and post content, image if desired; all of this will show on the blog pages. Select appropriate category(ies) at right in the admin. Create new Categories as desired.
Posts to be featured in Home page sidebar or full-width Home page posts must have a Featured Image specified in right sidebar under the Document tab. Control display balance on Home page sidebar with Text and/or Amplified widgets any time you make updates.
For posts with a lot of content, 1) to minimize the amount that shows on archive page, and 2) to lead a person to the actual post with a “Read More” link, insert a “More” tag. In a classic block, put your cursor where the “more” tag is desired, and click the icon near the right of top row of icons. With multiple blocks, click the plus sign between blocks, search for “more” and click. If you prefer to say something other than “read more” in the link, you can insert a manual link.
When an active post needs to be returned to inactive or vice versa:
- While in the individual post admin, click “Switch to Draft” or “Publish” in upper right, then Update. Updated desired post date.
- OR, while in the Posts list, hover over a post name, click Quick Edit below it, change Status at right. Update desired post date.
To edit, open the desired “Page.”
A new Page will need to be added to Navigation when ready to go live.
See below to add a Featured Image or MetaSlider. Programming prioritizes MetaSlider if one exists, then Featured Image if one exists.
To Do page table:
Table mods are easy in Block Editor. Put your cursor in a row that you want to add a row before or after or delete. Fourth icon is Edit Table. Add a row before or after, or delete. Highlight the name to be linked, click the link icon, paste the link, open the gear, check the box to open a new tab, click Add Link.
The following three images sizes will be created automatically when an image is uploaded:
- 160px wide in sidebars, by about 120 high with some variation, older “thumbnail”
- Sidebars can alternatively use medium images and they will be properly constrained
- 420px wide in slideshows and pages, by 300 or 315 high with some variation, “medium”
- Special case: 640px wide x 480 high on the Garden Room
- The new “large” size, 718 wide x 540 high max, will fill the width of the content column
- 1140 x 400 “featured” image which is specifically a crop through the middle of the original unless you crop it differently (manually)
Regular Image: Add an image block inside the page or post content field, choose image from gallery or upload, select size in right column, select alignment above in Block settings, generally no link, add caption if desired.
Featured Image: If you want to place a single “featured” image at the top of a page under the navigation, select it at right while in the page admin. If you prefer a different section of an image, you will need to edit the image in the Media Library by scaling and cropping to final dimensions 1140px wide x 400 high.
A “featured” image can also be attached to a post and is only necessary if you allow people to go to a longer post page, so make sure this very horizontal display also looks good.
Sidebars / Widgets
Go to Appearance > Widgets, the desired Sidebar, expand the Sidebar, expand the widgets, modify or add as desired.
Most pages have sidebars containing images specific to that page. The desired sidebar can be selected at right in the page admin by clicking the Document tab, upper right.
The primary sidebar appears on any pages without one specified and all archive/blog and post pages (that are not full-width).
For home page sidebar, the Post that will show is highest in each category on Post list in admin. Drag and drop to top when showing all categories (no filtering).
If you need to adjust the size of the picture or the number from each category, do this in the Amplified Widget for each category. Test adding content with a limit.
All slideshows are created within MetaSlider, then specified within a page or post.
Modify existing or add new.
- To create a new slide show with same settings as an existing slide show, click Add New when one with desired settings is selected.
- Most likely you will want to start creating slide shows with larger images. If so, simply change the sizes once you add new. Name it in the field at top.
- The Garden Room has larger images at 640 x 480px, but these are actually displaying at 718 x 540px on the largest viewing size (because I selected 100% width in the Advanced Settings).
- Although images are pre-saved upon upload, the MetaSlider will save any newly specified sizes as long as the original is at least as large.
- MetaSlider images want to be 718 x ~540 within the body of a page or 1140 x 400 for headers.
- Under Advanced Settings, most are done with Smart Crop and they are all the same size/shape.
- If mixing different shapes (there used to be a vertical pic in About the Inn #1), set the size to 420 x 420 and select Disabled (Smart Pad) under Advanced Settings. Note: The only problem with this is it will use full sized images because it shrinks the image until the larger dimension fits. This can result in slow loading, especially on phones. Best to size these smaller in the Media Library before putting into a variable shaped MetaSlider.
- When placing a MetaSlider within a page, insert the block and select from the dropdown.
- When you want a MetaSlider at the top of a page under the Nav bar, note the shortcode ID number to be placed in the page, from the right column of the MetaSlider.
- Take a look at the About and Seasons pages to see how it is done. Scroll down until you see Custom Fields below this section. If you don’t see it, click the three dots upper right and select it to display.
- Go to the appropriate page. Under Custom Fields, Name select metaslider_shortcode, under Value enter the ID. Click Add Custom Field. Update the page.
Number of items per row is easily updated by going to Appearance > Customize > WooCommerce > Product Catalog and change number per row. Publish.
Variable product: In Attributes tab, create a new attribute if it doesn’t already exist (such as size). Add descriptions with vertical separator in between. In Variations tab, create Variations from all Attributes.
When you have new Variations of existing Variable products, add them in Attributes, then create the Variation in the Variations tab by clicking “Go” beside the (pre-selected) “Add variation.” Then choose the new variation in the dropdown, and drag it to the bottom of the list if desired. Expand and add remaining content: price, weight, dimensions, picture(s) to gallery and on individual variation.
Images: Take photos, edit & crop (generally use square), off ADA description, upload to media library. Add main product image first (sometimes a good choice is multiple items in one picture). Add image gallery next. Save. Expand Variations, add individual variation image using icon upper left.
When a unique item is purchased, the inventory will automatically update in WooCommerce (to zero) and that variation will be removed from the dropdown list choices. The gallery images will NOT be removed. You can remove them or leave them if you have more of that fabric and may be able to sell it again.
If an item is returned, you will 1) refund the customer in PayPal and 2) open the original order and change the status to returned. 3) Open the product and variation and change the inventory back to “1.”
*Removal of an item: >Edit>variations>expand; scroll down to specific item, click on REMOVE found on right side. Also go to Gallery and delete (X) image.
*To Reorder Variations: >variations>drag & drop (found on right side)
Unique Product Pages
“Products” you don’t want to show on Shop page can be turned off upper right in Publish block.
Lodging—we are keeping this lodging “product” as a backup/alternate at this time since the tax does not work: https://www.johnnycakeflats.com/product/lodging/
Gift cert—easy enough to sell (I encourage), not as clean to redeem (with coupon code, and with it reducing subtotal and negatively affecting shipping on the goods being purchased). https://www.johnnycakeflats.com/product/gift-certificate/
Coupons—are found within Marketing > Coupons. The field to enter coupons is turned on and off within WooCommerce > Settings > General tab about halfway down the page.
Taking Payment through PayPal independently of WooCommerce Shop
General payment page: https://www.johnnycakeflats.com/payment/ is for informal/manual use to process a total gift shop payment through PayPal. Give the guest the URL. Since your products do not have tax and we presume the guest is taking the goods with them, no tax or shipping is taken by this method.
Lodging payment page: For lodging, https://www.johnnycakeflats.com/lodging-payment/, you will give the guest the URL and subtotal and the tax will be added in PayPal.
You may safely update the text in these pages. Do not edit the widgets. You can make simple changes to the button in PayPal if needed. If the button is modified more significantly, we may have to copy the updated code into the widget.
Accessible through Appearance > Customize > WooCommerce.