{"id":59,"date":"2023-01-06T12:14:54","date_gmt":"2023-01-06T19:14:54","guid":{"rendered":"https:\/\/comm.engineering.asu.edu\/pitchfork\/?post_type=pitchfork-docs&#038;p=59"},"modified":"2023-01-06T13:39:45","modified_gmt":"2023-01-06T20:39:45","slug":"configuring-the-header","status":"publish","type":"pitchfork-docs","link":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/configuring-the-header\/","title":{"rendered":"Configuring the header"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"access-customizer\">Access the customizer<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Most of the controls for configuring the header of your website can be found within the WordPress customizer. You can access that control panel by either clicking the link within the admin toolbar (when logged into the site) or from the admin sidebar at Appearance -> Customizer<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-930feb06 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large is-style-uds-figure\"><img loading=\"lazy\" decoding=\"async\" width=\"804\" height=\"1024\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/2\/2023\/01\/header-find-customizer-804x1024.png\" alt=\"Scrrenshots of how to find the customizer in the WP admin space.\" class=\"wp-image-62\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/01\/header-find-customizer-804x1024.png 804w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/01\/header-find-customizer-236x300.png 236w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/01\/header-find-customizer-768x978.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/01\/header-find-customizer.png 892w\" sizes=\"auto, (max-width: 804px) 100vw, 804px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large is-style-uds-figure\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"284\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/2\/2023\/01\/header-customize-adminbar-1024x284.png\" alt=\"Screenshot of the wp admin toolbar with an arrow pointing to the customize link.\" class=\"wp-image-61\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/01\/header-customize-adminbar-1024x284.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/01\/header-customize-adminbar-300x83.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/01\/header-customize-adminbar-768x213.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/01\/header-customize-adminbar.png 1080w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">More from wordpress.org: <a href=\"https:\/\/wordpress.org\/support\/article\/appearance-customize-screen\/\">https:\/\/wordpress.org\/support\/article\/appearance-customize-screen\/<\/a><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-wordpress-org-forums wp-block-embed-wordpress-org-forums\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/wordpress.org\/support\/article\/appearance-customize-screen\/\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"site-title-parent-unit\">Site title and parent unit<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Site Information<\/strong> panel within the customizer provides the necessary tools to display the site title within the header. Within this panel there are also options for adding a parent unit and linking that parent unit name to a separate website.<\/p>\n\n\n<div class=\"wp-block-alert alert is-style-alert-info\"><div class=\"alert-icon\"><span class=\"fas fa-check-circle\"><\/span><\/div><div class=\"alert-content\"><div class=\"acf-innerblocks-container\">\n\n<p class=\"wp-block-paragraph\">Be sure to press the &#8220;publish&#8221; button to make the changes permanent after you are done with your edits.<\/p>\n\n<\/div><\/div><\/div>\n\n\n<figure class=\"wp-block-image size-large is-style-uds-figure\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"611\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/2\/2023\/01\/header-add-parent-unit-1024x611.png\" alt=\"A step action illustration of how you can navigate to the site title and parent unit sections within the customizer.\" class=\"wp-image-64\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/01\/header-add-parent-unit-1024x611.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/01\/header-add-parent-unit-300x179.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/01\/header-add-parent-unit-768x458.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/01\/header-add-parent-unit-1536x916.png 1536w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/01\/header-add-parent-unit.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-navigation-bar\">Adding a navigation bar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To display the navigation bar within the header, you need to assign a menu to the menu location labeled <strong>main menu<\/strong>. That menu will also need to contain at least one link in order for the menu bar to be displayed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-uds-figure\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"646\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/2\/2023\/01\/image-1024x646.png\" alt=\"Screen shot of the cuztomizer path for selecting a menu to be placed within the Main Menu location.\" class=\"wp-image-65\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/01\/image-1024x646.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/01\/image-300x189.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/01\/image-768x485.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/01\/image-1536x969.png 1536w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/01\/image.png 1648w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Controls for building a menu and assigning menus to a menu location are also available in a different part of the WordPress admin at <code>\/wp-admin\/nav-menu.php<\/code>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are advantages and disadvantages for using the customizer (as pictured above).<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>For making quick edits to an existing menu, or for the ability to see the results of your edits in real-time, the customizer is the best tool to use. <\/li>\n\n\n\n<li>A visit to the customizer is also usually needed to configure other aspects of the site as well. (One less click!)<\/li>\n\n\n\n<li>However, if your plan for the navigation of the site includes the need for a call-to-action button, you MUST use the interface at <code>\/wp-admin\/nav-menu.php<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Additional things to note:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If the website was to be used as a landing page using the &#8220;<a href=\"https:\/\/unity.web.asu.edu\/@asu-design-system\/component-header\/index.html?path=\/story\/uds-asu-header--no-navigation\">no navigation<\/a>&#8221; state of the header, you can leave the <strong>main menu<\/strong> location unassigned as pictured below. The site will still function normally in all other regards.<br><\/li>\n\n\n\n<li>The &#8220;<a href=\"https:\/\/unity.web.asu.edu\/@asu-design-system\/component-header\/index.html?path=\/story\/uds-asu-header--no-navigation-with-buttons\">no navigation with buttons<\/a>&#8221; header state can be achieved by adding only CTA buttons to a menu that is assigned to the <strong>main menu<\/strong> location.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p class=\"mb-2\">Configuring the header of your website is one of the first things you should do when you start a new project.<\/p>\n","protected":false},"parent":0,"menu_order":8,"template":"","pitchfork-docs-category":[8],"class_list":["post-59","pitchfork-docs","type-pitchfork-docs","status-publish","hentry","pitchfork-docs-category-header-and-navigation"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Configuring the header - Pitchfork Theme for WordPress<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/configuring-the-header\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Configuring the header - Pitchfork Theme for WordPress\" \/>\n<meta property=\"og:description\" content=\"Configuring the header of your website is one of the first things you should do when you start a new project.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/configuring-the-header\/\" \/>\n<meta property=\"og:site_name\" content=\"Pitchfork Theme for WordPress\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-06T20:39:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/01\/header-find-customizer.png\" \/>\n\t<meta property=\"og:image:width\" content=\"892\" \/>\n\t<meta property=\"og:image:height\" content=\"1136\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/configuring-the-header\\\/\",\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/configuring-the-header\\\/\",\"name\":\"Configuring the header - Pitchfork Theme for WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/configuring-the-header\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/configuring-the-header\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2023\\\/01\\\/header-find-customizer-804x1024.png\",\"datePublished\":\"2023-01-06T19:14:54+00:00\",\"dateModified\":\"2023-01-06T20:39:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/configuring-the-header\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/configuring-the-header\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/configuring-the-header\\\/#primaryimage\",\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/79\\\/2023\\\/01\\\/header-find-customizer.png\",\"contentUrl\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/79\\\/2023\\\/01\\\/header-find-customizer.png\",\"width\":892,\"height\":1136,\"caption\":\"Scrrenshots of how to find the customizer in the WP admin space.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/configuring-the-header\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Documents\",\"item\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Configuring the header\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#website\",\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/\",\"name\":\"Pitchfork Theme for WordPress\",\"description\":\"an ASU Engineering theme for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Configuring the header - Pitchfork Theme for WordPress","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/configuring-the-header\/","og_locale":"en_US","og_type":"article","og_title":"Configuring the header - Pitchfork Theme for WordPress","og_description":"Configuring the header of your website is one of the first things you should do when you start a new project.","og_url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/configuring-the-header\/","og_site_name":"Pitchfork Theme for WordPress","article_modified_time":"2023-01-06T20:39:45+00:00","og_image":[{"width":892,"height":1136,"url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/01\/header-find-customizer.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/configuring-the-header\/","url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/configuring-the-header\/","name":"Configuring the header - Pitchfork Theme for WordPress","isPartOf":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#website"},"primaryImageOfPage":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/configuring-the-header\/#primaryimage"},"image":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/configuring-the-header\/#primaryimage"},"thumbnailUrl":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/2\/2023\/01\/header-find-customizer-804x1024.png","datePublished":"2023-01-06T19:14:54+00:00","dateModified":"2023-01-06T20:39:45+00:00","breadcrumb":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/configuring-the-header\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/configuring-the-header\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/configuring-the-header\/#primaryimage","url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/01\/header-find-customizer.png","contentUrl":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/01\/header-find-customizer.png","width":892,"height":1136,"caption":"Scrrenshots of how to find the customizer in the WP admin space."},{"@type":"BreadcrumbList","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/configuring-the-header\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/comm.engineering.asu.edu\/pitchfork\/"},{"@type":"ListItem","position":2,"name":"Documents","item":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/"},{"@type":"ListItem","position":3,"name":"Configuring the header"}]},{"@type":"WebSite","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#website","url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/","name":"Pitchfork Theme for WordPress","description":"an ASU Engineering theme for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/comm.engineering.asu.edu\/pitchfork\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/pitchfork-docs\/59","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/pitchfork-docs"}],"about":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/types\/pitchfork-docs"}],"wp:attachment":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/media?parent=59"}],"wp:term":[{"taxonomy":"pitchfork-docs-category","embeddable":true,"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/pitchfork-docs-category?post=59"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}