CCJ WordPress Guide

CCJ WordPress Guide

Copyright © 2021, Abell Smith Design  •  (253) 250-3628  •  abell@abellsmith.com  •  abellsmith.com
(If you’re printing this guide, make sure to scroll all the way to the bottom first to load all the images!)

YOUR CUSTOM VIDEO USER GUIDES:

See below for an in-depth video on creating new trip pages. Skip to the following time points for important parts of the video:
  • [0:00] – General information about your website and possible future CCJ projects.
  • [4:19] – Step 1: clone an existing page with similar content, change title.
  • [7:30] – Step 2: update header image.
  • [12:10] – Step 3: update headers, dates/costs, Book Now buttons.
  • [20:50] – Step 4: update body text content.
  • [25:10] – Step 5: add photos to body content.
See below for a custom video showing you how to add your new trip page to the main navigation menu, and make changes to the callouts section of your Home page (which gives a short synopsis of upcoming trips and a link to the full trip page):

See below in this WordPress Guide for more videos on other aspects of your website that may not have been covered in your custom videos.

SELECTED FEATURES

A few of the special tools and features that have been included with your website
  • ABELL SMITH DESIGN THEME – Your website uses the standard Abell Smith Design theme, which has been customized to give it an even more unique and personalized look
  • WORDPRESS 5.7.2 – Your new site has the latest version of WordPress installed as your website’s Content Management System (CMS).
  • CMS IMPROVEMENTS – Implemented extensive improvements and customizations to the default WordPress interface, to maximize the usability of the CMS.
  • FUNCTIONS & FEATURES – Installed a number of essential plugins and widgets to enhance site functioning and performance, including:
    • Contact form
    • Events Calendar (potential activation)
    • Testimonials
    • Images enhancements – gallery display, Lightbox popup effects, Metaslider slideshows, new Smart Slider (for Home videos), image “smushing” and auto-resizing (keeps image sizes down to improve site speed), easy image replacing in media library
  • RESPONSIVE DESIGN – By design, your website is completely responsive for viewing on devices of all sizes.
  • GOOGLE ANALYTICS – Installed Google Analytics, for measuring traffic on your website.
  • SECURITY – Implemented a number of security enhancements to guard against various attacks (e.g. brute force attacks).
  • AUTOMATIC DATABASE BACKUPS – Activated automatic backups of full website and the MySQL database at regular intervals, in case of server/site crash.

  1. LOGGING IN TO WORDPRESS

    Here’s where you go to log into the WordPress CMS:

    WordPress Dashboard

    Your usernames and passwords for your two WordPress user roles (Admin and Editor) have been sent in a separate email.

    1. USER ROLES – The “Editor” user role minimizes the amount of stuff you need to deal with in the WordPress Dashboard (as opposed to “Administrator,” which has access to most site functions). Most of this guide is written for a user logged in as an Editor.
    2. LOGIN LIMITS – For security, login attempts have been limited to 10 retries, after which the IP is locked out for 20 minutes (4 lockouts increase the time to 24 hours). Go to Settings > Limit Login Attempts to change these settings (logged in as Admin).

      Note: sometimes WordPress might require a couple of attempts to log in successfully, if previous credentials are stored in your browser’s cache. Let Abell know if you ever find yourself locked out completely!

  2. GETTING FAMILIAR WITH WORDPRESS

    You will see a few items in the menu to the left:
    1. Posts – are one of the two main types of content within a WordPress site (the other is Pages). Posts, better known as blog posts or news posts, are typically organized chronologically.

      Learn much more about the difference between posts and pages here:
      What is the Difference Between Posts vs. Pages in WordPress
      (https://www.wpbeginner.com/beginners-guide/what-is-the-difference-between-posts-vs-pages-in-wordpress/)
    2. Events – where you go to add or edit events in your Events Calendar.
    3. Media – is the library of images, PDF’s, and other media files that have been uploaded to WordPress. Note: a special plugin has been added to organize your media library into folders… see below video for more info on that.
    4. Pages – are the webpages that you see in the main navigation sections of the site, such as “About” and “Contact Us.” They are organized hierarchically in a tree structure.
    5. Testimonials – where you go to add or edit your customers’ testimonials on your Testimonials page.
    6. CPTs – a “custom post type” menu item for managing these on your website.
      NOTE for CCJ: The Custom Post Type tutorials and information will not apply to your website at the time of the basic redesign going live on SiteGround. However, this info has been left in case we utilize this functionality in the future. Abell will discuss this with you further.
    7. Gallery – where you go to add or edit image galleries.
    8. Appearance – where you go to access the navigation menus on your WordPress website.
    9. Profile – where you access your user profile in the WordPress Dashboard.
    10. SEO – where you go to access your SEO tools using the Yoast SEO Plugin. This also may appear as an icon in the header bar in the WordPress admin area.
    11. Insights – where you go to access an overview of your Google Analytics statistics, to view your website’s traffic.
    12. Smart Slider – where you go to make changes or additions to your Home page slideshow.
    13. MetaSlider – where you go to add or edit general image slideshows (other than the Home page slider).
    14. [Collapse menu] – will give you a smaller menu to deal with, using only icons.

      *NOTE: your version of the WordPress CMS is completely responsive, so you can access any of the above functions in any browser on any size device!

    The above items should be available by themselves if you’re logged in as an Editor, to minimize the amount of stuff you have to deal with. If you’re logged in as an Administrator, you will have access to everything, including the following items (if they are installed):

    • WooCommerce – where you go to access your WooCommerce store, including a list of your Orders, creating Reports for your orders, and Settings for your store.
    • Products – where you go to access the Products in your WooCommerce store, and adjust settings such as categories and tags.

    NOTE for CCJ: The WooCommerce tutorials and information will not apply to your website at the time of the basic redesign going live on SiteGround. However, this info has been left in case our future Travel Plugin projects utilize WooCommerce.

    Other Instructions:

    • QR Codes – as requested, included are instructions for how to create a QR Code online.
  3. HOW TO ADD/EDIT CONTENT IN PAGES AND POSTS WORDPRESS

    You have three choices for adding or editing content in WordPress: the Beaver Builder plugin, the Classic Editor, or the built-in Gutenberg editor. Each is a reasonably user-friendly option, but is also slightly different from the others. At this time, my suggestion is to use Beaver Builder, but you may want to try them all and see for yourself! The three options are explaned below:
  4. *NOTE: Whenever making changes to page or post content, you’ll want to go slow and take care to check your progress on the front end after each change, so you can retrace your steps if you make a mistake. Let Abell know if something gets broken and you need help!

    1. Beaver Builder – Your website has a 3rd-party, drag-and-drop editor plugin installed called Beaver Builder. My clients have usually found this to be the easiest way to add and edit content, and a number of enhancements have been made to the Beaver Builder functioning on your site. To use Beaver Builder, go to Pages > All Pages, and hover over the page you want to edit. Select “Beaver Builder.”

      Check out the following video showing how to edit content using Beaver Builder. The video plays here between 2:24 and 6:00… my own video is in the works, but this one will do for now:
    2. Classic Editor – Many WordPress users prefer to stay with the Classic Editor. To use the Classic Editor, go to Pages > All Pages, and hover over the page you want to edit. Select “Edit (Classic Editor).”

      To see my guide on Adding/Editing Page and Post content using the Classic Editor, visit:
      WordPress Classic Editor Guide
      (https://growyourworldweb.com/wp-content/uploads/2019/04/Wordpress-Classic-Guide.pdf)
    3. Gutenberg – As of WordPress version 5.0, the CMS has incorporated its own native, drag-and-drop block editor. To use Gutenberg, go to Pages > All Pages, and hover over the page you want to edit. Select “Edit (Block Editor).” In my clients’ experience, the Gutenberg editor is promising, but it is “not quite there yet” in terms of ease-of-use.

      For more information on using Gutenberg, visit:
      How to Use the New WordPress Block Editor (Gutenberg Tutorial)
      (https://www.wpbeginner.com/beginners-guide/how-to-use-the-new-wordpress-block-editor/)
  5. HOW TO MANAGE IMAGES ON YOUR WEBSITE

    The images and graphics (as well as PDFs and other files) live in the Media Library of WordPress. See below for some important tips and tutorials:
    1. Making changes to the Home page slideshow – See below for my video on using MetaSlider, and how to make changes to the Home slideshow on your website:

      NOTE for CCJ: A separate slideshow plugin called Smart Slider has been added to give the background video effect on the Home page of your website. There is a general information video on the back end of WordPress if you go to Smart Slider > Dashboard, but I have created a custom video for you below showing how to change the video:

      Custom video coming soon!
    2. Managing images – Check out my video tutorial on managing images in the Media Library, organizing them into folders, and easily replacing images:
    3. Using the image editor – While it is recommended that you use Photoshop or similar software to do advanced image editing, WordPress has a basic built-in image editor that can perform a number of the tasks you might need to accomplish. When you’re viewing an image in the media window, click “Edit Image.” A new page will appear with a row of buttons at the top that will give you several options, with pop-up tool tips when you hover over them. You can change the size of an image by going to “Scale Image” and specifying the dimensions. Basic images within pages can be many different sizes, but should be limited to about 2400px wide for most website designs. It’s recommended that you not increase the size of lo-res images, as this will cause them to appear “fuzzy.” To crop an image, click and drag a little on the image to get a crop-box started, and then in the two “Selection” parameter windows to the right, enter your desired dimensions (e.g. 300 x 300)… this will make the crop-box the desired size. Hover over your box until you get a cursor with four arrows, drag the box to where you want it positioned, and click the Crop button in the top row of buttons (on the far left).

      RESTORING ORIGINAL IMAGE – It is always recommended that you save an original version of the photo you are altering to your desktop before you save your changes in the WordPress image editor. However, if after saving your edited image you need to revert back to the original version, click Edit Image, and Restore Original Image.

      NOTE: Images that are not optimized and/or are high resolution (300 dpi or more) may take a long time to upload (for example, images that have just been uploaded from your digital camera), and will probably not display as quickly as images that are optimized for the web. Hi-res images can also take up a ton of space on the server! It’s typically best to optimize these images for the web in Photoshop or other software.
    4. Galleries – Check out my video tutorial on managing your photo galleries below:
    5. Controlling images – There are a number of ways to better control and customize display of your images in posts and pages, such as by “floating” images within a page, adding borders, and opening them using the “lightbox” effect.

      See below for my video showing more about these options:
    6. Managing file sizes in Media Library – If you ever find yourself running out of disc space with your host, the culprit may be too many large images.

      See below for my video showing more about managing this:
  6. HOW TO MAKE CHANGES TO SPECIFIC PAGES

    Certain pages on your website may require specific tutorials to show you how to make changes. See below for some of those:
    1. Home Page – Check out my video tutorial on making changes to the “callouts” section of the Home page, the promotional boxes that lead the user to important inner pages of the website:

      NOTE for CCJ: Your Home page callouts use image thumbnails instead of icons (as in the video), but the rest of the instructions are the same. See the custom video above showing how to change the image thumbnails.

  7. ADDITIONAL FEATURES AND FUNCTIONS

    1. Menus – For more on managing your navigation menu(s), first you’ll need to go to Appearance > Menus. Then check out the following video for more info on menus (plays here between 1:16 and 4:56):
    2. Footer Widgets – You have several widgets in a custom-built footer area of your website, with features such as contact information, upcoming events, social media links, and perhaps options such as an eNewsletter signup form or a small photo gallery.

      Check out my video here to learn how to control these widgets, and I also show first-hand what to do if you hit a technical snag while working with WordPress (the answer is don’t panic!):
    3. Events – Check out the following video showing how to add and edit events in your Events Calendar. The video plays here between :36 and 3:20… my own video is in the works, but this one will do for now:

      NOTE for CCJ: The Events function will not be active at the time of the website redesign going live. However, this info has been left in case we utilize this functionality in the future. Abell will discuss this with you further.

    4. Testimonials – Check out my video tutorial on managing your testimonials page below:
    5. CPTs – In addition to Posts and Pages (described above), your website has been equipped with a “custom post type” for CPTs. Check out my video here to learn more about custom post types, as well as more on the difference between posts and pages:
      NOTE for CCJ: The Custom Post Type tutorials and information will not apply to your website at the time of the basic redesign going live on SiteGround. However, this info has been left in case we utilize this functionality in the future. Abell will discuss this with you further.

    6. Using your WooCommerce StoreHere’s how you manage your website’s store, if you have one:

      Your store was built using WooCommerce, a flexible, open-source eCommerce solution built on WordPress. There are a ton of WooCommerce tutorial videos out there to help you get familiar with the platform, but the below is one of the most complete and succinct. It’s recommended when you watch the video that you have your WordPress Dashboard open in separate browser tab, so you can pause the video often to try out the instructions. My own video is in the works, but this one is a good place to start… see the following time points in the video for aspects important to your website:

      NOTE for CCJ: The WooCommerce tutorials and information will not apply to your website at the time of the basic redesign going live on SiteGround. However, this info has been left in case our future Travel Plugin projects utilize WooCommerce.

      • The video starts below after 7:12, as setup will have already been taken care of.
      • Settings [7:12 – 30:15] – Including tax settings, general shipping options, managing reviews, inventory settings, payment options, email notifications, and more.
      • Products [30:15 – 56:00] – Everything you need to know about creating and editing products in your store, including:
        • Creating a Simple Product [30:15] – Including setting product descriptions, price, product tax, managing inventory, product shipping, product images, categories and tags.
        • Creating a Variable Product [36:15] – For products with variations, such as size and color.
        • Creating a Complex Product [40:40] – For products with multiple variations.
      • Parts of the video between 46:05 and 56:00 may not be needed for your website.
      • Orders [56:00 – 58:00] – Everything you need to know about managing orders in your store, including:
        • Viewing orders [56:00]
        • Creating coupons [56:43]
        • Order reports [57:24]
    7. SEO – You have a strong, free search engine optimization (SEO) plugin installed on your website called Yoast. Check out the video below for more on getting the most out of Yoast and how to make efforts to improve your search engine ranking (the video plays here after 8:41, as setup has already been taken care of):
    8. AnalyticsI have created a Google Analytics account for you, and installed a free plugin that gives an overview of your statistics in WordPress. To view this, just go to Insights in the side menu.

      This lite plugin gives a very limited snapshot, so to dive deeper into your traffic stats you should log directly into Analytics. A link and your login credentials will be sent to you after your website goes live. Check out the following comprehensive video to learn how to get the most out of Google Analytics:
    9. Miscellaneous tips
      • Viewing submissions to your contact formWhen logged into WordPress as an admin: go to Ninja Forms > Submissions. This will show you a list of messages sent by users using your contact forms, in case you miss or delete an email received.
      • Embedding YouTube videos in a post or pageIn YouTube: Navigate to the YouTube page for your selected video, and right below the video, click the “Share” tab. Select “Embed”, and you’ll get a window with the embed code. Copy this code.

        In WordPress: To add a video into a post, choose Posts > Add New Post in the Classic Editor. Simply paste the embed code into the content of the new post in your WordPress Text Editor. Click “Publish.”

  8. OTHER

    1. How to Create a QR Code – There are a number of free web pages on the internet for creating a free QR Code, but this one looks to be one of the most powerful and user-friendly:
      qr-code-generator.com

      A new free account has been created for you already on this site using the Gmail account that was created for you during website construction. The credentials for this will be given during the “handing of the keys” to you for your new site.

      All you have to do is log into the website using your credentials, then copy the URL of whatever website you want to turn into a QR Code and drop it into the field that says “Enter your website here.” The Code Generator will then give you a number of options to choose from, such as color, frame choices, and even adding a logo to the image. Then click the button for whichever file type you’d like to download… JPG or PNG are recommended for the web, SVG for print. Below is a QR Code that was generated for the Cross Cultural Journeys website:

  9. WORDPRESS MAINTENANCE

    1. From time to time, widgets, plugins and WordPress itself will require updating. Updates typically happen when developers release security patches or add extra functionality. It’s an essential practice to keep your plugins and WordPress version updated to the latest versions. The top two reasons for sites being hacked are insecure passwords and outdated (vulnerable) software. WordPress has introduced automatic background updates in an effort to promote better security and to streamline the update experience, but by default, only minor WordPress releases are enabled (e.g. v5.1.1, v5.1.2). These minor releases are usually for maintenance and security purposes or translation file updates. Only core WordPress files will be auto-updated; your theme and plugins won’t be automatically updated. When your site is auto-updated, your site administrator will be notified by email. If your WordPress installation can’t update itself automatically for one reason or another, your site administrator will be notified of this as well.

      For more information about assistance with ongoing WordPress maintenance, ask me about the Abell Smith Design WordPress Care Plans!
Scroll to Top