67811253 Wordpress Seminar Handout

8/3/2019 67811253 Wordpress Seminar Handout

1/17

Pacific Islander Health Partnership

Wordpress Website Seminar Handout

Overview:

The objective of this seminar will be to give the PIHP board and interested community membersan introduction to Wordpress. Specifically using the new PIHP website as an example of how

Wordpress can be used to make basic site and event updates through the use of blogging and calendar

tools.

The seminar is broken into two main parts. First is getting to know some basic concepts that

will help you better understand how to use Wordpress. Second will be a series of practical tutorials so

you can begin to manage your Wordpress website.

Part 1: Basic Concepts for the Wordpress User

What is Wordpress and how is it different from a website?

This is a great question that a lot of people new to Wordpress

have.

Wordpress is a blogging tool that is also referred to sometimes as

a platform. This platform is useful for creating websites for the

Internet. Over 10% of the websites on the Internet are createdwith Wordpress. Essentially, Wordpress is a convenient tool that

can be used to create a website, but not all websites are built

using Wordpress.

People often use the Wordpress platform as a CMS, which is an acronym

for Content Management System. Content Management Systems are

great because they allow people without knowledge of computer code

languages like CSS, PHP, and other technical junk to be able to managethe backend of their websites.

One last thing that is helpful know about Wordpress how it works with the frontend and the

backend of a website to give someone with very little experience the ability to manage their ownwebsite.


2/17

BACK END FRONT END

BACK END FRONT END

In the realm of the Internet and websites the Back End generally refers to the documents that arewritten in codes or languages (like HTML) that web-browsers (like Firefox, Explorer, and Netscape)

understand. The web-browsers read those codes and know how to display the content of your website.The websites that you see on the Internet are also known as the Front End, they are the browser's

interpretation of the code that is written on the Back End.

A simplified explanation of what Wordpress does is provide a framework that is easy and intuitive forpeople to use that modifies specific areas of the code in your Website. This framework is called the

Dashboard.

In the next section we will learn how to Log In to the Dashboard and learn about a few of the useful

tools located in the Dashboard.

One thing to keep in mind is that the possibilities with Wordpress are extremely vast. The more you

learn about the platform the more you will be able to take advantage of the abilities of this powerful

tool.


3/17

For fun here are a few nice examples of non-profit websites using Wordpress as their platform, so you

can see what is possible:

http://findinghope.cbcf.org/http://plaingreen.org/

http://blog.cookiesforkidscancer.org/

The difference between Pages and Posts

Here is a quick and easy explanation between a page and a post.

Page Typical characteristics of a page are:1. A website is made up of pages. A page is a part of a larger website.2. It is navigated to by the user from your Main Menu navigation.

3. Has a unique URL or web address.

4. Does not have categories.

5. Has tags, which help search engines find your pages.

Post Typical characteristics of a post are:1. Posts are a part of a blog. A blog is often a page within a website.

* keep in mind posts can be used to populate other parts of a site as well.

2. Individual posts are not usually navigated to by your site's Main Menu.

3. Has a unique URL or web address4. Has categories, which organize your content and can be used to auto update

other pages on your website.

5. Has tags, which help search engines find your posts.

A Simple Illustration of Website Hierarchy
http://findinghope.cbcf.org/http://plaingreen.org/http://blog.cookiesforkidscancer.org/http://plaingreen.org/http://blog.cookiesforkidscancer.org/http://findinghope.cbcf.org/


4/17

Part II: Practical Wordpress Tutorials

In the next section we will walk through how to use the Wordpress to it's fullest potential withonly a minimal amount if skill. Today we will be using the Pacific Islander Health Partnership website

as a teaching tool for community members who will be updating the site. This will also be helpful to

people who have little to no blogging experience, so that they can learn good basic blogging habits.

List of Tutorials:

Logging In

Overview of the Dashboard

Editing Pages

Creating Posts

Uploading pictures

Ensure posts correctly update PIHP website pages

Use Tags and Headspace to Improve Search Engine Optimization (SEO)

Adding Featured Images

Use Google Calendar to update the website event page

Logging in

To login to any Wordpress site you have to go to a special web address.

For the new Pacific Islander Health Partnership Site that is:

http://pacificislanderhealthpartnership.net/wp-admin/

When you arrive at the web address you will see something that looks like this:

The steps to login are simple.

1. Enter your username

2. Enter your password

3. Click Log In

If this does not work and you need to be reminded of yourpassword you can click. Lost your password? And get a

reminder email.

It is also helpful to check the Remember Me

box that way you don't have to always enter your

password on your personal computer.
http://pacificislanderhealthpartnership.net/wp-admin/http://pacificislanderhealthpartnership.net/wp-admin/


5/17

Overview of the Dashboard

Once you are Logged In you be brought to the Home Page of the Dashboard which would look likethis:

The middle section of the Dashboard screen will change depending what you have selected from the

sidebar.

Here is a closer look at the selections currently available in PIHP's Dashboard.

Please note I have only included descriptions of the menu items available to people updating the PIHPwebsite. Contributors for the PIHP website have been given Editor level permissions. Which allows

access and edit certain parts of the site while protecting other parts of the site. Here is a brief overviewof the tasks in the Dashboard that are accessible to an Editor.

Dashboard gives some overall information of your website

Posts the tool for creating posts for the website

Media the gallery for all the site's uploaded photos

Links add links to your blogroll

Pages Use to edit permanent copy on static pages

Comments Use to approve and moderate comments

Profile change your password and manage personal settings

Tools helpful things that can help you create new posts. Try them!


6/17

Editing Pages

1. Click on the Pages in the right

column. This will expand the Pagestab and show a list of all your

existing pages in the center of the

Dashboard. Like this:

2. To edit a page click the title of the

page.

3. This will open the editing window

for the specific page that you

clicked.

It should look like the image to the right.

Using this window you will beable to edit your page using an

interface that is very similar to a

word processing program such asWord.

4. Make sure that you click the tab marked

Visual when you are editing your pagecontent. It is located on the top right of thetext editing window.

5. Now you can enter the text of your content in the center window. You can use the tool bar above

the window to make text bold, underline, make lists, and perform other formatting tasks

familiar to those who have used Word.

You can also use the Upload/Insert menu to add things like photos and audio files. We will

cover that in greater detail later.

This is a close-up view of the formatting bar in Wordpress


7/17

6. When you have formatted your text and

other content. Click the white Preview

Changes button at the right side of the

screen. A new tab will open in your webbrowser to show you what your changes

will look like once they are published

on the web.

If you are happy with the way it looks

go back to your open Wordpress editingtab and click the blue Update button.

Voila! You have edited your page

Creating Posts

Now that you have edited a page, creating and editing a post will be easy because it is a very

similar process.

1. Click on Posts in the right column

If you would like to edit an existing post click on All Posts and

scroll to the title of the post you want to edit.

If you would like to create a new post click Add New

2. When you click Add New you will see a brand new blank page to create your post. If you

click on All Posts and chose a post to edit some of this information will already be filled in.

Below is an image of a completely blank form that you can use to create a new post. We will go

through all of the information fields on the page so you will know how to properly categorize your

posts, and add fun things like pictures, picture galleries, and videos.


8/17

3. Give your post a title.

Use this field --->

Try to incorporate key words into the title of your post this will help your search results.

4. Make sure that you click the tab markedVisual when you are editing your page

content. It is located on the top right of the

text editing window.

5. Add content to the body of your post in the middle window just like you would when editing apage.

This is the same process as explained in the Pages tutorial above in step #5. If you needadditional information please see above.

Uploading pictures

Posts should always have a picture in them. It can be either a photo of your own or you can use photos

from other people as long as you have their permission.

A good resource is creative commons http://www.flickr.com/creativecommonswhere you can find

images to use as long as you give a credit to the photographer.

Once you have the photo you want to use for your post. Follow these steps to include it in the post.

6. Place your cursor where you would like the image to be inserted into your post.
http://www.flickr.com/creativecommonshttp://www.flickr.com/creativecommons


9/17

7. Roll your mouse over the icons to the left of Upload/Insert You should see that the first icon

to the right that is a small rectangle in a rectangle is called add an image. Click on that icon.

8. A window will pop up that looks like this:

If you want to upload a new

picture from your computermake sure you have the From

Computer tab in the upper left

hand corner clicked.

Where it says Choose files to

upload. Click the white buttonthat says Select Files.

9. After you click Select Files a window will pop up from your computer. Find the file you

would like to upload and select it.

Make sure the file you are trying to upload isless than 2 MBs and is a JPG, GIF, or PNG for best

quality.

You will see a progress bar like the one below while

your picture is uploading.


10/17

10. After your picture has uploaded a

thumbnail of your picture will be visible

in the window, and you will be given a

few more fields of information tocomplete. It is important to fill in all of

these fields to help the search results for

your posts.

11. Scroll below the thumbnail of your picture and fill in the Title, Alternate Text, Caption, and

Description fields for your image. The Title, Alternate, Text, and caption call all be the same.The Description should be a little more in depth if you have time, this well be displayed below

your picture in the blog post.

You DO NOT need to put anything in the Link URL field. Wordpress automatically generates

that field for you.

12. There is still a little more information to complete before your image will be ready to include in

the post. The following choices to select how big the image will appear and where it will bepositioned in your post. Select whatever you like, but usually a size between 300 600 pixels

wide is the optimal size. The length will scale automatically.

13. Click the white Insert into Post button and your image will be

placed into your post and you will returned to the post editing

window.


11/17

You will be able to see your image inserted into your text. This may be a good time to save and previewyour post. Which you can do by clicking the Preview button in the upper right hand of the screen.

14. If you want to insert a few large images into the post repeat the steps in this section.

Ensure posts correctly update PIHP website pages

To make sure that your posts update not only the PIHP blog but also a few of the general category

pages. You need to make sure that you apply categories to your posts. The category selection window islocated to the right of your screen next to the text entry window.


12/17

15. Simply scroll down the list of Categories and check off all of the items and communities that

your post applies to.

Use tags and Headspace to improve search engine optimization

Using tags on every single page and post in your Wordpress site is a great simple way to help improve

your search engine results. To find the Post Tags window scroll down it is directly below theCategories window.

16. Use the same words that you selected for your Categories as your Tags.

Spell them exactly the same. If you used the Category events do not use the word event as a

tag. Use events this will help keep things uniform.

17. To the right you can see the Post Tags window

write the words you want to use as tags in the whiteinput field and click add.

You will see the tags that have been added to the postbelow where it says separate tags with commas.

You can also add the most frequently used tags by

clicking on the available choices listed in blue at thebottom of the window.

18. This window below is called the HeadSpace window. It also helps with Search Engine

Optimization and is easy to complete. Simple copy and paste the Page Title from above into thetitle field and write a short description of the post in the description field.

Try to think about the words that someone might type into a search engine when looking for yourarticle. Incorporate as many of those words as you can into your description.


13/17

Adding Featured Images

It is best to add a featured image to every post you do so that when and if people share yourcontent and posts there will be a nice small image next to the synopsis of your article. If you

use Facebook think when people share links. Some don't have images next to them on your Wall

that is because they don't have a feature image set. People are much more likely to click on alink with an image.

19. The Featured Image window is all the way at the bottom of the screen on the right hand side.

20. Click on the Set Featured Image link and a

new window will pop up. It is the samewindow used to upload images.

21. Select the Gallery tab in the window. And it will bring up a list of all of the images you

uploaded as part of that post.

22. To the right side of the window there is a column called Actions. Look down the list of

images that are in your gallery and click Show for the image you want to set as your featured

image. You will be taken to another screen.

23. Scroll to the bottom and click on Use as featured image. It will take a moment to save.


14/17

24. You can then close the window using the x in the uppermost right hand corner of the window.

You will then be able to see the image you selected on the main post window.

Use Google Calendar to update the website event page

The event page on the website is set up to update from a Google application called Calendar. It is avery useful tool to create an automatically updating calendar on your website. One thing to note is that

you will need a Google account to use Google calendar, but rest assured that Google is fully worth

joining as they have many useful tools you can use on the Internet.

1. Navigate to the Google Calendar site: www.google.com/calendar

2. Sign in. If you don't have a Google account you will need to sign up for one first.
http://www.google.com/calendarhttp://www.google.com/calendar


15/17

3. A page will appear with all of your available calendars.

4. On the left hand side of the screen you will see a

list of all of you Calendars, scroll over the name ofthe calendar you would like to add events to. You

will see a little triangle appear to the right of the

Calendar name, click on that triangle and a menuwill appear.


16/17

5. Click on Create event on this calendar and you will be prompted to enter as much or as little

detail as you like about your event.

Always remember to Create a Title for your event in the uppermost field.

6. Since the purpose of your PIHP Calendar is to update the Wordpress site. At the very bottom

of the Calendar Event Page you will find setting for privacy control. The default of this calendaris set to share events publicly. Do not put private events on this Calendar, and do not change the

privacy setting of the individual events.

7. When you are finished editing your event click on the red SAVE button at the upper left of

the screen. Your event will be automatically saved and will instantly update the Events pageon your website.


17/17

Finally I have created a series of four tutorial videos that walk you through what we have covered in

this workshop seminar. If you need a refresher on how to do some of these functions like updating

posts and adding images these tutorials should be able to help you.

You can find the videos on my Vimeo playlist at:http://vimeo.com/album/1711349
http://vimeo.com/album/1711349http://vimeo.com/album/1711349http://vimeo.com/album/1711349

67811253 Wordpress Seminar Handout

Documents

Transcript of 67811253 Wordpress Seminar Handout