Instructions

I’ve modified some of the instructions and labeled them with the date 3/29/22. I’ve actually modified more but not put the date with every little detail.

3/29/22: I suggest having three tabs or windows open while working on website. Live website and admin should be opened in separate browser windows, and these instructions in another tab in one of these windows. If you bookmark this page, you can open the others from here. (The reason is because going back and forth from live site to admin in one tab can be slow and then you need to find your place again.) Once logged in to the admin, the dashboard will show.

Most, if not all, of your admin work will be within:

  • Media (images, videos, audio)
  • Posts (3/29/22: short, timely news, quick and easy to post)
  • Pages (static, archival)
  • Appearance Menus (only when you add a page)
  • Meta Slider (slideshows, bottom icon in nav)

These areas are all located along the left nav/icon bar.

Block Editor

Sorry to spring this on you while you’re just getting comfortable with the editing process, but Gallery Blocks can only be used in Block editing mode. Please read the first three sections of https://www.madriverweb.com/client-pages/wordpress-basic-documentation-blocks/. (Perhaps someday you will read the whole page and click to the other page of Basic WordPress Documentation.) I didn’t want to clutter these instructions with general documentation.

When you first open a page in Block Editing mode, close the bluish box that welcomes you. You can then manipulate content from within the content column or within the expanded List View.

Galleries (3/29/22)

I’m starting with this topic to locate it near the top of the instructions and with the reminder that Pages or Posts must be edited with Block editor for Gallery blocks to work.

  • The old Gallery page is comprised of medium sized images floated left. We are phasing this out and no longer have to pay much attention to sizing images unless cropping is desired.
  • The new Gallery page is comprised of different types of gallery blocks. The best two to use are plain Gallery and Masonry Gallery.
  • They are set so that all images within a Block will show in a lightbox (overlay).
  • I tested that a changed caption WILL NOT filter through to the galleries. You may either replace the photo with itself or manually type into the gallery to change or add a caption. Best still to do all the captions in advance, however, an image used in more than one place can have different captions.
  • After reading the general Block Editor documentation, open your Gallery Blocks page in the admin. Open the List View icon, upper left.
  • Add an image to Gallery: Highlight the Gallery in the List View. A box will appear in the content column below the gallery where you can upload or add from Media Library. When the Media Library opens, the images that are already in the gallery will be checked (you might have to “Load More” to see them). Check the additional one(s) to add. Lower right, Add to Gallery. You can then reorder them, but it is simpler to just add and reorder on the page once a gallery is established.) Update the admin and then refresh the live page to see how it looks.
  • Delete an image from Gallery: 1) Highlight (single-click) image to be removed. You will see its own individual icon bar appear above it. 2a) At far right end, click three-dot Options icon, remove image, OR 2b) (within the expanded List View) to right of highlighted Image indicator, click three-dot Options icon, remove image.
  • If desired, relocate a lone image on the page into a gallery: a) (Within the content column) in the Icon bar that appears above the image, second icon from left is the drag handle, drag the image up or down into the gallery. OR b) (Within the expanded List View) Drag the highlighted Image Block indicator up or down into the gallery.
  • Add a new Gallery: Hover approximately where you want the new gallery, look for a “+” and click it. Search for or select “Gallery” or “Masonry Gallery.” Typing a few letters will find it. Within the Gallery block that appears, select Media Library. Click on the numerous images to add, then lower right “Create new gallery.” If you decide you want more images, at left click “Add to gallery.” Reorder if desired (or reorder once the gallery is in the page), then “Insert gallery.”

Posts (3/29/22 we are now using these for News / blog, specifically Flora & Fauna, maybe Lodging)

  • Best if you type the post right in the admin. Copy and paste can have some formatting consequences, especially if copying from Word, but we’ve discussed the “preserve formatting” approach. If you prefer to create/type elsewhere, type into or copy into an email or text editor where formatting will not be an issue and then paste into the admin.
  • 3/29/22: The general procedure we discussed is 1) Title, 2) content, 3) select Featured Image (at right), 4) categorize, 5) Publish (or Update).
  • You are welcome to add more images or a gallery within your post, or attach files, see “Images” below.
  • If you make a long post, you may add a “more” tag, located in the top row of the formatting bar third from right to show only the beginning of your post on summary pages.
  • Please DON’T FORGET to categorize your post at right, multiple categories allowed.
  • When you feel additional categories are warranted, add them.

Note: NEVER allow trackbacks and pingbacks. Although they were good in concept, the abusers have totally thwarted their usefulness and they result in huge amounts of spam.

Pages

Click Edit or Add New.

  • See general use above, same as Posts.
  • You may add images within your page, or attach files, see “Images” below.
  • To add a link, place your cursor and click the “link” shaped icon. Easiest to copy a URL from the desired target page and paste it into link field, click save arrow. Note: I recommend opening external links in new tab or window. Once the link is made, place your cursor in the middle of it, click the pencil to edit, then the gear, then check “open in new tab” and save. OR, in the Block editor there is a toggle below the link.
  • Page Attributes, if a new page:
    • Choose placement in navigation hierarchy: “no parent” is top level.
    • Use Default Template unless you really want full-width. New width of body of page with wider margins is 768px.
    • Do not change Order.
  • Featured image: should select a 960 x 445 image for page header.
  • Let me know if you want a slider in a particular page header (full width directly below nav like home). I need to add it in the header file.

Tables (3/29/22:

  • Easiest to add in the Block Editor as there is now a Table block.
  • To edit, add rows, etc., put your cursor in a cell, click the three-dot Options icon at far right of Icon bar, select Insert before or after.

3/29/22:

There is a good chance some of the instructions below are outdated, or that you simply don’t need to nitpick with the images going forward. You WILL still need to size header images per the Scaling and Cropping instructions.

I have not edited below this.

Images

Explanation

  • The stored images can be viewed in the Media Library. You can view as list or grid by selecting the icon at upper left. When viewing the list, they can be sorted by File name (alphabetically) or by Date (from newest to oldest or vice versa) by clicking on the column heading.
  • Multiple images can be uploaded from your hard drive at once into the Media Library. The system will save them in multiple sizes: original, large, medium and thumbnail. “Large” are sized at 600 wide and are best displayed as centered. “Medium” are sized at 300 wide and are best displayed floated left or right.* There can be overlapping issues when images are floated, so be sure to have enough text in between them. Thumbnail images are 150 square and are primarily for display in the admin but can be used elsewhere if desired.
  • An “original” image can be edited to other sizes within the media library or within a page or post. The edited version will replace the original. The two instances to do this are 1) when scaling/cropping is desired for appearance, or 2) when the image is to be used as a header/full-width image (see below). The original can be re-uploaded if needed elsewhere in additional sizes and/or shapes.
  • “Add Slider” (next to “Add Media”) can show slideshows within the page or post as well. The slider will go wherever the cursor is. See more detail below.
  • Header images will display at 960 X 445 pixels unless you crop to a different height (such as at the top of the Gallery page). Within a page or post, “Set featured image” at lower right to the desired header image. This shape can also be used in MetaSlider.

Procedure within Pages and Posts

  • To add an image inside your page or post (like the Howler monkey), put your cursor where you want it and click “Add Media” above the text window.
  • Select the appropriate tab “Upload Files” or “Media Library” and locate the image.
  • Any time you are inserting an image from the Media Library, you can select the one you think you want and verify/choose size at right before finalizing the insert.
  • Assign Title, Caption, Alt Text and Description as desired.
  • Set the alignment.
  • Link to nothing. (Linking to a larger version sometimes results in leaving your website if people close it by accident.)
  • Gallery: to add an image, place cursor after the caption of the prior image and arrow right once (to get “before” the next image). Note that last row images are 300x201px and all others are 300x225px, so choose accordingly for uniform row height.

Image Scaling and Cropping

  • Click Add New at the top of the Media Library, or within a page above formatting bar.
  • Browse to select file or drag and drop from your hard drive.
  • Click Edit underneath image. Scale and crop as desired. Save, exit. Reopen image for additional editing.
  • Featured images should be scaled to 960 wide. The height will be set automatically.
  • If this image will only be used as a header, you will want to crop the height. Click crop icon upper left or put cursor inside image and drag to approximate size. Reach final size by dragging the sizing marks or changing text boxes to 960 X 445 at right under Image Crop. Drag to position the cropping box within the image. Then click the crop icon again. Crop other images as desired.
  • Then click Save below picture.
  • Optional: change file name. Recognize that the “title” attribute will show when hovering over some images, so you may want to leave it blank in some cases, or copy it into the “alt” field.
  • Leave caption, alt text, description blank for header images. Add a description to the “alt” field. Captions are optional where desired. Descriptions are not normally needed.
  • Then click Update in upper right.

Meta Slider Slideshows

  • Go to Meta Slider in left nav.
  • The only one programmed to replace a featured image is the home page. Others can be used within pages (as in Where We Are) by copying the orange shortcode in the right column into a page.
  • Size to 960 X 445 if you want a header slideshow on any other page like on home page (but I will have to program it to show where desired). This size is also good within the page (as in Where We Are).
  • Any other size is also fine within a page. Page content with wider margins is 768px wide.
  • Other settings at right should be Flex Slider, Fade, Fade, Default, Arrows, Dots, Auto play, Hover pause, 6000, 800, Print CSS, Print JS. These will copy this way into new slideshows.
  • Slideshow navigation is at upper right.
  • Name a new slideshow to match the page (for convenience and organization).
  • Add Slide(s). Add captions as desired.
  • If you upload an image while in MetaSlider, you can properly edit it as explained above under “Images.”
  • Copy shortcode (metaslider ID#) into document location.

Navigation

Note that currently the menu is as wide as it can be on the iPad (no more upper level items, or it scrolls to two lines, although minor adjustments can be made).

  • Go to Appearance Menus.
  • View All Pages, select any additional pages for menu, drag and drop.
  • Remove any not wanted in the menu by clicking down arrow, remove.
  • Expand to change Nav title if desired, preferably keeping it short (if page name happens to be longer).
  • Save Menu.

Miscellaneous, One-time, or Advanced

  • In every admin panel, there are Screen Options at the upper right.
  • For Posts, un-check Slug, Custom Fields, Send Trackbacks, Excerpt, Format; these will be out of your way in the future. (We are only using the Standard Format, no excerpts, no pingbacks or trackbacks, leave the slug alone.)
  • For Pages, un-check Author, Slug, Comments, Custom Fields; these will be out of your way in the future. (We are only using the Default Template.)
  • If you only see one row of icons in the formatting bar, click “Toolbar Toggle” at end of row.
  • Advanced: Switch to “Text” tab (upper right), and get used to reading the html source code. Sometimes copy and paste is easier in this mode, then clean up under “Visual” tab. Look for extra unintended line breaks in either mode. Text mode helps if something gets messed up in the visual mode.
  • Feel free to use Tags on Posts, optional. (I prefer to stick with Categories.)
  • You may Comment on Posts while logged in.

I would suggest for now not allowing others to comment or create user accounts until you become familiar with the system. If you decide to allow others to comment in the future, we need to set it up to prevent spamming.