Introduction to WordPress

Introduction to WordPress

Rick Radko
r3df.com

WordCamp, Ottawa
April 25th, 2013

A little bit about me
Rick Radko – R-Cubed Design Forge
 Software, web and app designer/developer.
 Creating custom web sites since 1996.
 Co-organizer of: WordCamp Ottawa 2013.
 Co-organizer of: The Ottawa WordPress Group.

 If you have questions or need help, contact me
at: wpinfo@r3df.com.
Slides are posted at:
 http://www.slideshare.net/r3df
© 2012 Rick Radko, r3df.com

1

Learning about WordPress
WordPress is BIG, lots of features
 Take small bites!
 and keep chewing…

 Ask questions.
 Everyone was new to WordPress at one time.


2

Contents - Part 1
1.
2.
3.
4.
5.

About WordPress
The dashboard
Posts and pages
The settings panel
Menus


3

Contents - Part 2
6. Widgets
7. Resources
8. Plugins
9. Themes
10. Maintenance & SPAM


4

About WordPress


5

What is WordPress?
WordPress:
 Is a dynamic content management system. (CMS)
 A tool to help you build a website.
 Like Microsoft Word, Open Office or Pages help you
create documents.

 Creates web pages (HTML) dynamically
 For basic usage it requires minimal knowledge of
web programming or markup languages (HTML,
PHP, JavaScript etc.).
 Allows users to create website content easily
 WYSIWYG editor.

6

WordPress is WYSIWYG
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

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.
 Needs a web server with PHP and MySQL to run.
 Hosting service for public sites.
 Local server to run it on your pc/laptop.


8

Sites using WordPress – wordpress.org showcase


9

007.com
007.com is on
WordPress


10

Is it really free?
WordPress is free:
 The core WordPress software is free:
 As in open source.
 Freedom to use it as you want, even to change it.

 As in $$$.
 But that does not necessarily mean a free website.


11

WordPress versions
3 different WordPress’s:
 WordPress.com
 Often referred to as “.com” WordPress.
 Note: This not at all related to using or not using
“.com” domains for your website.

 WordPress.org (Self hosted)
 Regular
 Network or Multisite

Need to be aware of which one we are talking
about, reading about or using, there are
differences.

12

WordPress.com
WordPress.com is a service (by Automattic)
 They provide WordPress AND hosting
 Free for basic site: 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


13

WordPress.org
 Home of the open source version of WordPress.
 Free! – Just download it
 Related things that may cost:
 A web host (self-hosted)
 A domain
 Some WordPress / Web knowledge

 Limitations:
 None!

14

WordPress.org customizing
 Can add plugins to make your site:
 multilingual. - Numerous techniques & plugins.
 a social site like Facebook. (BuddyPress)

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

15

WordPress.org customizing
Caveat:
 The more extensive the customization, the more
WordPress knowledge that is required.
 Many free resources to help:
 WordPress.org (we’ll talk about today)
 Other online resources.

 Some low cost resources:
 This and other WordPress meet-ups.
 WordCamps.
 Books.

 May need to hire a WordPress expert.

16

WordPress.org networks or multisite
The third version of WordPress is multisite
(network).
 Was once known as WPMU, a separate program.
 Allows multiple websites on one install.
 It need not be obvious to users that it is one install.

 Limited version of what WordPress.com runs.
 Needs some knowledge to set-up.


17

Install WordPress


18

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.
 http://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.


19

The dashboard - admin


20

WordPress front-end
WordPress has 2 interfaces for users:
Front-end
 The part of site
that your site
visitors typically
see.
 The public side
of your site.


21

WordPress back-end, admin or “dashboard”
WordPress back-end or “dashboard”
 Where you manage the site.


22

Logging in
How do we get to the dashboard?
 login at: your-domain/wp-login.php


23

Welcome message
After logging in you will arrive at the dashboard.
 This is the dashboard on a brand new site.


24

The dashboard
The dashboard with the welcome box dismissed.


25

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


26

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.

27

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


28

The help tab
The help tab items on the left side:
 Have general WordPress help.
 May have added help from plugins and/or themes.

Links to WordPress on the right.

29

The tool bar
The admin tool bar:
 Context sensitive menu at the top of the screen.
 Drop down menus for some items.


30

The tool bar
Front end tool bar
 Very similar to admin tool bar
 Only shows if you are logged in


31

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


32

Posts and pages


33

Posts and pages
Posts and pages are the basic content holders for
a WordPress site.
 Posts:
 Collection of static content blocks.
 Associated with a date:
 URL: your-domain/2008/11/30/post-title.

 Only posts in RSS feed.
 Posts have categories and tags.


34

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.


35

Post display


36

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

37

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/


38

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


39

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


40

Create a new post: 1, 2, 3!


41

A new post!


42

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


43

More post related items
We can also:
 Change publishing options:
 Published/Review/Draft
 Visibility and passwords.
 Publishing dates
and future publishing.


44

Even more post related items (and pages too)
We can also:
 Added images and other media including videos.
 3.5 has a big Add Media button


45

Insert Media
New drag and drop media up-loader
 Just drag a file on to the page.


46

Image options
The image uploader has a few options and lets
you change title, alt text and add captions.


47

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


48

Add a YouTube video
Paste share link in your content
 Update your post.


49

A post with videos and images


50

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


51

The kitchen sink
“kitchen sink” button shows second row for editor:
 A few more editing options.


52

Editor size
Editor Size - Used to be a Writing Setting
 I usually find the default editor size is to small and
expand it.


53

Pasting from Word/Excel
You can edit 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 from Word button.
 May loose formatting, tables, lists etc – do final
layout/formatting in WordPress.


54

Pages
Pages
 Editing pages is almost the same as a post.


55

The "All posts" or "All pages" list
Displays a list of your pages or posts.
 Pages have hierarchy:
 Important for URL structure. (permalinks)
 Adds dropdown to menus.

 Posts have category and tag columns.


56

WordPress settings panel


57

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


58

WordPress - general settings
Change the tagline in the Settings -> General page
 There are quite a few important options here.


59

Permalinks
Permalink 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.

60

Settings - permalinks
Several options:
 For the example: month and name is set.
 There is also a custom box where you can edit the
permalink if you need something unusual.


61

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-childpage
 It shows the hierarchy

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

62

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


63

Menus


64

Menus


65

Menus
 The menus on the test site right now are created
from the page list.
 WordPress takes hierarchy and order from the
page list, with home added at the start.


66

Menus
Menus
 if we add “Another Page”…


67

Updated menu


68

Ordering menus
 Changing the menu order requires numerically
ordering the pages at each level.
 To change hierarchy, you change the page parent.
 You can edit these settings in the page editor.


69

Quick editor
 But, the quick editor is faster for reorganizing
pages.
 The quick editor is an option on the page or post
listing.


70

Quick editor
 Note that you can change many of the page (and
posts) settings here.


71

The nav menu system
Under Appearance there is a Menus tab
 Need admin privileges.
 Need a theme the supports nav menus.


72

Create a new nav menu
Create a new menu


73

Add menu items


74

New menu items


75

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


76

Setting the theme location
Some themes may have many locations for
placing menus


77

The new menu
A completely new menu, independent of the page
order and hierarchy.


78

Widgets


79

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


80

Widgets can be anywhere a theme defines them
Originally widgets were only in sidebars, but now
themes can have many areas for them including
headers, footers, sidebars and special front page
spaces.


81

Managing widgets
The Widgets admin is in the Appearance menu


82

Managing widgets
Drag and drop widgets into or out of the Widget
areas.
 Lets add a calendar.


83

Managing widgets
Remove the meta widget.
 It’s not really needed and takes up sidebar space.


84

The revised sidebar


85

A twitter widget
A twitter widget added to the sidebar.
 A plugin was added to get this widget.


86

Resources


87

WordPress.org
WordPress.org, the official source for all things
WordPress. (http://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
 http://wordpress.tv/

88

WordPress.org
 WordPress icon menu on top left of the admin bar
will take you there.


89

WordPress.org – theme repository
Search for themes.
 1000’s of themes available.
 Themes are reviewed before release.


90

WordPress.org – plugin repository
Search for plugins.
 1000’s of plugins.
 Currently plugins are not reviewed.


91

WordPress.org – documentation
The “codex”.
 Everything from the basics to code documentation.


92

WordPress.org – forums
The “support” forums.
 Can seek help with WordPress issues, including
themes and plugins from the repositories.


93

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
 Digging into WordPress is a great book, covers
WordPress in depth, but may not be for absolute
beginners. Lots of articles on their blog.


94

Other help
WordCamps:
“WordCamp is a conference that focuses on
everything WordPress.” – WordCamp Central

 Montreal: June 29/30.
 Toronto: In the fall, announcement on Sat.
 All sorts of WordCamps world wide:
http://central.wordcamp.org/


95

Plugins


96

Adding and managing plugins
 Cannot add plugins on WordPress.com.
 You can enable/disable which ones you are using,
and change settings.

 Go to Plugins in the main nav menu.


97

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


98

Plugin update status screen


99

Update plugins in the WordPress updater
Can also update plugins using the WordPress
updater – BACKUP FIRST!


100

Adding plugins
Add plugins from the Add New item under the
Plugins menu item.
 Search for the plugin.
 Can search for plugins based on keywords, or
name.


101

Add plugins listing
The search results:
 Several similar plugins shown.
 Descriptions, ratings and version are shown.


102

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


103

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


104

Plugin listing
TinyMCE Advanced installed and active


105

TinyMCE settings
The Settings area
 A new menu item has been created for the
settings page for TinyMCE advanced.


106

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.


107

Finding/Choosing plugins
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.

108

The details view give some of it.


109

Details view
 Some more plugin info, but still not all


110

 All of it is on the
plugin repository.
 Look at the last
updated date.
 Check
compatibility.
 Is it popular?
(downloads)


111

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


112

Google Analytics
 One of the top rated
Google analytics
plugins.
 Note there are still
issues…
 Look at over-all, not
absolutes when
evaluating.


113

Google analytics plugin
Using a Google Analytics plugin is highly
recommended:
 Get features like excluding admin traffic from
stats.
 Some have dashboard stats summaries.
 Some add advanced tracking and tagging
features.


114

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. (not
allowed on the repository)
 Many are not good, and may even contain
malware.
 http://blog.sucuri.net/2012/02/new-wordpresstoolspack-plugin.html
*plugins on the repository are not guaranteed to be
clean, but malware is usually spotted quickly by users

115

Plugin final notes
 Remove unused plugins, 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!!!


116

Themes


117

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 on WordPress.com.
 You can enable which one you want to use, and you
can change settings.

118

Twentyten
One of the themes that comes used to come with
WordPress:


119

Widget locations
Twentyten has 6 widget areas, 5 are being used
 Empty areas are usually hidden


120

Page layouts
TwentyEleven (another included theme) has
sidebars on some pages.


121

Page layouts
And not on others...


122

TwentyTwelve
The current default theme in WordPress.


123

Page layouts
 Some themes:
 have layout options.
 have templates for layouts.
 You should use a child theme to modify layouts.
 Not too hard to do, but does require some coding.
 DO NOT ALTER THEME FILES!!!


124

Adding/managing themes
The theme admin page:
 Go to Appearance in the main nav menu.


125

Theme options - header


126

Theme options - background


127

Theme header and background


128

Theme customizing preview
New as of 3.4 - theme customizing preview


129

Theme customizing preview
Change theme options.
 Live demo site, changes not on real site until you
save.


130

The theme admin page – select the install tab.


131

Finding a new theme:
 Select some search parameters.


132

Search results – expand details.


133

Theme repository
As with plugins:
 you get more detail on WordPress.org.
 but less info than for plugins.


134

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.


135

Install the theme


136

The new theme

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

137

Theme driven front page
Some themes have
very sophisticated
home pages, which
may have no
“content”.
 Neither posts or
pages are shown.
 All content is in
options for the
theme.

138

Final notes for themes
 Beware free themes not from WordPress.org
 Google “Free WordPress Themes” and you are
guaranteed to find yourself some malware.

 Many good commercial themes not on
WordPress.org.
 iThemes
 WooThemes
 Studiopress
 Elegant Themes
 and more

 Freelance themes on Theme Forest

139

Final notes for themes
 Test on a trial site
 Local install or
 Subdomain on hosting


140

Maintenance & SPAM


141

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.


142

REAL Examples - comment SPAM - SEO
How did he find it if it was so hard?
Unsolicited third party recommendation?


143

Introduction to WordPress

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Introduction to WordPress

Similaire à Introduction to WordPress (20)

Plus de R-Cubed Design Forge

Plus de R-Cubed Design Forge (6)

Dernier

Dernier (20)

Introduction to WordPress