This document provides an overview of key concepts for understanding WordPress including:
- WordPress is a content management system (CMS) that allows users to create and manage website content without coding knowledge. It uses PHP code behind the scenes.
- Key vocabulary includes: content, themes, posts, pages, widgets, plugins, dashboard, host/server, URL/domain name.
- Users can choose WordPress.org for full functionality or WordPress.com which is free but has limitations. Themes and plugins are limited on WordPress.com.
- The document reviews how to set up a WordPress site including choosing a theme, domain name, and plan. It also covers creating posts and pages, adding media
8. This barrier kept many
from using the web.
THE NEED TO KNOW CODE
= BARRIER
9. Three major types of code.
HTML or Hyper Text Markup Language
It is the ABCs of the Web
Source code: It is visible to all.
JavaScript adds interactivity
PHP or Hyper Text Preprocessor
(or Pre Hypertext Processor,
if you want it to make sense.)
Code that is not visible.
It give orders to the rest of the code.
(It makes WordPress possible.)
10. Don’t worry!
Your CMS (WordPress)
handles the code for you.
It organizes your content
so that has continuity.
WordPress and its powerful CMS
makes it possible
for you to create
professional-looking
websites
without knowing code.
15. THEME:
Themes control how type
and images display.
Designers who understand code
create packages of CMS code for you
to use in WordPress.
They are called THEMES.
Think of THEMES as stylesheets.
The THEME’s PHP code is working
behind the scenes.
You want a large headline. Just say so!
22. Plugins add power to WordPress.
• Collect and organize
data.
• Organize your
posts.
• Design shortcuts.
• Link to Social
Media.
• Create discussion.
• Add sales
functionality
27. Your site has to live somewhere.
Your host or server provides the space to hold your data.
It is not expensive and they provide support help 24/7.
HOST or SERVER
29. Uniform Resource Locator
This is very specific and can be
a long string of code like this:
http://www.shutterstock.com/downloading_tips.mhtml?code=&id=293848352&size=huge&image_form
at=jpg&method=download&super_url=http%3A%2F%2Fdownload.shutterstock.com%2Fgatekeeper%
2FW3siZSI6MTQ0NjkzMTg5OSwiYyI6Il9waG90b19zZXNzaW9uX2lkIiwiZGMiOiJpZGxfMjkzODQ4Mz
UyIiwiayI6InBob3RvLzI5Mzg0ODM1Mi9odWdlLmpwZyIsIm0iOiIxIiwiZCI6InNodXR0ZXJzdG9jay1tZW
RpYSJ9LCJiQ2dFaldXME9RWFFqTW5HRG5BRFl3VDY0ekEiXQ%2Fshutterstock_293848352.jpg&r
acksite_id=ny&chosen_subscription=133&license=standard&src=AiqJIorPpDZBLOy-0e6HvQ-1-0
This is the URL
of this art
purchased
on the web.
31. The DOMAIN NAME is just the first part of that code.
http://www.shutterstock.com/downloading_tips.mhtml?code=&id=293848352&size=huge&image_fo
rmat=jpg&method=download&super_url=http%3A%2F%2Fdownload.shutterstock.com%2Fgatekee
per%2FW3siZSI6MTQ0NjkzMTg5OSwiYyI6Il9waG90b19zZXNzaW9uX2lkIiwiZGMiOiJpZGxfMjkzO
DQ4MzUyIiwiayI6InBob3RvLzI5Mzg0ODM1Mi9odWdlLmpwZyIsIm0iOiIxIiwiZCI6InNodXR0ZXJzd
G9jay1tZWRpYSJ9LCJiQ2dFaldXME9RWFFqTW5HRG5BRFl3VDY0ekEiXQ%2Fshutterstock_29
3848352.jpg&racksite_id=ny&chosen_subscription=133&license=standard&src=AiqJIorPpDZBLOy-
0e6HvQ-1-0
32. The DOMAIN NAME is just the first part of that code.
http://www.shutterstock.com/
33. The DOMAIN NAME takes you to the site’s home page.
http://www.shutterstock.com/
HOME, SWEET HOME!
DOMAIN, SWEET DOMAIN!
I purchased that stock art
from Shutterstock.
http://www.shutterstock.com/
36. WordPress
.org .com
WordPress’s commercial site
WordPress is the host/server.
• It is free with limitations.
• The selection of themes is limited.
• The selection of plugins is also limited.
• You will have to start paying for
additional storage or to block
advertising or to seriously monetize
your site.
• Support is through an online forum.
WordPress provides platform only.
Choose your own host/server.
• Though there is a cost, it is not
expensive.
• Many themes and plug-ins to choose
from.
• You’ll have the full power of
WordPress.
• You own your site, free of ads.
• Hosts provide excellent trouble-
shooting.
43. CHOOSE
A DOMAIN
Type in anything.
Follow with
.wordpress.com
43
WordPress will make
suggestions, depending on
what is available.
If you already have a domain name, it needs to point to a
server. WordPress will “map it” to their server.
When you
have a name
you like. Click
Select.
44. CHOOSE
A PLAN
Here you can see why it is
cheaper to choose your own
host/server.
WordPress offers a lot for free,
but its prices are high.
Choose Select Free Plan
44
45. CHOOSE
A THEME
There are hundreds of themes.
Plan to spend a day exploring
them.
You can preview them and you
can change them at any time.
But if you customize things,
you may have to replace
things to fit the requirements of
the theme.
Choose carefully!
45
46. CHOOSE
A THEME
There are hundreds of themes.
Plan to spend a day exploring
them.
You can preview them and you
can change them at any time.
But you may have to replace
things to fit the requirements of
the theme.
Choose carefully!
46
Type in
Twenty Ten
for this training.
Narrow your
search.
Find Free
in the
dropdown
menu.
47. CHOOSE
A THEME
47
This is the
theme you
chose when
we first
opened WP
This is Twenty Ten
Hover over and click to Preview.
48. HOME PAGE
WordPress gives you a
preview.
If you have your own content it
will display your content.
In this case, they show some
dummy content to help you
decide if this theme will work
for you.
48
This is the theme
we will use today,
so click the blue
button
Try & Customize.
49. HOME PAGE
Let’s take a look at the default
home page.
49
DASHBOARD
NAME of YOUR BLOG
HEADER or
BANNER
MENU or
NAVIGATION BAR
POST
SIDEBAR
with
WIDGETS
NAME of YOUR BLOG
FOOTER
53. Customizer is a mini-version
of the Dashboard.
It is blue.
I prefer working directly in the Dashboard.
These can appear differently in different themes.
The dashboard is usually gray or black.
54. THE DASHBOARD
or
CUSTOMIZER
54
If the left sidebar is
blue, you are in
Customizer.
You can reach the
Dashboard by typing
wp-admin after your
domain name or by
hitting Site Admin in
Meta.
55. LET’S GET GOING
WHILE WE
PREVIEW
LET’S EXPLORE
THE DASHBOARD
55
If the left sidebar is
black, you are in the
Dashboard.
You can get to
Customizer under
Appearance.
60. LET’S GET GOING
CUSTOMIZER
60
COLORS &
BACKGROUNDS
You can choose a
background image of your
choice.
Experiment with colors.
(Backgrounds are
sometimes called skins.)
72. LET’S GET GOING
CUSTOMIZER
72
WIDGET
Many choices!!!
This will look different in the
dashboard. You will see an
area to discard widgets you
no longer use.
REMEMBER TO SAVE!
74. LET’S GET GOING
CUSTOMIZER
74
STATIC FRONT PAGE
The page your site opens to!
It’s your choice.
Remember:
Post Pages stack content.
Static Pages can be designed
to keep content where you
want it.
75. Now let’s create some posts and pages.
You did it! You created a WordPress site!
Congratulations!
76. Reminder:
POSTS and PAGES hold
your content.
Content includes posts,
words, photos,
podcasts, videos,
polls, slideshows,
sliders (moving headers),
order forms, comments,
chats, etc.
POSTS
PAGES
77. FIND THE DASHBOARD
3 Ways:
• Type wp-admin
• Pull Down from My Sites
• Hit Site Admin
Find Blog Posts. Click Add
(sometimes just Posts)
NOTE: Using the
My Sites Menu
brings up the
sidebar
DASHBOARD
Not the full version
with all the stats.
That’s all you
need for this step.
78. Type in Headline
The Theme Code will
handle the style and
size.
Add Image
Click in body and hit
Add Media.
79. All Media, including ebooks, are
added from the Media Library.
But first you must load the media
into the Media Library.
That’s why WordPress takes you
to Upload Files.
If you have preloaded Media into
the Library, you can click on the
Media Library tab.
Let’s load a picture.
Click Select Files.
81. You now have one
photo in your Media
File.
The sidebar info gives
you the url of the photo.
You’ll need this if you
ever want to allow people
to download media
(usually a report or
ebook).
You can write a caption.
Alt Text shows when
people have images
turned off.
Description helps
unsighted computer
users and searching.
You can align and size
your image here.
You can also do this in
the visual editor.
When you are ready,
hit Insert into post
82. Visual Editor
The Visual Editor
Is more WYSIWYG.
There’s the picture.
You can align and size it here.
Click on it and play with it.
Visual Editor
Vs
Text or HTML
Editor
83. QUICK
LOOK
at the
TEXT TAB.
This allows you
to edit the code.
You will not need
this often but a basic understanding
will help.
When you add links from YouTube, for
example,
you’ll be asked to place code.
This is where you’ll do that!
CODE HAS A
BEGINNING AND ENDING.
In between is your content.
84. Back to the
Visual Editor
Now add some text and
experiment with the toolbar at
top.
Toolbars vary with theme. Some
are five or more rows of tools.
This icon expands or contracts the
tool bar. It used to called The
Kitchen Sink icon.
Paragraph
Quote (change size)
Various
headlines/colors
.
Link
Save as draft
until you are
ready to
publish.
Preview if you
wish.
87. Make a couple of quick pages.
Then we’ll make a menu!
88. To create or edit your
menu/navigation bar, go
to Appearance
MENUS
Now that we
have some
pages, we can
create a menu.
89. WordPress
already created
some pages for
you.
You might have
an About Page
showing here.
EXISTING MENU PAGESPAGES you
just added.
Check each one
and then click
Add to Menu
90. The pages you will
show up here.
You can drag them into the
order you like and make a
drop down menu by
indenting. Just drag it over.
IMPORTANT: Hit Save
Menu
INDENT (just drag)
To create a dropdown menu.