Introduction to WordPress

www.lumostech.training @lumos_tech

Rick Radko Jasmine Vesque @r3designforge @jasminevesque

May 1st, 2014

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 – Freelance Web Specialist Digital marketer, consultant, teacher, speaker, web and graphic

designer. Helping people share their stories and ideas since 2009.

We're: Co-organizers of: WordCamp Ottawa 2013, 2014. Co-organizers of: The Ottawa WordPress Group. Launching LumosTech - www.lumostech.training

Slides are posted at: slideshare.net/lumostech

We are:

WordPress is BIG, lots of features: Take small bites! Ask questions. Everyone was new to WordPress at one time.

Goals for this session: Familiarization for WordCamp Terms Features Concepts Visuals

Learning about WordPress

1. About WordPress 2. WordPress site orientation 3. Posts and pages 4. The settings panel 5. Menus Break 6. Widgets 7. Resources 8. Plugins 9. Themes

10. Maintenance & SPAM

Contents

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

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)

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 WordPress sites represent as much as

25% of the worlds 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.

What is WordPress continued…

Sites using WordPress – wordpress.org showcase

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. Possible expenses: Domain names. Hosting. Plugins. Themes.

Is it really free?

3 different WordPresses: WordPress.com

1. Often referred to as “.com” WordPress. Note: This not at all related to using or not using “.com”

domains for your website. WordPress.org

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

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

WordPress.com

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!

WordPress.org

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

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.

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 need not be obvious to users that it is one install.

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

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

Installing WordPress

WordPress site orientation

464646

The part of the site that your site visitors see.

"public" part of your site.

Default Twenty Fourteen theme.

WordPress front-end

WordPress has 2 interfaces for users: the front-end

WordPress Twenty Thirteen theme

WordPress Twenty Twelve theme

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

WordPress back-end, admin or “dashboard”

How do we get to the dashboard? login at: <your-domain>/wp-login.php

Logging in

After logging in you will arrive at the dashboard. The dashboard, with welcome, on a brand new site.

Welcome message

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

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.

Screen options

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

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.

The help tab

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

content. Control

WordPress settings.

Main navigation

The admin tool bar:

The tool bar

Front end tool bar Very similar to admin tool bar, most items are the

same. Only shows if you are logged in.

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.

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.

Post display

Sidebar here is the same as the listing page, but it could be different.

Comments are shown with box to add a new comment

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/

Only one way to display the page.

May have sidebar.

No date, tags or category information on page.

May have comments section.

Page display

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

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.

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.

Pictures and videos

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

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.

Image options

Uploaded image is now in editor

The added image

Go to YouTube: Get the share link.

Add a YouTube video

Paste the share link in your post or page.

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.

TEXT view

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

The kitchen sink

Editor size

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 as text mode. You may loose formatting, tables, lists etc – do final

layout/formatting in WordPress.

Pasting from Word/Excel

Editing pages is almost the same as for a post.

Some options on right side are different.

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.

The "All posts" or "All pages" list

WordPress settings panel

How do we change the site title or tagline?

Site title and tagline

Change the title and tagline in the Settings -> General page. There are quite

a few other important options here.

General settings

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.

Permalinks

In this case, month and name is set. There is also a custom box where you can edit the

permalink if you need something unusual.

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

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.

Permalink also shows in editor

Right now, the menus on the demo site are created from the page list.

WordPress takes hierarchy and order from the page list, with home added at the start.

Menus if we add “Another Page”…

Updated menu

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.

Ordering menus

But, the quick editor is faster for reorganizing pages.

The quick editor is an option on the page or post listing.

Quick editor

Note that you can change many of the page (and posts) settings here. Including the page order - much faster!

Quick editor

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

The menu system - the easier way to menus

Create a new menu

Create a new nav menu

Drag and drop items to change order and hierarchy

Rearrange the menu

After you have created the menu, you may have some choices for menu location as some themes have many locations for placing menus.

Setting the theme location

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

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

Widgets

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

Widgets can be anywhere a theme defines them

The Widgets admin is under the Appearance menu.

Managing widgets

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

Add twitter widget

Added twitter widget

Resources

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/

WordPress.org

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

WordPress Help

Search for themes. 1000’s of

themes available.

Themes are reviewed before release.

WordPress.org – theme repository

Search for plugins. 1000’s of

plugins. Currently

plugins are not reviewed.

WordPress.org – plugin repository

The “codex”: from basics to code documentation.

WordPress.org – documentation

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

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 Digging into WordPress is a great book, covers

WordPress in depth, but may not be for absolute beginners. Lots of articles on their blog. 90

Other help

WordCamps: “WordCamp is a conference that focuses on

everything WordPress.” – WordCamp Central Montreal: not set yet - June/July. Toronto: November 15-16. All sorts of WordCamps world wide:

http://central.wordcamp.org/

Other help

Plugins

Can't add plugins if you are using WordPress.com. You can only enable/disable which ones you are

using, and change settings.

Adding and managing plugins

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

Adding plugins

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

Add plugins listing

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

Install

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

activate.

Install status

TinyMCE Advanced installed and active

Plugin listing

The Settings area A new menu item has been created for the settings

page for TinyMCE advanced.

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.

Plugin Settings

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

to undo.

Updating plugins

Plugin update status screen

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

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.

Finding/Choosing plugins

The details view gives some of it.

Details view Some more plugin info, but still not all

All of the information is in the plugin repository.

Look at the last updated date.

Check compatibility. Is it popular?

(downloads)

Choosing plugins

Signs there may be problems

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.

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

Google analytics plugin

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

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

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

can change settings.

Themes

A popular theme that used to come with WordPress:

Twenty Ten

Twenty Ten had 6 widget areas, 5 are being used Empty areas are usually hidden

Lots of Widget locations

Twenty Eleven also used to be included with WordPress, has sidebars on some pages.

Twenty Eleven

And not on others...

Varied sidebars

This is a very popular theme that still comes with WordPress.

Twenty Twelve

Some themes: have layout options. have templates for layouts.

You should use a child theme to modify themes. Not too hard to do, but does require some coding. It is STRONGLY recommended that you do not alter

theme files!!! You will loose your changes if the theme is updated.

Page layouts

The theme admin page: Go to Appearance

in the main nav menu.

Using the customize option, you can change the appearance of the theme.

Adding/managing themes

Theme customization - live preview

The theme admin page – select the add new.

Finding a new theme: Featured themes.

Finding a new theme: Feature filter Select some search parameters.

Feature filter results:

Keyword search results Hover over image and click "Details & Preview" for

more information.

Details view

As with plugins: You get more

detail on wordpress.org.

But there is less info than for plugins.

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.

Install the theme

Success

Installing the theme

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

The theme

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

Beware free themes not from WordPress.org Google “Free WordPress Themes” and you are

guaranteed to find yourself some malware.

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

Freelance themes on Theme Forest 135

Final notes for themes

Test on a trial site Local install or Subdomain on hosting

Final notes for themes

Maintenance & SPAM

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.

Maintenance

How did he find it if it was so hard to find? Unsolicited third party recommendation? Seems to be trying to get a message to the site owner, rather

than a real comment 139

REAL Examples - comment SPAM - SEO

Introduction to WordPress

Technology

Transcript of Introduction to WordPress

Introduction to WordPress Theme Development

Introduction to WordPress - with local installation..

Introduction to AJAX In WordPress

Introduction to WordPress Class 1

Introduction to Analytics for WordPress AA Users

Introduction To WordPress

An Introduction to Your New Wordpress Website

Introduction to WordPress Multisite

Introduction to WordPress - mtholyoke.eduIntroduction to WordPress I. Introduction: What is WordPress? WordPress is a free, online and open-source content management tool that allows

Introduction to WordPress Hooks

Introduction to WordPress 2016

An Introduction to Using WordPress to Build Your Nonproﬁt ...€¦ · An Introduction to Using WordPress to Build Your Nonproﬁt Website ... An Introduction to Using WordPress

Introduction to Jetpack for WordPress Hamilton

Introduction To Wordpress By Keng

Introduction to cms and wordpress

Introduction to Custom WordPress Themeing

Introduction To Wordpress by Keng.com

Child Theming: An Introduction to Wordpress Theme Development with Wordpress Child Themes

Introduction to WordPress Class 2

Create your first WordPress website – an introduction to WordPress