{"id":161326,"date":"2016-12-16T13:00:12","date_gmt":"2016-12-16T13:00:12","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=161326"},"modified":"2017-05-25T06:49:30","modified_gmt":"2017-05-25T06:49:30","slug":"custom-taxonomy-departments-divisions-company-website","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/custom-taxonomy-departments-divisions-company-website\/","title":{"rendered":"Creating a Custom Taxonomy for Departments on a Company Site"},"content":{"rendered":"<p>I often get asked if WordPress Multisite is a suitable solution for a company website that has\u00a0different divisions with unique identities. The answer is usually <em>yes<\/em> \u2013 Multisite can do this excellently.<\/p>\n<p>But it isn&#8217;t always necessary to create a separate site for each of the divisions in your company website, even using Multisite. If you want to include shared content that&#8217;s not specific to each division, or your divisions&#8217; identity has a lot in common, or you&#8217;re working with an existing single site installation, then there is a way to get around this without activating Multisite.<\/p>\n<p>In this post, I&#8217;m going to show you how to do it\u00a0using\u00a0a custom taxonomy. We&#8217;ll create a &#8220;division&#8221; taxonomy, which is applied to posts and pages, so you can specify which sections of your website each post or page should be in. And then we&#8217;ll create a template file for your taxonomy, so that you can display content for each division in just the way you want to.<\/p>\n<p>You will need to write some code, creating a plugin and a file in your theme, but the code isn&#8217;t difficult. I&#8217;m going to use a child theme of the twenty sixteen default theme but you can use this technique with your own theme. I&#8217;ll also create a plugin to register the custom taxonomy \u2013 it&#8217;s better practice to do this with a plugin so that you don&#8217;t lose your taxonomy if you change themes in the future.<\/p>\n<p>So let&#8217;s get started!<\/p>\n<h2>Getting Started<\/h2>\n<p>Before you start, you&#8217;ll need:<\/p>\n<ul>\n<li>A development or test installation of WordPress, which is a copy of your existing\u00a0company website if you have one. Don&#8217;t do this on your live site &#8211; you can always upload your files to live once it&#8217;s all working.<\/li>\n<li>A code editor.<\/li>\n<li>A theme &#8211; which can be your own theme or a child of twenty sixteen like I&#8217;m using. If you&#8217;re using a child theme you&#8217;ll also need to ensure that twenty sixteen is installed.<\/li>\n<\/ul>\n<p>Start by creating your child theme and activating it. I&#8217;m not going to go into detail on how you do this as you can read our <a href=\"https:\/\/wpmudev.com\/blog\/how-to-create-wordpress-child-theme\/\" target=\"_blank\">post on child themes<\/a>, but here&#8217;s the code for your child theme&#8217;s stylesheet:<\/p>\n<div class=\"gist\" data-gist=\"fb5c19719547f6134cef15ffc176e8a7\" data-gist-file=\"child_theme_stylesheet.css\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/fb5c19719547f6134cef15ffc176e8a7.js?file=child_theme_stylesheet.css\">Loading gist fb5c19719547f6134cef15ffc176e8a7<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>You may notice from that code that I&#8217;ve uploaded the files for this post to <a href=\"https:\/\/github.com\/rachelmccollin\/wpmu-taxonomy-company-divisions\" target=\"_blank\">GitHub<\/a>, where you can download it. I&#8217;ve also created a <a href=\"http:\/\/rachelmccollin.co.uk\/wpmu-taxonomy-company-divisions\/\" target=\"_blank\">demo site<\/a>.<\/p>\n<p>Now activate your child theme in your site. You&#8217;ll find that it looks exactly the same as if you had twenty sixteen activated:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/12\/starting-site.png\" alt=\"the starting home page\" width=\"670\" height=\"433\" \/> <\/div>\n<h2>Registering\u00a0the Taxonomy<\/h2>\n<p>The next step is to register our taxonomy by creating a plugin. You may be tempted to add the code to the functions file in your theme, but the problem with that is that if you change your theme in the future, you&#8217;ll lose your taxonomy &#8211; and access to any terms you&#8217;ve created for it in the WordPress admin.<\/p>\n<p>Create a new file in your <em>plugins<\/em> folder (which is in <em>wp-content<\/em>) and give it a suitable name. Open it with the following comments to tell WordPress what it is:<\/p>\n<div class=\"gist\" data-gist=\"3586769d59f025d32bb9ec1a63dc1671\" data-gist-file=\"register_taxonomy_plugin_opener.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/3586769d59f025d32bb9ec1a63dc1671.js?file=register_taxonomy_plugin_opener.php\">Loading gist 3586769d59f025d32bb9ec1a63dc1671<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Now add your function to register the taxonomy:<\/p>\n<div class=\"gist\" data-gist=\"852e2e51e713caaf555e802a1849b914\" data-gist-file=\"register_taxonomy.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/852e2e51e713caaf555e802a1849b914.js?file=register_taxonomy.php\">Loading gist 852e2e51e713caaf555e802a1849b914<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>This registers a taxonomy called <em>division<\/em> and creates the relevant labels for it, including its name, menu name and more. It also specifies that it applies to both posts and pages, with the\u00a0<code>array( 'post', 'page' )<\/code> argument in the\u00a0<a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/register_taxonomy\" target=\"_blank\"><code>register_taxonomy()<\/code><\/a> function.<\/p>\n<p>Now activate your plugin in your site. You&#8217;ll see that you have access to the new taxonomy when you&#8217;re editing posts and pages:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/12\/new-post.png\" alt=\"The post editing page includes our new taxonomy\" width=\"670\" height=\"512\" \/> <\/div>\n<p>You can now create taxonomy terms for each of the divisions in your company and then assign them to your posts and pages.<\/p>\n<h2>Displaying Your Divisions in the Site<\/h2>\n<p>I&#8217;ve now created some dummy content and assigned divisions to my posts and pages. Here are some of my posts:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/12\/posts-with-divisions.png\" alt=\"The post listing page in the admin - with divisions applied\" width=\"670\" height=\"350\" \/> <\/div>\n<p>I&#8217;ve also created some pages for my divisions, as well as some more generic pages:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/12\/pages-with-divisions.png\" alt=\"The page listing page in the admin - with divisions applied\" width=\"670\" height=\"358\" \/> <\/div>\n<p>You can now add all of your pages and divisions to the website&#8217;s main navigation menu. Don&#8217;t add your posts, as they&#8217;ll be displayed in archive pages. I&#8217;ve done this in my <strong>Menus<\/strong> admin screen:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/12\/nav-menu.png\" alt=\"The navigation menu with pages and taxonomy term archives added\" width=\"670\" height=\"549\" \/> <\/div>\n<p>WordPress will automatically create an archive page for each of your divisions and display these using the best template file in your theme, using the <a href=\"https:\/\/wphierarchy.com\" target=\"_blank\">theme template hierarchy<\/a>.<\/p>\n<p>So here&#8217;s my archive page for the Research\u00a0and Development taxonomy:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/12\/default-taxonomy-archive.png\" alt=\"Default taxonomy archive for R&amp;D, using twenty sixteen's template file\" width=\"670\" height=\"552\" \/> <\/div>\n<p>WordPress has done its job well here. It&#8217;s included not only posts but pages too, as the taxonomy is applied to them. However it&#8217;s displaying them in date order, as you&#8217;d expect. I&#8217;d like to display all of the pages first followed by all the posts. To do that I&#8217;ll need to create a custom taxonomy archive with a custom version of <a href=\"https:\/\/wpmudev.com\/blog\/the-wordpress-loop-explained\/\" target=\"_blank\">the loop<\/a>.<\/p>\n<h2>Creating a Taxonomy Archive<\/h2>\n<p>To display our taxonomy archive pages correctly, we need to create a theme template file called <em>taxonomy-division.php<\/em>. Let&#8217;s do that by copying an existing template file and editing it.<\/p>\n<p>If your theme has an <em>archive.php<\/em> file make a copy of that and call it\u00a0<em>taxonomy-division.php<\/em>. If you don&#8217;t have an archive template file, make a copy of <em>index.php<\/em> instead. Because I&#8217;m working with the twenty sixteen theme I&#8217;m going to make a copy of the <em>archive.php<\/em> file from twenty sixteen in my child theme and call it <em>taxonomy-division.php<\/em>.<\/p>\n<p>First edit the comments at the beginning of the file to more accurately show what this file is for:<\/p>\n<div class=\"gist\" data-gist=\"f365378231dde7344d5802a1a9a18877\" data-gist-file=\"taxonomy_archive_opener.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/f365378231dde7344d5802a1a9a18877.js?file=taxonomy_archive_opener.php\">Loading gist f365378231dde7344d5802a1a9a18877<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Now find the code for the loop. In my file copied from twenty sixteen it looks like this:<\/p>\n<div class=\"gist\" data-gist=\"9d41a80ea7bab2185aa33714ea1fa5c2\" data-gist-file=\"starting_loop.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/9d41a80ea7bab2185aa33714ea1fa5c2.js?file=starting_loop.php\">Loading gist 9d41a80ea7bab2185aa33714ea1fa5c2<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>This calls in a template part from twenty sixteen called <em>content.php<\/em>. We&#8217;re going to keep that but we&#8217;ll run it twice: once for posts and once for pages.<\/p>\n<p>Edit the loop in your template file so it reads like this:<\/p>\n<div class=\"gist\" data-gist=\"595e896b1fd37b85d6333ff639e327c5\" data-gist-file=\"two_loops.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/595e896b1fd37b85d6333ff639e327c5.js?file=two_loops.php\">Loading gist 595e896b1fd37b85d6333ff639e327c5<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>That runs the loop twice but only queries the database once, which makes it more efficient than using <code>WP_Query<\/code> to create a completely new query. It starts off by checking if the current post is of the &#8216;page&#8217; post type and displaying it if that&#8217;s the case, then it rewinds the posts and does the same for the &#8216;post&#8217; post type.<\/p>\n<p>Save this and you&#8217;ll find that your archive page displays pages first:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/12\/new-taxonomy-archive.png\" alt=\"The taxonomy archive displaying pages before posts\" width=\"670\" height=\"499\" \/> <\/div>\n<p>And here&#8217;s the full taxonomy template file:<\/p>\n<div class=\"gist\" data-gist=\"8b5f9eb0d904778861325d0fe2e973a3\" data-gist-file=\"taxonomy_division.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/8b5f9eb0d904778861325d0fe2e973a3.js?file=taxonomy_division.php\">Loading gist 8b5f9eb0d904778861325d0fe2e973a3<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<h2>Styling Divisions Differently<\/h2>\n<p>So we now have a template file that displays pages and posts for our divisions the way we want it to. Now let&#8217;s make those divisions look different from each other by adding some styling.<\/p>\n<p>You can choose to style your divisions any way you want, and you&#8217;ll probably want to do more than I&#8217;m doing here, but for now I&#8217;ll show you how to change the colours for some parts of the pages, posts and archive pages for each division, to make them look a bit different.<\/p>\n<p>You do this in your child theme&#8217;s stylesheet (or in your theme stylesheet if you&#8217;re not using a child theme).<\/p>\n<p>Open your stylesheet and add this styling:<\/p>\n<div class=\"gist\" data-gist=\"25127f522b0bab439022232863934fd5\" data-gist-file=\"taxonomy_styling.css\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/25127f522b0bab439022232863934fd5.js?file=taxonomy_styling.css\">Loading gist 25127f522b0bab439022232863934fd5<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>This adds styling for the heading in archive pages by targeting\u00a0the classes applied to the <code>body<\/code> element, based on the taxonomy terms I&#8217;ve used. You&#8217;ll need to edit yours with your own taxonomy terms &#8211; you can find the classes generated by inspecting the HTML\u00a0output in\u00a0a taxonomy archive page in your site and examining the <code>body<\/code> element.<\/p>\n<p>Now my R&amp;D taxonomy archive has some yellow added to differentiate it:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-670x670 size-670x670\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/12\/taxonomy-archive-styled.png\" alt=\"taxonomy archive with yellow styling\" width=\"670\" height=\"492\" \/> <\/div>\n<p>You could add more to this, maybe styling posts in your main blog page from different divisions and styling other elements on the page in the archive pages or in single posts. You could also style the links on your main navigation menu to match. But you can see here how it&#8217;s possible to create bespoke styling for each division in your company website.<\/p>\n<h2>WordPress Makes it Easy to Create a Company Site with Separate Divisions<\/h2>\n<p>Using the techniques I&#8217;ve shown you here, you can create a company website with separate sections for each division, that displays content relating to that division. You can also use the CSS classes that WordPress adds to the <code>body<\/code> element to style those divisions differently.<\/p>\n<p>You could take this much further, adding images, backgrounds or even changing fonts via your stylesheet, or creating a separate template file for each of your taxonomy terms, using the template hierarchy to name them correctly. All of which means that if you&#8217;re working with an existing site or don&#8217;t want to separate your company divisions completely, a single WordPress site can still give each of your divisions its own identify.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I often get asked if WordPress Multisite is a suitable solution for a company website that has\u00a0different divisions with unique identities. The answer is usually yes \u2013 Multisite can do this excellently. But it isn&#8217;t always necessary to create a separate site for each of the divisions in your company website, even using Multisite. If [&hellip;]<\/p>\n","protected":false},"author":347011,"featured_media":161496,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[557,263],"tags":[2125],"tutorials_categories":[],"class_list":["post-161326","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-tutorials","tag-taxonomy"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/161326","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/347011"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=161326"}],"version-history":[{"count":12,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/161326\/revisions"}],"predecessor-version":[{"id":165310,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/161326\/revisions\/165310"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/161496"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=161326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=161326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=161326"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=161326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}