introduction to wordpress 2016

www.lumostech.training

@lumos_tech

Rick Radko

Jasmine Vesque@r3designforg

e@jasminevesqu

e

Introduction to WordPress

June 16th, 2016

© 2016 www.lumostech.training

2

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

We are:

http://jasminevesque.com/

http://2013.ottawa.wordcamp.org/



http://wpottawa.org/



http://lumostech.training/

http://www.slideshare.net/lumostech



3

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

TermsFeaturesConceptsVisual aspects

Learning about WordPress


4

1. About WordPress2. WordPress site orientation3. Posts and pages4. The settings panel5. Menus

Break

Contents - Part 1


5

6. Widgets7. Resources8. Plugins9. Themes10. Users11. Maintenance

Contents - Part 2


6

About WordPress


7

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.

What is WordPress?


8

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


9

WordPress:The first version of WordPress was released

May 27, 2003Is 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.

What is WordPress continued…


10

Sites using WordPress – wordpress.org showcase


11

3 different WordPress versions:Hosted on wordpress.com

1. Single siteOften 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.

WordPress versions


12

Wordpress.com is a service (by Automattic)They provide:

WordPress and hostingWordPress 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 customizingLimited ability to customize

Many things covered in this presentation you can’t do on wordpress.com – like add plugins

wordpress.com

http://automattic.com/


13

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

wordpress.org


14

Costs! - Some things that may not be free:A web host (sever)A domain (your website address)Some WordPress / Web knowledgeAdd-on themes and plugins

Limitations: None!

wordpress.org - Is it really free?


15

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)

wordpress.org customizing


16

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.

wordpress.org customizing


17

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.

wordpress.org networks or multisite


18

Install WordPress


19

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.

Installing WordPress

http://codex.wordpress.org/Installing_WordPress

http://codex.wordpress.org/Installing_WordPress


20

WordPress site orientation

464646


21

The "public" part of the site that your site visitors see.

Default: Twenty Sixteen theme.

WordPress front-endWordPress has 2 interfaces for users: the front-end


22

WordPress back-end or “dashboard”This is private space where you manage the

site.

To see the dashboard:login at:

<your-domain>/login

WordPress back-end, admin or “dashboard”


23

After logging in you will arrive at the dashboard.On a brand new site, you will see the

welcome box.

Welcome message


24

Many pages have options for what is shown.Click on the “screen options” tab (upper

right).

Screen options tab


25

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.

Screen options


26

Beside the screen options tab there is a “help” tab on every page – again it is context sensitive.

Help tab


27

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.

The help tab


28

On the left side of the admin screen is the main navigation menu:Access all your

content.Control

WordPress settings.

Main navigation


29

The admin tool bar:The tool bar


30

Front end tool barVery similar to admin tool bar, some items

are the same.Only shows if you are logged in.

The tool bar


31

Posts and pages


32

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.

Posts and pages


33

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.

Posts


34

Post display


35

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

Single post display


36

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/

Pages


37

Only one way to display the page.

May have sidebar.

No date, tags or category information on page.

May have comments section.

Page display


38

In the dashboard -> select “Add New” from the Posts menu item.

Creating a post (or a page) is really easy


39

Create a new post: 1, 2, 3!


40

A new post!


41

We can also:Add categories and tags to the posts.

Other post related items


42

We can also change publishing options:More post related items (and pages too)

Published/Review/Draft

Publishing dates and future publishing.

Visibility and passwords.


43

We can also:Add images and other media including

videos.Click the add media button to upload

imagesAs of 3.9 you can simply drag an image onto

the editor area and the image uploader will launch.

Pictures and videos


44

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

skipped.

Insert Media


45

The image uploader has a few options:Add or

change the title, alt text and captions.

Change what it links to.

Change theimage sizeand the alignment.

Image options


46

Uploaded image is now in editorThe added image


47

Go to YouTube: Get the share link.

Add a YouTube video


48

Paste the share link in your post or pageand the video should automagically

appear!

Add a YouTube video


49

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.


50

Use TEXT view to:Embed HTML code like YouTube snippets.Change the HTML directly, sometimes

needed to get things just right.

TEXT view


51

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

The Toolbar Toggle


52

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.

Pasting from Word/Excel


53

Editingpagesis almostthe same as for a post.

Someoptions on rightside aredifferent.

Editing pages


54

To change hierarchy, you change the page parent.

Can be important for URL structure. (permalinks)

Pages can have hierarchy


55

Displays a list of your pages or posts.Pages listing shows hierarchy.

The "All posts" or "All pages" list


56

Posts listing shows categories, tags and comment count columns.

The "All posts" or "All pages" list


57

Change the number of items shown


58

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

Quick editor


59

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

Quick editor


60

WordPress settings panel


61

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


62

Change the title and taglineSettings -> General page.

General settings


63

There are quite a few other important options here.

General settings


Reading Settings have a section for setting the front page display: "Home" page.

64

Settings - Font Page Display


65

Permalinks settings change the way the URL is displayed.Default sample page permalink:

http://your-domain/?page_id=2Default child page permalink:

http:// your-domain/?page_id=36Default post permalink:

http:// your-domain/?p=4

Not very “pretty” or readable, Google does not like them either! No hierarchy for child page.

Permalinks


66

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.

Settings - permalinks


67

The sample page is now:http://your-domain/sample-page

The child page is now:http://your-domain/sample-page/sample-child-

pageIt shows the hierarchy (if a page parent was

set)

Our post is now:http://your-domain/2012/05/hello-wpottawa

The URL’s with permalinks


68

You can override permalinks – use editIf 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.

Permalink also shows in editor


69

Menus


70

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.

Menus


71

Under Appearance there is a Menus tabNeed admin privileges.Need a theme support.

The menu system - the easier way to menus


72

Build the menu


73

Drag and drop items to change order and hierarchy

Rearrange the menu


74

There may be several choices for menu location.

Setting the theme location


75

The new menuIndependent of the page order and

hierarchy.Dropdown for the child page

The new menu


76

Widgets


77

Widgets are tools or content items that you can add, arrange, and remove from the widgetized areas of your theme.

The most commonwidgetized area is the sidebars.

Widgets


78

Widgets started in sidebars…Now themes can have many areas for

them:SidebarsHeaders, footersSpecial page spaces.

Widgets can be anywhere a theme defines them


79

Twenty Ten had 6 widget areas.4 in the

footer2 in the

sidebar Empty areas

are usually hidden

Widget locations


80

The Widgets admin is under the Appearance menu.

Managing widgets


81

Add a social links widget to the sidebar.A plugin (Follow Us Badges) was added to

add this widget to WordPress.

Add a widget


82

Added social link widget


83

Resources


84

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 videoswordpress.tv

wordpress.org

http://wordpress.org/

http://wordpress.tv/


85

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

WordPress Help


86

1000’s of themes available.

Themes arereviewed before release.

wordpress.org – theme repository


87

1000’s of plugins.

Currentlyplugins are not reviewed.

wordpress.org – plugin repository


88

The “codex”: from basics to code documentation.

wordpress.org – documentation


89

The “support” forums.Seek help with WordPress, theme and plugin

issues.

wordpress.org – forums


90

Google WordPress + some topicCaution, 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.

Other help

https://wp-tao.com/

http://digwp.com/


91

WordCamps:“WordCamp is a conference that focuses on

everything WordPress.” – WordCamp CentralMontreal: July 23-24, 2016.Toronto: Aug 6-7, 2016.All sorts of WordCamps world wide:

central.wordcamp.orgWordPress Meetup Groups:

Ottawa, Montreal, Toronto, and other cities.

Other help

http://wcmtl.org/

http://2016.toronto.wordcamp.org/

http://central.wordcamp.org/

http://www.meetup.com/The-Ottawa-WordPress-Group/

http://wpmtl.org/

http://www.meetup.com/WPToronto/


92

Plugins


93

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.

Plugins Page


94

Search wordpress.org for plugins based on keywords, or name.

Example: TinyMCE Advanced

Adding plugins


95

The search results:Plugins matching the keywords are shown.Descriptions, ratings, last updates and

compatibility are shown for each plugin.

Add plugins search results


96

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

Install


97

A screen showing the install status will appear.Some plugins will auto-activate, most you

need to activate.

Install status


98

TinyMCE Advanced installed and activePlugin listing


99

A new menu item has been created for the settings page for TinyMCE advanced.

TinyMCE settings


100

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.

Plugin Settings


101

ALWAYS BACKUP FIRST!!!Updates are easy, just click the link.Updates can break your site, back-ups

make it easy to undo.

Updating plugins


102

Can update plugins using the WordPress updater Again BACKUP FIRST!

Update plugins in the WordPress updater


103

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.

Finding/Choosing plugins


104

The details view gives more of it.Details view


105

Details viewSome more plugin

info, but still noteverything - use thelink to the repositoryfor full listing.

Details display


106

All of the information is in the plugin repository.

Look at the last updated date.

Check compatibility.

Is it popular? (downloads)

Choosing plugins


107

Signs there may be problemsA plugin with issues

No support – 5 weeks no answer.

There will always be some broken reports, but more broken than works is not good.


108

A well respected and rated and popular plugin.

Note there are still issues…Look at over-

all, not absolutes when evaluating.

A good plugin


109

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.

Suggested plugins


110

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-wordpres

s-toolspack-plugin.html

*plugins on the repository are not guaranteed to be clean, but malware is usually spotted quickly by users

Beware of unknown plugins

http://blog.sucuri.net/2012/02/new-wordpress-toolspack-plugin.html

http://blog.sucuri.net/2012/02/new-wordpress-toolspack-plugin.html


111

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!!!

Plugin final notes


112

Themes


113

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.

Themes


114

Theme: Twenty Sixteen


115

Theme: Twenty Fifteen


116

Theme: Twenty Fourteen


117

Note that the while the site looks different, the content and widgets are the same.

Theme: Travel Blogger (no longer available)


118

Some themes have very sophisticated home pages.Neither posts

or pages are shown.

All content is in options for the theme.

Theme driven front page


119

The theme admin page: (Appearance -> Themes)Click the add new button to add themes.

Adding/managing themes


120

Add Themes Page: Featured themes.Adding/managing themes


121

Finding a new theme: Feature filterSelect some search parameters.Searches all themes on wordpress.org



122

Results


123

Keyword search resultsAdding/managing themes


124

Gives someinformation about the theme, and a preview of what it looks like.

Details view


125

Many themesnow need setup to look as expected, and don't work out of the box.

Details view


126

As with plugins:You get more

detail on wordpress.org.

But there is still less info than for plugins.

Theme repository


127

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.



128

Install a themeAdding/managing themes


129

SuccessInstalling the theme


130

Live PreviewSee the

theme before activating on site.

Change settings for theme.

Live Preview


131

Customize option on the current themeGoes to same place as "Live Preview".Change theme, and other settings.

Theme Options


132

Theme Customizer


133

Many good commercial themes are not on wordpress.org.

iThemesWooThemesStudiopressElegant ThemesFreelance themes on Theme Forestand more….

Beware free themes not from wordpress.orgGoogle “Free WordPress Themes” and you

are guaranteed to find yourself some malware.

Themes not on wordpress.org


134

For a theme that is not on wordpress.orgUse the upload theme button.Upload a .zip of the theme to be installed.

Upload theme


135

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_ThemesOR

Add a plugin - there are several on wordpress.org.

Final notes for themes

https://codex.wordpress.org/Child_Themes

https://codex.wordpress.org/Child_Themes


136

Users


137

Standard WordPress User LevelsLeast to most powerful:Subscriber

Can not edit or change anythingComment only

ContributorAuthorEditorAdmin - can do anything!Super Admin – Networks (multisite) only

User levels


138

Subscriber Can only manage their profile and

comment.Contributor Can write and manage their posts but not

publish them + all Subscriber capabilities.AuthorCan publish and manage their own posts +

all Contributor capabilities.

User roles


139

EditorCan publish and manage posts and pages

as well as manage other users' posts, etc. + all Author capabilities.

AdministratorAccess to all the administration features +

all Editor capabilities.Super AdminAccess to the blog network administration

features controlling the entire network + all Administrator capabilities.

User roles


140

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

User security issues


141

Maintenance


142

Keep your site up to dateWordPress, 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.

Maintenance


143

The End


144

Rick Radkoemail: [email protected]: @r3designforge

Jasmine Vesqueemail: [email protected]: @jasmineVesque

Slides at:www.slideshare.net/lumostech

Contact


introduction to wordpress 2016

Technology