introduction to wordpress

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: [email protected].

Slides are posted at: http://www.slideshare.net/r3df

1

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

http://wpottawa.org/

mailto:[email protected]

http://www.slideshare.net/r3df


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. About WordPress 2. The dashboard 3. Posts and pages 4. The settings panel 5. 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


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

10

007.com is on WordPress


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

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


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

http://codex.wordpress.org/Installing_WordPress


The dashboard - admin

20


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:


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

43

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


More post related items

44

We can also: Change publishing options: Published/Review/Draft Visibility and passwords. Publishing dates

and future publishing.


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


Insert Media

46

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


Image options

47

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


Add a YouTube video

Go to YouTube: Get share link.

48


Add a YouTube video

49

Paste share link in your content Update your post.


A post with videos and images

50


HTML view

51

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

things right.


The kitchen sink

52

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


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

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.


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


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.


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

http://wordpress.org/

http://wordpress.tv/


WordPress.org

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

89


WordPress.org – theme repository

90

Search for themes. 1000’s of themes available. Themes are reviewed before release.


WordPress.org – plugin repository

91

Search for plugins. 1000’s of plugins. Currently plugins are not reviewed.


WordPress.org – documentation

92

The “codex”. Everything from the basics to code documentation.


WordPress.org – forums

93

The “support” forums. Can seek help with WordPress issues, including

themes and plugins from the repositories.


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

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

http://wcmtl.org/

http://central.wordcamp.org/


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

112

No support – 5 weeks no answer.

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


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

toolspack-plugin.html

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

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

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


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

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.


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

143

How did he find it if it was so hard? Unsolicited third party recommendation?

introduction to wordpress

Technology