WordPress Basics

  • Adding / Editing Pages and Posts

    1. Navigate to Pages or Posts

      Screen Shot 2016-04-30 at 2.22.10 PMClick 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.

      Screen Shot 2016-03-30 at 12.31.18 PM (1)

      *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.

      Screen Shot 2016-04-30 at 2.12.22 PM-1

  • 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. Screen Shot 2016-03-30 at 12.56.33 PMNavigate 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

      TScreen Shot 2016-03-30 at 6.29.27 PMo 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.

      Screen Shot 2016-04-30 at 2.17.18 PM

  • 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
        Screen Shot 2016-07-22 at 12.33.14 PM
      • Select the menu you’d like to edit from the dropdown of menusScreen Shot 2016-07-25 at 11.10.07 AM

    2. Creating a Custom Link in Your Menu

      • Screen Shot 2016-07-25 at 11.21.28 AMLook 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.
        Screen Shot 2016-07-25 at 11.20.15 AM