67811253 Wordpress Seminar Handout
-
Upload
cristina-dalupan -
Category
Documents
-
view
224 -
download
0
Transcript of 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.
-
8/3/2019 67811253 Wordpress Seminar Handout
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.
-
8/3/2019 67811253 Wordpress Seminar Handout
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/ -
8/3/2019 67811253 Wordpress Seminar Handout
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/ -
8/3/2019 67811253 Wordpress Seminar Handout
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!
-
8/3/2019 67811253 Wordpress Seminar Handout
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
-
8/3/2019 67811253 Wordpress Seminar Handout
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/3/2019 67811253 Wordpress Seminar Handout
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 -
8/3/2019 67811253 Wordpress Seminar Handout
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.
-
8/3/2019 67811253 Wordpress Seminar Handout
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.
-
8/3/2019 67811253 Wordpress Seminar Handout
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.
-
8/3/2019 67811253 Wordpress Seminar Handout
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.
-
8/3/2019 67811253 Wordpress Seminar Handout
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.
-
8/3/2019 67811253 Wordpress Seminar Handout
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 -
8/3/2019 67811253 Wordpress Seminar Handout
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.
-
8/3/2019 67811253 Wordpress Seminar Handout
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.
-
8/3/2019 67811253 Wordpress Seminar Handout
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