Instructions

From favorites, open live website in one window and login in another window (because going back and forth from live site to admin can be slow). Once logged in, the dashboard will show. Open another tab or window and open Instructions from favorites.

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

  • Pages (static, archival)
  • Media (images, videos, audio)
  • 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.

Pages

Click Edit or Add New.

  • Best if you type right in the admin. Copy and paste can have some formatting consequences, especially if copying from Word. If you prefer to create/type elsewhere, type in an email or text editor where formatting will not be an issue. Don’t use Word.
  • You may add images within your page, or attach files, see 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.
  • 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

Typical structure in the source code is (view the Text tab to see this):

where tr = table row and td = table data (columns). So when you want to add a row, copy everything between the opening and closing “tr” tags, i.e. everything between <tr> and </tr>.

Posts (we are not using, only if you decide to write News / establish blog)

  • Best if you type the post right in the admin. Copy and paste can have some formatting consequences, especially if copying from Word. If you prefer to create/type elsewhere, type in an email where formatting will not be an issue. Don’t use Word.
  • You are welcome to add an image to your post, or attach files, see “Images” below.
  • If you make a long post, I suggest adding a “more” tag, located in the top row of the formatting bar third from right. This will keep your post short on summary pages.
  • Please DON’T FORGET to categorize your post at right, multiple categories allowed.
  • If 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.

Images

Explanation

  • The stored images can be viewed in the Media Library. You can also 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.
  • *The Gallery page is comprised of medium sized images floated left.
  • 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.
  • “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 an image, 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.