wordpress training manual - keller associates...wordpress training manual 7 editing page content...

WORDPRESS TRAINING MANUALLAST UPDATED ON JANUARY 3, 2018

WORDPRESS TRAINING MANUAL

2

TABLE OF CONTENTS

Logging Into Wordpress .................................................................................................... 3

Wordpress Dashboard........................................................................................................ 4

Administrative Task Bar ..................................................................................................... 5

Editing Page Content ...................................................................................................6 & 7

Creating a New Page .......................................................................................................... 8

Formatting Text ................................................................................................................... 9

Media Library ......................................................................................................................10

Creating a Link .....................................................................................................................11

Inserting Photos ................................................................................................................. 12

Editing the Homepage ...................................................................................................... 13

Our Projects ........................................................................................................................ 14

Opportunities ..................................................................................................................... 15

Our Expertise ...................................................................................................................... 16

Locations & Contacts ......................................................................................................... 17

Photo Sizes..........................................................................................................................18

Embedding Videos ............................................................................................................ 19

Theme Options ..................................................................................................................20

Questions? .......................................................................................................................... 21


3

LOG INTO WORDPRESS

Visit the Login page

https://kellerassociates.com/wp-admin

Enter your Username and Password

NOTE: Additional usernames can be set up through WordPress and specific roles can be assigned. It is a good practice to set up new User accounts for anyone accessing the site, as WordPress will track who last edited a page. This is good to know if there will be multiple people using the site.

kellerassoc

**********


4

DASHBOARD

The WordPress Dashboard page lists the main sections of the site that can be maintained. There are also many plug-ins and additions that we have made to allow the site to work. We ask that you stay away from the sections that are not listed below, as those are the sections that control the “under the hood” code and could interrupt the site installation.

The sections used to maintain the site are:

POSTS — Where the blog/news posts are managed.

MEDIA — Serves as a reference library for all graphics and files that are uploaded to the site.

PAGES — Where the Pages of the site are located and maintained.

COMMENTS — Where to manage any comments, if they were allowed on blog posts.

PROJECTS — Where to add and edit new projects for the

APPEARANCE — This is where you can edit the menus and theme options for the site.

OPTIONTREE — This section is helpful to our programmers and can be ignored.

PLUGINS — Where plugins are managed. Our team will manage these updates as a part of our quarterly maintenance.

USERS — This is where you can set administrative and Membership logins for the site.

TOOLS, SETTINGS, & CUSTOM FIELDS — More “under the hood” settings for the site functionality.


5

ADMINISTRATION TASK BAR

When you are logged into WordPress, the formatting bar will be available as you navigate the site. This is the easiest way to make quick edits to a Page. Shown below is the WordPress Site Administration task bar, which will follow you as you navigate the site. You can click the “Edit Page” link to make a quick edit to the specific page you are on.


6

EDITING PAGE CONTENT

For most pages, you can simply click “Edit Page” at the top. However, if that option is not available for a page you want to edit, you will need to locate it in the Dashboard. We will use the “Why Join Us?” page as an example of how an edit can be made.

1. The first step is to click “Pages” in the Dashboard, then locate the “Why Join Us?” page (you may also use the search functionality within WP to find any page with a specific name).

2. Once you click on that page, you will see the page content and any custom sections we have added for that page.


7

EDITING PAGE CONTENT (CONTINUED)

In the WordPress admin, you can add or edit the Banner Image, Banner Title, Banner Caption (or lead-in text), Short Detail, page content, formatting, and add photos, links, or embed videos. Once you have made the changes, you may “Preview” the changes, or click “Update” for them to take place.


8

CREATING A NEW PAGE

You will need to start by clicking “Add New” under the pages section of the Dashboard.

1. If the new page belongs to a subpage under a section of the website, you will need to select a “Parent” page from the pull down. For example, “Why Join Us?” belongs under “Our Culture.”

2. You will also need to assign a “Page Template.” There are a few different options — you can choose which one from the drop-down menu. (Please see next page on specific template information)

3. Now you can add content and media to the page. As soon as you are happy with the Page click “Preview” to see how the page will look without publishing it. When everything looks good, you may “Publish” the page.

4. If you want to create a page and not have it posted to the website immediately. You can save it as a “Draft.” Just click the “Edit” section under “Status.”

Adding Your New Page to the Navigation

Once you have created your new page and published it to the website you then need to add the page to the navigation.

1. Start by choosing “Appearance” then “Menus” in the Dashboard sidebar.

2. Choose which menu you’d like to edit: Main Menu or Footer Menu.

3. You will see a section labeled “Pages” on the right. You will want to check the box next to the new page and “Add to Menu.”

4. After you have added the new Page to the menu it will appear at the bottom of the Menu Structure area. Next, drag the page to where you’d like it to appear in the navigation. If your page is indented that means it will show up in a drop down menu under the corresponding parent menu.

5. Click “Save Menu” for your changes to take place.


9

FORMATTING TEXT The WordPress formatting bar is easy to use in formatting text using the various CSS styles that have been programmed into the site code. This is how we can maintain consistency in text formatting throughout the site. You can hover over each of these to

BOLD

ITALICBULLETS

NUMBERS LINKS

TEXT FORMATTING

TEXT ALIGNMENT

QUOTE INDENT ACCORDIONSTOGGLE

TOOLBAR

TEXT COLOR

PASTE AS TEXT

CLEAR FORMATTING

INDENT

SPECIAL CHARACTER

Text Formatting

The CSS code of the website is what controls the attributes of the text formatting. Following is a list of the styles available for site content. The site’s CSS code controls the typeface, size, and color. In order for changes to be made, a programmer is required to make an edit to the CSS code for the site.

HEADING 1 — Large Title in content area

HEADING 2 — Section Heading Title

HEADING 3 — Secondary Titles

HEADING 4 — Can use for call to actions or important information to note within page content area

PARAGRAPH — This is the format for main text used throughout the pages on the site. You may also use bold or italic and create hyperlinks with any text.

Note: When copying from Microsoft Word, make sure to click the “T” icon with the clipboard, then paste your text to strip out any ugly formatting that Microsoft includes.


10

MEDIA LIBRARY

To add new photos to the Media Library, just click on the “Media” section in the Dashboard. You can then either drag and drop the image directly into the media library or click “Add New” to bring up a basic uploader.

ACCORDIONSThe easiest way to add an accordion into a page’s content is to copy the code from another page that already has one. We’ve put together a page titled “Sample Page” with all of the features that you may want to use.

1. After copying the code into the place within the page content that you want it to go, change the title within the quotation marks to what you want the pull down to say.

2. Then change the content within the accordion.


11

CREATING A LINK

You may create a hypertext link to any text on a page, including links within the site, to external pages, or even to a PDF file that has been uploaded to the Media Library.

1. To create a link, highlight the text you’d like to link and click the link button in the formatting bar. Add the URL you want it to link to.

2. Click the gear symbol to get more options. You will see a pop-up window that will allow you to set the link address and link settings. Add the URL that the link should go to. Note: If the link is an external link, click the settings wheel and choose “Open link in a new window” check box to ensure the viewer doesn’t leave the website.

3. Click “Add Link.”

NOTE: You may also create email links by entering “mailto:” and the email address. Example = mailto:[email protected]

Add a PDF File Link

1. In order to create a link to a PDF file on the site, we must first upload the PDF file to the Media Library. To move the file to the web server, click on “Add New” in the Media Gallery.

2. Once you drop and drag the file to upload it, you will be given a “File URL.” This URL is the location of the PDF file on the web server. In order to link to a PDF file, simply copy this URL and enter it in the “Insert/Edit Link” field.

NOTE: Always choose the check box to “Open link in new window” for a PDF file, as it’s not always intuitive to click the back button in a web browser.


12

INSERTING A PHOTO INTO A PAGE

1. To insert a photo in a post/page, we will want the photo to be saved as web resolution (72 DPI) and be in RGB color mode. We typically suggest a JPG file format at 85% quality for a photographic image. Please see the image size chart for specific pixel sizes.

2. Once the image is resized, place your cursor in the content area where you would like the image to appear. Click the “Add Media” button to upload the image and select it. Once you upload the image, you will see the screen shown below. Choose the image you want to insert, and click the “Insert Into Page” button.

3. You may also choose to have the photo align left, right, or centered on the page. To do so, click the image you inserted and the alignment buttons will pop up.


13

EDITING THE HOMEPAGE

The Homepage of the site has special features that other pages do not. On the Homepage, you have the ability to control:

• The main Banner Slider Image and Caption.

• The Banner Caption Block that includes the words that animate on the homepage.

• The Project Description area used to highlight a project.


14

OUR PROJECTS

The “Projects” section within Wordpress is where to head to add a new project or edit an existing one.

Each project must include:

• Project Title, which generates the permalink for the project.

• Project Description for the main content on the page.

• Project Category, which controls which section the project shows up on the site and which sliders.

• Location for the project which controls the location content and pull-down menu. The currently used ones are can be found in the list, or new ones can be added. (Note: You will notice there is a “--” used between the City and State, as the comma indicates multiple locations and this required some custom programming for our team).

• Banner Slider Image for the hero photo.

• Featured Image for the thumbnail for the project sliders.

• If you’d like to feature the project on the homepage, check the “Featured” check box in the sidebar.

• Optional: Additional images in the content area.


15

OPPORTUNITIES

The Opportunities page includes job descriptions that appear in a lightbox or pop-up window. These are managed through a “repeater,” which is programming lingo for the ability to add flexible content in a predefined area of the site.

Each job description appears in as a block on the page:

Hover over this area, and drop and drag to change the order of the job descriptions. Click the “-” button to remove a job

description from the page.

Click “Add Row” to add another job description.

Job description


16

OUR EXPERTISE

For the Expertise page, the content for the page can be edited under Pages. That said, the descriptions of the categories of Expertise are housed under Projects > Project Categories, as these are used to categorize the Projects on the site.

You have the ability to add a new Project Category at any time, or, you can edit an existing one, by clicking “Edit” under the title for each one.

You can also edit the Banner Image photo in this section. The hero image should be 1351 x 642 in size.


17

LOCATIONS & CONTACTS

As we were asked to use the provided graphic of the Northwest, this section is hard coded. There was no other way to plot the X-Y coordinates unless we are using something like Google Maps that we had in the initial round of programming. To add or remove a location, you will need the help of our programming team. You do have the ability to edit the contact information for each location, including the address, phone number, email, and Google Map link.


18

PHOTO SIZES

Your website has multiple photos throughout it and many of them are different sizes. Below is a chart that has all of the correct photo sizes you will need. All images should be 72dpi for the resolution and in RGB color mode.

As the site is responsive, you will need to consider the cropping on various devices. We have built a library of Photoshop files for your to reference for this purpose. The files include guides and notes of what to look for in the way the image is cropped.

Image Sizes

Name Size Notes

Banner Image 2000 x 1080 Homepage and subpage hero image

Banner Slider Image 1351 x 642 Project Page hero image

Featured Image 361 x 371 Project thumbnail images

Horizontal Project Photos 400 wide Project inset photos

Vertical Project Photos 300 wide Project inset photos

Section Background Photos 1620 × 1186 Our Culture / Join Your Team

Core Values Photos 489 × 367 Pop-ups on How We Think

Headshots 375 x 510 Our Leadership

Homepage Description 1760 × 842 Featured project on the Homepage


19

EMBEDDING VIDEOS FROM YOUTUBE

To embed a video in a page on the site, you can simply copy and paste the URL. WordPress is smart enough to display the video.

If you wish to control the size of the video or change settings, choose the following specifications in YouTube:

1. Choose the “Share” tab, and then a box will pop up with options

2. Choose the “Embed” Tab

3. Change settings as you wish.

4. Copy the “iframe” code, and paste it in WordPress in the Text tab (as it is HTML code)

5. Paste the link into the page you are editing.

6. You can change the height and width by typing it into the text of your content.


20

THEME OPTIONS

The global settings for the site are housed in the section called “Appearance > Theme Options” in the WordPress admin. This is where you can update phone numbers, social media links, edit footer content, and the 404 page. Once any changes are made to the Global Settings, you must click “Save Changes” for the edits to be saved on the live site.


21

QUESTIONS?

If there are questions about WordPress or the way the site is programmed, please email

Paul Carew at [email protected]. We are extremely proud of this work and thank you

for the opportunity to be a partner to Keller Associates We hope to enjoy a long-term

relationship and are here to help in any way we can.

For any programming changes or web maintenance, we will bill for our time at $125/hr.

We suggest a quarterly maintenance schedule, where we will update WordPress, and

any plugins that need to be. These preventative measures will ensure the site is in good

shape and secure.

Sincerely,

Paul Carew, President

wordpress training manual - keller associates...wordpress training manual 7 editing page content...

Documents