{"id":14915,"date":"2020-10-25T15:00:27","date_gmt":"2020-10-25T14:00:27","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=14915"},"modified":"2020-10-23T14:23:03","modified_gmt":"2020-10-23T12:23:03","slug":"conditional-menus-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/conditional-menus-wordpress\/","title":{"rendered":"How to Add Conditional Logic to Your WordPress Menus"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]One of the keys to WordPress\u2019 success, possibly even <em>the<\/em> key, is the CMS\u2019s willingness to give you the reins and let you do whatever you want with your website. Simply playing around with the controls you can access from your website\u2019s dashboard will do wonders. Choosing a <a href=\"https:\/\/qodeinteractive.com\/themes-list\/\">WordPress theme<\/a> can make your website look and behave in awesome new ways. WordPress lets you build a blog, a portfolio, or a store, using the same core system.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Some of the controls you have over your website aren\u2019t that obvious. When it comes to conditional menus, WordPress won\u2019t give you an easy way to add them. It doesn\u2019t matter that the conditional logic is built into the system \u2014 there isn\u2019t a button you can push or a menu you can browse to find a way to add it to your menus.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But that doesn\u2019t mean there\u2019s no way to do it. In this article, we\u2019ll show you:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-conditional-logic\">What Is Conditional Logic?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-can-you-use-conditional-logic-for\">What Can You Use Conditional Logic For?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-add-conditional-logic-to-menus-with-a-plugin\">How to Add Conditional Logic to Menus with a Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-add-custom-conditional-logic-to-wordpress-menus\">How to Add Custom Conditional Logic to WordPress Menus<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-conditional-logic\"><\/a>What Is Conditional Logic?<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/What-Is-Conditional-Logic.jpg\" class=\"attachment-full size-full\" alt=\"What Is Conditional Logic\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/What-Is-Conditional-Logic.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/What-Is-Conditional-Logic-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/What-Is-Conditional-Logic-620x354.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Conditional logic is the ability to set an outcome based on the fulfillment of specific criteria. If you\u2019ve ever heard of an if-then construct, you\u2019ve heard of conditional logic. <strong>So if a particular condition is met, something is going to happen. If that condition isn\u2019t met, the action won\u2019t be triggered. <\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Even though you can run a WordPress website without ever having to learn a single line of code, you should still know that WordPress is written with PHP code, as are the themes it uses. <strong>To add conditional logic to WordPress, you\u2019ll rely on conditional tags, small pieces of code whose purpose is to help you display what appears on your website under which circumstances. <\/strong>[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-can-you-use-conditional-logic-for\"><\/a>What Can You Use Conditional Logic For?<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"451\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/What-Can-You-Use-Conditional-Logic-For.jpg\" class=\"attachment-full size-full\" alt=\"What Can You Use Conditional Logic For?\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/What-Can-You-Use-Conditional-Logic-For.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/What-Can-You-Use-Conditional-Logic-For-300x193.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/What-Can-You-Use-Conditional-Logic-For-620x399.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]One of the best examples of how conditional logic can be put to use in WordPress is with forms. A form that\u2019s too short might not allow you to capture all the information you need. But every added field makes it more likely that the person filling it out will give up and browse away. <strong>Finding the middle ground between the two is an all too common part of form optimization.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>With conditional logic, you can show certain form fields only when specific conditions are met.<\/strong> You can show the fields only to the visitors who have answered an earlier question in a certain way. You can show additional content based on individual choices the visitors have made. <strong>With some clever use, you can use conditional logic to segment the visitors and provide them specific options. <\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The use case for menus isn\u2019t that different<\/strong>. Using conditional logic, you can choose which menu options show under which conditions. You can show different menu options on different pages, for example. You can also choose to display specific options for different post types. <strong>And it\u2019s also possible to show different options to regular visitors and those who are logged in. <\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-add-conditional-logic-to-menus-with-a-plugin\"><\/a>How to Add Conditional Logic to Menus with a Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]Whenever you have doubts about the way to do something seemingly complicated in WordPress, you should always check if there\u2019s a plugin that helps you do it.<strong> Plugins can be better than tinkering with sensitive files, especially if you\u2019re not exactly sure what you\u2019re doing. <\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The plugin of choice for adding conditional logic to WordPress menus is <a href=\"https:\/\/wordpress.org\/plugins\/if-menu\/\" target=\"_blank\" rel=\"noopener noreferrer\">If Menu<\/a> \u2013 Visibility Control for Menu Items. So your first step would be to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">install the plugin<\/a> and activate it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/If-Menu.jpg\" class=\"attachment-full size-full\" alt=\"If Menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/If-Menu.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/If-Menu-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/If-Menu-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After you\u2019re done, you\u2019ll notice a new item in the Appearance menu in your dashboard \u2013 If Menu. Clicking on it will take you to a window where you\u2019ll find out that you\u2019re using a free version of the plugin that supports only basic visibility rules such as those conditional on user role, user state, and visitor device. <strong>To get advanced rules and third-party integrations, you\u2019ll have to opt for the Premium plan.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Conditiona-Menus.jpg\" class=\"attachment-full size-full\" alt=\"Conditional Menus\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Conditiona-Menus.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Conditiona-Menus-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Conditiona-Menus-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To see the plugin in action, navigate to <em><strong>Appearance &gt; Menus<\/strong><\/em>. <strong>Select any menu item you want and find the Enable Visibility Rules checkbox.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Conditional-Menus-2.jpg\" class=\"attachment-full size-full\" alt=\"Conditional Menus\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Conditional-Menus-2.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Conditional-Menus-2-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Conditional-Menus-2-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you click on the checkbox, you\u2019ll bring up a menu that will allow you to choose the rule \u2014 either show or hide \u2014 and the conditions under which the rule will be triggered. <strong>The conditions are all the ones supported by the plugin \u2014 type of user, user state, page type, and device<\/strong>. You\u2019ll only be able to choose the conditions that match your subscription plan.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Conditional-Menus-3.jpg\" class=\"attachment-full size-full\" alt=\"Conditional Menus\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Conditional-Menus-3.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Conditional-Menus-3-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Conditional-Menus-3-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You\u2019ll be able to set several rules to a single menu item using the AND\/OR function you can bring up by selecting the little plus sign next to the list of conditions. And that\u2019s all there is to the If Menu plugin. <strong>Remember to save the menu once you\u2019re done creating all the rules<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-add-custom-conditional-logic-to-wordpress-menus\"><\/a>How to Add Custom Conditional Logic to WordPress Menus<\/h2>\n<p>[\/vc_column_text][vc_column_text]If Menu is a great plugin, but even its creator will acknowledge that it only covers a fraction of possible conditions you could add to your WordPress menu. The full list of <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/conditional-tags\/\" target=\"_blank\" rel=\"noopener noreferrer\">conditional tags WordPress supports<\/a> is extensive, and <strong>if you find in it something you\u2019d want to add to your website\u2019s menu, you can do it adding the following code to the theme\u2019s functions.php file:<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">add_filter('if_menu_conditions', 'additional_menu_conditions');\r\nfunction additional_menu_conditions($conditions) {\r\n$conditions[] = array(\r\n'id' =&gt; 'the-post-is-sticky', \r\n'name' =&gt; __('The post is sticky'), \r\n'condition' =&gt; function($item) { \r\nreturn is_sticky('the-post-is-sticky');\r\n}\r\n);\r\nreturn $conditions;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With this code, we\u2019re using the is_sticky tag to let us show or hide certain menu items from a visitor while they\u2019re viewing a sticky post. <strong>The name \u201cThe post is sticky\u201d is what we\u2019ll see in the If Menu options.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Conditional-Menus-4.jpg\" class=\"attachment-full size-full\" alt=\"Conditional Menus\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Conditional-Menus-4.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Conditional-Menus-4-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Conditional-Menus-4-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To be sure that the changes you make with the edits stick, and to avoid potential issues, make sure you <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-create-child-theme\/\">use a child theme<\/a> when editing functions.php.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let\u2019s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]With WordPress, what you can\u2019t and cannot do with your website is only limited by your knowledge and willingness to search for a useful plugin or WordPress theme. When adding conditional menus to WordPress, you can rely on both. You\u2019ll find the useful plugin that will help you get acquainted with the possibilities of conditional logic when put into use with WordPress menus. But then, you\u2019ll learn a couple of lines of code that will open up lots of new possibilities for the types of conditions you can set in your menu\u2019s visibility rules.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Conditional logic and WordPress menus go together like a hand a glove &#8211; if you know how to add it. If you don&#8217;t, you&#8217;re in the right place. We&#8217;ll teach you!<\/p>\n","protected":false},"author":9295,"featured_media":14940,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[21,15,4,13],"class_list":["post-14915","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-php","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/14915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=14915"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/14915\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/14940"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=14915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=14915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=14915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}