How to Display Asana Tasks and Projects on WordPress

Imagine the convenience of showcasing project plans and progress within your brand’s unique style and under your own site domain. No more hassles of organizing clients, subscribers, or stakeholders separately in Asana. There’s so many possibilities when you combine Asana’s robust project management with WordPress’s content management capabilities!

In this article, we’ll first explore some benefits from displaying Asana tasks and projects on your WordPress site. Then we’ll look at the two easiest and most cost-effective ways you can start. So let’s go!

Why Display Asana Tasks on WordPress?

With WordPress websites, there’s two key areas to display Asana tasks and projects. First, there’s the frontend of your website which is public to site visitors and users. Second, there’s the admin area of your WordPress website which is where administrators, editors, and contributors manage the website’s content.

Let’s see what creative solutions these two areas of WordPress offer when integrated with Asana…

Streamlined Project Management

By displaying Asana tasks in your WordPress admin area, you can streamline project management by pinning tasks directly on the relevant WordPress content. This minimizes context-switching between task management and content creation to increase efficiency and reduce burnout for knowledge workers. Aligning tasks and content in this way also improves clarity which can lead to better collaboration and teamwork.

Improved Client Engagement

What about displaying Asana tasks on the WordPress frontend? Instead of spending time composing progress updates and responding to emails, you can easily share project plans and progress with your clients! This transparent approach empowers clients to conveniently check in on progress, fostering trust and satisfaction in your services. When individual project tasks are visible, clients can witness the value you’re providing in real-time. Publishing the live project plan offers them peace of mind throughout the project. This customer-centric experience can also enhance client engagement and establish lasting trust. The best part is that you can greatly reduce sales friction by not needing to onboard clients into your Asana workspace. This approach facilitates a seamless and hassle-free experience for both you and your clients from sale to project completion!

Customization and Branding

Arguably the best part of displaying Asana tasks and projects on your WordPress website is that you can customize the styling to suit your own branding. If you were to bring clients directly into your Asana workspace, you’d need to convince and train your client on Asana. Conversations around project progress then center around Asana rather than your own brand. This is not good! By integrating Asana with your own WordPress website, you instead get the best of both platforms. Your team stays productive in Asana’s powerful project management app while your clients enjoy a seamless, on-brand experience presented in WordPress! Why direct clients to Asana when you can create a tailored experience on your own domain?

How to Display Asana Tasks on WordPress

The benefits sound like a dream come true, so how can we make this happen? Well, here’s the best two ways to display Asana tasks and projects on WordPress without technical knowledge, extensive configurations, or a big budget. Let’s take a look!

Shareable Read-Only Links in Asana Premium

The most immediate way to share Asana tasks and projects with your WordPress users is to use shareable links in the Asana app. However, this feature is only available for Asana Premium organizations, so it does require some payment to use.

With Asana Premium’s built-in shareable links, you can readily pop a project link over to your client in an email or post the link on your WordPress website for them to access. The link presents a basic, high-level view of the Asana project’s tasks with assignees and due dates within an Asana-branded framing. Once the project is done, you can then deactivate the shareable link and remove it from your WordPress website.

As you can see, this leaves much to be desired when compared to the creative solutions that we discussed earlier. Shareable links don’t let you control the information visibility, branding or styling, or even the domain that it’s hosted on. If you don’t need other features that Asana Premium offers, then shareable links alone aren’t worth the subscription plan. So how can you get more control and customizability without paying over $10 per user per month?

Free WordPress Plugin: Completionist

Since there’s not a good out-of-the-box solution for displaying Asana projects and tasks on WordPress, a custom solution must by implemented by a web developer. Thankfully, there’s a free WordPress plugin to do just that and more! The Completionist WordPress plugin is a custom integration suite made specifically to connect Asana with WordPress, and it is available for anyone to download and install.

Once you install the Completionist plugin on your WordPress website, you just need to create an API key in Asana to connect your account. After that, you can set yourself as “the frontend authentication user” in the Completionist plugin’s settings. This just means that your Asana connection will be used to display the projects and tasks on your WordPress website’s frontend.

Displaying Asana Projects and Tasks on the WordPress Frontend

With Completionist’s shortcodes, you can easily display Asana projects and tasks by simply copying the project link from Asana. Completionist’s shortcodes are inspired by HTML <iframe> embeds, so the syntax is easy to use and remember:

[ptc_asana_project src="https://app.asana.com/0/1234567890/list"]

With this simple shortcode, you can configure over 13 different attributes to display the exact Asana project and task information that you’d like! Just take a look at all the Asana project and task elements you can display with this shortcode:

Asana Project Elements
  1. Project name
  2. Project description
  3. Project’s latest status update
  4. Project’s last modified date and time
  5. Project due date
  6. Project section names
An animation showing the Asana project information on WordPress.
Asana Task Elements
  1. Task name
  2. Task description
  3. Task assignee name and photo
  4. Task’s subtasks (and all their information)
  5. Task completion status and if completed tasks should be shown
  6. Task due date
  7. Task media attachments (images and videos)
  8. Task’s applied tags
An animation showing the Asana task information in a Completionist project embed on WordPress.
An animation showing the Asana task information on WordPress.

As you can see, there’s so much more data and customizations available to tailor the display exactly how you want. Not only is the Completionist WordPress plugin freely available, but it’s even compatible with Asana Basic (free) accounts!

Displaying Asana Tasks and Projects in the WordPress Admin

To boost your WordPress content team’s productivity, Completionist also provides two features for displaying Asana tasks in your WordPress admin area. Let’s take a look to explore the unique benefits provided by each admin feature!

Asana Tasks Overview in the WordPress Dashboard Widget

The first feature Completionist provides to your content management team in WordPress is a dashboard widget. Once logged into the WordPress admin, you can review all tasks associated with the site. This is determined by a chosen Asana tag in Completionist’s settings.

An animation of Asana tasks listed in the WordPress admin dashboard widget using the Completionist plugin.
An animation of Asana tasks listed in the WordPress admin dashboard widget.

The top of the dashboard widget features an overview of the remaining incomplete tasks. This makes it easy to quickly see task progress related to the WordPress website which can be quite motivating! Below the progress overview is the list of all incomplete tasks related to the website and some filter buttons. If a task is pinned to a specific piece of content on the WordPress website, it features a link to immediately start editing the associated content. This makes it incredibly easy to get straight to work right after you log into WordPress! Which brings me to the second admin feature…

Pinned Asana Tasks in the WordPress Posts Metabox

So how do you pin Asana tasks to WordPress content in the first place? Well, that’s what Completionist’s pinned tasks metabox is for! When editing any piece of content, you can directly pin existing Asana tasks on that content in WordPress. If you don’t already have a related Asana task, you can also create and pin a new Asana task right where you are within WordPress!

An animation of pinning an existing Asana task using the Completionist plugin's pinned tasks panel in the WordPress post editor.
An animation of pinning an existing Asana task in WordPress.

When an Asana task is pinned to WordPress content, it will be displayed in the pinned tasks metabox. Each task can be marked complete or incomplete, unpinned, deleted, or opened within Asana for further editing or review. Pinning Asana tasks directly on WordPress content vastly improves clarity by pointing tasks to the exact content pieces they refer to. It also reduces context-switching and streamlines productivity by letting editors focus on just the tasks that are related to each content piece.

Since Completionist allows you to pin Asana tasks on any content managed in WordPress, this could be anything depending on what plugins, theme, or customizations you have configured! For example, running a WooCommerce store means you could pin Asana tasks to products and orders. If you run a LearnDash e-learning website, you could pin Asana tasks to courses and quizzes.

Summary

So let’s recap! By displaying Asana tasks and projects on your WordPress website, you can boost productivity and clarity by connecting tasks with content. You can also improve client engagement and trust by providing a seamless interface for task transparency within your brand’s own style and site domain. To share a quick overview of project progress, Asana Premium users can quickly create shareable read-only links. To further integrate Asana and WordPress, you can install the free WordPress plugin, Completionist, which can be used by Asana Premium and Asana Basic users alike.

Get the Latest Updates

Join the Completionist mailing list to know when exciting new features and critical updates are released to supercharge your productivity with Asana and WordPress!

Michelle Blanchette

Michelle Blanchette

Full-stack web developer, specialized in WordPress and API integrations. Currently focused on building Completionist, the Asana integration WordPress plugin.