Project Management with WordPress & P2 - WordCamp Toronto 2013

Andy McIlwain & WPUniversity.com

@ WordCamp Toronto 2013

October 6, 2013 @ Humber College Lakeshore Campus

Andy McIlwain, a guy with many hats:

• Co-Organizer, Toronto WordPress Group & WordCamp Toronto

• “Content Guy” (Communications) @ WPUniversity.com

• Lots of players.• Basecamp, Teambox, Huddle, Asana,

Teamwork PM, Ace Project, Zoho

• Trello (a personal favourite of ours)

• …What are you using?

• Incremental costs.

• Features vary from one to the next.

• Lack of control.• Need a feature? “We’ll take it into

consideration” or add yet another service.

• Open Source = Control

• Themes & Plugins

• Free (as in Free Beer)

Objective:

We’re going to play to WordPress strengths by creating a platform for communication and collaboration. This won’t handle time tracking, invoicing, or file storage.

• Over 100 P2 blogs running at Automattic.

• Make.WordPress.org sites now running on P2.

• Completely free to use.

• Create something that is secureand private.

• Every project (e.g. client) has a separate site.

• Every site is locked down with restricted capabilities and access.

Users must log in to get access!We don’t want stuff shared publicly*

*Michael’s methods are still awesome though!

• A good web host like WP Engine.

• The latest version of WordPress.

• P2 theme from Automattic.

• A dozen plugins. (More on that in a moment.)

• SSL certificate. (Optional.)

• Separate service for storing/sharing files. (Sync it up, baby!)

• Members

• Who’s Online

• P2 Check In

• P2 Likes

• P2 by Email

• P2 Resolved Posts

• Backup plugin(e.g. Backup Buddy)

• Custom Login

• Blog Copier

• Install WordPress.• Suggest using a subdomain, e.g.

projects.yoursite.com

• Enable multisite.• Follow the steps in Create a

Network.

• Use the subdirectory option.

• Install the Members plugin.

• Activate it for the network.

• Go to your main network blog. Under Settings, click Members.

• Under Private Site, check the Redirect All Users and Show error message for feed items checkboxes.

• Click Update Settings.

• This forces users to log in whenever they try to access the site.

• From the Network Admin screen,go to Themes > Add New.

• Look for P2 from Automattic. Click Install Now.

• Click Network Enable.

• Who’s Online• Sidebar widget. Shows which users are active on the site.

• P2 Check In• Lets users check into the site. Shows how long they’ve been checked in for.

Useful for real-time collaboration on pages.

• P2 Likes• Adds the equivalent of upvoting/+1 voting to individual posts and comments.

• P2 by Email• Gives you more email notifications than what P2 provides out of the box. Lets

you submit posts and comments via email.

• P2 Resolved Posts• Lets you mark posts as Resolved or Unresolved. Use in combination with

smart tagging to add a task management/bug tracking component.

• It’s like insurance for your site!

• You’re using your multisite network for collaboration, documentation, and other fun stuff. Good backup plugin = worth every penny.

• Backup Buddy from iThemes is one we swear by.

• Create a custom-branded experience for clients.

• Small details like this add to the level of polish.

• Network Activate this plugin.

• Easily copy blogs within a multisite network.

• Network Activate this plugin.

• We’re building a collaboration & communication solution.

• WordPress is not a replacement for file synchronization.

• Plenty of great options to choose from:• Google Drive

• SkyDrive from Microsoft

• SharePoint

• Dropbox

• Box

• Copy.com

• …any others?

• Goal: Set up a dummy P2 site that we’ll replicate for all projects.

• Use the Blog Copier plugin to simplify replication process.

• Log into the Network Admin dashboard.

• Under Sites, click Add New.

• Enter the address and site title. Keep it simple, and make it something you won’t get confused with a project site.

• Enter your email address for Admin Email.

• Click Add Site.

• WordPress might take a moment to set things up. Once it’s done, you’ll see an alert message saying Site Added. Click Visit Dashboard to go to the new site’s WordPress dashboard.

• Click Appearance.

• Under Available Themes, click Activate for P2.

• Under Appearance, explore the Customize and Theme Options screens to see what you can customize.

• Tidy up the design to align more closely to your own brand, so you have a graceful fallback if you don’t customize for each project.

• The pages you use will depend on the work you do.

• Some handy starting points for most projects:• Contacts: A list of all team members and any other important people.

• Project Overview: Scope of the project, deliverables, and a timeline.

• Links: Important links to other websites, assets, resources, and so on.

• Introduction: A welcome message for project members.

• These pages are placeholders. You’ll flesh them out in more detail for each one of your projects. Simply create the pages and add some subheadings or placeholder text for now.

• Under Appearance, click Menus.

• If your pages aren’t on the menu, add from the Pages dropdown.

• From the Links dropdown, use the # symbol for the URL. This will be a placeholder for each of your projects.

• The links will depend on your project. Good standbys: Calendar (e.g. Google Calendar), links to files on Google Drive or Dropbox, etc.

• Have a lot of links? Consider using dropdown menus for quick access.

• Click Save Menu.

• Click the Manage Locations tab. Set the Primary Menu to the menu you just created.

• Under Appearance, click Widgets. We suggest:• Search: Quickly search the site for information.

• P2 Filter Posts: Toggle between Resolved and Unresolved posts.

• P2 Recent Comments with Avatars: See the comments that have been left recently, along with an avatar for each user.

• Archives: Jump to a specific month.

• Calendar: Jump to a specific date.

• Who’s Online: Listing of users who are also logged in and viewing the site.

• Use whatever widget setup that makes sense for you.

• Go to your Network Admin dashboard.

• Mouse over Sites, click Blog Copier.

• Choose the source blog – this is the template site you created.

• Enter a URL for the new blog. Use only lowercase numbers, letters, and hyphens.

• Enter a title, e.g. the project or client name.

• Click Copy Now. It may take a moment for WordPress to create the new site. When completed, you’ll see a “Copied” status message.

• Site won’t load? There’s a known bug with Blog Copier.

• On the sidebar, click Sites. Find the new blog and click Edit.

• In the Info tab, update the Path field and click Save Changes.

You’re good to go!

• Four post formats: Status Update, Blog Post, Quote, and Link.

• You can add tags, embed media, and use HTML.

• You can also use the normal Add Post screen.

• Just click Reply next to any post to toggle the comment box.

• Click Toggle Comment Threads to show/hide comments below posts.

• Need feedback or a decision to be made?

• Click Flag Unresolved to highlight the post in red.

• Click Unresolved to change the flag to Resolved in green.

• Click the flag again to reset to blank.

• You can filter posts using the widget we set up earlier.

• Mouse over your name in the toolbar and click Edit My Profile.

• At the bottom of the page is the P2 By Email section.

• Customize your notification settings to suit your preference.

• Click Update Profile to save your changes.

• Customize the site even more (e.g. custom login).

• Add users. Add content!

Read/Watch:

• Michele Mizejewski: The Power of P2 (Video)

• Beau Lebens: Taking WordPress to the Front End with O2 (Video)

• Sign up for the O2 trial (Invite Only)

WPUniversity.com

Twitter: @WPUni / Facebook: WPUniversity

WordPress Training Resources: wpuniversity.com

Our Plugin, Sidekick for WordPress: sidekick.pro

Personal Stuff

Twitter: @andymci

Blog: andymci.com

Photo Credits

• David Goehring

• Dinner Series