ISTO Tech Training Manual

Section 1 The BasicsIntroduction to WordPressLogging In

Section 2 Getting StartedThe DashboardThe Administration PanelThe ToolbarScreen OptionsNoticesUsers

Section 3 Posts and PagesOverviewMain List PageEdit Screen Modules

Section 4 Adding and Editing ContentThe Visual EditorThe Text EditorEmbedding MediaWordPress SEOPost LockingCategoriesExcerptsHighlightsPeopleCareers

Section 1: The Basics

Introduction to WordPress

This guide will walk you through the basics of using WordPress to update and monitor your content. What it will not cover is any advanced features or functionalities related to the WordPress platform. WordPress has an outstanding support community where you can find answers to any advanced questions you may have. (https://wordpress.org/support/)

Logging In

The first step is to log in. To access the site’s dashboard, simply add /wp-login.php to the end of your url (http://www.istotech.com/wp-login.php). Navigating to this page will take you to the login screen, unless you are already logged in. Enter your credentials, select ‘Remember Me’ if your computer is secure and only used by you, and then click the Login button.

Login Screen

Once logged in, you will arrive at the Dashboard.

Section 2: Getting Started

The Dashboard

The Dashboard screen gives you a bunch of data and information about the website:

Dashboard Screen

The Dashboard is responsive and works well on almost all device size. You will notice that the menu and icons will move their positions to fit smaller dimensions:

Dashboard Screen - Mobile

The main Dashboard page has a few feature modules displayed: ‘At a Glance’, ‘Activity’, ‘Yoast SEO Posts Overview’, ‘Quick Draft’, ‘Search Statistics’ and ‘WordPress News’.

Dashboard Modules

You may drag-and-drop these modules to your liking or hide them by clicking on ‘Screen Options’ towards the upper right corner and toggling their respective checkboxes. Additional information on the Dashboard widgets can be found here: https://codex.wordpress.org/Dashboard_Screen.

There are two other main sections within WordPress to become familiar with: the Administration Panel and the Toolbar. Let’s take a look.

The Administration Panel

Along the left side of any page within WordPress lies the Administration Panel. This includes a series of links and icons used for navigating to different sections of your website. Hovering over or clicking each of these links will pop open a list of subpages that we will discuss in Section 3.

The options available within the Administration Panel are based on your User Role. If you do not see an option, please contact an Administrator.

Content

Posts – Create, edit and manage blog posts

Media – Manage your media library

Pages – Create, edit and manage static content pages

Comments - Ignore

People – Create, edit and manage people

Careers – Create, edit and manage careers

The Toolbar

The Toolbar gives you a quick-and-easy way to access different sections of WordPress. Note that you can only view the Toolbar if you are logged in to your WordPress site. It will be hidden from everyday users. Once you have logged out and revisited the site, it will not be displayed.

The Toolbar

There is an option to disable the Toolbar when you are logged in. Go to Users > Your Profile and uncheck the box labeled ‘Show Toolbar when viewing site.’

These are the main areas of the Toolbar:

WordPress LogoThis provides a list of quick links to several WordPress sites: Wordpress.org, Documentation, Support Forums and Feedback.

Site NameA hyperlink to take you to the front page of your site or the front page of your dashboard.

View/Edit Post or PageIf you are editing a page or post, these links will show you the page or post on your site. If you are viewing the page or post on the site, this link will take you to the editor.

User SectionThis provides quick links to edit your profile and log out.

Screen Options

As the name implies, Screen Options gives you control over which options appear on your screen. These options will change depending on the screen you are viewing.

Screen Options Button

Whenever this guide or any other online source references a particular section in the WordPress back-end, and you don’t see it anywhere, make sure to check if it’s been enabled in Screen Options.

Screen Options

You may also choose to simplify your administration pages by hiding some of the options per page.

Notices

WordPress will send you notices at different points, primarily if you have updated or edited a section or if something within the administration panel needs special attention. For example, when you publish or update a page or post, you should see a message stating that your post was published.

Admin Notice Example

There are four types, each with their own color: success (green), warning (orange), error (red), and info (blue). Watch out for red and orange notices, as they may need your attention right away.

Users

WordPress makes it simple to manage or add users as well as making updates to your user profile.

All Users

Main Users screen

You can navigate to the Users page from the Administration Panel by hovering/clicking the ‘Users’ link and then clicking the ‘All Users’ link in the submenu. The Main Users page is divided into several columns of data: Username, Name, E-mail, Role, and posts. The Posts column displays the number of posts and provides a link to view all of the posts made by a particular user. At the top of the page, you can filter users by role or change the user role in bulk by checking the users you wish to update, assigning the new role, and clicking the ‘Change’ button.

Add New User

You can navigate to the Add New User page from the Administration Panel by hovering/clicking the ‘Users’ link and then clicking the ‘Add New’ link in the submenu. Here, you are given fields to populate in order to create a new user: E-mail, First Name, Last Name, Website, Password (a password generator has been installed), and Role. One important thing to note is that each user must have a unique email address. Once the fields are populated, click ‘Add New User’. The email specified by this form will be notified that they were added and prompted to update their password.

Your Profile

You can navigate to your profile page from the Administration Panel by hovering/clicking the ‘Users’ link and then clicking the ‘Your Profile’ link in the submenu. You will arrive at the Profile page where you can:

Disable the visual editor when writing Change the admin color scheme Show/hide the Toolbar when viewing the site Edit your first, last, and nick name Select your public display name Update your contact info Generate a new password Log yourself out of all other locations

When you are satisfied with your changes, click ‘Update Profile’.

Section 3: Posts

Overview

Before editing content on your site, it is important to understand the difference between Pages and Posts. These are the two basic concepts of WordPress.

A Post

Posts are typically ‘blog entries’ and exist as a series listed in reverse-chronological order (although the order in which they are displayed on a page may be modified). Any information that will be updated on a somewhat regular basis can benefit from the post functionality. Anything from your typical blog post to news and events, views, etc. applies.Pretty much anything that is not a Page is considered a post.

A Page

A page usually contains static content. An example would be a contact or about us page. Normally the information on these pages does not change, or changes infrequently. A good rule of thumb is to have all ‘Pages’ accessible on any page of your site through a menu.

Now that you have a general understanding of the two, the next step to begin editing content for each is to fully understand the range of options available for both.

Main List Pages

You can navigate to the main list page for ‘Pages’ or ‘Posts’ from the Administration Panel by clicking the ‘Pages’ or ‘Posts’ link.

Main ‘Pages’ Page

Main ‘Posts’ Page

Here you will find a paginated list of all the pages or posts you have created using WordPress. There are several columns available that you can toggle in the Screen Options menu. They offer a little insight about the status of each:

Pages Title, Author, Date Published or Drafted, SEO rank, number of comments, etc.

Posts Title, Author, Tags, Categories, Date Published or Drafted, SEO rank, number of comments, etc.

By default, the table will display 50 pages or 200 posts at a time. Remember this while you are looking for one in particular – you may need to navigate forward to other tabs in order to find it. Using filters to help look may be an easier solution.

Filters

While on the main screen, you will notice there are several filter options available. You can filter by status: Published, Pending, or Draft, arrange by date, and you can use the Search Pages search bar to find what you are looking and you can also filter by category.

Quick Options

Quick Options List

Hovering over any row will reveal a list of links. Edit will take you to the Edit screen, which we will discuss later. Quick Edit will show the Quick Edit options. Trash will send to the Trash. View will take you to the live post on your site.

Quick Edit

Quick Edit Options will allow you to make quite a few adjustments to your page or post, without leaving the page you are on. You can modify the title, slug*, select the parent page, increase/decrease the sort order, change the author, password protect the page, revise the post date, change the status, and for posts you can assign categories and tags.

Quick Edit Panel – Pages

Quick Edit Panel – Posts

Once you have finished making your updates, click update. In order to see certain changes, like sort order, you may need to refresh the page.

*Important: Changing the slug is the equivalent of changing the URL of the page. Make sure you know what you are doing when updating this as it can break links to the page if not done correctly.

Sort Order

The order of subpages (child pages) on the live site, both in the menus and the excerpts, reflects the order of the subpages on the main ‘Pages’ page. Under Quick Edit, you will see an Order field.

Order Field

The smaller the Order number, the closer the page will be to the top.

Edit

There are two ways of reach the Edit screen of the page or post you wish to edit. One is by finding it on the Main List Page and choosing ‘Edit’ below the title – and the other is by navigating to the page on the live site and clicking the ‘Edit Post’ button in the Toolbar.

Edit Screen Modules

The ‘Edit Page’ and ‘Edit Posts’ have the same modules, with a few exceptions:

Both Visual/Text Editor*PublishFeatured Image

Edit Page Page Attributes

Edit Post CategoriesTags

*Note: We will discuss the Visual/Text Editor in the Section 4.

Publish Module

The Publish Module shows where the current post is in the publishing workflow. It provides a nice screenshot of current status and visibility, displays the ‘Published on’ date,

and SEO data, and holds the ‘Move to Trash’ link. You can click Browse next to Revisions for an interactive timeline showing how the post content has evolved. The two major calls-to-action are located within this module as well: Preview Changes and Publish/Update. Here, you can save or push it live, depending on your administrative user role.

Publish Module

Featured Image

In the Featured Image module, select the image you wish to use to represent the content and add visual interest to the page or post. For this particular theme, the Featured Image of a Page will become the background image.

Featured Image Module

Categories Module

In the Categories Module, you can add/remove categories to the current post. You can also view a list of the most used categories as well as add a new category without going to the main ‘Categories’ page.

Tags Module

In the Tags Module, you can assign or un-assign tags to the current post. You can also view a list and choose from the most used tags.

Tags Module

Section 4: Adding and Editing Content

The Visual Editor

WordPress offers a variety of tools to use for editing your content within posts. The beauty of the Visual Editor is that there really is no learning curve – the only skills required are the same used for most word processors like Microsoft Word. As of WordPress version 4.1, you can even spellcheck post titles and paragraphs!

Visual Editor

The icons in the editor should be familiar to anyone who has used a word processor, aside from a few:

Toolbar Toggle - Toggles the second row of tools

Text Type - Assigns custom styles to highlighted text areas

Distraction-free Writing Mode - Hides everything but the editor

Paste As Text - Strips away any hidden formatting from other word processors and allows you to paste text only

Add Media - Embeds images, videos, and files into your content

Keyboard Shortcuts - Displays all keyboard shortcuts

Visual/Text - Switches the editor view between the Visual Editor and the Text Editor*

* It is not recommended to use the Text Editor if you are not experienced with HTML. There are a few one-off instances, which we will discuss in the ‘Pages’ section.

One thing you will notice is that no matter how tall the page is, the editor toolbars will stick to the top.

The Text Editor

For users familiar with HTML tags, this editor can be helpful at times – but for those who are not, using it is not recommended.

Text Editor – HTML Markup

Embedding Media

WordPress makes it very easy to add media into your content with the Visual Editor. There are two quick ways: clicking the Add Media button (also located in the dropdown menu under Insert) or dropping media directly into the editor.

Add Media Button

Before embedding media in the editor, make sure the cursor is pointed in the exact spot you wish to embed before choosing an option.

If you click the Add Media button or chose Add Media from the dropdown, a window pops open displaying a few different sections. Let’s take a look at the Media Menu first. By default, you will have Insert Media selected.

Media Menu

Here you will see a tabbed page, with the labels being Upload Files and Media Library. Upload Files allows you to drag and drop a file from any folder on your computer directly into your content. Pay attention to the maximum upload file size. Media Library shows you all of the files you have already uploaded into your Media Library. You may also drag and drop files into this section as well.

Media Toolbar and Attachment View

Several filters are located above the media grid. You can filter by media type (video, image, audio), by date, or use the search bar and target specific words. Let’s walk through the different types of media now.

Images

After selecting an image in the Media Library, pay attention to the Media Sidebar. The Media Sidebar provides several options for configuring your image before inserting it into your page.

Media Sidebar

Attachment Details: Title, Caption and Alt Text are for SEO value. Creating the proper title will also make it easier to search for this media in the future. Description serves the same purpose, and may help future users to better understand how this image should be used.

Attachment Display Settings: Alignment allows you to adjust how the image should be aligned. Link To allows you to chose if you want the image to link to the Media File (will open in lightbox), attachment page, a custom URL, or none (no link). Size let’s you pick the size of the image you would like to embed. You current template makes it so larger images will not break out of the content, but it’s always better to set the image as small as necessary.

Once you’ve selected your options, press the ‘Insert Into Post’ button to add the image.

Insert Into Page Button

If you’d like to edit some of the options of your image, click on the image in the Visual Editor to show the MCE Toolbar.

MCE Toolbar

The first four icons are alignment options: left, center, right, no alignment. The pencil icon opens up the Image Details window and the X icon removes the image. The Image Details window allows you to edit everything that could have before, prior to inserting the image, and more. The extra options allow you to: add a CSS class to the image, edit the title of the link, and add a CSS class to the link.

Image Details Window

Videos

For this particular theme, we will discuss how to embed YouTube and Vimeo videos into your content. There are several ways of adding a video, but this particular way will ensure that the video stays proportionate in any device size and doesn’t break out of the content area. This walkthrough is only for adding a single video at a time, and not for creating a gallery or custom video player.

Switch to the Text Editor and place the cursor in the spot that you wish to add the video. Open the YouTube/Vimeo page of the video that you wish to embed and copy the embed link. Be sure to chose the ‘iframe’ version of the embed link. Paste the link in Text Editor.

Example of an embedded video tag

In between the quotation marks after the src= attribute, make sure the link ends with ?rel=0. Adding this will remove all related videos from displaying at the end of the video.

Links

In order to add a link in your editor, first highlight the text you want to use for the link and click the ‘Insert/edit link’ icon from the toolbar.

Insert/edit link Screen

The Insert/edit link window allows you to specify the URL of your link. You can also choose whether the link should open up in a new window/tab using the checkbox. As a rule of thumb, any links to an external site should open in a new window/tab. A search bar is also available for browsing the site and linking directly to a page, post, or resource.

WordPress SEO

WordPress SEO (https://wordpress.org/plugins/wordpress-seo/) is a really useful tool for keeping track of the important SEO elements of a web page and making sure that all of the copy for that page works with one another. SEO best practices could easily have its own user guide, so for the sake of simplicity we will only cover the basics. The WordPress SEO section is found on the Edit Page of any ‘Page’ or ‘Post’.

WordPress SEO section

Focused keywords are the main ingredient in making sure the WordPress SEO plugin is checking your page correctly. It bases all of its scoring and ranking on whether or not certain areas match the focused keyword of the page. Each page should have a unique focused keyword, typically matching the Title and URL of the page.

Snippet Preview

The Snippet Preview provides a nice snapshot of how your page will show up whenever it’s found through an online search. The snapshot includes: SEO Title, URL, and Meta Description.

SEO Title

The SEO Title is the title for the page that appears on Google (and other search engines).

URL

The URL is the web address that directs you to this page.

Meta Description

The Meta Description is the sentence that appears under the page title on Google (and other search engines). The important information regarding the page should be arranged towards the beginning of the Meta Description, to ensure visibility.

Post Locking

WordPress has a nice system of locking out posts that another user is currently editing. While on the main page of Posts, if another user has a post open, a message will appear under the post name telling you who is already creating edits. Here, you can chose to ignore the post for now, or takeover the post.

Main ‘Posts’ Page – Post locked

If you select the post that is currently being edited, a message will appear stating that the content is locked. You then have the option to ‘Go back’ to the post list, ‘Preview’ the post with the current edits, or ‘Take over’.

Content locked message

Any user who can publish has the ability to take over another user’s post, so make sure to have a good content workflow laid out for your team. If your post has been taken over by another user, you will receive a message letting you know who has taken over and that your latest changes have been saved as a revision.

Content taken over message

Note: It can take up to 5 minutes for WordPress to recognize that a user is editing content - however, it usually happens much quicker.

Categories

You can navigate to the main ‘Categories’ page from the Administration Panel by hovering/clicking the appropriate Post link and then clicking the Categories link in the submenu.

Main ‘Categories’ Page

The main Categories page allows you to add and manage your categories. Adding a new category is as simple as completing the Add New Category form and clicking the ‘Add New Category’ button. The form contains a Parent dropdown, which allows you to create a category hierarchy.

By default, the categories table will display 20 categories at a time. Just like with posts, you can filter results by search and hover over a category row for a set of Quick Options. ‘Edit’

takes you to the main Edit Category screen, ‘Quick Edit’ lets you revise the name and slug without leaving the page, ‘Delete’ removes the category, and ‘View’ shows the category archive page on the live site.

Quick Options - Categories

Quick Edit Options - Categories

The Edit Category page allows you to: update the category name and slug, assign a parent category, add/edit the category description, and even adjust the SEO elements of the categories archive page.

Excerpts

Most of the main parent pages of the live site have a series of excerpts displayed underneath the introductory paragraph. If you go to edit the main page, you will notice there is no option to adjust the content for each of these.

Excerpt Example

This was done intentionally to ensure that the excerpt area would update dynamically based on the page/subpage hierarchy. To edit this information, navigate to the page that this excerpt is pointing to. In the above example, the Biomaterial excerpt it located on the Science page because Biomaterial is a subpage of Science. The Biomaterial page is where you would make edits.

On the appropriate Edit Page screen sits the Excerpt section, located under the main Visual Content Editor. There are several fields to populate in order to create this section: Excerpt Image, Excerpt Title, Excerpt Subhead, Excerpt Paragraph, Excerpt Button Text and Excerpt Button Link. Hopefully, these fields are pretty straightforward. The editor works the exact same way as the main editor.

Highlights

Most pages of the site have a Highlight section towards the bottom.

Example of page Highlight

The background and text colors are different from the main copy to stand out from the rest of the content.

Highlight Box Section

On the appropriate Edit Page screen sits the Highlight Box section, located under the main Visual Content Editor. There are several fields to populate in order to create this section: Highlight Image, Highlight Title, Highlight Paragraph, Highlight Button Text and Highlight Button Link. Again, hopefully these fields are straightforward. All styling (orange font, center-aligned text, button colors, etc.) have already been made through the CMS.

People

Updating the people on the page is done using the same process as updating a page or post with a few minor differences. You can navigate to the main list page for ‘People’ from the Administration Panel by clicking the ‘People’ link.

There are two main areas to keep in mind when adding a person to the website:

First, make sure to add them to the ‘Leaders’ category so they show up on the Leaders page or your site.

Second, make sure to add the profile picture in the ‘Featured Image’ module. This is the image that will appear on the list of Leaders as well as the individual person’s main page.

You will use the same Visual/Text Editor you used to update posts for the person’s description.

Careers

Updating the careers on the ‘Careers’ page is done using the same process as updating a page or post with a few minor differences. You can navigate to the main list page for ‘Careers’ from the Administration Panel by clicking the ‘Careers’ link.

Simply add a Title and enter the content and click Publish. Each published job posting will be displayed at the bottom of the ‘Careers’ page. Whenever a career is no longer available,

simply set that position to ‘Draft’ in Quick Options. This way, you can set it back to publish should the position ever reopen.