Menus · HTML to WordPress

{"__v":68,"_id":"569d5cba71e3650d00acf005","category":{"__v":1,"_id":"569d55acec29360d00f6679c","pages":["569d55adec29360d00f6679e"],"project":"569d55abec29360d00f66798","version":"569d55acec29360d00f6679b","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-01-18T21:14:20.939Z","from_sync":false,"order":0,"slug":"documentation","title":"Converter Functionality"},"parentDoc":null,"project":"569d55abec29360d00f66798","user":"569d557c0306a10d00ce996e","version":{"__v":17,"_id":"569d55acec29360d00f6679b","project":"569d55abec29360d00f66798","createdAt":"2016-01-18T21:14:20.374Z","releaseDate":"2016-01-18T21:14:20.374Z","categories":["569d55acec29360d00f6679c","569d58cc0306a10d00ce9971","569d5c37ec29360d00f667a7","569ec89aebbadc0d0079bf71","569eccaa4a5c8b0d00744b3c","569eccbeffccd10d00a05cac","569ecd0f2d320817003b80d3","569ed216fbee990d0072d990","56b35bfb53da320d00c29716","56c1dc3d47394f0d00e227e8","570b98171e91d4220012acd8","570b9fa85f7a88340019f9f7","570e1ac1132c6d2b0000ab0b","570f5f72d6c6f00e00b98782","570f701ad6c6f00e00b98795","570f80fbb85a841900aa9505","5734a9642a48a90e0078e5ed"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"createdAt":"2016-01-18T21:44:26.100Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"WordPress features an easy way to edit navigation menus straight from the WordPress Dashboard. To add an editable WordPress menu to your theme simply add a \"wp-menu-name\" class to a menu parent element. After the conversion the contents of your static HTML menu will be replaced with the contents of the dynamic WordPress menu which can be defined from the WordPress Dashboard.\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"<ul class=\\\"wp-menu-main\\\">\\n\\t\\t<li><a href=\\\"index.html\\\">Home</a></li>\\n\\t\\t<li><a href=\\\"contact.html\\\">Contact</a></li>\\n\\t\\t<li><a href=\\\"about.html\\\">About</a></li>\\n</ul>\",\n \"language\": \"html\",\n \"name\": \"An example of creating a menu called \\\"Main\\\"\"\n }\n ]\n}\n[/block]\n### A WordPress menu\nAdd an editable WordPress menu with one simple class.\n[block:parameters]\n{\n \"data\": {\n \"0-0\": \"wp-menu-name\",\n \"0-1\": \"**Displays a WordPress menu**\\n\\nDisplays a WordPress menu called \\\"Name\\\". The class with the same name can be used multiple times in the same HTML file or across different HTML files to display the same menu.\",\n \"1-1\": \"The actual link element in the wp menu. Only needs to be specified once. Attributes (e.g. classes) from this element are used for all the links in the menu.\",\n \"1-0\": \"wp-menu-link\",\n \"2-0\": \"wp-sub-menu-wrapper\",\n \"2-1\": \"Add an optional wrapper for the sub menus, if required by the layout but not needed for the sub menus to function.\",\n \"h-0\": \"Class Name\",\n \"h-1\": \"Functionality\",\n \"0-2\": \".wp-menu\",\n \"1-2\": \".wp-menu .wp-menu-link\"\n },\n \"cols\": 2,\n \"rows\": 1\n}\n[/block]\n### Sub-menus\nSub-menus will work automatically and will be printed as a nested ul-list by WordPress.\n\n### Menu styling\nEach link in the WordPress menu will *automatically* use the styling of the first link element that is found inside the \"wp-menu-name\" element. If you have different styling for different menu items such as sign up buttons you can for example create a new menu for these in order to preserve the styling or use advanced CSS selectors like the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child\" target=\"_blank\">:nth-child selector</a> to style these elements separately.\n\n### Active menu item\nWordPress will *automatically* denote the active menu item (the item representing the page you are viewing) with the class \"active\", which can be used to style the link of the currently viewed page differently.","excerpt":"Create a WordPress menu which can be edited from the WordPress Dashboard","slug":"wordpress-editable-menu","type":"basic","title":"Menus"}

WordPress features an easy way to edit navigation menus straight from the WordPress Dashboard. To add an editable WordPress menu to your theme simply add a "wp-menu-name" class to a menu parent element. After the conversion the contents of your static HTML menu will be replaced with the contents of the dynamic WordPress menu which can be defined from the WordPress Dashboard. [block:code] { "codes": [ { "code": "<ul class=\"wp-menu-main\">\n\t\t<li><a href=\"index.html\">Home</a></li>\n\t\t<li><a href=\"contact.html\">Contact</a></li>\n\t\t<li><a href=\"about.html\">About</a></li>\n</ul>", "language": "html", "name": "An example of creating a menu called \"Main\"" } ] } [/block] ### A WordPress menu Add an editable WordPress menu with one simple class. [block:parameters] { "data": { "0-0": "wp-menu-name", "0-1": "**Displays a WordPress menu**\n\nDisplays a WordPress menu called \"Name\". The class with the same name can be used multiple times in the same HTML file or across different HTML files to display the same menu.", "1-1": "The actual link element in the wp menu. Only needs to be specified once. Attributes (e.g. classes) from this element are used for all the links in the menu.", "1-0": "wp-menu-link", "2-0": "wp-sub-menu-wrapper", "2-1": "Add an optional wrapper for the sub menus, if required by the layout but not needed for the sub menus to function.", "h-0": "Class Name", "h-1": "Functionality", "0-2": ".wp-menu", "1-2": ".wp-menu .wp-menu-link" }, "cols": 2, "rows": 1 } [/block] ### Sub-menus Sub-menus will work automatically and will be printed as a nested ul-list by WordPress. ### Menu styling Each link in the WordPress menu will *automatically* use the styling of the first link element that is found inside the "wp-menu-name" element. If you have different styling for different menu items such as sign up buttons you can for example create a new menu for these in order to preserve the styling or use advanced CSS selectors like the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child" target="_blank">:nth-child selector</a> to style these elements separately. ### Active menu item WordPress will *automatically* denote the active menu item (the item representing the page you are viewing) with the class "active", which can be used to style the link of the currently viewed page differently.