Getting started                   with WordPress                   SARA QUINN / THE POYNTER INSTITUTE FOR MEDIA STUDIESWed...
Wordpress is not just a                   place to post updates.Wednesday, August 15, 2012
… and pictures of your cat.Wednesday, August 15, 2012
It can be an amazing                   content managment                   system.Wednesday, August 15, 2012
You can develop it into                   a complex website.Wednesday, August 15, 2012
And it’s one of the most                   well-documented pieces                   of software around.Wednesday, August 1...
There are tons                   of well-known sites                   powered by Wordpress.                             h...
And it takes just about                   30 seconds to start up.Wednesday, August 15, 2012
It’s theme-based.Wednesday, August 15, 2012
You can change                   your design whenever                   you want.Wednesday, August 15, 2012
You can change                   your design whenever                   you want.                   And your content stays...
There are lots of themes to choose from.Wednesday, August 15, 2012
Choosing your theme                             http://wordpress.org/extend/themes/tag-filter/Wednesday, August 15, 2012
Choosing your theme                             http://themeforest.net/Wednesday, August 15, 2012
Self-hosted:                   Not self-hosted:Wednesday, August 15, 2012
Self-hosted:                   WordPress.org                   Offers lots of design options, customization.              ...
Not self-hosted:                   WordPress.com                   A free blogging service.                   Less control...
Sign up!   http://wordpress.com/#my-blogs                   WordPress.comWednesday, August 15, 2012
Go to the dashboardWednesday, August 15, 2012
The back-end of your site.                   Where you publish content, manage comments                   and change your ...
Wednesday, August 15, 2012
This is where you set up everything                   that the outside world sees on your blog.Wednesday, August 15, 2012
Take a quick peek at your blog                   by clicking on the title of your blog.Wednesday, August 15, 2012
You will see a default template that you                   can use or decide to alter.Wednesday, August 15, 2012
Choosing your themeWednesday, August 15, 2012
Here’s where you turn away from WordPress!                   Get out a notebook.Wednesday, August 15, 2012
I suggest you determine what you                   need to put on your site, before you                   actually select ...
Will students be posting assignments?                   What sort of commenting do you want?                   Will you wa...
Wednesday, August 15, 2012
Choosing your themeWednesday, August 15, 2012
Choosing your themeWednesday, August 15, 2012
You can preview your site with different themes.Wednesday, August 15, 2012
You can preview your site with different themes.Wednesday, August 15, 2012
Not all sites make use of the same widgets.                    Here, there’s no default calendar.Wednesday, August 15, 2012
You’ll notice that your content jumps around,                    depending on the template you choose.Wednesday, August 15...
You’ll want to examine the type to determine                    how legible it is.Wednesday, August 15, 2012
How’s the nav?Wednesday, August 15, 2012
Can people easily find your pages?                   Is there room for you to grow on the nav bar?                   Do yo...
Widgets: What are they?Wednesday, August 15, 2012
Tools or content that you can add, arrange and                  remove from your blog.Wednesday, August 15, 2012
Many themes that you might choose                   will already be “widgetized.”                   In other words, they h...
Tools or content that you can add, arrange and                  remove from your blog.Wednesday, August 15, 2012
Shop around for widgets that might be useful.Wednesday, August 15, 2012
Many themes that you might choose                   will already be “widgetized.”                   In other words, they h...
What are some sidebar                   widgets that you might                   want to use?Wednesday, August 15, 2012
Choosing your theme                    It’s important to determine the features you                    want, in advance. “...
Choosing your theme                    That way, you’ll cut the amount of custom                    coding you’ll have to ...
So, if I choose this theme, and it doesn’t                    include areas that will accept widgets ...                  ...
Code alert!                   Let’s see what some of the code would                   look like if you wanted to add widge...
Declare your widget-ized area.                   The most common place for widgets is in the                   sidebar. So...
Activate your widget-ized area.                   This code would appear in your                   functions.php file:    ...
What’s html?                   What’s css?Wednesday, August 15, 2012
What’s html? structure                   What’s css?Wednesday, August 15, 2012
What’s html? structure                   What’s css? styleWednesday, August 15, 2012
Super duper functionality?                    There’s a beauty to WordPress, in that                    there are lots of ...
Super duper functionality?                    Some themes integrate a photo-sharing                    service such as Fli...
Super duper functionality?                    Some themes integrate a photo-sharing                    service such as Fli...
Where to find great themes?                     FREE! theme resources                       • WordPress.org Theme Library ...
Where to find great themes?                     Places to buy premium themes                       • ThemeForest - http://...
What are Plugins?                    Pieces of software that extend the                    functionality of WordPress.    ...
What are some                   of the best plugins?                    Art Direction http://digwp.com/u/24               ...
Art Direction http://digwp.com/u/24                    It gives you complete stylistic and functional                    c...
All in One SEO Pack http://digwp.com/u/29                    It automatically generates an appropriate meta               ...
Creating child themesWednesday, August 15, 2012
A child theme is based on a theme                   that you choose.                   ADVANTAGE: This allows you to overr...
Creating a child theme is simple.                   Just create a folder (named as you wish) in your                   wp-...
Here’s an example:      Theme Name: My Cool Child Theme      Theme URI: http://digwp.com/      Description: Child Theme fo...
Here’s an example:                     Theme Name: My Cool Child Theme                     Theme URI: http://digwp.com/   ...
Styling your themeWednesday, August 15, 2012
In any WordPress theme, the style.css                   is required.                   WordPress won’t even recognize a fo...
To reset or not?Wednesday, August 15, 2012
When you pick up code, you might get                   unpredictable defaults that you’ll want to reset.                  ...
We suggest that you put a reset at the beginning                   of your child theme code css.                   You wil...
Popular CSS Resets:                    • Eric Meyer’s Reset Reloaded                     From the man himself: http://digw...
“When I am working on a problem, I           never think about beauty. I only think           about how to solve the probl...
“When I am working on a problem, I           never think about beauty. I only think           about how to solve the probl...
Upcoming SlideShare
Loading in …5
×

Quinn beginning wordpress_2012

1,496 views

Published on

Sara Quinn's notes on starting a wordpress site; presented at Poynter's Teachapalooza 2012.

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,496
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Quinn beginning wordpress_2012

  1. 1. Getting started with WordPress SARA QUINN / THE POYNTER INSTITUTE FOR MEDIA STUDIESWednesday, August 15, 2012
  2. 2. Wordpress is not just a place to post updates.Wednesday, August 15, 2012
  3. 3. … and pictures of your cat.Wednesday, August 15, 2012
  4. 4. It can be an amazing content managment system.Wednesday, August 15, 2012
  5. 5. You can develop it into a complex website.Wednesday, August 15, 2012
  6. 6. And it’s one of the most well-documented pieces of software around.Wednesday, August 15, 2012
  7. 7. There are tons of well-known sites powered by Wordpress. h"p://en.wordpress.com/notable‐users/Wednesday, August 15, 2012
  8. 8. And it takes just about 30 seconds to start up.Wednesday, August 15, 2012
  9. 9. It’s theme-based.Wednesday, August 15, 2012
  10. 10. You can change your design whenever you want.Wednesday, August 15, 2012
  11. 11. You can change your design whenever you want. And your content stays.Wednesday, August 15, 2012
  12. 12. There are lots of themes to choose from.Wednesday, August 15, 2012
  13. 13. Choosing your theme http://wordpress.org/extend/themes/tag-filter/Wednesday, August 15, 2012
  14. 14. Choosing your theme http://themeforest.net/Wednesday, August 15, 2012
  15. 15. Self-hosted: Not self-hosted:Wednesday, August 15, 2012
  16. 16. Self-hosted: WordPress.org Offers lots of design options, customization. You set this up on your own server. You pay for the domain and hosting.Wednesday, August 15, 2012
  17. 17. Not self-hosted: WordPress.com A free blogging service. Less control over design and customization. But it’s FREE! Easy to use and back-end administration is very similar to Wordpress.org.Wednesday, August 15, 2012
  18. 18. Sign up! http://wordpress.com/#my-blogs WordPress.comWednesday, August 15, 2012
  19. 19. Go to the dashboardWednesday, August 15, 2012
  20. 20. The back-end of your site. Where you publish content, manage comments and change your settings.Wednesday, August 15, 2012
  21. 21. Wednesday, August 15, 2012
  22. 22. This is where you set up everything that the outside world sees on your blog.Wednesday, August 15, 2012
  23. 23. Take a quick peek at your blog by clicking on the title of your blog.Wednesday, August 15, 2012
  24. 24. You will see a default template that you can use or decide to alter.Wednesday, August 15, 2012
  25. 25. Choosing your themeWednesday, August 15, 2012
  26. 26. Here’s where you turn away from WordPress! Get out a notebook.Wednesday, August 15, 2012
  27. 27. I suggest you determine what you need to put on your site, before you actually select a theme. Do you need a calendar? Do you want a Twitter feed? Do you want a list of your most recent posts in the right rail?Wednesday, August 15, 2012
  28. 28. Will students be posting assignments? What sort of commenting do you want? Will you want a slide carousel? Use video? Display your Twitter Feed? Portfolio samples of your own work?Wednesday, August 15, 2012
  29. 29. Wednesday, August 15, 2012
  30. 30. Choosing your themeWednesday, August 15, 2012
  31. 31. Choosing your themeWednesday, August 15, 2012
  32. 32. You can preview your site with different themes.Wednesday, August 15, 2012
  33. 33. You can preview your site with different themes.Wednesday, August 15, 2012
  34. 34. Not all sites make use of the same widgets. Here, there’s no default calendar.Wednesday, August 15, 2012
  35. 35. You’ll notice that your content jumps around, depending on the template you choose.Wednesday, August 15, 2012
  36. 36. You’ll want to examine the type to determine how legible it is.Wednesday, August 15, 2012
  37. 37. How’s the nav?Wednesday, August 15, 2012
  38. 38. Can people easily find your pages? Is there room for you to grow on the nav bar? Do you need a dropdown menu?Wednesday, August 15, 2012
  39. 39. Widgets: What are they?Wednesday, August 15, 2012
  40. 40. Tools or content that you can add, arrange and remove from your blog.Wednesday, August 15, 2012
  41. 41. Many themes that you might choose will already be “widgetized.” In other words, they have code that sets up the areas that will accept widgets. (right rail, etc.)Wednesday, August 15, 2012
  42. 42. Tools or content that you can add, arrange and remove from your blog.Wednesday, August 15, 2012
  43. 43. Shop around for widgets that might be useful.Wednesday, August 15, 2012
  44. 44. Many themes that you might choose will already be “widgetized.” In other words, they have code that sets up the areas that will accept widgets. (right rail, etc.)Wednesday, August 15, 2012
  45. 45. What are some sidebar widgets that you might want to use?Wednesday, August 15, 2012
  46. 46. Choosing your theme It’s important to determine the features you want, in advance. “Measure twice, cut once.”Wednesday, August 15, 2012
  47. 47. Choosing your theme That way, you’ll cut the amount of custom coding you’ll have to do later.Wednesday, August 15, 2012
  48. 48. So, if I choose this theme, and it doesn’t include areas that will accept widgets ... what to I have to do?Wednesday, August 15, 2012
  49. 49. Code alert! Let’s see what some of the code would look like if you wanted to add widget areas to your site.Wednesday, August 15, 2012
  50. 50. Declare your widget-ized area. The most common place for widgets is in the sidebar. So, in the sidebar.php file: <!-- Static content could go above widgetized area. --> <?php if (!function_exists(dynamic_sidebar) || ! dynamic_sidebar(Sidebar Widgets)) : ?> Content in here will ONLY show if there are no widgets active, or if the version of WordPress running doesnt support widgets. Otherwise, this area is where the widgets go, set via the Admin <?php endif; ?> <!-- Static content could go below widgetized area. -->Wednesday, August 15, 2012
  51. 51. Activate your widget-ized area. This code would appear in your functions.php file: // activate widget area if (function_exists(register_sidebar)) { register_sidebar(array( name=>Sidebar Widgets, before_widget => <div id="%1$s" class="widget %2$s">, after_widget => </div>, before_title => <h4 class="widgettitle">, after_title => </h4>, )); }Wednesday, August 15, 2012
  52. 52. What’s html? What’s css?Wednesday, August 15, 2012
  53. 53. What’s html? structure What’s css?Wednesday, August 15, 2012
  54. 54. What’s html? structure What’s css? styleWednesday, August 15, 2012
  55. 55. Super duper functionality? There’s a beauty to WordPress, in that there are lots of WP developers. And they take things pretty far.Wednesday, August 15, 2012
  56. 56. Super duper functionality? Some themes integrate a photo-sharing service such as Flickr; a statistical application like Google Analytics or even a database interface such as phpMyAdmin.Wednesday, August 15, 2012
  57. 57. Super duper functionality? Some themes integrate a photo-sharing service such as Flickr; a statistical application like Google Analytics or even a database interface such as phpMyAdmin. There’s an easy new feature that allows you to add sharing to Facebook, Tumblr, Twitter and more!Wednesday, August 15, 2012
  58. 58. Where to find great themes? FREE! theme resources • WordPress.org Theme Library - http://digwp.com/u/20 • The Mighty Google - http://digwp.com/u/21 • Digging Into WordPress - can you guess the URL? • Smashing Magazine - http://digwp.com/u/22Wednesday, August 15, 2012
  59. 59. Where to find great themes? Places to buy premium themes • ThemeForest - http://digwp.com/u/385 • WooThemes - http://digwp.com/u/386 • ElegantThemes - http://digwp.com/u/387 • UpThemes - http://digwp.com/u/561Wednesday, August 15, 2012
  60. 60. What are Plugins? Pieces of software that extend the functionality of WordPress. Usually written by those lovable WordPress fanatics.Wednesday, August 15, 2012
  61. 61. What are some of the best plugins? Art Direction http://digwp.com/u/24 This allows you to insert extra code (typically CSS or JavaScript) into specific pages or posts.Wednesday, August 15, 2012
  62. 62. Art Direction http://digwp.com/u/24 It gives you complete stylistic and functional control over every post and page of your site.Wednesday, August 15, 2012
  63. 63. All in One SEO Pack http://digwp.com/u/29 It automatically generates an appropriate meta description tag for each post and page, based on their content.Wednesday, August 15, 2012
  64. 64. Creating child themesWednesday, August 15, 2012
  65. 65. A child theme is based on a theme that you choose. ADVANTAGE: This allows you to override the style theme (color, typefaces, etc) without overriding the base theme (widgets, header style, elements, etc).Wednesday, August 15, 2012
  66. 66. Creating a child theme is simple. Just create a folder (named as you wish) in your wp-content/themes directory. Within that folder, place a simple style.css file.Wednesday, August 15, 2012
  67. 67. Here’s an example: Theme Name: My Cool Child Theme Theme URI: http://digwp.com/ Description: Child Theme for Digging Into WordPress Author: Chris Coyier Author URI: http://chriscoyier.net/ Template: DigWP Version: 2.0 */ @import url("../digWP/style.css");Wednesday, August 15, 2012
  68. 68. Here’s an example: Theme Name: My Cool Child Theme Theme URI: http://digwp.com/ Description: Child Theme for Digging Into WordPress Author: Chris Coyier Author URI: http://chriscoyier.net/ Template: DigWP Version: 2.0 */ @import url("../digWP/style.css"); The most important line there is the “Template: DigWP” line, which references the folder of the parent theme. The last line imports the stylesheet from that parent theme.Wednesday, August 15, 2012
  69. 69. Styling your themeWednesday, August 15, 2012
  70. 70. In any WordPress theme, the style.css is required. WordPress won’t even recognize a folder in your themes folder unless it includes this file.Wednesday, August 15, 2012
  71. 71. To reset or not?Wednesday, August 15, 2012
  72. 72. When you pick up code, you might get unpredictable defaults that you’ll want to reset. For example: Firefox and Explorer have a different default padding amount around <body>. This can cause problems later.Wednesday, August 15, 2012
  73. 73. We suggest that you put a reset at the beginning of your child theme code css. You will probably be changing the typefaces and colors, etc. But this will catch a lot of little things that you might not be thinking of.Wednesday, August 15, 2012
  74. 74. Popular CSS Resets: • Eric Meyer’s Reset Reloaded From the man himself: http://digwp.com/u/142 • YUI (Yahoo User Interface) Reset CSS http://digwp.com/u/143 • Star Selector Reset Looks like this: * { margin: 0; padding: 0; } Remember that you will put this at the top of your css file, so it will clear out the mess.Wednesday, August 15, 2012
  75. 75. “When I am working on a problem, I never think about beauty. I only think about how to solve the problem. …” – RICHARD BUCKMINSTER FULLERWednesday, August 15, 2012
  76. 76. “When I am working on a problem, I never think about beauty. I only think about how to solve the problem. But when I have finished, if the solution isn’t beautiful, I know it is wrong.” – RICHARD BUCKMINSTER FULLERWednesday, August 15, 2012

×