Girl Develop It Austin - Intro to WordPress

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

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