How to Create a Company Org Chart in WordPress (2024 Guide)

Want to showcase your company‘s organizational structure on your WordPress website? Creating a visually appealing org chart is a great way to help visitors, potential customers, and job candidates quickly understand how your business is structured.

In this comprehensive guide, we‘ll walk through the benefits of displaying an org chart, provide step-by-step instructions for creating one using WordPress plugins, and share best practices and examples to inspire your own org chart design.

Table of Contents

• Why Add an Org Chart to Your WordPress Site?
• How to Create an Org Chart in WordPress
  • Step 1: Choose an Org Chart WordPress Plugin
  • Step 2: Install and Activate the Plugin
  • Step 3: Plan Your Org Chart Structure and Content
  • Step 4: Input Your Organizational Data
  • Step 5: Customize Your Org Chart‘s Appearance
  • Step 6: Publish and Embed Your Org Chart
• Org Chart Design Best Practices and Tips
• WordPress Org Chart Plugin Comparison
• Org Chart Examples from Real Websites
• Frequently Asked Questions
• Conclusion

Why Add an Org Chart to Your WordPress Site?

Displaying an org chart on your company website has several benefits:

1. Improve transparency and trust – Openly sharing your organizational structure shows you have nothing to hide, increasing credibility with customers and partners.

2. Enhance navigation and communication – An org chart helps stakeholders quickly identify who to contact for their needs, reducing friction and improving interactions.

3. Showcase your team and culture – Putting faces to names and highlighting your leadership gives website visitors a glimpse into your company‘s personality and values.

4. Strengthen employer branding – A well-designed org chart can boost recruiting efforts by demonstrating your company‘s legitimacy, size, and growth opportunities to job seekers.

Don‘t just take my word for it – the data shows the advantages of org charts:

• 56% of job seekers say company culture is more important than salary (Source: Glassdoor)
• Executives spend an average of 67 minutes per day searching for information (Source: McKinsey)
• 50% of customers say employee bios and photos are critical or important to their purchasing decisions (Source: KoMarketing)

Now that we‘ve established the why, let‘s dive into the how of creating an org chart in WordPress.

How to Create an Org Chart in WordPress

Follow these steps to design and publish a company org chart on your WordPress website.

Step 1: Choose an Org Chart WordPress Plugin

The easiest way to create an org chart in WordPress is by using a dedicated plugin. Here are a few of the most popular options:

While you can manually design a static image org chart, using a dynamic plugin offers many advantages, including:

• Easier updates and maintenance
• Interactive chart features
• Responsive design for mobile screens
• Extensibility as your organization grows

For this tutorial, we‘ll use the free WP OrgChart plugin as an example. But the general principles apply to whichever plugin you choose.

Step 2: Install and Activate the Plugin

In your WordPress dashboard, navigate to Plugins > Add New and search for "WP OrgChart". Click Install Now, then Activate:

The plugin is now ready to use in your WordPress site. You‘ll see a new WP OrgChart tab in the left sidebar:

Step 3: Plan Your Org Chart Structure and Content

Before diving into the plugin, it‘s important to plan out your org chart‘s structure and gather the necessary content.

Consider the following:

• What is the overall hierarchy and reporting structure of your organization? Sketch it out on paper or a digital tool first.
• How many levels of depth will you include? More than 4-5 levels can become visually overwhelming.
• Will you display individual employees, job titles, or a mix?
• What additional info is important to show for each node (e.g. photo, contact info, bio, location)?

Gather the relevant info and media assets before building the chart to streamline the process. Use a spreadsheet to organize the data, like this:

Step 4: Input Your Organizational Data

With your org chart planned, it‘s time to translate it into the WP OrgChart plugin interface.

In your WordPress dashboard, go to WP OrgChart > Add New to create a new chart. Give it a name and select the Root Node:

The chart builder interface will appear. Begin by double-clicking the Root Node box to edit its content. Add the top-level employee‘s name, title, photo, and any other relevant information.

To add child nodes (direct reports), hover over the Root Node and click the "+" button on the left or right. Repeat this process to build out the full hierarchy, editing each node‘s content as you go.

The WP OrgChart interface automatically formats the spacing and alignment as you add nodes. You can drag-and-drop nodes to rearrange their position or change their reporting structure.

For larger organizations, you may need to add multiple "branches" for different departments or teams off the main hierarchy. Simply hover over the relevant upper-level node and add new child nodes in the appropriate direction.

If you have many nodes to add, you can also use the Bulk Import feature to upload a CSV file with the org chart data, rather than manually creating each one.

Once you‘ve input all the necessary nodes and data, it‘s time to make the chart your own.

Step 5: Customize Your Org Chart‘s Appearance

WP OrgChart offers several customization options to match your brand and website design. In the Settings tab, you can modify the chart‘s color scheme, backgrounds, borders, font sizes, and more:

Fine-tune the chart‘s size and spacing using the Dimensions tab. You can specify the horizontal and vertical spacing between nodes, chart margins, responsive behavior, and more.

Play around with different settings to find the right balance of readability and visual appeal for your chart.

Step 6: Publish and Embed Your Org Chart

Once you‘re satisfied with your org chart‘s design, it‘s time to publish it to your WordPress site.

WP OrgChart makes this easy with two embed options:

1. Gutenberg block – If you use the WordPress block editor, simply add a new block and search for "OrgChart". Select your chart from the dropdown and publish the page or post.

2. Shortcode – For older WordPress versions, you can embed the chart using a shortcode. Copy the shortcode from the OrgChart Embed Settings tab and paste it into any page or post.

Be sure to preview the embedded chart to test its appearance and functionality. Make any necessary adjustments before publishing the page live.

Org Chart Design Best Practices and Tips

To make your org chart as effective and engaging as possible, follow these best practices:

• Keep it simple – Don‘t try to cram too much info into each node or include too many levels. Focus on the essential hierarchy and details.
• Use clear labels and headings – Make sure each node‘s title and employee info is legible and easy to understand at a glance. Use descriptive headings for different departments or branches.
• Incorporate brand elements – Customize the colors, fonts, and styling to align with your website and brand aesthetic. A cohesive look builds credibility.
• Provide clickable contact info – Empower visitors to easily get in touch by linking employee names and titles to their email address, bio page, or other relevant links.
• Make it responsive – Ensure your chart adapts gracefully to different screen sizes, especially smartphones. WP OrgChart‘s automatic responsive settings make this easier.
• Keep it up-to-date – Assign a point person to maintain your org chart and update it promptly whenever your team changes. An outdated chart can cause confusion.

WordPress Org Chart Plugin Comparison

To dive deeper into the features and differences between popular WordPress org chart plugins, here‘s a detailed comparison table:

As you can see, the right plugin for you will depend on your specific needs and budget. The free options work well for basic org charts, while OrgChart provides the most advanced customization and integrations for enterprises.

Org Chart Examples from Real Websites

Need some inspiration for your own org chart design? Check out these examples of effective charts on real company websites:

charity:water

What works well:

• Simple, clean design with photos and names
• Contrasting colors and clear hierarchy
• Concise descriptions of each department

Moz

What works well:

• Engaging hover-over employee bios
• Filterable by department
• Links to individual team member pages

Basecamp

What works well:

• Fun, quirky headshots showing personality
• Clear hierarchy with expandable sections
• Unique circular layout

Use these examples as a starting point to brainstorm a chart that aligns with your brand and goals.

Frequently Asked Questions

How do I create an org chart in WordPress without a plugin?

If you have web design experience, you could code an org chart from scratch using HTML, CSS, and JavaScript. However, using a plugin is much faster and easier, especially for maintaining the chart over time.

Can I create multiple org charts for different departments?

Yes, most org chart plugins, including WP OrgChart, allow you to create unlimited charts for different parts of your organization. Simply create a new chart for each department or team.

How do I keep my org chart updated?

Assign a specific person or team to be responsible for updating the org chart whenever your company‘s structure changes. Most plugins make it simple to add, edit, or delete nodes as needed.

Can I customize the appearance of individual employee nodes?

Yes, plugins like OrgChart offer granular control over the content and styling of each node, such as backgrounds, borders, images, and more. Refer to your plugin‘s documentation for specific customization options.

How do I make my org chart responsive for mobile devices?

Most modern org chart plugins are designed to be mobile responsive by default. For example, WP OrgChart automatically scales and adjusts the chart layout to fit different screen sizes. Be sure to test your chart on multiple devices to ensure a smooth experience.

Conclusion

Creating a company org chart in WordPress is a smart way to showcase your business structure, improve communication, and enhance employer branding. By following this guide and leveraging a user-friendly plugin like WP OrgChart, you can design and publish a professional org chart with no coding required.

Remember to keep your chart simple, visually engaging, and up-to-date for maximum impact. With the right WordPress org chart solution, you can strengthen relationships and understanding with all your website visitors.