{"id":356330,"date":"2026-08-22T22:19:48","date_gmt":"2026-08-22T22:19:48","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/teamgraph-org-chart-team-directory\/"},"modified":"2026-08-22T22:19:31","modified_gmt":"2026-08-22T22:19:31","slug":"teamgraph","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/teamgraph\/","author":23542634,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.0","stable_tag":"1.0.0","tested":"7.0.4","requires":"6.4","requires_php":"8.0","requires_plugins":null,"header_name":"TeamGraph \u2013 Org Chart & Team Directory","header_author":"23Bit Studio","header_description":"Accessible org charts and team directories: chart, grid, and list views from one block or shortcode, built as semantic HTML. Drag-and-drop React admin; dependency-free front end.","assets_banners_color":"0f1723","last_updated":"2026-08-22 22:19:31","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/getteamgraph.com","header_author_uri":"https:\/\/23bitstudio.com","rating":0,"author_block_rating":0,"active_installs":0,"downloads":51,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"23bitstudio","date":"2026-08-22 22:19:31"}},"upgrade_notice":{"1.0.0":"<p>Initial release of TeamGraph.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3661230,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3661230,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256},"icon.svg":{"filename":"icon.svg","revision":3661230,"resolution":false,"location":"assets","locale":false}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3661230,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3661230,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250},"banner.svg":{"filename":"banner.svg","revision":3661230,"resolution":false,"location":"assets","locale":false}},"assets_blueprints":{},"all_blocks":{"teamgraph\/chart":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"teamgraph\/chart","title":"TeamGraph Chart","category":"widgets","icon":"networking","description":"Display your organization chart, team grid, or directory list.","keywords":["org chart","team","directory","organization"],"textdomain":"teamgraph","attributes":{"view":{"type":"string","default":"tree"},"root":{"type":"number","default":0},"department":{"type":"number","default":0},"location":{"type":"number","default":0},"showTools":{"type":"boolean","default":false},"showViewSwitch":{"type":"boolean","default":false}},"supports":{"html":false,"align":["wide","full"]},"editorScript":"teamgraph-block","style":"teamgraph-chart"}},"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3661230,"resolution":"1","location":"assets","locale":"","width":1458,"height":812},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3661230,"resolution":"2","location":"assets","locale":"","width":1458,"height":812},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3661230,"resolution":"3","location":"assets","locale":"","width":1458,"height":812},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3661230,"resolution":"4","location":"assets","locale":"","width":1458,"height":812},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3661230,"resolution":"5","location":"assets","locale":"","width":1458,"height":812},"screenshot-6.png":{"filename":"screenshot-6.png","revision":3661230,"resolution":"6","location":"assets","locale":"","width":1458,"height":812},"screenshot-7.png":{"filename":"screenshot-7.png","revision":3661230,"resolution":"7","location":"assets","locale":"","width":1458,"height":812}},"screenshots":{"1":"Org chart view with department pills and color guides","2":"Card grid view with live filtering","3":"Directory list view","4":"Chart Builder with drag-and-drop hierarchy editing","5":"Team Members list with search and bulk actions","6":"Add\/Edit Member with live card preview","7":"Theme color-guide editor with contrast warnings"}},"plugin_section":[],"plugin_tags":[11760,2465,17846,11762,3491],"plugin_category":[58],"plugin_contributors":[277026],"plugin_business_model":[],"class_list":["post-356330","plugin","type-plugin","status-publish","hentry","plugin_tags-employee-directory","plugin_tags-employees","plugin_tags-org-chart","plugin_tags-staff-directory","plugin_tags-team","plugin_category-user-management","plugin_contributors-23bitstudio","plugin_committers-23bitstudio"],"banners":{"banner":"https:\/\/ps.w.org\/teamgraph\/assets\/banner-772x250.png?rev=3661230","banner_2x":"https:\/\/ps.w.org\/teamgraph\/assets\/banner-1544x500.png?rev=3661230","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":"https:\/\/ps.w.org\/teamgraph\/assets\/icon.svg?rev=3661230","icon":"https:\/\/ps.w.org\/teamgraph\/assets\/icon.svg?rev=3661230","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/teamgraph\/assets\/screenshot-1.png?rev=3661230","caption":"Org chart view with department pills and color guides"},{"src":"https:\/\/ps.w.org\/teamgraph\/assets\/screenshot-2.png?rev=3661230","caption":"Card grid view with live filtering"},{"src":"https:\/\/ps.w.org\/teamgraph\/assets\/screenshot-3.png?rev=3661230","caption":"Directory list view"},{"src":"https:\/\/ps.w.org\/teamgraph\/assets\/screenshot-4.png?rev=3661230","caption":"Chart Builder with drag-and-drop hierarchy editing"},{"src":"https:\/\/ps.w.org\/teamgraph\/assets\/screenshot-5.png?rev=3661230","caption":"Team Members list with search and bulk actions"},{"src":"https:\/\/ps.w.org\/teamgraph\/assets\/screenshot-6.png?rev=3661230","caption":"Add\/Edit Member with live card preview"},{"src":"https:\/\/ps.w.org\/teamgraph\/assets\/screenshot-7.png?rev=3661230","caption":"Theme color-guide editor with contrast warnings"}],"raw_content":"<!--section=description-->\n<p>TeamGraph turns your team into reusable people records and displays them three ways \u2014 an organization chart, a card grid, or a directory list \u2014 from one Gutenberg block or shortcode. A drag-and-drop builder lives in wp-admin; no page builder required.<\/p>\n\n<p><strong>Accessible by construction, not by fallback.<\/strong> Most org chart plugins draw a diagram and bolt on a text alternative. TeamGraph inverts that: every view is real, semantic HTML \u2014 the chart <em>is<\/em> a nested list, laid out with pure CSS. Screen readers announce the reporting hierarchy natively, keyboard focus is visible everywhere, visitors without JavaScript get the complete chart, and on phones the tree reflows into a readable list instead of forcing you to pinch-zoom a boardroom diagram.<\/p>\n\n<p><strong>On the front end<\/strong> (Gutenberg block or <code>[teamgraph]<\/code> shortcode):<\/p>\n\n<ul>\n<li>Three views: org chart with connector lines, card grid, directory list<\/li>\n<li>Member cards with photo, name, job title, email, phone, and profile link<\/li>\n<li>Filter any view to one department or location, or chart a single branch from any member<\/li>\n<li>Collapse\/expand branches (chart and list) and a live type-to-filter box (grid and list)<\/li>\n<li>Department pills appear automatically where a branch's assignment changes<\/li>\n<li>Color guides style branches with your brand colors, inherited down the tree<\/li>\n<li>Prints cleanly, fully expanded<\/li>\n<li>No jQuery and no front-end framework \u2014 one small script and stylesheet, loaded only where a chart appears<\/li>\n<\/ul>\n\n<p><strong>In wp-admin<\/strong> (fast React screens under \"TeamGraph\"):<\/p>\n\n<ul>\n<li>Team Members: instant search, sortable columns, pagination, bulk actions, a Trash tab to restore deleted members or remove them permanently, and a one-click copy of the shortcode<\/li>\n<li>Add\/Edit Member with a biography, department, location, photo, live card preview, and a searchable manager picker that never offers a choice that would create a reporting cycle<\/li>\n<li>Chart Builder: drag onto a member to change their manager, drag above\/below to reorder, live tree search, slide-in editing drawer<\/li>\n<li>Organization: manage your departments and locations in one place<\/li>\n<li>Theme: color guides with up to eight levels and a live card preview \u2014 with live WCAG contrast warnings while you pick colors<\/li>\n<li>Settings: sample data you can load and remove with one click, CSV import\/export with a downloadable template, a built-in Docs guide, and uninstall data controls<\/li>\n<\/ul>\n\n<p><strong>Structured data, not drawings<\/strong><\/p>\n\n<p>Members are a custom post type (\"reports to\" is the post hierarchy; the biography is the post content), departments and locations are taxonomies, and every safeguard is enforced server-side: capability checks per action, reporting-cycle prevention, and color validation. Deleting a manager automatically moves their reports up a level \u2014 no orphaned branches, no blocked deletes \u2014 and deleted members go to a trash you can restore from, rebuilding their branch.<\/p>\n\n<h3>Development<\/h3>\n\n<p>TeamGraph ships with its complete, unminified source. The two admin bundles in <code>build\/<\/code> (<code>admin.js<\/code> and <code>block.js<\/code>) are compiled from <code>src\/<\/code> with <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/scripts\">@wordpress\/scripts<\/a>, which minifies its production output; the corresponding sources and the build configuration are included in the plugin so the compiled files can be reproduced and reviewed.<\/p>\n\n<ul>\n<li><code>src\/admin\/<\/code> \u2014 the wp-admin React screens. All screens share one bundle and mount by the root element's <code>data-page<\/code> attribute.<\/li>\n<li><code>src\/block\/<\/code> \u2014 the block editor bundle for the TeamGraph Chart block.<\/li>\n<li><code>webpack.config.js<\/code> and <code>package.json<\/code> \u2014 the build configuration.<\/li>\n<\/ul>\n\n<p>To rebuild the bundles from source, run this in the plugin directory:<\/p>\n\n<pre><code>npm install &amp;&amp; npm run build\n<\/code><\/pre>\n\n<p>Everything else runs unbuilt: the PHP in <code>includes\/<\/code> is plain source, and the front end in <code>assets\/frontend\/<\/code> is hand-written vanilla JavaScript and CSS with no build step and no dependencies.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the <code>teamgraph<\/code> folder to <code>\/wp-content\/plugins\/<\/code>, or install the plugin through the Plugins screen in WordPress.<\/li>\n<li>Activate the plugin through the \"Plugins\" screen.<\/li>\n<li>Open <strong>TeamGraph<\/strong> in the admin menu. Add team members (or load the sample organization from TeamGraph \u2192 Settings to explore), then arrange the reporting hierarchy in the Chart Builder.<\/li>\n<li>Add the chart to any page with the <strong>TeamGraph Chart<\/strong> block, or the <code>[teamgraph]<\/code> shortcode.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"how%20do%20i%20show%20the%20chart%20on%20a%20page%3F\"><h3>How do I show the chart on a page?<\/h3><\/dt>\n<dd><p>Insert the <strong>TeamGraph Chart<\/strong> block, or add the <code>[teamgraph]<\/code> shortcode. Both accept a view (<code>tree<\/code>, <code>grid<\/code>, or <code>list<\/code>), an optional starting member, and department\/location filters: <code>[teamgraph view=\"grid\" department=\"Marketing\"]<\/code> or <code>[teamgraph root=\"123\"]<\/code>. The shortcode accepts a department\/location by name or slug.<\/p><\/dd>\n<dt id=\"is%20the%20chart%20accessible%3F\"><h3>Is the chart accessible?<\/h3><\/dt>\n<dd><p>Yes \u2014 that's the point of TeamGraph. Every view is semantic HTML: the org chart is a nested list styled with CSS, so screen readers announce the hierarchy natively. Collapse toggles are real buttons with proper ARIA state, keyboard focus is visible on every control, headshots use your media library alt text, the default colors meet WCAG AA, and the chart works completely without JavaScript.<\/p><\/dd>\n<dt id=\"does%20teamgraph%20send%20any%20data%20anywhere%3F\"><h3>Does TeamGraph send any data anywhere?<\/h3><\/dt>\n<dd><p>No. TeamGraph makes no external requests and collects nothing \u2014 all data stays in your WordPress database.<\/p><\/dd>\n<dt id=\"what%20happens%20when%20i%20delete%20a%20manager%3F\"><h3>What happens when I delete a manager?<\/h3><\/dt>\n<dd><p>Their direct reports automatically move up to the deleted member's own manager, so the chart never breaks. The member goes to the trash and can be restored.<\/p><\/dd>\n<dt id=\"can%20a%20person%20link%20to%20their%20profile%20page%3F\"><h3>Can a person link to their profile page?<\/h3><\/dt>\n<dd><p>Yes \u2014 each member has an optional profile link, and the name on their card links to it.<\/p><\/dd>\n<dt id=\"does%20it%20work%20with%20my%20theme%3F\"><h3>Does it work with my theme?<\/h3><\/dt>\n<dd><p>Yes. The chart renders inside its own reset container, so theme typography and list styles can't distort the layout or the connector lines. Wide charts scroll inside the container \u2014 they never make your page scroll sideways.<\/p><\/dd>\n<dt id=\"will%20uninstalling%20delete%20my%20team%3F\"><h3>Will uninstalling delete my team?<\/h3><\/dt>\n<dd><p>Only if you ask it to. By default all data is kept; enable \"Delete all data on uninstall\" under TeamGraph \u2192 Settings if you want removal to be complete.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release: members with bios and photos, departments, locations, color guides, drag-and-drop Chart Builder, three semantic front-end views (chart, grid, list) with department\/location filtering, Gutenberg block and shortcode, sample data, CSV import\/export, uninstall controls.<\/li>\n<\/ul>","raw_excerpt":"Build accessible org charts and searchable team directories in WordPress. Manage people once \u2014 display them anywhere.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/356330","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=356330"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/23bitstudio"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=356330"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=356330"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=356330"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=356330"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=356330"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=356330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}