{"id":149979,"date":"2016-02-02T10:00:00","date_gmt":"2016-02-02T15:00:00","guid":{"rendered":"http:\/\/premium.wpmudev.org\/blog\/?p=149979"},"modified":"2022-04-08T05:29:09","modified_gmt":"2022-04-08T05:29:09","slug":"wordpress-development-beginners-widgets-menus","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/wordpress-development-beginners-widgets-menus\/","title":{"rendered":"WordPress Development for Beginners: Widgets and Menus"},"content":{"rendered":"<p>Widgets and menus are generally your first port of call when making customizations to a WordPress site. Not only do they allow you place and display content anywhere on your site (that is widget-ready, of course, in the case of widgets) but they&#8217;re also noteworthy features for any potential users of your themes.<\/p>\n<p>While adding widgets and menus to your theme ultimately involves some coding expertise, the actual PHP needed is straightforward to implement. Once you\u2019ve got your head around the logic you can then put your CSS skills to use styling how your sidebars and menus look and feel.<\/p>\n<p>This is the fourth post in our five-part series for beginners, teaching you the fundamental concepts of WordPress development so you can take the leap from tinkerer to developer. By the end of the series, you will be able to create your own rudimentary themes and plugins, and flesh them out with your own features.<\/p>\n<p>In this tutorial, you\u2019ll learn how to code and customize your own sidebars and menus. We\u2019ll also delve into coding custom queries for more complex functionality.<\/p>\n<p><em>Note: For this series, it\u2019s important that you already have a thorough understanding of HTML and CSS as both of these languages are essential building blocks when working with WordPress.<\/em><br \/>\n<strong>Missed a tutorial in our WordPress Development for Beginners series? You can catch up on all five posts here:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/wordpress-development-beginners-getting-started\/\" target=\"_blank\">WordPress Development for Beginners: Getting Started<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/wordpress-development-beginners-php\/\" target=\"_blank\">WordPress Development for Beginners: Learning PHP<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/theme-development\/\" target=\"_blank\">WordPress Development for Beginners: Building Themes<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/wordpress-development-beginners-widgets-menus\/\" target=\"_blank\">WordPress Development for Beginners: Widgets and Menus<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/wordpress-development-beginners-building-plugins\/\" target=\"_blank\">WordPress Development for Beginners: Building Plugins<\/a><\/li>\n<\/ul>\n<p>Continue reading, or jump ahead using these links:<\/p>\n<ul>\n<li><a href=\"#working-with-widgetized-areas\">Working with Widgetized Areas<\/a><\/li>\n<li><a href=\"#widgets-what-we-ve-learned\">Widgets: What We&#8217;ve Learned<\/a><\/li>\n<li><a href=\"#working-with-menus\">Working with Menus<\/a><\/li>\n<li><a href=\"#further-reading-and-study\">Further Reading and Study<\/a><\/li>\n<\/ul>\n<h2 id=\"working-with-widgetized-areas\">Working with Widgetized Areas<\/h2>\n<p>What many people call sidebars are actually widgetized areas. Sometimes they do indeed display in the sidebar area, but this isn&#8217;t always necessarily the case.<\/p>\n<p>Widget areas can be displayed anywhere on your site and where exactly is really up to you as the theme developer. You might want to\u00a0display\u00a0one widget in the footer, another underneath a post, one hidden behind a menu, and so on.<\/p>\n<p>You also need to tell WordPress that you plan on creating a widgetized area. This is called <strong>registering a sidebar<\/strong> and makes the user interface show up in the admin.<\/p>\n<p>In part three of this series,\u00a0WordPress Development for Beginners: An Introduction to Theme Development, we created a\u00a0<code>functions.php<\/code> file. Let&#8217;s make the main content for the theme we&#8217;ve been working on a bit narrower and add a second column for the sidebar. We&#8217;ll register the sidebar first so add the following to your <code>functions.php<\/code> file:<\/p>\n<p>If you don&#8217;t understand the <code>add_action()<\/code> bit don&#8217;t worry, we haven&#8217;t covered it yet! (We&#8217;ll look at it in the next post in this series, WordPress Development for Beginners: Building Plugins.<\/p>\n<p>The meat of the matter is in the <code>mat_widget_areas()<\/code> function. We use the <code>register_sidebar()<\/code>\u00a0function to tell WordPress all the details of our widgetized area.<\/p>\n<p>The name and description parameters will be displayed in the admin user interface, so make them descriptive! Each widget will be wrapped in the code provided in the before and after widget parameters. Use <code>%1$s<\/code> as a placeholder for the ID and <code>%2$s<\/code> for any classes and WordPress will generate these automatically.<\/p>\n<p>Once you&#8217;ve saved this code, you should see the new Widgets sub-section display within the Appearance menu and our widget area should show up with the given details.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735 size-735x735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/widget-area.jpg\" alt=\"Widget Area in WordPress\" width=\"735\" height=\"362\" \/><figcaption class=\"wp-caption-text\">Widget Area in WordPress<\/figcaption><\/figure>\n<\/div>\n<p>So far so good. You can now add widgets to this widgetized area as you normally would, but it won&#8217;t show up anywhere since we haven&#8217;t added it to our theme code just yet.<\/p>\n<p>Create a <code>sidebar.php<\/code> file and add the following to it: <code>&lt;div id=\"site-sidebar\"&gt;This is my sidebar&lt;\/div&gt;<\/code><\/p>\n<p>We&#8217;ll need to modify our header and footer files to accommodate a sidebar. The structure we&#8217;ll be looking for is the following:<\/p>\n<div class=\"gist\" data-gist=\"888faef83ac38a2b1e17c727c1c4d63a\" data-gist-file=\"structure.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/888faef83ac38a2b1e17c727c1c4d63a.js?file=structure.php\">Loading gist 888faef83ac38a2b1e17c727c1c4d63a<\/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>To implement this, we need to open the <code>#site-container<\/code> div in the header and close it in the footer. We&#8217;ll also need to include our sidebar in the footer. It contains the <code>#site-sidebar<\/code> element.<\/p>\n<p>As you can see, the sidebar file can be pulled in using the <code>get_sidebar()<\/code> function. At this point, you should see &#8220;This is my sidebar&#8221; under your content but by adding some styling we can put the sidebar next to our content.<\/p>\n<p>Here are the modifications I&#8217;ve made and the new additions and modifications in code form:<\/p>\n<ul>\n<li>I modified <code>#site-content<\/code> to decrease the max-width to 525px and added a left float<\/li>\n<li>I added <code>#site-sidebar<\/code> giving it a 220px width, 22px border, a border radius and white background just like the content and I floated it to the right<\/li>\n<li>I added <code>#site-container<\/code> making it as wide as the cumulative width of the content and sidebar and centering it.<\/li>\n<li>I added a clear rule to the footer to force it below the floated elements.<\/li>\n<\/ul>\n<p>The last piece of the puzzle is to tell WordPress to display all the widgets assigned to our sidebar. This can be done with the <code>dynamic_sidebar()<\/code> function, adding the ID of our sidebar as the first parameter.<\/p>\n<p>The test theme should now show a narrower content area and a small widget area on the right displaying the chosen widgets. It&#8217;s ugly, but nothing a little CSS later can&#8217;t fix!<\/p>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/sidebar.jpg\" alt=\"Our Theme sidebar.\" width=\"735\" height=\"357\" \/><figcaption class=\"wp-caption-text\">Our Theme sidebar.<\/figcaption><\/figure>\n<h2 id=\"widgets-what-we-ve-learned\">Widgets: What We&#8217;ve Learned<\/h2>\n<p>That might have been a bit overwhelming if this was your first time implementing a sidebar so let&#8217;s recap.<\/p>\n<p>To add a sidebar to WordPress you need to add the following steps:<\/p>\n<ul>\n<li>Register the sidebar using <code>register_sidebar()<\/code><\/li>\n<li>Use <code>dynamic_sidebar()<\/code> in <code>sidebar.php<\/code> to pull in your widgets<\/li>\n<li>Use <code>get_sidebar()<\/code> to include the sidebar in the appropriate place<\/li>\n<li>Use CSS to style your work<\/li>\n<\/ul>\n<h2 id=\"working-with-menus\">Working with Menus<\/h2>\n<p>Menus are similar in their logic to widgetized areas. You first need to register them so they show up in the WordPress admin and then add them to your theme using a function.<\/p>\n<p>Let&#8217;s start by registering a new menu in our <code>functions.php<\/code> file:<\/p>\n<p><span style=\"font-weight: 400;\"><div class=\"gist\" data-gist=\"793462a921bfe167fc8425ea75dbfa45\" data-gist-file=\"nav menu\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/793462a921bfe167fc8425ea75dbfa45.js?file=nav+menu\">Loading gist 793462a921bfe167fc8425ea75dbfa45<\/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><\/span><\/p>\n<p>This function allows you to add multiple menus by adding members to the array. The array key is the name of the theme location and the value is the name of the menu itself.<\/p>\n<p>Once you&#8217;ve done this you can start assembling a menu. Make sure to add some items and then assign the menu to the <strong>Our Awesome Header Menu<\/strong>&#8221; location, as pictured below.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/menu.jpg\" alt=\"Putting together our menu.\" width=\"735\" height=\"484\" \/><figcaption class=\"wp-caption-text\">Putting together our menu.<\/figcaption><\/figure>\n<\/div>\n<p>Wherever you want to output the menu, simplu use the <code>wp_nav_menu()<\/code> function. I&#8217;ll be adding it to the header file right under the <code>#site-header<\/code> element, like so:<\/p>\n<p><span style=\"font-weight: 400;\"><div class=\"gist\" data-gist=\"5e1d9d15c0536aa0f31268684f9d047a\" data-gist-file=\"menu display\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/5e1d9d15c0536aa0f31268684f9d047a.js?file=menu+display\">Loading gist 5e1d9d15c0536aa0f31268684f9d047a<\/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><\/span><\/p>\n<p>The <code>wp_nav_menu()<\/code> function takes a bunch of parameters you can use to control the output. The theme location is what really matters for us, though. Take a look at the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_nav_menu\/\" target=\"_blank\">function documentation<\/a>\u00a0in the WordPress Codex for a more in-depth explanation.<\/p>\n<p>Finally, I&#8217;ll add some basic styling to make things half-presentable. Excuse the ugliness \u2013 it can all be taken care of with some carefully crafted CSS (though that&#8217;s not the main focus of this article).<\/p>\n<p><span style=\"font-weight: 400;\"><div class=\"gist\" data-gist=\"1c8f089263cce556ce0d6a38cd2b79ec\" data-gist-file=\"Menu Style\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/1c8f089263cce556ce0d6a38cd2b79ec.js?file=Menu+Style\">Loading gist 1c8f089263cce556ce0d6a38cd2b79ec<\/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><\/span><\/p>\n<h2 id=\"further-reading-and-study\">Further Reading and Study<\/h2>\n<p>There are many of <a href=\"https:\/\/make.wordpress.org\/themes\/handbook\/review\/required\/\" target=\"_blank\"> requirements<\/a>\u00a0a theme must meet to be considered for inclusion in the WordPress Theme Directory. We&#8217;ve only just scratched the surface and you should now have enough knowledge to start picking away at adding more functionality to your theme. I recommend installing the <a href=\"https:\/\/wordpress.org\/plugins\/theme-check\/\" target=\"_blank\">Theme Check<\/a> plugin, which will analyze your theme and show you what needs to be done to meet the WordPress Theme Review Team&#8217;s requirements.<\/p>\n<p>A few things you should add include\u00a0a 404 page, perhaps a dedicated view for search results, pagination and a number of other elements everyday websites use all the time, like an about page and contact page. Once you&#8217;ve pinned down all the requirements you might want to use the theme customizer to allow any future users of your theme to select their own colors and other options.<\/p>\n<p>We&#8217;ve covered the basics of theme development and there&#8217;s much more to learn, but as long as you practice you should do just fine. That&#8217;s how I learned: bit by bit.<\/p>\n<p>Check back next week for the final post in this series,\u00a0WordPress Development for Beginners: Building Plugins.<\/p>\n<p>In the meantime,\u00a0you should:<\/p>\n<ul>\n<li>Review last week\u2019s post in this series, <a href=\"https:\/\/wpmudev.com\/blog\/theme-development\/\" target=\"_blank\">WordPress Development for Beginners: Building Themes<\/a><\/li>\n<li>Keep brushing up on your PHP \u2013 review\u00a0<a href=\"https:\/\/wpmudev.com\/blog\/wordpress-development-beginners-php\/\" target=\"_blank\">WordPress Development for Beginners: Learning PHP<\/a> and check out our recent post\u00a0<a href=\"https:\/\/wpmudev.com\/blog\/learning-php-deeply\/\" target=\"_blank\">Learning PHP, Deeply: 8 Resources for WordPress Developers<\/a>\u00a0for more PHP resources<\/li>\n<li>Continue building on your theme. You&#8217;ll get stuck, you&#8217;ll get frustrated and you&#8217;ll make errors that will take ages to fix, but that&#8217;s all perfectly normal. Work through it \u2013 it&#8217;s all part of the learning process.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Widgets and menus are generally your first port of call when making customizations to a WordPress site. In this tutorial, you\u2019ll learn how to code and customize your own widgets and menus, and also delve into coding your own custom queries.<\/p>\n","protected":false},"author":344049,"featured_media":151055,"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":[10076,9770],"tutorials_categories":[],"class_list":["post-149979","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-tutorials","tag-beginners","tag-development-2"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/149979","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\/344049"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=149979"}],"version-history":[{"count":36,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/149979\/revisions"}],"predecessor-version":[{"id":207797,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/149979\/revisions\/207797"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/151055"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=149979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=149979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=149979"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=149979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}