Word press course

WordPress
Understanding the Language
h

A Presentation by Judith Gotwald
Gotwald Creation
And 2x2 Foundation
Learning WordPress
h

CMS
WordPress is a
Content Management System
(there are others and
you can build your own
but WordPress leads).

This barrier kept many
from using the web.
THE NEED TO KNOW CODE
= BARRIER

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.)

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.

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!

POSTS
Content
that is added
as POSTS
stacks on top
of previous
content.

PAGES
Content added to pages
can be arranged in any order.
It will stay where you put it.

WIDGETS
Widgets are tiny apps that
WordPress allows you to add to the side or
bottom of your site for free.

VOCABULARY WORD
PLUGINSWe won’t be covering PLUGINS today.
Just know they are there to make your life easier.

Plugins add power to WordPress.
• Collect and organize
data.
• Organize your
posts.
• Design shortcuts.
• Link to Social
Media.
• Create discussion.
• Add sales
functionality

The DASHBOARD is your kitchen.

Your kitchen holds all the tools for working on your site.
TIP:
Bookmark it!

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

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.

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

The DOMAIN NAME is just the first part of that code.
http://www.shutterstock.com/

The DOMAIN NAME takes you to the site’s home page.
HOME, SWEET HOME!
DOMAIN, SWEET DOMAIN!
I purchased that stock art
from Shutterstock.

Let’s Review!
CONTENT
THEME
POSTS
PAGES
WIDGETS
PLUG INS
DASHBOARD
HOST/SERVER
URL/DOMAIN NAME

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.

.org
All organizations or serious bloggers
.com
Hobbyists

You can start with .com
and migrate your site
to .org (your own server) later,
but it is a bit of a hassle.

STARTING
GATE
Can be tricky to
find this page.
Do you have a
WordPress login
Name/password?
40

CHOOSE
A THEME
Click anything
for now.
We’ll revisit this
later.
41

CHOOSE
A DOMAIN
FREE as long as
you keep wordpress
in the name.
42

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.

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

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

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.

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.

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.

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

Customizer
Dashboard
Toolbar
Meta (widget)
Type in wp-admin
Don’t panic!
There is often more than one way
to get to the same place
in WordPress.

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.

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.

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.

LET’S GET GOING
CUSTOMIZER
56
We will work our way
down the left sidebar.
FIRST
SITE IDENTITY

LET’S GET GOING
LET’S EXPLORE
THE DASHBOARD
57
Change the title from
the default.
Create a tagline.

LET’S GET GOING
LET’S EXPLORE
THE DASHBOARD
58
Create a tagline.

LET’S GET GOING
CUSTOMIZER
59
COLORS &
BACKGROUNDS

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.)

LET’S GET GOING
CUSTOMIZER
61
FONTS

LET’S GET GOING
CUSTOMIZER
62
Choose HEADLINE
Fonts.

LET’S GET GOING
CUSTOMIZER
63
FONTS
For body texts
(You are writing code
for your CMS without
using code!!!)

LET’S GET GOING
CUSTOMIZER
64
HEADER IMAGE

LET’S GET GOING
CUSTOMIZER
65
HEADER IMAGE
Add your own art or
photo.

LET’S GET GOING
CUSTOMIZER
66
HEADER IMAGE
Add your own art
or photo.
Look for the size
and adjust your art
before loading.

LET’S GET GOING
CUSTOMIZER
67
HEADER IMAGE
Choose a pre-set.
You can randomize
the presets.

LET’S GET GOING
CUSTOMIZER
68
MENUS

LET’S GET GOING
CUSTOMIZER
69
MENUS

LET’S GET GOING
CUSTOMIZER
70
WIDGETS

LET’S GET GOING
CUSTOMIZER
71
WIDGETS
Widgets are optional.
Widget areas include
sidebars (primary)
and footers.

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!

LET’S GET GOING
CUSTOMIZER
73
STATIC FRONT
PAGE

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.

Now let’s create some posts and pages.
You did it! You created a WordPress site!
Congratulations!

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

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.

Type in Headline
The Theme Code will
handle the style and
size.
Add Image
Click in body and hit
Add Media.

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.

Find the file you
want to upload.
Click choose.

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

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

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.

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.

You have completed
your first post!
Time to create a
Page.

Follow the
same
process as
creating a
post.

Make a couple of quick pages.
Then we’ll make a menu!

To create or edit your
menu/navigation bar, go
to Appearance
MENUS
Now that we
have some
pages, we can
create a menu.

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

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.

See the Menu with
the Dropdown
page.

The only thing left is to keep working at it.
TIP: Get in the habit of Googling your question.
You are not alone in the world.

Word press course

More Related Content

What's hot

Similar to Word press course

More from Judith Gotwald

Word press course