Projects is a plugin by WooThemes that is designed to provide a simple way of creating portfolios within WordPress.
Out of the box, Projects allows you to have categories, galleries, client details, and project URL's - this feature-set can also be extended through its various hooks, filters and templates.
In this article, I will show you how to create a basic online portfolio using Projects. I am going to be making a portfolio for a fictitious web design company. Projects is quite simple in nature and can be used for many types of websites, a few examples include:
Projects can be installed from the WordPress.org repository. From your WordPress dashboard go "Plugins" and click the "Add New" link. From the plugin installation page, search for "projects by woothemes" - it should come up as the top result. Click the "Install Now" link and follow the on-screen instructions.
There's just a few simple options to get Projects configured. After installation, you will see the following dialogue box:
Click the link to be taken to the Projects configuration page.
This is a dropdown menu that will list all of your WordPress pages, whichever page you select from here will be your projects base or archive page.
Here, the best idea is to first create a blank page. To do that, head over to "Pages" and add a new blank page. This page could be called anything, but for this tutorial we will use "projects". You can put content on this page if you want to - it will display above your projects.
The rest of the settings on this page concern images. You have:
Once you are happy with your settings hit the "Save Changes" button.
If you have added any posts or pages to WordPress before then this process should be pretty familiar to you. On this page you have the following details to fill in:
All Projects pages have the standard WordPress status (draft, pending review or published), visibility (public, password protected or private) and publish options (immediately or by date) available. These options can be accessed from the "Publish" area when adding your Project and by clicking on the "Edit" link next to the relevant heading.
To edit or delete Projects, go to the "All Projects" link within the "Projects" menu. Click on the project name to edit the project. After that, you will be greeted with the same screen as when adding a project. Make any changes here and click the "Update" button to save changes.
You can also click the "Move to Trash" link (within the "publish" area) to delete the item. Alternatively, from the "All Projects" screen you can hover over the project name and click either the "Edit" or the "Trash" link.
Once you have moved items to the trash, they aren't actually permanently deleted. Near the top of your "All Projects" page within the "Projects" menu, there are some links:
Note that the "Draft" and "Trash" links won't show up if you don't have any drafts or any posts in the trash.
If you click on the trash link, you will see all of the posts that you have marked for trash. If you hover over the name of the post you have the option to permanently delete or restore the post.
Categories are optional and you may not need them if you only have a few projects to show. For larger portfolios where the work may be more diverse, categories give you a good way of allowing users to filter what they see.
Categories can be added in two ways.
First, categories can be added within a Projects page. On a page, you will see "Project Categories" with a list of categories (if you have any) and a link called "+ Add New Category". If you click the link you can type the name of a new category and assign a parent category if you need to.
Alternatively, categories can be added by clicking the "Categories" link under the "Projects" menu. Here you can enter the category name, choose a parent category and set a custom slug if you need to. The slug is the URL version of the category name and is automatically filled in (it should be lowercase and only contain letters, numbers and hyphens), you can change this though if you want your URL to be different from your category name.
From this screen, you can also edit and delete categories. To do this, hover over the category name and click either "edit" or "delete". You can also bulk delete categories here if you need to - check the checkbox to the left of the category names that you want to delete and then select "Delete" form the bulk actions dropdown and click the "Apply" button.
There is one widget available for you to use with Projects: a simple list of your projects categories. You can add the widget by going to Appearance >> Widgets in the WordPress admin. The widget is called "Project Categories" and should be dragged and dropped to the widget area that you want it to appear. This widget has a few customisation options:
Remember to hit the "Save" button when you are finished here.
Projects ships with a handy shortcode for displaying your projects anywhere on your WordPress site.
Here's an example of the shortcode:
[projects limit="6" columns="3" orderby="date" order="asc" exclude_categories="4,6,8"]
Now, let's break this down a little:
limit: How many projects to display
columns: How many columns you want to use to display your projects
orderby: This defines what to order your projects by. It uses the standard WordPress 'orderby' parameters. Some handy ones include date, ID, title, order or rand (random).
order: This defines how to order your posts. This can either be asc (ascending) or desc (descending).
exclude_categories: A list of categories to exclude from the list. This needs to be in the form of a comma separated list of category ID's. An easy way to find the ID of a category is to go to the "Categories" section within the "Projects" menu and click on the link of the category that you want to find the ID for. In the URL bar of your web browser you should now see the following:
edit-tags.php?action=edit&taxonomy=project-category&tag_ID=2&post_type=projectall you need to do here is look at the
tag_ID=2section and take a note of that number.
This shortcode can be used in all of the normal places - pages, posts and widgets.
We've now gone through how to set up Projects as well as how to add, edit and delete Projects pages. Next time, we will look at how to theme, customize and extend Projects using CSS and a little PHP.