Introduction to WordPress for Beginners

r3df.com
Rick Radko Miriam Goldman
@r3designforge
@mirigoldman
Introduction to WordPress
for Beginners
July 20th, 2017

© 2017 Rick Radko, r3df.com
We are:
Rick Radko – R-Cubed Design Forge
 Software, web and app designer/developer, trainer, speaker.
 Creating custom web sites since 1996, and WordPress sites
since 2008.
Miriam Goldman
 Web Developer for Pondstone Digital Marketing
 Full stack web developer since 2005, and have worked with
WordPress since 2010
We're:
 Co-organizers of: WordCamp Ottawa 2017.
Slides are posted at: slideshare.net/r3df
1

Learning about WordPress
WordPress is feature rich:
Ask questions.
Everyone was new to WordPress at one time.
WordPress is the easiest CMS to use.
Goals for this session:
Familiarization for WordCamp
 Terms
 Features
 Concepts
 Visual aspects
2

Contents - Part 1
1. About WordPress
2. WordPress site orientation
3. Posts and pages
4. The settings panel
5. Menus
Break
3

Contents - Part 2
6. Widgets
7. Resources
8. Plugins
9. Themes
10. Users
11. Maintenance
4

About WordPress
5

What is WordPress?
WordPress:
Is a Content Management System. (CMS)
 A tool to help you build a website.
Like Google Docs, Microsoft Word, OpenOffice,
LibreOffice or Pages, which help you create
documents.
Displays web pages (HTML) dynamically.
Users need no knowledge of: HTML, PHP,
JavaScript etc. (for basic content)
WYSIWYG editor to help create content easily.
6

Looks similar to a lot of word processing applications.
 This image shows the WordPress post editor with an
extended editor plugin added (TinyMCE Advanced)
WordPress is WYSIWYG
7

What is WordPress continued…
WordPress:
The first version of WordPress was released May
27, 2003
Is currently the most popular CMS in use on the
Internet.
 Runs millions of websites.
 Stats suggest that WordPress sites represent:
Around 25% of the worlds websites.
Almost 60% of CMS based websites.
8

WordPress versions
3 different WordPress versions:
1. Hosted on wordpress.com
 Often referred to as “.com” WordPress.
2. Self Hosted – Single site (default version)
 Get from wordpress.org, or your website host.
3. Self Hosted – Network or Multisite
 Extra steps to setup.
Need to be aware of which one we are using, as
there are some differences.
9

wordpress.com
Wordpress.com is a service (by Automattic)
They provide:
 WordPress and hosting.
WordPress needs a web server, with PHP and
MySQL to run.
 Free service restricted to URL's:
<somename>.wordpress.com
Has limitations compared to self hosted:
 Added costs for customizing.
 Limited ability to customize.
Many things covered in this presentation you can’t
do on wordpress.com – like add plugins.
10

wordpress.org
Home of the open source version of WordPress.
Free!
 Just download it.
Needs a web server with PHPand MySQL to run.
 Hosting service for public sites.
 Local server to run it on your pc/ laptop
11

WordPress - Is it really free?
WordPress is free to download !
Costs! - Some things that may not be free:
 Web hosting (sever)
 A domain (your website address)
 Some WordPress / Web design knowledge
 Add-on themes and plugins
Limitations: None!
12

wordpress.org customizing
You can add plugins to make your site:
 Multilingual. (numerous techniques & plugins)
 Asocial site like Facebook. (BuddyPress)
You can add plugins to add:
 Facebook, Twitter, YouTube, Flickr connections.
 Aforum. (bbpress + others)
 Much, much, more. (1000’s of plugins available)
Add themes to change the look and sometimes
add function. (1000’s of themes available)
13

wordpress.org customizing
Caveat:
The more extensive the customization, the more
WordPress knowledge that is required.
 Many free resources to help:
wordpress.org (more later)
Other online resources.
 Some low cost resources:
WordPress meet-ups.
WordCamps.
Books.
 More costly:
Hiring a WordPress expert.
14

wordpress.org networks or multisite
The third version of WordPress is multisite
(network).
Was once a separate version known as WPMU.
 May still see references to WPMU
Even a few websites with WPMU in their names.
(not official WordPress sites)
Allows multiple websites on one install.
 It is not obvious to users that it is one install.
What wordpress.com runs.
Needs some knowledge to set-up.
15

Installing WordPress
WordPress needs to be installed on a web server in
order to use it:
Lots of install guides – not going to cover
installing here, it’s a whole session in itself.
codex.wordpress.org/ Installing_WordPress
This presentation is based on a .org install.
Much of it will work on wordpress.com but many
things may look/be different.
Things like installing plugins and themes will not
work.
16

WordPress site orientation
17

WordPress front-end
 The "public"
part of the
site that
your site
visitors see.
 Showing:
The Twenty
Sixteen
theme.
18
WordPress has 2 interfaces for users:
1) The front-end

WordPress back-end, admin or “dashboard”
2) WordPress back-end or “dashboard”
 This is private space where you manage the site.
To see the dashboard:
login at:
<your-domain>/login
OR
<your-domain>/wp-login.php
19

Welcome message
After logging in you will arrive at the dashboard.
On a new site, you will see the welcome box.
20

Screen options tab
Many pages have options for what is shown.
Click on the “screen options” tab (upper right).
21

Screen options
Select what you want to see, un-tick the rest.
In the case of the main Dashboard page, you
can even bring back the welcome screen here.
Look for screen options on each admin page:
Options change for each page.
22

Help tab
Beside the screen options tab there is a “help” tab.
As with screen options, it is context sensitive.
23

The help tab
The drop down help tab has:
On the left side:
 General WordPress help.
 May have added help from plugins and/or themes.
On the right side:
 links to the official WordPress documentation and
support areas.
24

Main navigation
On the left side of the admin screen is the main
navigation menu:
Access all your
content.
Control
WordPress
settings.
25

The tool bar
The admin tool bar:
26

The tool bar
Front end tool bar
Very similar to admin tool bar, some items are
the same.
Only shows if you are logged in.
27

Posts and pages
28

Posts and pages
Posts and pages are the basic content holders for a
WordPress site.
Posts:
 Individual pieces of a collection of content.
Usually used for blogs or similar types of content.
 Each content piece is associated with a date:
URL: your-domain/2008/11/30/post-title.
 Posts have categories and tags.
29

Posts
 Can be displayed many ways (dynamic):
Usually listed in reverse chronological order.
Sticky posts. (show at the top, need theme support)
Archives, by date, by author.
Categories and tags.
 Many different sidebar widgets can be used to create
lists and indices to posts, or collections of posts
indexed in various manners.
30

Post display
31

Single post display
Sidebar here is
the same as the
posts listing page,
but it could be
different.
Comments are
shown with box
to add a new
comment
32

Pages
Pages:
Are individual static stand alone content blocks.
Good for things like an About page.
 (any web site pages)
Usually in site menus.
Do not use tags or categories.
Not tied to date.
 URL: domainname.com/page-title/
33

Page display
Only one way to
display the
page.
May have
sidebar.
No date, tags or
category
information on
page.
May have
comments
section. 34

Creating a post (or a page) is really easy
In the dashboard -> select “Add New” from the
Posts menu item.
35

Create a new post: 1, 2, 3!
36

A new post!
37

Other post related items
We can also:
Add categories and tags to the posts.
38

More post related items (and pages too)
We can also change publishing options:
39
 Published/Review/Draft
 Publishing dates
and future publishing.
 Visibility and passwords.

Pictures and videos
We can also:
Add images and other media including videos.
Click the add media button to upload images
 OR, you can simply drag an image onto the editor
area and the image uploader will launch.
40

Insert Media Screen
If you dragged an image onto the editor:
 It will be noted as selected at the bottom.
 You can add more images…
41

Image options
The image up-loader has a few options:
 Add or
change the
title, alt text
and captions.
 Change what
it links to.
 Change the
image size
and the
alignment.
42

The added image
Uploaded image is now in editor
43

Add a YouTube video
Go to YouTube:
Get the share link.
44

Add a YouTube video
Paste the share link in your post or page
and the video should automagically appear!
45

A post with videos and images
46
 If you want more
control over the
video display,
you can add the
embed code in
the TEXT view.
 The bottom
video was added
by using the
embed code.

TEXTview
Use TEXTview to:
Embed HTML code like YouTube snippets.
Change the HTML directly, sometimes needed to
get things just right.
47

The Toolbar Toggle
“Toolbar Toggle” shows second row for editor:
A few more editing options.
48

Pasting from Word/ Excel
You can compose in MSWord or Excel and paste
into WordPress, but:
There can be issues with formatting
 Word adds a lot of junk to it’s HTML.
Use the paste as text mode.
You may loose formatting, tables, lists etc
 do final layout/formatting in WordPress.
49

Editing pages
Editing
pages
is almost
the same
as for a
post.
Some
options
on right
side are
different.
50

Pages can have hierarchy
 To change hierarchy, you change the page parent.
 Can be important for URL structure. (permalinks)
51

The "All posts" or "All pages" list
Displays a list of your pages or posts.
Pages listing shows hierarchy.
52

The "All posts" or "All pages" list
Posts listing shows categories, tags and
comment count columns.
53

Change the number of items shown
54

Quick editor
The "Quick Editor" is a feature on the listing
pages.
55

Quick editor
You can change many of the page (and posts)
settings using the "Quick Editor".
 Can be much faster!
56

WordPress settings panel
57

Site title and tagline
How do we change the site title or tagline?
58

General settings
Change the title and tagline
Settings -> General page.
59

General settings
There are quite a few other important options
here.
60

Settings - Font Page Display
Reading Settings have a section for setting the
front page display: "Home" page.
61

Permalinks
Permalinks settings change the way the URL is
displayed.
Default sample page permalink:
 http://your-domain/?page_id=2
Default child page permalink:
 http:// your-domain/?page_id=36
Default post permalink:
 http:// your-domain/?p=4
Not very “pretty” or readable, Google does not
like them either!
No hierarchy for child page.
62

Settings - permalinks
 Here, month and name is set - common choice.
 There is also a custom box where you can edit the
permalink
if you need
something
unusual.
63

The URL’s with permalinks
The sample page is now:
 http://your-domain/sample-page
The child page is now:
 http://your-domain/sample-page/sample-child-page
 It shows the hierarchy (if a page parent was set)
Our post is now:
 http://your-domain/2012/05/hello-wpottawa
64

Permalink also shows in editor
You can override permalinks – use edit
If you change your title, you should consider
updating the permalink.
Note: if you change the permalink, you may want
to add a redirect for the old url.
65

Menus
66

Menus
For some themes, default menus are created
from the page list.
Hierarchy and order are taken from the page list,
with home added at the start.
67

The menu system - the easier way to menus
Under Appearance there is a Menus tab
Need admin privileges.
Need a theme support.
68

Build the menu
69

Rearrange the menu
Drag and drop items to change order and hierarchy
70

Setting the theme location
There may be several choices for menu location.
71

The new menu
The new menu
Independent of the page order and hierarchy.
Dropdown for the child page
72

Widgets
73

Widgets
Widgets are tools
or content items
that you can add,
arrange, and
remove from the
widgetized areas
of your theme.
The most common
widgetized area is
the sidebars.
74

Widgets can be anywhere a theme defines them
Widgets started in sidebars…
Now themes can have many areas for them:
 Sidebars
 Headers, footers
 Special page spaces.
75

Widget locations
Twenty Ten had 6
widget areas.
4 in the footer
2 in the
sidebar
Empty areas
are usually
hidden
76

Managing widgets
The Widgets admin is under the Appearance menu.
77

Add a widget
Add a social links widget to the sidebar.
A plugin (Follow Us Badges) was added to add
this widget to WordPress.
78

Added social link widget
79

Resources
80

wordpress.org
wordpress.org, the official source for all things
WordPress. (wordpress.org)
Theme repository – get free and commercial
themes.
Plugin repository – get plugins.
Support forums – get help.
The “codex”. (documentation)
Also WordPress TV: WordCamp and other videos
wordpress.tv
81

WordPress Help
WordPress icon on top left of the admin bar has
several links to useful WordPress help
resources.
82

wordpress.org – theme repository
1000’s of
themes
available.
Themes
are
reviewed
before
release.
83

wordpress.org – plugin repository
1000’s of
plugins.
Currently
plugins
are not
reviewed.
84

wordpress.org – forums
The “support” forums.
 Seek help with WordPress, theme and plugin issues.
85

wordpress.org – documentation
The “codex”: from basics to code documentation.
86

Other help
Google WordPress + some topic
Caution, many articles are out of date and may
no longer be relevant.
Books:
Lots of books, make sure it’s current.
 Print editions are usually not current.
Tao of WordPress is a great ebook for beginners.
Digging into WordPress is a also great ebook,
but may not be for absolute beginners.
87

Other help
WordCamps:
 “WordCamp is a conference that focuses on
everything WordPress.” – WordCamp Central
Montreal: Aug 12-13, 2017.
Toronto: Sept 30 – Oct 1, 2017.
All sorts of WordCamps world wide:
central.wordcamp.org
WordPress Meetup Groups:
 Ottawa, Montreal, Toronto, and other cities.
88

Plugins
89

Plugins Page
The plugins page shows plugins installed on the site.
Can't add plugins on wordpress.com.
 You can only enable/disable which ones you are
using, and change settings.
90

Adding plugins
Search wordpress.org for plugins based on
keywords, or name.
Example: TinyMCEAdvanced
91

Add plugins search results
The search results:
Plugins matching the keywords are shown.
Descriptions, ratings, last updates and
compatibility are shown for each plugin.
92

Install
Install TinyMCEadvanced.
A good idea to back up the site first!
Click the install.
93

Install status
Ascreen showing the install status will appear.
Some plugins will auto-activate, most you need
to activate.
94

Plugin listing
TinyMCEAdvanced installed and active
95

TinyMCEsettings
Anew menu item has been created for the
settings page for TinyMCEadvanced.
96

Plugin Settings
Plugins usually (and are supposed to) create option
pages under the Settings menu item.
Some plugins create menu items in almost any
other section.
Tools, Dashboard, and sometimes Plugins are
common spots for hiding settings pages.
97

Updating plugins
ALWAYSBACKUPFIRST!!!
Updates are easy, just click the link.
Updates can break your site, back-ups make it
easy to undo.
98

Update plugins in the WordPress updater
Can update plugins using the WordPress updater
 Again BACKUP FIRST!
99

Finding/ Choosing plugins
Choose plugins with:
good download volume.
recent updates.
responses in the forums.
high ratings.
Where do you find this information?
Some of it was on the plugin search listing.
100

Details view
The details view gives more of it.
101

Details display
Details view
Some more plugin
info, but still not
everything - use
the link to the
repository
for full listing.
102

Choosing plugins
All of the
information is in the
plugin repository.
Look at the last
updated date.
Is it popular? (active
installs)
User ratings?
Is the support forum
active?
103

A good plugin
Awell respected
and rated and
popular plugin.
Note there are
still issues…
 Look at over-all,
not absolutes
when evaluating.
104

Suggested plugins
Backup:
Good ones automate off-server backups.
Google Analytics:
Add options like excluding admin traffic from
stats.
Some have dashboard summaries of stats.
Some add advanced tracking and tagging
features.
Security:
Block brute force login, and other attacks.
Scan for malware.
105

Beware of unknown plugins
There are many plugins not on the wordpress.org
repository.
Many of those plugins are very good.
 Most good plugins not on the repository are
commercial ($).
Many are not good, and may even contain
malware.
 blog.sucuri.net/2012/02/new-wordpress-toolspack-
plugin.html
* plugins on the repository are not guaranteed to be
clean, but malware is usually spotted quickly by users.
106

Plugin final notes
Remove all unused plugins from your site, they
can be a security issue.
 The Timthumb vulnerability did not need to have the
plugin be active in order to be exploited.
Keep plugins, even inactive ones up to date!
Install a backup plugin AND USEIT!!!
107

Themes
108

Themes
Atheme defines the look and feel of your site.
Sets the graphics, colors.
Sets the widget locations.
Defines column layout.
Can be changed relatively easily.
 Beware lock-in.
Cannot add themes when using wordpress.com.
 You can:
Choose one of the installed themes.
Change settings.
109

Theme: Twenty Sixteen
110

Theme: Twenty Fifteen
111

Theme: Twenty Fourteen
112

Theme: Travel Blogger (no longer available)
Note that the
while the site
looks different,
the content and
widgets are the
same.
113

Theme driven front page
Some themes have
very sophisticated
home pages.
Neither posts or
pages are
shown.
All content is in
options for the
theme.
114

Adding/ managing themes
The theme admin page: (Appearance -> Themes)
Click the add new button to add themes.
115

Add Themes Page: Featured themes.
116

Finding a new theme: Feature filter
Select some search parameters.
Searches all themes on wordpress.org
117

Results
118

Keyword search results
119

Details view
Gives some
information
about the
theme, and
a preview of
what it looks
like.
120

Details view
Many themes
now need
setup to look
as expected,
and don't
work out of
the box.
121

Theme repository
As with plugins:
You get more
detail on
wordpress.org.
But there is still
less info than for
plugins.
122

Choosing themes is less clear than plugins.
You need it:
 to look good for you.
 have the features you want.
 have support:
check the forums.
check the last update date.
 be good/reliable:
check the ratings.
123

Install a theme
124

Installing the theme
Success
125

Live Preview
Live Preview
See the
theme
before
activating
on site.
Change
settings for
theme.
126

Theme Options
Customize option on the current theme
Goes to same place as "Live Preview".
Change theme, and other settings.
127

Theme Customizer
128

Themes not on wordpress.org
Many good commercial themes are not on
wordpress.org.
 iThemes
 WooThemes
 Studiopress
 Elegant Themes
 Freelance themes on Theme Forest
 and more….
Beware free themes not from wordpress.org
 Google “Free WordPress Themes” and you are
guaranteed to find yourself some malware.
129

Upload theme
For a theme that is not on wordpress.org
Use the upload theme button.
Upload a .zip of the theme to be installed.
130

Final notes for themes
If you need to modify a theme's code:
You should use a child theme to modify themes.
If you alter the theme files without a child
theme:
 You will loose your changes if the theme is updated.
 Can't update to get security fixes.
Not too hard to create a child theme:
 Write your own from examples.
codex.wordpress.org/Child_Themes
OR
 Add a plugin - there are several on wordpress.org.
131

Users
132

User levels
Standard WordPress User Levels
Least to most powerful:
Subscriber
 Can not edit or change anything
 Comment only
Contributor
Author
Editor
Admin - can do anything!
Super Admin – Networks (multisite) only
133

User roles
Subscriber
Can only manage their profile and comment.
Contributor
Can write and manage their posts but not
publish them + all Subscriber capabilities.
Author
Can publish and manage their own posts + all
Contributor capabilities.
134

User roles
Editor
Can publish and manage posts and pages as
well as manage other users' posts, etc. + all
Author capabilities.
Administrator
Access to all the administration features + all
Editor capabilities.
Super Admin
Access to the blog network administration
features controlling the entire network + all
Administrator capabilities.
135

User security issues
Remove any user called "admin" if you have one.
Subject to brute force attacks
Do not use your administrator account on public
wifi if possible.
Use a lower level account
136

Maintenance
137

Maintenance
Keep your site up to date
WordPress, Plugins and Themes
 All have bug updates, security patches and new
feature releases.
 Not keeping up to date increases the risk of hacking
substantially.
 Before you update anything – make a backup!
Can’t emphasize this enough.
Often neglected.
138

The End
139

Contact
Rick Radko
email: wpinfo@r3df.com
twitter: @r3designforge
Miriam Goldman
email: sensei.miriam@gmail.com
twitter: @mirigoldman
Slides at:
slideshare.net/ r3df
140

Introduction to WordPress for Beginners

More Related Content

What's hot (20)

Similar to Introduction to WordPress for Beginners (20)

More from R-Cubed Design Forge (20)

Recently uploaded (20)

Introduction to WordPress for Beginners