introduction to wordpress
Post on 08-May-2015
1.671 Views
Preview:
DESCRIPTION
TRANSCRIPT
r3df.com Rick Radko
Introduction to WordPress
WordCamp, Ottawa April 25th, 2013
© 2012 Rick Radko, r3df.com
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
1
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
Contents - Part 1
1. About WordPress 2. The dashboard 3. Posts and pages 4. The settings panel 5. Menus
3
© 2012 Rick Radko, r3df.com
Contents - Part 2
6. Widgets 7. Resources 8. Plugins 9. Themes 10. Maintenance & SPAM
4
© 2012 Rick Radko, r3df.com
About WordPress
5
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
Sites using WordPress – wordpress.org showcase
9
© 2012 Rick Radko, r3df.com
007.com
10
007.com is on WordPress
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
Install WordPress
18
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
The dashboard - admin
20
© 2012 Rick Radko, r3df.com
WordPress front-end
Front-end The part of site
that your site visitors typically see.
The public side of your site.
21
WordPress has 2 interfaces for users:
© 2012 Rick Radko, r3df.com
WordPress back-end, admin or “dashboard”
WordPress back-end or “dashboard” Where you manage the site.
22
© 2012 Rick Radko, r3df.com
Logging in
How do we get to the dashboard? login at: your-domain/wp-login.php
23
© 2012 Rick Radko, r3df.com
Welcome message
After logging in you will arrive at the dashboard. This is the dashboard on a brand new site.
24
© 2012 Rick Radko, r3df.com
The dashboard
The dashboard with the welcome box dismissed.
25
© 2012 Rick Radko, r3df.com
Screen options tab
Many pages have options for what is shown. Click on the “screen options” tab (upper right).
26
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
Help tab
Beside the screen options tab there is a “help” tab on every page – again it is context sensitive.
28
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
The tool bar
The admin tool bar: Context sensitive menu at the top of the screen. Drop down menus for some items.
30
© 2012 Rick Radko, r3df.com
The tool bar
Front end tool bar Very similar to admin tool bar Only shows if you are logged in
31
© 2012 Rick Radko, r3df.com
Main navigation
On the left side of the admin screen is the main navigation menu: Access all your content. Control WordPress settings.
32
© 2012 Rick Radko, r3df.com
Posts and pages
33
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
Post display
36
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
Creating a post (or a page) is really easy
From the dashboard -> select “Add New” from the Posts menu item.
40
© 2012 Rick Radko, r3df.com
Create a new post: 1, 2, 3!
41
© 2012 Rick Radko, r3df.com
A new post!
42
© 2012 Rick Radko, r3df.com
Other post related items
43
We can also: Add categories and tags to the posts.
© 2012 Rick Radko, r3df.com
More post related items
44
We can also: Change publishing options: Published/Review/Draft Visibility and passwords. Publishing dates
and future publishing.
© 2012 Rick Radko, r3df.com
Even more post related items (and pages too)
45
We can also: Added images and other media including videos. 3.5 has a big Add Media button
© 2012 Rick Radko, r3df.com
Insert Media
46
New drag and drop media up-loader Just drag a file on to the page.
© 2012 Rick Radko, r3df.com
Image options
47
The image uploader has a few options and lets you change title, alt text and add captions.
© 2012 Rick Radko, r3df.com
Add a YouTube video
Go to YouTube: Get share link.
48
© 2012 Rick Radko, r3df.com
Add a YouTube video
49
Paste share link in your content Update your post.
© 2012 Rick Radko, r3df.com
A post with videos and images
50
© 2012 Rick Radko, r3df.com
HTML view
51
Use HTML view to: Embed HTML code like YouTube snippets. Change HTML directly, sometimes needed to get
things right.
© 2012 Rick Radko, r3df.com
The kitchen sink
52
“kitchen sink” button shows second row for editor: A few more editing options.
© 2012 Rick Radko, r3df.com
Editor size
Editor Size - Used to be a Writing Setting I usually find the default editor size is to small and
expand it.
53
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
Pages
Pages Editing pages is almost the same as a post.
55
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
WordPress settings panel
57
© 2012 Rick Radko, r3df.com
Site title and tagline
How do we change the site title or tagline?
58
© 2012 Rick Radko, r3df.com
WordPress - general settings
Change the tagline in the Settings -> General page There are quite a few important options here.
59
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
Settings - permalinks
61
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.
© 2012 Rick Radko, r3df.com
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
Our post is now: http://your-domain/2012/05/hello-wpottawa
62
© 2012 Rick Radko, r3df.com
Permalink also shows in editor
63
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.
© 2012 Rick Radko, r3df.com
Menus
64
© 2012 Rick Radko, r3df.com
Menus
65
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
Menus
Menus if we add “Another Page”…
67
© 2012 Rick Radko, r3df.com
Updated menu
68
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
Quick editor
But, the quick editor is faster for reorganizing pages.
The quick editor is an option on the page or post listing.
70
© 2012 Rick Radko, r3df.com
Quick editor
Note that you can change many of the page (and posts) settings here.
71
© 2012 Rick Radko, r3df.com
The nav menu system
Under Appearance there is a Menus tab Need admin privileges. Need a theme the supports nav menus.
72
© 2012 Rick Radko, r3df.com
Create a new nav menu
Create a new menu
73
© 2012 Rick Radko, r3df.com
Add menu items
74
© 2012 Rick Radko, r3df.com
New menu items
75
© 2012 Rick Radko, r3df.com
Rearrange the menu
Drag and drop items to change order and hierarchy
76
© 2012 Rick Radko, r3df.com
Setting the theme location
Some themes may have many locations for placing menus
77
© 2012 Rick Radko, r3df.com
The new menu
A completely new menu, independent of the page order and hierarchy.
78
© 2012 Rick Radko, r3df.com
Widgets
79
© 2012 Rick Radko, r3df.com
Widgets
Widgets are tools or content items that you can add, arrange, and remove from the widgetized areas of your theme.
80
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
Managing widgets
The Widgets admin is in the Appearance menu
82
© 2012 Rick Radko, r3df.com
Managing widgets
Drag and drop widgets into or out of the Widget areas. Lets add a calendar.
83
© 2012 Rick Radko, r3df.com
Managing widgets
Remove the meta widget. It’s not really needed and takes up sidebar space.
84
© 2012 Rick Radko, r3df.com
The revised sidebar
85
© 2012 Rick Radko, r3df.com
A twitter widget
A twitter widget added to the sidebar. A plugin was added to get this widget.
86
© 2012 Rick Radko, r3df.com
Resources
87
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
WordPress.org
WordPress icon menu on top left of the admin bar will take you there.
89
© 2012 Rick Radko, r3df.com
WordPress.org – theme repository
90
Search for themes. 1000’s of themes available. Themes are reviewed before release.
© 2012 Rick Radko, r3df.com
WordPress.org – plugin repository
91
Search for plugins. 1000’s of plugins. Currently plugins are not reviewed.
© 2012 Rick Radko, r3df.com
WordPress.org – documentation
92
The “codex”. Everything from the basics to code documentation.
© 2012 Rick Radko, r3df.com
WordPress.org – forums
93
The “support” forums. Can seek help with WordPress issues, including
themes and plugins from the repositories.
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
Plugins
96
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
Plugin update status screen
99
© 2012 Rick Radko, r3df.com
Update plugins in the WordPress updater
Can also update plugins using the WordPress updater – BACKUP FIRST!
100
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
Add plugins listing
The search results: Several similar plugins shown. Descriptions, ratings and version are shown.
102
© 2012 Rick Radko, r3df.com
Install
Install TinyMCE advanced. Click the install. A good idea to back up first!
103
© 2012 Rick Radko, r3df.com
Install status
A screen similar to the update page, showing the install status. Some plugins will auto-activate, most you need to
activate.
104
© 2012 Rick Radko, r3df.com
Plugin listing
TinyMCE Advanced installed and active
105
© 2012 Rick Radko, r3df.com
TinyMCE settings
The Settings area A new menu item has been created for the
settings page for TinyMCE advanced.
106
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
Finding/Choosing plugins
The details view give some of it.
109
© 2012 Rick Radko, r3df.com
Finding/Choosing plugins
Details view Some more plugin info, but still not all
110
© 2012 Rick Radko, r3df.com
Finding/Choosing plugins
All of it is on the plugin repository.
Look at the last updated date.
Check compatibility.
Is it popular? (downloads)
111
© 2012 Rick Radko, r3df.com
A plugin with issues
Signs there may be problems
112
No support – 5 weeks no answer.
There will always be some broken reports, but more broken than works is not good.
© 2012 Rick Radko, r3df.com
Google Analytics
One of the top rated Google analytics plugins.
Note there are still issues… Look at over-all, not
absolutes when evaluating.
113
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
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-wordpress-
toolspack-plugin.html
*plugins on the repository are not guaranteed to be clean, but malware is usually spotted quickly by users 115
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
Themes
117
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
Twentyten
One of the themes that comes used to come with WordPress:
119
© 2012 Rick Radko, r3df.com
Widget locations
Twentyten has 6 widget areas, 5 are being used Empty areas are usually hidden
120
© 2012 Rick Radko, r3df.com
Page layouts
TwentyEleven (another included theme) has sidebars on some pages.
121
© 2012 Rick Radko, r3df.com
Page layouts
And not on others...
122
© 2012 Rick Radko, r3df.com
TwentyTwelve
The current default theme in WordPress.
123
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
Adding/managing themes
The theme admin page: Go to Appearance in the main nav menu.
125
© 2012 Rick Radko, r3df.com
Theme options - header
126
© 2012 Rick Radko, r3df.com
Theme options - background
127
© 2012 Rick Radko, r3df.com
Theme header and background
128
© 2012 Rick Radko, r3df.com
Theme customizing preview
New as of 3.4 - theme customizing preview
129
© 2012 Rick Radko, r3df.com
Theme customizing preview
Change theme options. Live demo site, changes not on real site until you
save.
130
© 2012 Rick Radko, r3df.com
Adding/managing themes
The theme admin page – select the install tab.
131
© 2012 Rick Radko, r3df.com
Adding/managing themes
Finding a new theme: Select some search parameters.
132
© 2012 Rick Radko, r3df.com
Adding/managing themes
Search results – expand details.
133
© 2012 Rick Radko, r3df.com
Theme repository
As with plugins: you get more detail on WordPress.org. but less info than for plugins.
134
© 2012 Rick Radko, r3df.com
Adding/managing themes
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
© 2012 Rick Radko, r3df.com
Adding/managing themes
Install the theme
136
© 2012 Rick Radko, r3df.com
The new theme
Note that the while the site looks different, the content and widgets are the same.
137
© 2012 Rick Radko, r3df.com
Theme driven front page
138
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.
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
Final notes for themes
Test on a trial site Local install or Subdomain on hosting
140
© 2012 Rick Radko, r3df.com
Maintenance & SPAM
141
© 2012 Rick Radko, r3df.com
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
© 2012 Rick Radko, r3df.com
REAL Examples - comment SPAM - SEO
143
How did he find it if it was so hard? Unsolicited third party recommendation?
© 2012 Rick Radko, r3df.com
More comments - Link SPAM
144
© 2012 Rick Radko, r3df.com
Mobile SPAM - email
145
Not a fact at all!
Ha! Your profits or theirs?
© 2012 Rick Radko, r3df.com
The End
146
© 2012 Rick Radko, r3df.com
Contact
Rick Radko email: wpinfo@r3df.com twitter: @r3designforge
Slides at: www.slideshare.net/r3df
147
top related