Introduction to WordPress for Beginners

R-Cubed Design Forge
Jul. 21, 2017

More Related Content


Introduction to WordPress for Beginners

  1. Rick Radko Miriam Goldman @r3designforge @mirigoldman Introduction to WordPress for Beginners July 20th, 2017
  2. © 2017 Rick Radko, We are: 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. Miriam Goldman  Web Developer for Pondstone Digital Marketing  Full stack web developer since 2005, and have worked with WordPress since 2010 We're:  Co-organizers of: WordCamp Ottawa 2017. Slides are posted at: 1
  3. © 2017 Rick Radko, Learning about WordPress 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  Terms  Features  Concepts  Visual aspects 2
  4. © 2017 Rick Radko, Contents - Part 1 1. About WordPress 2. WordPress site orientation 3. Posts and pages 4. The settings panel 5. Menus Break 3
  5. © 2017 Rick Radko, Contents - Part 2 6. Widgets 7. Resources 8. Plugins 9. Themes 10. Users 11. Maintenance 4
  6. © 2017 Rick Radko, About WordPress 5
  7. © 2017 Rick Radko, What is WordPress? WordPress: Is a Content Management System. (CMS)  A tool to help you build a website. Like Google Docs, Microsoft Word, OpenOffice, LibreOffice or Pages, which 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. 6
  8. © 2017 Rick Radko, 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
  9. © 2017 Rick Radko, 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.  Stats suggest that WordPress sites represent: Around 25% of the worlds websites. Almost 60% of CMS based websites. 8
  10. © 2017 Rick Radko, WordPress versions 3 different WordPress versions: 1. Hosted on  Often referred to as “.com” WordPress. 2. Self Hosted – Single site (default version)  Get from, or your website host. 3. Self Hosted – Network or Multisite  Extra steps to setup. Need to be aware of which one we are using, as there are some differences. 9
  11. © 2017 Rick Radko, is a service (by Automattic) They provide:  WordPress and hosting. WordPress needs a web server, with PHP and MySQL to run.  Free service restricted to URL's: <somename> 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 – like add plugins. 10
  12. © 2017 Rick Radko, Home of the open source version of WordPress. Free!  Just download it. Needs a web server with PHPand MySQL to run.  Hosting service for public sites.  Local server to run it on your pc/ laptop 11
  13. © 2017 Rick Radko, WordPress - Is it really free? WordPress is free to download ! Costs! - Some things that may not be free:  Web hosting (sever)  A domain (your website address)  Some WordPress / Web design knowledge  Add-on themes and plugins Limitations: None! 12
  14. © 2017 Rick Radko, customizing You can add plugins to make your site:  Multilingual. (numerous techniques & plugins)  Asocial site like Facebook. (BuddyPress) You can add plugins to add:  Facebook, Twitter, YouTube, Flickr connections.  Aforum. (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) 13
  15. © 2017 Rick Radko, customizing Caveat: The more extensive the customization, the more WordPress knowledge that is required.  Many free resources to help:  (more later) Other online resources.  Some low cost resources: WordPress meet-ups. WordCamps. Books.  More costly: Hiring a WordPress expert. 14
  16. © 2017 Rick Radko, networks or multisite The third version of WordPress is multisite (network). Was once a separate version known as WPMU.  May still see references to WPMU Even a few websites with WPMU in their names. (not official WordPress sites) Allows multiple websites on one install.  It is not obvious to users that it is one install. What runs. Needs some knowledge to set-up. 15
  17. © 2017 Rick Radko, 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.  Installing_WordPress This presentation is based on a .org install. Much of it will work on but many things may look/be different. Things like installing plugins and themes will not work. 16
  18. © 2017 Rick Radko, WordPress site orientation 17
  19. © 2017 Rick Radko, WordPress front-end  The "public" part of the site that your site visitors see.  Showing: The Twenty Sixteen theme. 18 WordPress has 2 interfaces for users: 1) The front-end
  20. © 2017 Rick Radko, WordPress back-end, admin or “dashboard” 2) WordPress back-end or “dashboard”  This is private space where you manage the site. To see the dashboard: login at: <your-domain>/login OR <your-domain>/wp-login.php 19
  21. © 2017 Rick Radko, Welcome message After logging in you will arrive at the dashboard. On a new site, you will see the welcome box. 20
  22. © 2017 Rick Radko, Screen options tab Many pages have options for what is shown. Click on the “screen options” tab (upper right). 21
  23. © 2017 Rick Radko, 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. 22
  24. © 2017 Rick Radko, Help tab Beside the screen options tab there is a “help” tab. As with screen options, it is context sensitive. 23
  25. © 2017 Rick Radko, The 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. 24
  26. © 2017 Rick Radko, Main navigation On the left side of the admin screen is the main navigation menu: Access all your content. Control WordPress settings. 25
  27. © 2017 Rick Radko, The tool bar The admin tool bar: 26
  28. © 2017 Rick Radko, The tool bar Front end tool bar Very similar to admin tool bar, some items are the same. Only shows if you are logged in. 27
  29. © 2017 Rick Radko, Posts and pages 28
  30. © 2017 Rick Radko, 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. 29
  31. © 2017 Rick Radko, 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, or collections of posts indexed in various manners. 30
  32. © 2017 Rick Radko, Post display 31
  33. © 2017 Rick Radko, Single post display 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 32
  34. © 2017 Rick Radko, 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: 33
  35. © 2017 Rick Radko, Page display Only one way to display the page. May have sidebar. No date, tags or category information on page. May have comments section. 34
  36. © 2017 Rick Radko, Creating a post (or a page) is really easy In the dashboard -> select “Add New” from the Posts menu item. 35
  37. © 2017 Rick Radko, Create a new post: 1, 2, 3! 36
  38. © 2017 Rick Radko, A new post! 37
  39. © 2017 Rick Radko, Other post related items We can also: Add categories and tags to the posts. 38
  40. © 2017 Rick Radko, More post related items (and pages too) We can also change publishing options: 39  Published/Review/Draft  Publishing dates and future publishing.  Visibility and passwords.
  41. © 2017 Rick Radko, Pictures and videos We can also: Add images and other media including videos. Click the add media button to upload images  OR, you can simply drag an image onto the editor area and the image uploader will launch. 40
  42. © 2017 Rick Radko, Insert Media Screen If you dragged an image onto the editor:  It will be noted as selected at the bottom.  You can add more images… 41
  43. © 2017 Rick Radko, Image options The image up-loader 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. 42
  44. © 2017 Rick Radko, The added image Uploaded image is now in editor 43
  45. © 2017 Rick Radko, Add a YouTube video Go to YouTube: Get the share link. 44
  46. © 2017 Rick Radko, Add a YouTube video Paste the share link in your post or page and the video should automagically appear! 45
  47. © 2017 Rick Radko, A post with videos and images 46  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.
  48. © 2017 Rick Radko, TEXTview Use TEXTview to: Embed HTML code like YouTube snippets. Change the HTML directly, sometimes needed to get things just right. 47
  49. © 2017 Rick Radko, The Toolbar Toggle “Toolbar Toggle” shows second row for editor: A few more editing options. 48
  50. © 2017 Rick Radko, Pasting from Word/ Excel You can compose in MSWord 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. 49
  51. © 2017 Rick Radko, Editing pages Editing pages is almost the same as for a post. Some options on right side are different. 50
  52. © 2017 Rick Radko, Pages can have hierarchy  To change hierarchy, you change the page parent.  Can be important for URL structure. (permalinks) 51
  53. © 2017 Rick Radko, The "All posts" or "All pages" list Displays a list of your pages or posts. Pages listing shows hierarchy. 52
  54. © 2017 Rick Radko, The "All posts" or "All pages" list Posts listing shows categories, tags and comment count columns. 53
  55. © 2017 Rick Radko, Change the number of items shown 54
  56. © 2017 Rick Radko, Quick editor The "Quick Editor" is a feature on the listing pages. 55
  57. © 2017 Rick Radko, Quick editor You can change many of the page (and posts) settings using the "Quick Editor".  Can be much faster! 56
  58. © 2017 Rick Radko, WordPress settings panel 57
  59. © 2017 Rick Radko, Site title and tagline How do we change the site title or tagline? 58
  60. © 2017 Rick Radko, General settings Change the title and tagline Settings -> General page. 59
  61. © 2017 Rick Radko, General settings There are quite a few other important options here. 60
  62. © 2017 Rick Radko, Settings - Font Page Display Reading Settings have a section for setting the front page display: "Home" page. 61
  63. © 2017 Rick Radko, Permalinks 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. 62
  64. © 2017 Rick Radko, Settings - permalinks  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. 63
  65. © 2017 Rick Radko, 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 (if a page parent was set) Our post is now:  http://your-domain/2012/05/hello-wpottawa 64
  66. © 2017 Rick Radko, Permalink also shows in editor 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. 65
  67. © 2017 Rick Radko, Menus 66
  68. © 2017 Rick Radko, Menus 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. 67
  69. © 2017 Rick Radko, The menu system - the easier way to menus Under Appearance there is a Menus tab Need admin privileges. Need a theme support. 68
  70. © 2017 Rick Radko, Build the menu 69
  71. © 2017 Rick Radko, Rearrange the menu Drag and drop items to change order and hierarchy 70
  72. © 2017 Rick Radko, Setting the theme location There may be several choices for menu location. 71
  73. © 2017 Rick Radko, The new menu The new menu Independent of the page order and hierarchy. Dropdown for the child page 72
  74. © 2017 Rick Radko, Widgets 73
  75. © 2017 Rick Radko, 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. 74
  76. © 2017 Rick Radko, Widgets can be anywhere a theme defines them Widgets started in sidebars… Now themes can have many areas for them:  Sidebars  Headers, footers  Special page spaces. 75
  77. © 2017 Rick Radko, Widget locations Twenty Ten had 6 widget areas. 4 in the footer 2 in the sidebar Empty areas are usually hidden 76
  78. © 2017 Rick Radko, Managing widgets The Widgets admin is under the Appearance menu. 77
  79. © 2017 Rick Radko, Add a widget Add a social links widget to the sidebar. A plugin (Follow Us Badges) was added to add this widget to WordPress. 78
  80. © 2017 Rick Radko, Added social link widget 79
  81. © 2017 Rick Radko, Resources 80
  82. © 2017 Rick Radko,, the official source for all things WordPress. ( Theme repository – get free and commercial themes. Plugin repository – get plugins. Support forums – get help. The “codex”. (documentation) Also WordPress TV: WordCamp and other videos  81
  83. © 2017 Rick Radko, WordPress Help WordPress icon on top left of the admin bar has several links to useful WordPress help resources. 82
  84. © 2017 Rick Radko, – theme repository 1000’s of themes available. Themes are reviewed before release. 83
  85. © 2017 Rick Radko, – plugin repository 1000’s of plugins. Currently plugins are not reviewed. 84
  86. © 2017 Rick Radko, – forums The “support” forums.  Seek help with WordPress, theme and plugin issues. 85
  87. © 2017 Rick Radko, – documentation The “codex”: from basics to code documentation. 86
  88. © 2017 Rick Radko, 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.  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. 87
  89. © 2017 Rick Radko, Other help WordCamps:  “WordCamp is a conference that focuses on everything WordPress.” – WordCamp Central Montreal: Aug 12-13, 2017. Toronto: Sept 30 – Oct 1, 2017. All sorts of WordCamps world wide: WordPress Meetup Groups:  Ottawa, Montreal, Toronto, and other cities. 88
  90. © 2017 Rick Radko, Plugins 89
  91. © 2017 Rick Radko, Plugins Page The plugins page shows plugins installed on the site. Can't add plugins on  You can only enable/disable which ones you are using, and change settings. 90
  92. © 2017 Rick Radko, Adding plugins Search for plugins based on keywords, or name. Example: TinyMCEAdvanced 91
  93. © 2017 Rick Radko, Add plugins search results The search results: Plugins matching the keywords are shown. Descriptions, ratings, last updates and compatibility are shown for each plugin. 92
  94. © 2017 Rick Radko, Install Install TinyMCEadvanced. A good idea to back up the site first! Click the install. 93
  95. © 2017 Rick Radko, Install status Ascreen showing the install status will appear. Some plugins will auto-activate, most you need to activate. 94
  96. © 2017 Rick Radko, Plugin listing TinyMCEAdvanced installed and active 95
  97. © 2017 Rick Radko, TinyMCEsettings Anew menu item has been created for the settings page for TinyMCEadvanced. 96
  98. © 2017 Rick Radko, 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. 97
  99. © 2017 Rick Radko, Updating plugins ALWAYSBACKUPFIRST!!! Updates are easy, just click the link. Updates can break your site, back-ups make it easy to undo. 98
  100. © 2017 Rick Radko, Update plugins in the WordPress updater Can update plugins using the WordPress updater  Again BACKUP FIRST! 99
  101. © 2017 Rick Radko, Finding/ Choosing plugins Choose plugins with: good download volume. recent updates. responses in the forums. high ratings. Where do you find this information? Some of it was on the plugin search listing. 100
  102. © 2017 Rick Radko, Details view The details view gives more of it. 101
  103. © 2017 Rick Radko, Details display Details view Some more plugin info, but still not everything - use the link to the repository for full listing. 102
  104. © 2017 Rick Radko, Choosing plugins All of the information is in the plugin repository. Look at the last updated date. Is it popular? (active installs) User ratings? Is the support forum active? 103
  105. © 2017 Rick Radko, A good plugin Awell respected and rated and popular plugin. Note there are still issues…  Look at over-all, not absolutes when evaluating. 104
  106. © 2017 Rick Radko, Suggested plugins 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. 105
  107. © 2017 Rick Radko, Beware of unknown plugins There are many plugins not on the 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.  plugin.html * plugins on the repository are not guaranteed to be clean, but malware is usually spotted quickly by users. 106
  108. © 2017 Rick Radko, Plugin final notes 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 USEIT!!! 107
  109. © 2017 Rick Radko, Themes 108
  110. © 2017 Rick Radko, Themes Atheme 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  You can: Choose one of the installed themes. Change settings. 109
  111. © 2017 Rick Radko, Theme: Twenty Sixteen 110
  112. © 2017 Rick Radko, Theme: Twenty Fifteen 111
  113. © 2017 Rick Radko, Theme: Twenty Fourteen 112
  114. © 2017 Rick Radko, Theme: Travel Blogger (no longer available) Note that the while the site looks different, the content and widgets are the same. 113
  115. © 2017 Rick Radko, Theme driven front page Some themes have very sophisticated home pages. Neither posts or pages are shown. All content is in options for the theme. 114
  116. © 2017 Rick Radko, Adding/ managing themes The theme admin page: (Appearance -> Themes) Click the add new button to add themes. 115
  117. © 2017 Rick Radko, Adding/ managing themes Add Themes Page: Featured themes. 116
  118. © 2017 Rick Radko, Adding/ managing themes Finding a new theme: Feature filter Select some search parameters. Searches all themes on 117
  119. © 2017 Rick Radko, Results 118
  120. © 2017 Rick Radko, Adding/ managing themes Keyword search results 119
  121. © 2017 Rick Radko, Details view Gives some information about the theme, and a preview of what it looks like. 120
  122. © 2017 Rick Radko, Details view Many themes now need setup to look as expected, and don't work out of the box. 121
  123. © 2017 Rick Radko, Theme repository As with plugins: You get more detail on But there is still less info than for plugins. 122
  124. © 2017 Rick Radko, 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. 123
  125. © 2017 Rick Radko, Adding/ managing themes Install a theme 124
  126. © 2017 Rick Radko, Installing the theme Success 125
  127. © 2017 Rick Radko, Live Preview Live Preview See the theme before activating on site. Change settings for theme. 126
  128. © 2017 Rick Radko, Theme Options Customize option on the current theme Goes to same place as "Live Preview". Change theme, and other settings. 127
  129. © 2017 Rick Radko, Theme Customizer 128
  130. © 2017 Rick Radko, Themes not on Many good commercial themes are not on  iThemes  WooThemes  Studiopress  Elegant Themes  Freelance themes on Theme Forest  and more…. Beware free themes not from  Google “Free WordPress Themes” and you are guaranteed to find yourself some malware. 129
  131. © 2017 Rick Radko, Upload theme For a theme that is not on Use the upload theme button. Upload a .zip of the theme to be installed. 130
  132. © 2017 Rick Radko, Final notes for themes 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. OR  Add a plugin - there are several on 131
  133. © 2017 Rick Radko, Users 132
  134. © 2017 Rick Radko, User levels Standard WordPress User Levels Least to most powerful: Subscriber  Can not edit or change anything  Comment only Contributor Author Editor Admin - can do anything! Super Admin – Networks (multisite) only 133
  135. © 2017 Rick Radko, User roles Subscriber Can only manage their profile and comment. Contributor Can write and manage their posts but not publish them + all Subscriber capabilities. Author Can publish and manage their own posts + all Contributor capabilities. 134
  136. © 2017 Rick Radko, User roles Editor Can publish and manage posts and pages as well as manage other users' posts, etc. + all Author capabilities. Administrator Access to all the administration features + all Editor capabilities. Super Admin Access to the blog network administration features controlling the entire network + all Administrator capabilities. 135
  137. © 2017 Rick Radko, User security issues 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 136
  138. © 2017 Rick Radko, Maintenance 137
  139. © 2017 Rick Radko, 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. 138
  140. © 2017 Rick Radko, The End 139
  141. © 2017 Rick Radko, Contact Rick Radko email: twitter: @r3designforge Miriam Goldman email: twitter: @mirigoldman Slides at:  r3df 140