Knowledge Base

WordPress Basics

• Adding / Editing Pages and Posts

  1. Navigate to Pages or Posts

     Click Pages or Posts from the dashboard sidebar OR

     Go to http://[yoursite.com]/wp-admin/edit.php?post_type=page

     or http://[yoursite.com]/wp-admin/edit.php?post_type=post

  2. Pasting in Text (the right way)

     The best way to add text without bringing over formatting that will wreak havoc on your pages is to paste using the “paste as text” button. This will strip out extra formatting that can cause layout or style issues.

     

     *Note that you’ll then need to add links and text styles back in after pasting.  Make sure you’re back on the “Visual” tab to add these elements back in.

     

• Adding Images to Pages or Posts

  1. Find the Add Media button and click

     

  2. Select the Image to add

     Note that you can choose:

     • Title (optional)
     • Caption (optional)
     • Alignment (Left, Center, Right, None (no text wrap)
     • Outgoing Link (most of the time should be set to None – often defaults to largest version of the image which is mostly unnecessary but harmless)
     • Size (Many of the images on your site will be auto sized.  If you are inserting an image into a post content area, you should select the size.  For reference, most full width screens are between 900-1600px wide.  Thumbnails are generally about 150x150px wide.

     You can either select Images from your Library or Upload new images using the UPLOAD FILES tab above

     

• Setting a Featured Image

  1. Often we use the native WordPress Featured Image functionality to set an image for your pages or other post types.  If there is no particular custom image field, this will be the default protocol.

  2. Navigate to your page or post and see the “Set Featured Image” link in the sidebar

  3. Select your image and press “Set as Featured Image”

     Choose from uploaded images

     or Upload new images

• Adding / Editing Gallery Photos

  We often use Advanced Custom Fields Gallery field for sliders and photo galleries.

  1. Add Images

     To add images, navigate to your page and look for the “Slider or Gallery” Section. Press the blue “Add to gallery” button.

     Select multiple images and press “Add to Gallery”

     **No need to choose the image size, it will be auto sized for you!

      

     

  2. Drag and Drop to order your gallery

     You can change the order of your gallery by dragging/dropping the thumbnails once you’ve added images.  You can also click the X to remove images.  Just make sure to Update your page after these edits.

     

• What size images do I need for my site?

  In General

  Images should be minified and compressed to the smallest size possible, however we take care of a lot of that for you with automatic resizing when you upload to WordPress.  Images should always be AT LEAST as wide as the minimum width for whichever size is being used (most often we will note this in the backend of your site, but when in doubt, 1600px wide is usually a good place to start.)  See some common image sizes below.

  *Note: most images from a smartphone or point and shoot camera are plenty large, even for a hero image!

  File Types

  File types affect image sizes which in turn affect performance.  Here’s a guide to choosing what file type to use:

  • photos should mostly be JPGs
    (PNG works but will usually be a bigger file and is best used ONLY if you need a transparent background)
  • images with a transparent background should be PNG
    (often this includes your logo, but SVG is preferred
  • icons, logos or anything that will need to be crystal clear should ideally be SVG
    (SVGs are web vector files and are scalable)
  • documents, manuals, anything with lots of text should be PDF
  • we don’t support (and you can’t actually upload) the following file types to WordPress: TIFF and GIF

  WordPress Resizing – like magic!

  WordPress automatically creates multiple sizes of the same image when it is added to the media library. That means you do *NOT* need to deliver all sizes for each image, as long as it is large enough for the largest size used. WordPress will create all sizes that are SMALLER than the uploaded image.
  For example: If you upload a 2400px wide image it would create: (note, these specifics are set within our custom templates)

  • a ~1600px wide image (hero) – this often also replaces the “original” image since it is the largest size needed.  (size may vary depending on design)
  • a ~1280px wide image (large – width may vary depending on design)
  • a ~600 px wide image (medium – width may vary depending on design)
  • a thumbnail

  If you upload a 700px wide image it would create:

  • [no large or hero created, as image is smaller than these minimum widths]
  • a 700px wide image (the original)
  • a ~600px wide image (medium)
  • a thumbnail

  Typical Image Sizes

  Hero image (Full width of screen)

  Images that bleed to the edge of the screen like large banners at the top of a page. Cropping of the height is automatic so the closer you match the aspect ratio in the designs, the less of the image that will be cropped.

  

  • Min width:1600px
  • Max width: doesn’t matter, as long as the image is under 2KB.  Smartphone images are plenty large, and usually still under 2KB.  Photos from an SLR might need to be reduced.  If batch editing, a width of 2000px is usually a safe bet.
  • Ideal proportions: 1600px x (whatever height maintains proportion) – ie 4/3 ratio would be 1600x1200px

  Large Images (often full width of the content area)

  Large images that often fill the area they are constrained to.  These may be very similar in sizing to your “hero” images.  Again, height and cropping typically is done automatically so the more closely you match the design proportions, the less of the image that will be cropped.

  • Min width: 900px
    **It’s totally fine for large images to be a bit bigger – they will be resized on upload.
  • Ideal proportions: (anything wider than the Max width) x (whatever height maintains proportion)

  Medium (images that are 1/3 or 2/3 width of the screen – perhaps in a 2 or 3 column grid)

  Again, height and cropping typically is done automatically so the more closely you match the designs, the less of the image that will be cropped.  Medium images can vary in sizing depending on your site needs.  Sizing will be set during development to most closely match your designs.  Multiple custom image sizes may also be set if necessary.

  

  • width: varies, from ~450px – 900px
  • Ideal proportions: (anything wider than the Max width) x (whatever height maintains proportion)

  Thumbnail (smaller, auto generated versions for grid of items or list of blog posts)

  Thumbnails usually do not need to be created by the user, as they will be auto-generated from the larger image sizes. They may or may not even be used on the site.  Typically thumbnails are 150×150 or 300×300 squares and represent a teaser for a blog.

  
  —

• Editing Menus

  1. the Basics

     • From your dashboard, click on “Appearance” and then on “Menus” to get to the menu editing area
       
     • Select the menu you’d like to edit from the dropdown of menus

  2. Creating a Custom Link in Your Menu

     • Look for “Custom Links on the left hand side of the menu page
     • Enter the link URL, as well as the title (link text) for the link (e.g. mangrove-web.com and “Mangrove Web”).
     • Click “Add to Menu.”
     • Drag and drop menu items to reorder them.
     • Click the blue “Save Menu” button to publish your menu changes to your live site.