Introduction to WordPress 2016

www.lumostech.training
@lumos_tech
Rick Radko Jasmine Vesque
@r3designforge @jasminevesque
Introduction to WordPress
June 16th, 2016

© 2016 www.lumostech.training
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.
Jasmine Vesque – Digital & Design Officer, MI
 Digital marketer, teacher, speaker, web & graphic designer.
 Web evangelist helping people share their stories and ideas
online since 2009.
We're:
 Co-organizers of: WordCamp Ottawa 2013, 2014, 2016.
 Co-organizers of: The Ottawa WordPress Group.
 LumosTech - www.lumostech.training
Slides are posted at: slideshare.net/lumostech
1
We are:

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
Learning about WordPress

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

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

© 2016 www.lumostech.training 5
About WordPress

WordPress:
 Is a dynamic Content Management System. (CMS)
 A tool to help you build a website.
Like Google Docs, Microsoft Word, OpenOffice,
LibreOffice or Pages that 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
What is WordPress?

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

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:
25% of the worlds websites.
60% of CMS based websites.
8
What is WordPress continued…

Sites using WordPress – wordpress.org showcase

3 different WordPress versions:
 Hosted on wordpress.com
1. Single site
Often referred to as “.com” WordPress.
 Self Hosted from wordpress.org
2. Single site (default version)
3. Network or Multisite
 We need to be aware of which one we are talking
about, reading about or using, there are some
differences.
10
WordPress versions

Wordpress.com is a service (by Automattic)
 They provide:
 WordPress and hosting
WordPress needs a web server, 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
11
wordpress.com

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

 Costs! - Some things that may not be free:
 A web host (sever)
 A domain (your website address)
 Some WordPress / Web knowledge
 Add-on themes and plugins
 Limitations: None!
13
wordpress.org - Is it really free?

 You can add plugins to make your site:
 Multilingual. (numerous techniques & plugins)
 a social site like Facebook. (BuddyPress)
 You can add plugins to add:
 Facebook, Twitter, YouTube, Flickr connections.
 a forum. (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)
14
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.
 May need to hire a WordPress expert.
15
wordpress.org customizing

The third version of WordPress is multisite
(network).
 Was once known as WPMU, a separate program.
 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.
16
wordpress.org networks or multisite

Install 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.
 Some of what we do will work on wordpress.com
but many things may look/be different.
 Things like installing plugins and themes will not
work.
18
Installing WordPress

WordPress site orientation
464646

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

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

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

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

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.
24
Screen options

Beside the screen options tab there is a “help” tab
on every page – again it is context sensitive.
25
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.
26
The help tab

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

The admin tool bar:
28
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.
29
The tool bar

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.
31
Posts and pages

 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.
32
Posts

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
34
Single post display

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/
35
Pages

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

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

Create a new post: 1, 2, 3!

A new post!

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

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

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

 Just drag a file on to the page.
 If you dragged an image onto the editor, this step is skipped.
43
Insert Media

The image uploader 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.
44
Image options

Uploaded image is now in editor
45
The added image

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

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

A post with videos and images
 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.

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

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

You can compose in MS Word 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.
51
Pasting from Word/Excel

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

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

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

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

Change the number of items shown

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

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

WordPress settings panel

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

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

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

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

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.
64
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.
65
Settings - 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
66
The URL’s with permalinks

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.
67
Permalink also shows in editor

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.
69
Menus

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

Build the menu

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

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

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

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.
76
Widgets

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

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

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

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

Added social link widget

Resources

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

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

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

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

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

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

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. Lots of articles
on their blog.
89
Other help

WordCamps:
 “WordCamp is a conference that focuses on
everything WordPress.” – WordCamp Central
 Montreal: July 23-24, 2016.
 Toronto: Aug 6-7, 2016.
 All sorts of WordCamps world wide:
central.wordcamp.org
 WordPress Meetup Groups:
 Ottawa, Montreal, Toronto, and other cities.
90
Other help

Plugins

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

 Search wordpress.org for plugins based on
keywords, or name.
 Example: TinyMCE Advanced
93
Adding plugins

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

Install TinyMCE advanced.
 A good idea to back up the site first!
 Click the install.
95
Install

A screen showing the install status will appear.
 Some plugins will auto-activate, most you need to
activate.
96
Install status

TinyMCE Advanced installed and active
97
Plugin listing

 A new menu item has been created for the settings
page for TinyMCE advanced.
98
TinyMCE 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.
99
Plugin Settings

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

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

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

The details view gives more of it.
103
Details view

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

 All of the information
is in the plugin
repository.
 Look at the last
updated date.
 Check compatibility.
 Is it popular?
(downloads)
105
Choosing plugins

Signs there may be problems
106
A plugin with issues
 No support – 5 weeks no
answer.
 There will always be some
broken reports, but more
broken than works is not
good.

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

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.
108
Suggested 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.
 http://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
109
Beware of unknown plugins

 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 USE IT!!!
110
Plugin final notes

Themes

A theme 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.
112
Themes

Theme: Twenty Sixteen

Theme: Twenty Fifteen

Theme: Twenty Fourteen

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

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

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

Add Themes Page: Featured themes.
119

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

Results

Keyword search results
122

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

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

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

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

Install a theme
127

Success
128
Installing the theme

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

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

Theme Customizer

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.
132
Themes not on wordpress.org

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

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.
134
Final notes for themes

Users

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
136
User levels

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.
137
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.
138
User roles

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
139
User security issues

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.
141
Maintenance

The End

Rick Radko
 email: rick@lumostech.ca
 twitter: @r3designforge
Jasmine Vesque
 email: jasmine@lumostech.ca
 twitter: @jasmineVesque
Slides at:
 www.slideshare.net/lumostech
143
Contact

Introduction to WordPress 2016

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Introduction to WordPress 2016

Similar to Introduction to WordPress 2016 (20)

Recently uploaded

Recently uploaded (20)

Introduction to WordPress 2016