• Save
How to WordPress:  the basics, part 1
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

How to WordPress: the basics, part 1

on

  • 1,064 views

An introduction to creating your own website (or blog) using WordPress. At the end of this series you should have an understanding of how WordPress works and be able to create a basic site.

An introduction to creating your own website (or blog) using WordPress. At the end of this series you should have an understanding of how WordPress works and be able to create a basic site.

Originally presented at the Ottawa WordPress Group meetup. wpottawa.org

Statistics

Views

Total Views
1,064
Views on SlideShare
1,064
Embed Views
0

Actions

Likes
1
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

How to WordPress: the basics, part 1 Presentation Transcript

  • 1. “How to WordPress: the basics” Part 1Rick Radko WPOTTAWA, Ottawar3df.com November 7th, 2012
  • 2. Who am I?Rick Radko – R-Cubed Design Forge  Software, web and app designer/developer.  Creating web sites since 1996.  Artistic and creative engineer.  WordPress enthusiast.Slides are posted at:  http://www.slideshare.net/r3df© 2012 Rick Radko, r3df.com 1
  • 3. Who are you?© 2012 Rick Radko, r3df.com 2
  • 4. Learning about WordPressWordPress is BIG, lots of features  Take small bites!  and keep chewing…  Ask questions  Everyone was new to WordPress at one time© 2012 Rick Radko, r3df.com 3
  • 5. Contents - Part 11. About WordPress2. The dashboard3. Intro to the settings panel4. Posts and pages5. Maintenance & SPAM© 2012 Rick Radko, r3df.com 4
  • 6. Contents - Part 26. Menus7. Widgets8. Resources9. Plugins10.Themes11. More WordPress settings12. Users© 2012 Rick Radko, r3df.com 5
  • 7. About WordPress© 2012 Rick Radko, r3df.com 6
  • 8. What is WordPress?WordPress:  Is a dynamic content management system. (CMS)  A tool to help you build a website.  Like Microsoft Word helps you create documents.  Creates web pages (HTML) dynamically  Requires minimal knowledge of web programming or markup languages (HTML, PHP, JavaScript etc.).  Allows users to create website content easily  WYSIWYG editor© 2012 Rick Radko, r3df.com 7
  • 9. WordPress is WYSIWYGLooks similar to a lot of word processing applications.  This image shows the WordPress post editor with an extended editor plugin added (TinyMCE Advanced)© 2012 Rick Radko, r3df.com 8
  • 10. What is WordPress continued…WordPress:  Is currently the most popular CMS in use on the Internet.  Needs a web server with PHP and MySQL to run.  Hosting service.  Local server is needed to run it on your pc/laptop.© 2012 Rick Radko, r3df.com 9
  • 11. 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 beer.  But that does not necessarily mean a free website.© 2012 Rick Radko, r3df.com 10
  • 12. WordPress popularity – April 2012Popularity:  Runs 10-16% of worlds web sites depending on who’s stats you believe.Grey bars – % of all websitesGreen bars – % of CMS websites http://w3techs.com/technologies/overview/content_management/all© 2012 Rick Radko, r3df.com 11
  • 13. WordPress domination of top 100 blogs http://royal.pingdom.com/2012/04/11/wordpress-completely-dominates-top-100-blogs/© 2012 Rick Radko, r3df.com 12
  • 14. Sites using WordPress© 2012 Rick Radko, r3df.com 13
  • 15. 007.com007.com is onWordPress© 2012 Rick Radko, r3df.com 14
  • 16. Some major sites using WordPress  katyperry.com  boingboing.com  thinkblue.vw.com  techcrunch.com  social.ford.com  life.time.com  blogs.nfl.com  venturebeat.com  mashable.com  gigaom.com  piersmorgan.blogs.cnn.com  newyork.cbslocal.com  stylenews.peoplestylewatch.com  icanhascheezburger.com© 2012 Rick Radko, r3df.com 15
  • 17. WordPress versions3 different WordPress’s:  WordPress.com  Often referred to as “.com” WordPress  WordPress.org (Self hosted)  Regular  Network or MultisiteNeed to be aware of which one we are talkingabout or using, there are differences.© 2012 Rick Radko, r3df.com 16
  • 18. WordPress.comWordPress.com is a service (by Automattic)  They provide WordPress AND hosting  Free for basic site: somename.wordpress.com  WordPress.com, is not at all related to using or not using “.com” domains on a site.  Costs:  Using a your own domain name: $13-$25/yr  CSS changes: $30/yr  To turn off advertising: $30/yr  Customization, VIP service $$© 2012 Rick Radko, r3df.com 17
  • 19. WordPress.com  Getting Started:  Choose a name  Sign-up  Start using your blog  Optional:  Choose a theme from those available  Enable some plugins from those available© 2012 Rick Radko, r3df.com 18
  • 20. WordPress.com continued…  Limitations:  Limited to what WordPress.org offers for themes and plugins  Limited ability to customize  Many things covered in this presentation you can’t do on WordPress.com  Can’t monetize (can’t run Google ads etc)  WordPress.com runs advertising on your site  No custom analytics© 2012 Rick Radko, r3df.com 19
  • 21. WordPress.com main page  About 35 Million blogs on WordPress.com© 2012 Rick Radko, r3df.com 20
  • 22. WordPress.orgWordPress.org  Home of the open source version of WordPress.  Free! – Just download it  Some things you may need that may cost:  A web host (self-hosted)  Usually $80-150/year for basic shared hosting  A domain  $0-20/year for a domain  Some WordPress /Web knowledge  Hire an expert?  Site maintenance/updates and backups© 2012 Rick Radko, r3df.com 21
  • 23. WordPress.org continued…  Getting Started:  Choose a domain name (and purchase)  Sign-up for web hosting – Get a domain if free  Set-up WordPress  Download from WordPress.org and install. OR  Install from hosting control panel.  .org is what you get with installers like Fantastico, and Simplescripts etc.  Start using your site© 2012 Rick Radko, r3df.com 22
  • 24. WordPress.org  Optional: Customize WordPress completely  Add and/or customize/alter:  Themes  Plugins  Widgets  Even alter the code! (not recommended)  Limitations:  None!© 2012 Rick Radko, r3df.com 23
  • 25. WordPress.org customizing  Can add plugins to make your site:  multilingual - Numerous techniques & plugins  a social site like Facebook (BuddyPress)  connect to: Facebook, Twitter, YouTube, Flickr  Auto publish content  a forum (bbpress + others)  a wiki  much, much, more (1000’s of plugins available)  Add themes to change the look and sometimes add function (1000’s of themes available)© 2012 Rick Radko, r3df.com 24
  • 26. WordPress.org customizingCaveat:  The more extensive the customization, the more WordPress knowledge that is required.  Many free resources to help  WordPress.org  Other online resources  Some low cost resources  WordPress meet-ups  WordCamps  Books  May need to hire a WordPress expert.© 2012 Rick Radko, r3df.com 25
  • 27. Wordpress.org  WordPress.org web site  Self hosted WordPress sites also number about 35 million© 2012 Rick Radko, r3df.com 26
  • 28. WordPress.org networks or multisiteWith the WordPress.org download you can also setit up as a “network” of sites or “multisite”.  Was once known as WPMU, a separate program.  Multiple sites on one install.  That it is one install may not be obvious to users.  Limited version of what WordPress.com runs.  Needs some knowledge to set-up.© 2012 Rick Radko, r3df.com 27
  • 29. wordpress.comThis presentation is based on a self hostedwordpress.org install.  Some of what we do will still work on wordpress.com but many things may look/be different.  Things like installing plugins and themes will not work.© 2012 Rick Radko, r3df.com 28
  • 30. Install WordPress© 2012 Rick Radko, r3df.com 29
  • 31. Installing WordPressInstalling WordPress  Lots of install guides – not going to cover installing here, it’s a whole session in itself.  http://codex.wordpress.org/Installing_WordPressMany hosting companies have “one click” installscripts for WordPress.  Fantastico, Simplescripts etc.  OK for your first installs, but beware there can be issues.© 2012 Rick Radko, r3df.com 30
  • 32. WordPress native vs scripted installsGetting and installing WordPress fromwordpress.org is more complicated than using thescripts, but it allows you to correct the securityissues associated with a scripted install.  Installer applications:  May add files to your site for “internal” tracking.  May not install the latest version of WordPress.  Usually use default database settings for names and table prefixes – this reduces security.© 2012 Rick Radko, r3df.com 31
  • 33. The dashboard - admin© 2012 Rick Radko, r3df.com 32
  • 34. WordPress front-endWordPress has 2 interfaces for users:  Front-end  The part of site that your site visitors typically see.  The public side of your site.© 2012 Rick Radko, r3df.com 33
  • 35. WordPress back-end, admin or “dashboard”WordPress back-end or “dashboard”  Where you manage the site.© 2012 Rick Radko, r3df.com 34
  • 36. Logging inHow do we get to the dashboard?  login at: your-domain/wp-login.php© 2012 Rick Radko, r3df.com 35
  • 37. Welcome messageAfter logging in you will arrive at the dashboard.  This is the dashboard on a brand new site.© 2012 Rick Radko, r3df.com 36
  • 38. The dashboardThe dashboard with the welcome box dismissed.© 2012 Rick Radko, r3df.com 37
  • 39. Screen options tabStill has a lot of content you may not want:  Adds to load time of the page.  It’s a distraction.  Click on the “screen options” tab (upper right).© 2012 Rick Radko, r3df.com 38
  • 40. Screen optionsSelect what you want to see, un-tick the rest.  You can bring back the welcome screen here.Look for screen options on many admin pages:  Options change for each page.  Check here if you seem to be missing stuff on a page, a lot of things are off by default.© 2012 Rick Radko, r3df.com 39
  • 41. Dashboard slimmed down© 2012 Rick Radko, r3df.com 40
  • 42. Help tabBeside the screen options tab there is a “help” tabon every page – again it is context sensitive.© 2012 Rick Radko, r3df.com 41
  • 43. The help tabThe 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.© 2012 Rick Radko, r3df.com 42
  • 44. The tool barThe admin tool bar:  Context sensitive menu at the top of the screen.  Drop down menus for some items.© 2012 Rick Radko, r3df.com 43
  • 45. The tool barFront end tool bar:  Very similar to admin tool bar.  Only shows if you are logged in.© 2012 Rick Radko, r3df.com 44
  • 46. Front end edit linkIn some themes you will also have an edit linkright in your content:  Only shows if you are logged in with edit privileges.© 2012 Rick Radko, r3df.com 45
  • 47. Main navigationOn the left side of the admin screen is the mainnavigation menu:  Access all your content.  Control WordPress settings.© 2012 Rick Radko, r3df.com 46
  • 48. WordPress settings© 2012 Rick Radko, r3df.com 47
  • 49. Site taglineDid you notice the tagline a few slides back?© 2012 Rick Radko, r3df.com 48
  • 50. WordPress - general settingsChange the tagline in the Settings General item:  Set a few other things while we’re here.© 2012 Rick Radko, r3df.com 49
  • 51. Posts and pages© 2012 Rick Radko, r3df.com 50
  • 52. Posts and pagesPosts and pages are the basic content holders fora 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.© 2012 Rick Radko, r3df.com 51
  • 53. 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.© 2012 Rick Radko, r3df.com 52
  • 54. Post display© 2012 Rick Radko, r3df.com 53
  • 55. 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© 2012 Rick Radko, r3df.com 54
  • 56. Single post display  Twentyeleven has no side bar for single posts.  Themes determine much of the display of a page.© 2012 Rick Radko, r3df.com 55
  • 57. Posts and pagesPages:  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/© 2012 Rick Radko, r3df.com 56
  • 58. Page display  Only one way to display the page.  May have sidebar.  No date, tags or category information on page.  Has comments section.© 2012 Rick Radko, r3df.com 57
  • 59. Creating a postBack to the dashboard -> select “Add New” fromthe Posts menu item.© 2012 Rick Radko, r3df.com 58
  • 60. The post editing screen© 2012 Rick Radko, r3df.com 59
  • 61. Create a new post: 1, 2, 3!© 2012 Rick Radko, r3df.com 60
  • 62. A new post!© 2012 Rick Radko, r3df.com 61
  • 63. Post categoriesLets add a category to our post:  Can select from existing or create a new one.  We only have the default category “Uncategorized” so far.  Lets create a new category.© 2012 Rick Radko, r3df.com 62
  • 64. Add a new category© 2012 Rick Radko, r3df.com 63
  • 65. The post with the new category© 2012 Rick Radko, r3df.com 64
  • 66. Post tagsLets add a tag to our post  Can select from existing or create a new one  There are no tags so lets create a new one.© 2012 Rick Radko, r3df.com 65
  • 67. Adding a new tag© 2012 Rick Radko, r3df.com 66
  • 68. Post now showing the tag© 2012 Rick Radko, r3df.com 67
  • 69. Publishing options - draftLets look at the publish box in detail  Before the first save – there is a draft button  As long as you hit the draft button it will stay unpublished.  Not visible anywhere on site© 2012 Rick Radko, r3df.com 68
  • 70. Publishing optionsSome options:  The 3 edit buttons are hiding some great options© 2012 Rick Radko, r3df.com 69
  • 71. Publishing options - status  Click the edit beside status and the panel expands.  You can change save your post for review.  You can our post status back to draft after publishing.© 2012 Rick Radko, r3df.com 70
  • 72. Publishing options – visibility  Click the edit beside visibility and the panel expands.  This is where the sticky option is hiding.  You can password protect it.  You can save a post as private.© 2012 Rick Radko, r3df.com 71
  • 73. Publishing options – publishing details  Click the edit beside visibility and the panel expands  You can change your publish date.  Why?  Change the display order. (remember they are shown reverse chronologically)  Publish in the future! (vacations)© 2012 Rick Radko, r3df.com 72
  • 74. Adding images to a postAnother hidden button:© 2012 Rick Radko, r3df.com 73
  • 75. Media uploaderJust drag media into the box from your desktop  Images, audio, video, but they need to be files you have on your computer© 2012 Rick Radko, r3df.com 74
  • 76. Uploaded imageThe uploaded image:  Fill in all the details, title, alt tags, caption etc.  Size and positioning options too.  Insert into post.© 2012 Rick Radko, r3df.com 75
  • 77. Image in postImage is inserted into post where your cursor waswhen you clicked the media icon.© 2012 Rick Radko, r3df.com 76
  • 78. Post with image© 2012 Rick Radko, r3df.com 77
  • 79. Uploader optionsNow that we have an image uploaded, there aremore tabs…© 2012 Rick Radko, r3df.com 78
  • 80. Upload from URLUpload from URL: the image is not included in yourpost!  It is loaded from the other site when a page is viewed.  NOT in your gallery.  Gallery functions don’t work.  YouTube does not work .here© 2012 Rick Radko, r3df.com 79
  • 81. Add from galleryAdd an image from the post gallery:  Sometimes they are deleted and you need to re-insert, or you need a different size.© 2012 Rick Radko, r3df.com 80
  • 82. Add from media libraryAdd an image uploaded to your site, but not yet inthis post:  Can choose from all your images that you have previously uploaded.© 2012 Rick Radko, r3df.com 81
  • 83. Add a YouTube videoGo to YouTube:  Get share link.© 2012 Rick Radko, r3df.com 82
  • 84. Add a YouTube videoPaste share link in your content  Update your post.© 2012 Rick Radko, r3df.com 83
  • 85. Video in post© 2012 Rick Radko, r3df.com 84
  • 86. Use embed code for more options© 2012 Rick Radko, r3df.com 85
  • 87. Need to paste into HTML view© 2012 Rick Radko, r3df.com 86
  • 88. Back in visual modeVisual representation of video:  URL method does not show space used.  URL method had no options for size etc.© 2012 Rick Radko, r3df.com 87
  • 89. Post with videosNotice smaller video:© 2012 Rick Radko, r3df.com 88
  • 90. HTML viewUse HTML view to:  Embed HTML code like YouTube snippets.  Change HTML directly, sometimes needed to get things right.© 2012 Rick Radko, r3df.com 89
  • 91. The kitchen sink“kitchen sink” button shows second row for editor:  A few more editing options.© 2012 Rick Radko, r3df.com 90
  • 92. Pasting from Word/ExcelYou can edit in MS Word or Excel and paste intoWordPress, 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.© 2012 Rick Radko, r3df.com 91
  • 93. Post list – All PostsPost list shows all the posts on your site:  Sort by title or author.  Filter by all, Published, Trash, a search term, category or tag.© 2012 Rick Radko, r3df.com 92
  • 94. PagesPages:  Editing pages is the same as post.  No categories or tags.© 2012 Rick Radko, r3df.com 93
  • 95. The page listPage list – similar to posts:  Page hierarchy, only pages have hierarchy.  Important for URL structure. (permalinks)  Adds dropdown to menus.© 2012 Rick Radko, r3df.com 94
  • 96. Creating a child pagePage attributes box:  Select parent page – needs to exist already.© 2012 Rick Radko, r3df.com 95
  • 97. Drop down for child page© 2012 Rick Radko, r3df.com 96
  • 98. Settings - permalinksPermalink settings change the way the URL isdisplayed.  Default sample page:  http://your-domain/?page_id=2  Default child page:  http://your-domain/?page_id=36  Default post:  http://your-domain/?p=4  Not very “pretty” or readable, Google does not like them either! No hierarchy for child page.© 2012 Rick Radko, r3df.com 97
  • 99. Settings - permalinksSeveral options:  For the example: month and name is set.  WordPress fills in the custom box with presets, you can edit that option too.© 2012 Rick Radko, r3df.com 98
  • 100. The URL’s with permalinksThe sample page is now:  http://your-domain/sample-pageThe 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© 2012 Rick Radko, r3df.com 99
  • 101. Permalink also shows in editorYou 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 100
  • 102. Mainenance & SPAM© 2012 Rick Radko, r3df.com 101
  • 103. MaintenanceKeep 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!© 2012 Rick Radko, r3df.com 102
  • 104. BackupsBACKUP!!!  Can’t emphasize this enough.  Often neglected.  Backups make the difference between a 10 minute restore and needing days to restore a site.  Hacking.  Finger trouble. (oops!)  Server failure.  Update failures  Conflicts with new plugins/themes© 2012 Rick Radko, r3df.com 103
  • 105. When to BackupBACKUP!!!  Before any update.  WordPress.  Themes – updates or adding a new theme.  Plugins - updates or adding a new plugins.  Major content changes.  Regular automatic backups.  You don’t need to remember to do it.  Always up to date.© 2012 Rick Radko, r3df.com 104
  • 106. Ignore the “door to door” salesmen – (SPAM)With your own domain and web site you will get:  SPAM emails & WordPress comments to your blog/site telling you:  How “bad” your site looks, and they can fix it for you.  That your site “does not work” on mobile devices.  Your SEO ranking is really low, but they can get you to #1.  In most cases these are automated and they have not even looked at your site, or rankings.  Even the WordPress comments are automated!  Ignore them!© 2012 Rick Radko, r3df.com 105
  • 107. REAL Examples - SEO comment SPAMHow did he find it if it was so hard?Unsolicited third party recommendation?© 2012 Rick Radko, r3df.com 106
  • 108. More SEO SPAM - email© 2012 Rick Radko, r3df.com 107
  • 109. Mobile SPAM - email Not a fact at all! Ha! Your profits or theirs?© 2012 Rick Radko, r3df.com 108
  • 110. Mobile – your site may work just fineYou need to zoom and scroll, but my siteworks on most mobile devices – yet itwas never designed for mobile.Pick a theme for your site that works onmobile and effort/cost for mobile = 0.© 2012 Rick Radko, r3df.com 109
  • 111. Link SPAM - CommentsLink SPAM  Usually black-hat SEO trying to get a clients link posted to your site. (attempt to improve inbound link count for the client)  Cheapfamilyvacations anyone?© 2012 Rick Radko, r3df.com 110
  • 112. Link SPAM - CommentsLook for:  Link that is nothing related to your site  Comments that sound great (if you ignore the often bad grammar and spelling) but don’t actually say anything substantial about your site. (no ties to your content)© 2012 Rick Radko, r3df.com 111
  • 113. More Link SPAM© 2012 Rick Radko, r3df.com 112
  • 114. Continued Continued in “Part 2” http://www.slideshare.net/r3df/how-to- wordpress-the-basics-part-2© 2012 Rick Radko, r3df.com 113
  • 115. ContactRick Radko  email: wpinfo@r3df.com  twitter: @r3designforgeSlides at:  www.slideshare.net/r3df© 2012 Rick Radko, r3df.com 114