Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Girl Develop It Austin - Intro to WordPress

045d790f605ea8d482380c5075d802d5?s=47 Cecy C.
November 17, 2013

Girl Develop It Austin - Intro to WordPress

Super basic, intro level WordPress class for Girl Develop It Austin.

045d790f605ea8d482380c5075d802d5?s=128

Cecy C.

November 17, 2013
Tweet

More Decks by Cecy C.

Other Decks in Education

Transcript

  1. { Intro to WordPress Girl Develop It Austin November 16,

    2013
  2. The rules: o  Don’t be afraid to ask questions o 

    Help each other o  Have fun! Welcome!
  3. Introductions

  4. o  What is WordPress? o  WordPress.com vs. WordPress.org o  Setting

    up a WordPress.com site o  Installing WordPress on your own domain o  Hosting for your Wordpress site o  Tour the admin backend o  Workshop time: setup your site! (we’ll work on customizing tomorrow!) Agenda for Day 1
  5. o  Review of Day 1 o  Security for your site

    o  Plugins o  Recommended plugins o  Themes and theming o  What to look for in a good theme o  Advanced theming: setting up child themes o  Workshop time! o  Customize your theme Agenda for Day 2
  6. What is WordPress?

  7. o  System that helps you manage content without having to

    code. o  Manage: o  Text o  Images o  Video o  Products o  Anything! What is a CMS?
  8. o  Primarily a blogging platform o  Started in 2003 o 

    Up to version 3.7 What is WordPress?
  9. o  20% of all the sites in the world use

    a CMS o  50% of sites using a CMS run WordPress o  Joomla is 9% o  Drupal is 6% Over 70 million sites!
  10. o  Very easy to set-up o  Easy to use o 

    Easy to add functionality o  Over 19,000 plugins! o  Large developer community Why so popular?
  11. Site that use WordPress

  12. None
  13. None
  14. None
  15. None
  16. The hard stuff

  17. Source:  wikipedia

  18. { o  Content is stored on a database o  PHP

    calls the content o  HTML gives it structure WordPress (and most CMS) Under the hood
  19. To Database!

  20. My awesome post is awesome blah blah blah lorem ipsum

    dolor sit amet bacon, ham, burgers, pork. PHP calls the post
  21. M awesome post is awesome blah blah blah lorem ipsum

    lor sit amet bacon, ham, burgers, pork. HTML / CSS styles and structures
  22. o  All content is stored in a database o  PHP

    is the magic sauce that brings the content to the browser o  HTML and CSS give the content style and structure To review
  23. o  No, someone else wrote it al for you! :)

    o  (Unless you want to write your own plugin or do more complicated stuff) Do you need to know PHP?
  24. o  No. There are editors you can use to change

    style, images and headers for your site. o  (Unless you want to have something that is highly custom.) Do you need to know HTML and CSS?
  25. { Yay! There are also tools that manage the site

    for you!
  26. Wordpress.com / Wordpress.org

  27. o  It’s like MySpace on steroids o  The site lives

    on wordpress.com o  You don’t have to download anything o  Don’t have to worry about site maintenance o  Need to setup a Wordpress.com account Wordpress.com
  28. o  Pay for play! o  Pay to add certain features

    o  Can customize some, but have to pay to customize further o  URL is name.wordpress.com for free or pay for custom domain Wordpress.com
  29. o  It’s FREE to download! o  (Open source) o  You

    “own” the files o  Don’t need to setup a Wordpress.com account Wordpress.org
  30. o  You have to know how to code o  Have

    to get your own domain name o  Have to get your own hosting plan o  Need to do your own maintenance Wordpress.org
  31. Wordpress.com vs. Wordpress.org Wordpress.com o  Managed services o  “Software as

    a Service” Wordpress.org o  Self-service
  32. Wordpress.com vs. Wordpress.org Wordpress.com o  Hosted by WordPress o  Need

    an account o  Don’t have to download anything o  Limited features to play with (unless you pay) o  No coding necessary Wordpress.org o  Hosted on your own server o  Don’t need an account o  Have to download the files o  Free! o  Coding is necessary
  33. Terminology

  34. o  Style of your site o  Usually a css file

    o  Wordpress allows you to change fonts, colors, and headers without having to code, depending on the theme Theme
  35. o  Adds functionality that is not native to WordPress o 

    eCommerce o  Contact form o  Calendar Plugin
  36. o  Things that are displayed on your sidebar o  Show

    your Tweets o  Visitor counter o  Blog stats Widget
  37. o  Wordpress comes with some widgets already o  Get a

    plugin with the widget you want! Widgets and plugins?
  38. { Break time! Questions?

  39. Wordpress.com!

  40. Step 1: Basic setup

  41. Step 2: Choose a “theme”

  42. Step 3: Customize!

  43. Step 4: Add sharing

  44. Step 5: Start posting!

  45. Tour of wordpress.com

  46. o  Reader o  Stats o  Your blog(s) o  Freshly pressed

    o  Account settings Wordpress.com
  47. o  Your Wordpress.com account o  Your individual site Two dashboards

  48. Your Wordpress.com account stuffs!

  49. Your Wordpress.com SITE stuffs!

  50. { Difference! There’s only one dashboard for Wordpress.org sites

  51. Tour of site dashboard!

  52. o  Buy services from WordPress.com Store

  53. o  All of your blog posts o  Can manage, bulk

    edit your posts o  Delete posts o  Quick edits o  For all of your “blog entries” Posts
  54. { Semantics Categories > tags

  55. { { Categories o  Food o  Car o  Animals o 

    Fruit Tags o  Mac and cheese o  Ford o  Bunnies o  Apples Category or tag
  56. { Rule of thumb One category, many tags

  57. { { Category o  Recipe Tags o  Pasta o  Cheese

    o  30-minute meal o  Kid-friendly Blog post about mac and cheese recipe
  58. o  Where all your images go o  Can manage, delete

    assets Media
  59. o  Your “blogroll” o  The blogs you follow o  They

    can be displayed on your sidebar o  “Google juice” Links
  60. o  “Static” content o  Content that doesn’t change a lot

    o  Don’t appear in your blog stream o  Appear as a top level navigation item Pages
  61. { Ideas! What are some good pages?

  62. o  Approve o  Delete o  Mark as spam Comments

  63. o  To check and manage o  Polls o  Ratings for

    your posts o  Feedback Feedback
  64. o  A LOT OF STUFF! o  Pick a theme, buy

    a theme o  Modify the theme o  Manage widgets (sidebar) o  Manage your menu o  Change your header o  Change your background Appearance
  65. o  Some themes allow you to customize certain things, while

    some themes don’t. o  Depends on how the theme is built. o  Read the summary of the theme to get an idea of what is customizable. A word on themes
  66. o  Can have multiple users on a WordPress site o 

    Contributor o  Author o  Editor o  Administrator Users
  67. o  Can write posts, but can’t publish. o  They’ll need

    an admin to look and publish their post. o  No admin privileges. Contributor
  68. o  Can write and publish their own posts. o  Can

    only publish their own posts. o  No admin privileges. Author
  69. o  Can write and edit their own posts, and the

    posts of other users. o  No admin privileges. Editor
  70. o  Can do EVERYTHING! o  Write, publish, edit o  Change

    themes o  Change settings Administrator
  71. o  Bookmarklet o  Publish by email o  Google Analytics (and

    Bing / Pinterest) Tools
  72. o  How your site runs o  Change date format on

    the site o  Control commenting (on or off) o  Overall image sizing o  Ratings (on or off) o  Ads o  Other advanced stuff… Settings
  73. { Break End of Wordpress.com tour!

  74. Wordpress.org

  75. 1.  Go to wordpress.org 2.  Download a zip file 3. 

    Get hosting 4.  Setup a database with hosting provider 5.  Upload wordpress files to server What you need
  76. o  Make sure your provider supports o  PHP 5.2.4 or

    higher o  MySQL 5.0 or higher o  If you see the words “Apache” or “Linux” server, that’s a good thing :) Hosting
  77. o  Can get a domain with your same hosting company

    o  If not: o  GoDaddy o  Namecheap o  Gandi.net Domain
  78. o  If your domain and hosting companies are different, you

    have to set up “domain forwarding” o  Highly recommend you find hosting with your domain registrar Domain
  79. o  You should have hosting and domain squared away o 

    A text editor o  An FTP client Tools you will need
  80. o  TextEdit (Mac) o  TextWrangler (Mac) o  TextMate (Mac) o 

    SublimeText (Mac and PC) o  Notepad (PC) o  Notepad++ (PC) Text editors
  81. o  Transfer your files from your computer to your server

    o  Good clients: o  Cyberduck (Mac and PC) o  Transmit (Mac) o  FileZila (PC) FTP clients
  82. o  There are hosting companies that will install Wordpress for

    you o  BlueHost o  Dreamhost o  Laughing Squid o  Media Temple o  GoDaddy STOP!
  83. { Stopping time You can choose to install it on

    your own or have your hosting company do it for you
  84. STOP! Workshop time!

  85. { Thank you! End of day 1

  86. { Welcome! Day 2

  87. o  Review of Day 1 o  FTP and databases o 

    Template files o  Permalinks o  Security o  Plugins o  Themes and theming o  Workshop time! o  Customize your theme Agenda for Day 2
  88. o  Difference between Wordpress.com and Wordpress.org? o  Difference between post

    and page? o  Difference between widget and plugin? o  Difference between category and tag? Review Day 1
  89. o  Hosting and domain setup o  FTP account setup (username

    and password) o  Database setup, with username and password o  Upload your files to your FTP root directory Review installation
  90. o  Open your wp-config-sample.php file o  Add your database info,

    and save as wp-config.php o  Add unique keys o  Add serverhost info, if needed o  Upload your new wp-config file o  Go to yoursite.com/wp-admin/install.php Installation continued
  91. { { Info you setup o  FTP username and password

    o  Database name, username and password Info hosting gives you o  FTP address o  Serverhost for your database Reminder
  92. FTP and databases, oh my!

  93. o  File Transfer Protocol o  How you can upload files

    to your website o  STATIC files FTP?
  94. o  SFTP (encrypted) o  SSH o  These are settings you

    may need to enable on your hosting plan’s site Other options
  95. o  This is backend stuff o  Stores DYNAMIC data Database

  96. { { FTP o  HTML o  CSS o  Static files

    Database o  Information o  Content o  Dynamic data How it works together
  97. { That’s a mouthful! Dynamic data from the database gets

    injected into the HTML structure of the site
  98. Let’s look at a page template!

  99. o  header.php - The global header for your site o 

    footer.php - The global footer for your site o  index.php - The posts (blog) page o  page.php - Static pages o  sidebar.php - Your sidebar widget areas o  single.php - A single post Template files
  100. Your links = permalinks

  101. o  Search Engine Optimization o  SEO takes into consideration o 

    The title of your post o  Certain keywords o  Context new! o  Your URL SEO
  102. o  Rules of thumb o  Include a “keyword” in the

    title of the post o  Include a “keyword” in the URL o  Use your keyword in the body of the post o  Try not to “date” your content SEO
  103. { Timeliness! If an article is old, Google tends to

    rank it lower
  104. o  Everything else is solved in how you write the

    post o  The other part is making sure your links are SEO friendly o  WordPress lets you change your Permalinks :) Permalinks!
  105. o  site.com/?p=123 – Default. Not friendly. Permalinks

  106. o  site.com/2013/11/17/title-post o  Includes full date and title post o 

    Good for news sites, where dates are important Permalinks
  107. o  site.com/2013/11/title-post o  Includes year, month, and title Permalinks

  108. o  site.com/archives/123 o  Not very friendly either, doesn’t include a

    title Permalinks
  109. o  site.com/post-name o  Bingo! These are great for SEO because

    they keep your content “timeless” Permalinks
  110. { Choosing permalinks Think about the cadence

  111. { { Include dates o  Do you write often? o 

    Is your information timely? o  Are you writing o  Reviews o  News Just post name o  Is your content timeless? o  Are you writing a lot of o  how-to’s o  tutorials o  recipes Choosing permalinks
  112. o  You can create your own structure o  Choose “custom”

    then add a string: o  %author% o  %category% o  %tag% o  %postname% Advanced permalinks
  113. Security

  114. o  Hacks to wp-config or wp-includes files o  Brute force

    attacks through wp-admin Exploits
  115. o  Don’t name your database* wp or wordpress something o 

    Don’t use “admin” as your default username in WordPress *There are plugins that can fix this Overall tips
  116. o  ALWAYS update to the latest version of WordPress o 

    Older versions are not always the most secure o  Exploits become known in older versions o  WordPress is always improving security Tips for your site
  117. o  Your Dashboard will tell you when o  A new

    version of WordPress is available o  A new version of a theme is available o  A new version of a plugin is available o  Keep everything updated! Updating
  118. o  Limit the amount of admin user accounts o  Hide

    the “meta” section from your sidebar o  Use a commenting plugin like Disqus to handle spammers Tips for your site
  119. o  Make sure your admin password is strong o  Change

    it often o  Even better: use a random password generator and a password manager Tips for your site
  120. o  Restrict access to wp-admin o  There’s a complicated way

    to do it… o  There’s a plugin for that! Advanced
  121. o  Make sure your computer is as up to date

    as possible with software updates o  Make sure you’re keeping your files safe. o  Who has access to your computer? o  Keep your computer generally clean Tips for your machine
  122. o  WordFence http://wordpress.org/plugins/wordfence/ o  All in one WP security &

    firewall http://wordpress.org/plugins/all-in-one-wp- security-and-firewall/ o  BBQ: Block Bad Queries http://wordpress.org/plugins/block-bad-queries/ o  Sucuri scanner http://wordpress.org/plugins/sucuri-scanner/ Security plugins
  123. o  BruteProtect http://wordpress.org/plugins/bruteprotect/ o  Lockdown WP-Admin http://wordpress.org/plugins/lockdown-wp-admin o  Lockdown Login

    Attempts http://wordpress.org/plugins/limit-login-attempts/ Security plugins
  124. o  You don’t need all the security plugins. o  Start

    with one, if anything happens, or extra security is needed, add from there. Do I need all the plugins?
  125. Plugins

  126. o  They add functionality to the site o  They are

    made by the community o  They can be updated often or never What are plugins?
  127. { Lame! Plugins don’t go through the rigorous review process

    that themes do
  128. o  Look at the ratings o  Look at when it

    was last updated o  Inspect the language o  Can you understand the description? o  Is it in English? o  Is there documentation available? Spot a good plugin
  129. o  Extra: check out screenshots to see what the plugin

    looks like o  Does it match the look and feel of your site? o  Is it editable to match your look and feel? Spot a good plugin
  130. o  Easy Fancybox http://wordpress.org/plugins/easy- fancybox o  WooCommerce http://wordpress.org/plugins/ woocommerce/screenshots/ Some

    good plugins
  131. { Word to the wise The more plugins you have,

    the slower your site will load
  132. Theming

  133. o  This is where all your styling is! o  This

    will be your friend! :) Styles.css
  134. So you want to start styling?

  135. o  You never want to edit your theme files straight

    up! o  WHY? o  When you update the theme, you will lose your edits o  You can break stuff beyond repair Stop! Make a child theme!
  136. o  Make a COPY of your theme. o  This will

    become the CHILD theme. o  Make all the changes to the child theme, and keep the “parent” theme clean and free to update. Stop! Make a child theme!
  137. How it works Your site Child theme Original theme

  138. { *Known as parent theme Child theme overrides the “original*

    theme”
  139. o  On your desktop, where you keep your WordPress files,

    go to: wp-content > themes o  Make a folder and name it: yourtheme-child o  If your theme is called MyVeryAwesomeTheme, then the child would be MyVeryAwesomeTheme-child How to make a child theme
  140. { Make sure you get the name right! Your theme

    folder name is case sensitive!
  141. o  In your child theme folder, make a styles.css file

    o  This is where you will add changes to o  But first, you need to add theme data and link your themes! Child theming
  142. /* Theme Name: Your theme name Theme URI: the link

    where you will find the theme Author: name of who made it Template: name of the template Version: version number */ Add these data
  143. @import url("../yourthemename/style.css"); Now add

  144. o  You can now save your child theme files, and

    upload them to your FTP under: wp-content > themes o  You want to add it next to the parent theme, not inside it! Save and upload
  145. o  Edit your style.css and add changes o  You don’t

    need to copy your parent theme’s styles to your child theme o  Add what you’re changing o  Make sure you use the same titles What’s next?
  146. Workshop time!

  147. o  http://urli.st/9ln Class links