Degnon Associates

WordPress plugins should not be downloaded to your client's wordpress site. If you are interested in a certain functionality, please create an IT job and state your goal and the plugin of interest.

WordPress is a website content management system that is designed from the ground up to be easy enough for users with limited technical background to maintain and update their website and extensible enough for seasoned developers to integrate custom functionality and web application integration.

The concept of content management is to provide multiple users a simple workspace to keep a website’s content updated and fresh while also providing a way to review and revise content updates before pushing them out for the public to view. Content management systems also keep a backup of content updates so previous content revisions can easily be restored.

Most content updates can be made by typing in a text editor similar to word processing software. More complex updates can be simplified by using tools like shortcodes instead of having to write custom HTML.

Some key points to consider when working in WordPress are:

  • There is not a single ‘right’ way to modify content. WordPress is known for its huge community, so there are often several plugins that do the same task, each with its own syntax. As long as the content can be edited consistently (using the same method to edit content throughout the website) and your team is comfortable using that method, then that method will work. There are some basic editing methods that should be used, which will be covered in detail.
  • Pay attention to which editing mode you are in when working with content. By default, the WordPress text editor has two modes: Visual and Text, which are selectable by clicking tabs on the top right of the editor box. You will almost always be editing a page in Visual mode. Switching editor modes and then saving content will usually alter the page content and break formatting.
  • Always preview changes before saving content updates. Previewing allows you to fine-tune content before changes are applied to the website. Content editing is never exact. Mistakes happen often, so it is best to utilize the change preview rather than scrambling to recover a broken web page.
  • Be sure to click the Update button when all changes have been made and previewed. Failing to click the Update button will not save the edits and your work will be lost.


WordPress Terms

There are a few terms all WordPress users should be familiar with in order to navigate the system. These terms will be used throughout the reference guide.

Dashboard – Also called the Admin Area. This section of the website contains all functionality required for administering the website. Our client websites will only have this section accessible by admin (staff and approved member) users.

Media – Anything posted on a website that is non-textual can be thought of as media. This includes images, video, and documents.

Menu – A hierarchal listing of content. For example, a website has a main navigation menu that lists all important pages contained within the site.

Page – A content-oriented, static piece of content. Pages are where most website content will be housed. They are timeless entities and are updated perpetually, where posts are meant to be a series of content entities.

Post – A timeline and discussion-oriented piece of content. Posts are similar to pages, but are designed to be used in a more traditional “blog” setting.

Template – A boilerplate layout for a webpage. Templates are a part of a website’s theme and simplify page editing by displaying everything that isn’t page-specific content.

Theme – A collection of files that provide the design and layout of a WordPress website. Themes are designed to be interchangeable so that little content editing is required when changing a website design.

Parent page – Logically sets the website hierarchy. If a website has a “colors” menu item, the “green” page would have “colors” selected as its parent.

Plugin – A piece of software code that extends the functionality of WordPress to perform or simplify a specific task. Users often interact with plugins through use of shortcodes.

Shortcode – A word or phrase surrounded by brackets “[  ]” that triggers WordPress to add content or perform a task. Used extensively in the text editor to insert custom HTML formatting without needing to manually type code.

Widget – A customizable section of a webpage sidebar, the narrow column usually to the right or left of the page’s main content.

Logging In

The first step to making changes on a WordPress website is to 1) Be logged in with your user account and 2) Have authorization as an admin user on the website. If both of these criteria are satisfied, the WordPress admin bar will be displayed at the top of every website page.

The links that will most often be used are Edit Page to open the page editor window, New to create a new page, and Dashboard (website name) to open the Admin Area window.

Editing Pages

Click the Edit Page link on the WordPress admin bar to open the page editor window. Text updates can be made by simply typing in the text editor. Media (images, documents) can be uploaded and inserted by clicking the Add Media button. Shortcodes for more complex items can be inserted by clicking the Insert shortcode button and following the dialogue instructions.

Note the shortcode in the example image. A single piece of text informs WordPress to display a large amount of content.

Don’t forget to preview any content edits before clicking the update button.

Adding/Uploading Media

Ideally the file name should use lower case letters and numbers but avoid spaces (or unusual characters) where possible.

When your document is prepared and ready to be added to your website, follow the steps below:

  1. Go to the page or post where the link to your file/document will be added
    (create a new page or post if necessary).
  2. Locate your cursor precisely where the text link will be placed (but don’t type any text).
  3. Click the Add Media button (above the editing toolbar buttons).
  4. Click Select Filesor drag your media file into the dotted box. Your file will be imported into the WordPress Media library.
  5. Wait for the uploading/crunching process to complete.
  6. click the Insert into Page/Post button
  7. Don’t forget to press the Update or Publish button to finish.

Adding/Uploading PDFs

Ensure that you have prepared your PDF document carefully in advance. PDF documents can be created using many different software packages.

Your PDF document should ideally be optimised for web use (as opposed to print) in most scenarios. This will provide quicker loading for your users. There are plenty of free websites which offer compression services such as:

The process is the same as linking media files with a couple of extra steps before clicking Insert into Page/Post button:

  1. Once the uploading/crunching process has completed, enter the text you require (for the link on the page) in the Title
  2. Under ATTACHMENT DISPLAY SETTINGS choose Link To Media File. This ensures that text added to your post will link to the file you have just uploaded.

 

Linking images to PDFs

Images can also link to PDF documents and can create a more visible link than text.

  1. If you haven’t already imported your PDF document, use Media > Add New in WordPress (from the dashboard) to import your document to the Media Library first.
  2. Click on the PDF in the Media Library.
  3. Copy the full URL (address) for the PDF to the clipboard.
  4. Close the image and edit the page or post where your link will appear.
  5. Insert the image (if not already added).
  6. Select the image and press the Edit button (pencil icon)
  7. Under DISPLAY SETTINGS, set ‘Link To’ to Custom URL.

Paste the URL of your PDF into the box underneath (copied in step 3).

If you would like the PDF opened in a new tab, tick the appropriate box under ADVANCED OPTIONS (further below).

  1. To finish, click Update.
    Lastly, update the page or post.

Setting the PDF to open in a new browser tab

It’s often preferred that the PDF loads up in a new browser tab, so the user can easily return to your web page afterwards. To set this:

  1. Click anywhere within your linked text.
  1. Click the Edit button (pencil icon).
  2. Click the Link options button (cog icon).
  3. Tick ‘Open link in a new tab’ and click Update.
  4. Update the page or post to finish.

Adding Pages

If the new page needs to be listed in a menu, you may do the below process first and then edit the menu or edit the menu first (below) and add the page through the menu editor.

Either hover over the New menu on the WordPress admin bar and click the Page link or click Pages > Add New in the Admin Area to open the Add New Page window.

Add a title for the new page. This is what will be displayed as the page header.

If the new page is to be listed in a submenu for another page, select that page as the new page’s parent.

Update the page template, if necessary.

After this point, the process is the same as editing a page. Be sure to preview changes before saving and then click the Publish button once finished.

Editing Menus

From the Admin Area, click Appearance > Menus. Menus can also be edited by clicking the Customize link on the WordPress Admin bar and navigating to the menu. Click the Add Items button and select Pages. You can add an existing page by typing the first few characters of the page name and selecting the page, or by creating a new page.

Menu content can be rearranged by clicking and dragging. Be sure to save/publish your changes.

Inserting Hyperlinks

Links are added through the text editor by clicking the Insert/edit link. If you are linking internally to a page on the same website, you can type the first few characters of the page name and select the page. An external webpage can be linked by pasting URL into the text box. Clicking the settings icon will open a dialogue with more options like link text and if the link should be opened in a new window.

Adding/Editing Widgets

Sidebar widget settings and content are accessed in the Admin Area by clicking Appearance > Widgets. Widgets can be added, removed, and ordered by clicking and dragging. If available, widget content can be updated by expanding the header (down arrow icon).

Adding thumbnail links from PDF files uploaded to AWS

  • Navigate to the page needing updates, click “Edit with WPBakery Page Builder” link on the WordPress admin bar.
  • In a separate browser tab, navigate to the WordPress Media Library
  • Upload the PDF document to the WordPress Media Library. Once finished, click the file thumbnail to open the Attachment Details
  • In the WPBakery Page Builder tab, add a new Single Image Element
  • Make the following changes in the Single Image Settings
    • Image Source: External link
    • External Link: Copy and paste the thumbnail URL from the Attachment Details opened in the WordPress Media Library tab.
      • Right click the thumbnail image
      • Click the menu option to inspect (Chrome: Inspect / Firefox, Edge: Inspect Element)
      • Double click and copy the highlighted image URL inside the quotation marks after the text “src=” (Fig. A).
    • Caption: Caption text for the thumbnail (usually displayed below image)
    • On click action: Open custom link
    • Image link: Copy and paste the Copy Link text from the Attachment Details opened in the WordPress Media Library tab (Fig. B)
    • Link Target: New window
  • Click the Save changes button and continue with additional updates.

 


(Fig. A) Thumbnail image URL location after clicking to inspect.

 


(Fig. B) Copy Link text field in Attachment Details

 

Want to know how Degnon Associates can serve your organization?