Documentation

We reviewed that there are important navigation/menu tools 1) upper left: Document Overview List View, and 2) upper right: Options (used infrequently and more of a global settings tool), Settings, and Genesis theme options. You will use Settings as it pertains to the Page or each Block and Genesis as it pertains to each Page or Post.

Layout

• We agreed to use the sidebar on the News page, where sidebar widgets will provide post navigation. News page featured images will not be full width (so that the sidebar navigation can be displayed). I set the News page to display 500 characters of content.
• The best way I found to force every page and post to full-width while allowing the News page to have the sidebar post navigation was to set default layout to “content, primary sidebar” and to force all pages to full width with a script, so you don’t have to do anything individually, can leave them all as default layout.
• We discussed only using columns as an alternative to align/float when the items in each column are similar height.

News/Posts

• I like sticking with how we had the Posts set up, with full-width main image at top.
• I added Next Previous navigation between posts that shows the titles.
• The Page has the ability to remove the title, but the Post doesn’t. So, when you want a large featured image at the top of a post, see screenshot at right; add “title-hide” to the Body Class under the Genesis functionality (2/15/24 noted in email correspondence). Then you will type or paste the same or desired title below the main image just like you do on Page. When you don’t have a full-width image in a post, the margin/padding at the top will be appropriate.
• One drawback: The title is repeated on the News page and in the Home page Latest Posts. Perhaps if it is a little different, it won’t look repetitive. (I know there’s a way to put the (real) Featured Image above the Post title, but I don’t know how easily it will be to display it full-width. 4/23/24 I will research this.)
• I moved the meta data below the post. Date, author, and category are typically shown with Posts, but since you are the only author (so far), the date is the most important thing. We can fine-tune this if needed.

Pages

• 2/8/24 Tip: to create a “line break” which is a single line spacing, rather than a paragraph break which is double line spacing, use Shift Enter.
• (Using the Genesis icon, hide the title to have the image fall directly below the header. No longer needed.) I hid the title on Pages, too.
• (Also under Genesis, if we decide to use the News/Post navigation noted above, each Page Layout needs to be set to Full Width Content. Do this now as you add pages and it will be moot if we make a different decision for Posts. No longer needed.)
• We might also assign a Custom Class at the bottom of this Genesis menu in certain circumstances.
• No Featured image needed. (I tend to call the full-width main image we manually insert the Featured Image as well, but will hope not to confuse.)
• (We had at one time considered a “cover” image at the top similar to Salmon Quebec with title text overlay, possible screening. Keeping this idea for reference.)
• Insert large main image, click on the “align” icon in the image toolbar and set to “full-width.”
• Retype or copy the title under the photo as an H2. Note, the actual page title that is hidden can be simple–how you will best find it in your admin. The visible title under the image can be whatever you want it to say.
• A quick way to add a heading is to just start typing as a paragraph, then change the left-most icon in the toolbar from paragraph to heading. For headings other than H2, you can change that icon.

Images

In a Post, as I already noted, the primary image gets inserted first, right below the title, then the repeat title, then the text. Make sure the image resolution gets set in the sidebar to “original/full size” if it is to be a full width, or “large” if the quality is sufficient.

Posts need the same main image also to be added in the right sidebar/toolbar as a Featured Image in order to display in the home page latest posts block and in the News page.

Pages do not need a Featured Image, just the full-width main image within the page.

For images within the text of a page or post, use the “align” icon to float it left or right, generally a medium-sized image, and place the image above the appropriate paragraph beside which it will float.

(I need to fix why the image doesn’t expand on click, or provide alternative. It seems to be a known problem. References here for my later use: https://wordpress.com/forums/topic/image-block-expand-on-click-not-working/, https://wordpress.org/support/topic/image-block-expand-on-click-not-working/, https://github.com/WordPress/gutenberg/issues/56049. The “alt” tag that you inserted is helpful to know that the functionality works, plus we should have “alt” tags for accessibility; this is another place rogue lawyers are causing businesses trouble, especially in the lodging industry.)

2/8/24: I installed a lightweight plugin that automatically implements a lightbox overlay with caption at the bottom when the image is linked to media file. See example at right where I’m showing what to click, and did so to the actual image so the lightbox will show in live web page. If you install a gallery, the lightbox will scroll through each image in the gallery–useful when pictures are related. We can style the resulting display if desired, but let’s keep cost down now as it looks good.

The only drawback to this approach is that to use the original, native (built-in) “expand on click,” we are not supposed to link to the media file; it does it automatically. But we have the problem solved in a different, lightweight manner.

Videos

Edit them on iPhone to shortest length sensible, then send to yourself by email and they will reduce to a usable size. See example on https://voyageursfieldsport.com/sample-page/.

Navigation

I made the main navigation a maximum width for each item, so if they are longer they will scroll to two or more lines. We will tweak this as needed.

Note: Whichever page will be last in the nav uses a Custom CSS class:last (in the navigation item) to have an right-side gold border.

Reusable Blocks (now called Patterns)

In “Fieldsports and The Faith: Men” there is an Article Subnav that I have seen you use elsewhere. There is a way of saving this so that you don’t have to copy and paste the paragraph each time. It used to be called a Reusable Block; now it is a Pattern. So I saved it as a pattern in that page. If you want to use it elsewhere, see the screenshot below. When you click the “+” to enter a block, click Browse all, then select the Patterns tab near the top, My patterns, and there it is. Using this block in all locations that need it will allow you to update it in any location and have the updates apply globally in all locations used.

Events

We are selling “Events” as products using WooCommerce. We used the booking calendar by PluginHive: https://www.pluginhive.com/product/woocommerce-booking-and-appointments/. This has an annual fee if you want continued support, but we likely won’t need continued support. We will renew only when we need an upgraded version in order to remain compatible with platform upgrades.

Bookings > Settings is where you make any needed global changes. Become familiar. Help page is https://www.pluginhive.com/knowledge-base/setup-guide-woocommerce-bookings-and-appointments-plugin/. Use WooCommerce Products to add and manage guided activities.

WooCommerce Orders is where you will typically go to review bookings. See emails 6/5/24 (and a 10/18/24 refresher of the process) to see what customers receive through the booking process. I can copy them in here at some point, but only after we settle on language.

• If anything changes, like a cancellation or bad weather, and you need to make full or partial refund, do that in PayPal, then…
• After the guided activity date is complete/past, go into the client’s order and change it from Processing to Completed. They will get a final thank you email, and your system will be up-to-date.

I believe the only time you will use Bookings is to confirm a reservation.

Products is where you add events. I explained the locations of the main Description field being lower on the page and the Product Short Description being beside the image and above the purchase buttons. In the Product data, select a Bookable product.

Become familiar with other sections of WooCommerce and Products.

We added PluginHive Product Addons to confirm waders and experience level. I added one Product Addon group, Fly-fishing, and went back and set each fly-fishing product to the Fly-fishing category so that this Addon group will show on those product pages.

Addons: I created two “patterns” (used to be reusable blocks) for the wader size tables.

• I disabled shipping on the WooCommerce > Settings > General tab.

WooCommerce display settings are found in a number of places. Some of these notes are for my recollection, but you should review middle bullet.

• In the theme files, the lib/woocommerce/woocommerce-setup.php file is where the small device breakpoint is set, lines 22-48.
• STEVE: Appearance > Customizer has a WooCommerce section that is worth checking out.
  • Store Notice: You would put a note here to display a banner across the top of the site. It may be purple, so be prepared to ask me to style it in advance of needing to use it. Typical uses are for a sale, to indicate you might be unavailable for a week…
  • Product Catalog is where we will change number of products per row once you have more regular events. 5/30/24 I changed it from 1 to 3.
  • Product Images and Checkout may want tweaking.
• Appearance > Customizer > Additional CSS has some WooCommerce styles in the middle line 31, and in the media query line 80. If the small breakpoint is changed, the query breakpoint should also be changed.

References

Layout: https://www.saumonquebec.com/en
With Booking: https://www.tricounlimited.com/, https://www.tricounlimited.com/fishing/#book

WooCommerce: https://woocommerce.com/documentation/woocommerce/

PluginHive Plugins:

• https://www.pluginhive.com/product/woocommerce-booking-and-appointments/
• https://www.pluginhive.com/knowledge-base/woocommerce-bookings-and-appointments-plugin-faqs/
• https://www.pluginhive.com/tailor-made-woocommerce-bookings-solutions/

This is also a good site to learn from although I have not read this specific guide: https://www.wpbeginner.com/wp-tutorials/woocommerce-tutorial-ultimate-guide/

This will be more technical, but may interest you: https://www.codeable.io/wp-content/uploads/2019/07/WooCommerce-Guide-Store-Managers.pdf. This site is also where you can get a different developer if I meet my demise someday or if you tire of me, although I am trying to put into place a succession plan.