{"id":8564,"date":"2018-05-02T10:56:27","date_gmt":"2018-05-02T10:56:27","guid":{"rendered":"https:\/\/blog.mageworx.com\/?p=8564"},"modified":"2022-11-09T10:19:10","modified_gmt":"2022-11-09T10:19:10","slug":"how-to-add-top-link-in-magento-2","status":"publish","type":"post","link":"https:\/\/www.mageworx.com\/blog\/how-to-add-top-link-in-magento-2","title":{"rendered":"How to Add Top link in Magento 2"},"content":{"rendered":"\n<!-- SEO Ultimate (http:\/\/www.seodesignsolutions.com\/wordpress-seo\/) - Code Inserter module -->\n<!-- Google Tag Manager (noscript) -->\r\n<noscript><iframe src=\"https:\/\/www.googletagmanager.com\/ns.html?id=GTM-5DTCW7B8\"\r\nheight=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"><\/iframe><\/noscript>\r\n<!-- End Google Tag Manager (noscript) -->\n<!-- \/SEO Ultimate -->\n\n<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 2<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><p>The links at the top of your website are highly effective in influencing the customer behavior. You can use these links to make customers stay and explore your store. These links are also a great way to increase visitor engagement and conversions on your Magento 2 store.<\/p>\n<p>As Magento 2 is one of the leading ecommerce platforms. So, in this tutorial, I am going to tell you how to add a top link in Magento 2.<\/p>\n<p>Magento highly recommends to follow the best practices. So, keeping that in mind, I have created a custom module for adding top links. Read on to know how I have done it. The process is pretty simple and will help you set up Top Link on your website.<!--more--><\/p>\n<h2>Create Custom Magento 2 Module<\/h2>\n<p>First, create a module.xml file at app\/code\/Demo\/Toplink\/etc. file path and add the below code in the file.<\/p>\n<pre class=\"theme:github font:courier-new font-size:16 line-height:18 lang:default decode:true\">&lt;?xml version=\"1.0\"?&gt;\n\t&lt;config xmlns:xsi=\"https:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\"&gt;\n\t&lt;module name=\"Demo_Toplink\" setup_version=\"1.0.1\"&gt;&lt;\/module&gt;\n&lt;\/config&gt;<\/pre>\n<p>Then, create <strong>registration.php<\/strong> in app\/code\/Demo\/Toplink file path and add the following code to it.<\/p>\n<pre class=\"theme:github font:courier-new font-size:16 line-height:18 lang:default decode:true\">&lt;?php\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\n &nbsp;&nbsp;&nbsp;\\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,\n &nbsp;&nbsp;&nbsp;'Demo_Toplink',\n &nbsp;&nbsp;&nbsp;__DIR__\n);<\/pre>\n<h2>Add Top Link in Magento 2<\/h2>\n<p>Now, create <strong>default.xml<\/strong> in app\/code\/Demo\/Toplink\/view\/frontend\/layout &nbsp;and add the following code.<\/p>\n<pre class=\"theme:github font:courier-new font-size:16 line-height:18 lang:default decode:true\">&lt;?xml version=\"1.0\"?&gt;\n&lt;page xmlns:xsi=\"https:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\"&gt;\n&lt;body&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&lt;referenceBlock name=\"header.links\"&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;block class=\"Demo\\Toplink\\Block\\Link\" name=\"custom-header-link\"&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;arguments&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&lt;argument name=\"label\" xsi:type=\"string\" translate=\"true\"&gt;Advanced Search&lt;\/argument&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&lt;argument name=\"path\" xsi:type=\"string\" translate=\"true\"&gt;catalogsearch\/advanced&lt;\/argument&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&lt;\/arguments&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/block&gt;\n &nbsp;&nbsp;&nbsp;&nbsp;&lt;\/referenceBlock&gt;\n&lt;\/body&gt;\n&lt;\/page&gt;\n<\/pre>\n<p><strong>Note<\/strong>: I have added \u2018Advanced Search Page Link\u2019 in the above code. You can add more links in the top section of your Magento 2 store in the same way.<\/p>\n<p>Now, create <strong>Link.php<\/strong> at location app\/code\/Demo\/Block and add the below code.<\/p>\n<pre class=\"theme:github font:courier-new font-size:16 line-height:18 lang:default decode:true\">&lt;?php\n \nnamespace Demo\\Toplink\\Block;\n \nclass Link extends \\Magento\\Framework\\View\\Element\\Html\\Link\n{\n\/**\n* Render block HTML.\n*\n* @return string\n*\/\nprotected function _toHtml()\n &nbsp;&nbsp;&nbsp;{\n &nbsp;&nbsp;&nbsp;&nbsp;if (false != $this-&gt;getTemplate()) {\n &nbsp;&nbsp;&nbsp;&nbsp;return parent::_toHtml();\n &nbsp;&nbsp;&nbsp;&nbsp;}\n &nbsp;&nbsp;&nbsp;&nbsp;return '&lt;li&gt;&lt;a ' . $this-&gt;getLinkAttributes() . ' &gt;' . $this-&gt;escapeHtml($this-&gt;getLabel()) . '&lt;\/a&gt;&lt;\/li&gt;';\n &nbsp;&nbsp;&nbsp;}\n}\n<\/pre>\n<p>Finally, launch the SSH terminal and connect your store. You will have to move to the root directory of your Magento 2 store to run the CLI commands provided below.<\/p>\n<p>First, upgrade the setup by running this CLI command:<br \/>\nphp<em> bin\/<\/em>magento<em> setup:upgrade<\/em><\/p>\n<p>Then, compile the setup by running this CLI command:<br \/>\nphp<em> bin\/<\/em>magento<em> setup:di:compile<\/em><\/p>\n<p>Now clean and flush the cache by running the following two commands:<br \/>\nphp<em> bin\/<\/em>magento<em> cache:clean<\/em><br \/>\nphp<em> bin\/<\/em>magento<em> cache:flush<\/em><\/p>\n<p>Your Magento 2 store top link has been updated. Launch your store to check the output.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-8561\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/05\/image1.png\" alt=\"\" width=\"1320\" height=\"295\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/05\/image1.png 1320w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/05\/image1-600x134.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/05\/image1-1200x268.png 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2018\/05\/image1-768x172.png 768w\" sizes=\"auto, (max-width: 1320px) 100vw, 1320px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Congrats! You have successfully added the top link to your store.<\/p>\n<h2>Final Words<\/h2>\n<p>I hope by reading this tutorial you have successfully added Top Link to your Magento 2 store.<\/p>\n<p>If you have any questions about adding top links, please comment below and I will try to answer it as soon as possible.<\/p>\n<p style=\"text-align: center;\">* * * * *<\/p>\n<p><em><strong>This is a guest blog post by Syed Muneeb Ul Hasan.<\/strong><\/em><\/p>\n<p>Syed is a Magento Developer and Blogger at Magenticians \u2013 a platform to <a href=\"https:\/\/magenticians.com\/\">learn Magento<\/a>. He is an expert in PHP and Magento and prefers to educate users in the implementation of Magento. When not working, he loves to play games and watch cricket. You can follow him on <a href=\"https:\/\/twitter.com\/syed_muneebb\">Twitter<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 2<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>The links at the top of your website are highly effective in influencing the customer behavior. You can use these links to make customers stay and explore your store. These links are also a great way to increase visitor engagement and conversions on your Magento 2 store. As Magento 2 is one of the leading [&hellip;]<\/p>\n","protected":false},"author":24,"featured_media":14601,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[255,425],"tags":[436],"class_list":{"0":"post-8564","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-magento-2","8":"category-magento-how-tos","9":"tag-developer-diaries"},"_links":{"self":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts\/8564","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/comments?post=8564"}],"version-history":[{"count":5,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts\/8564\/revisions"}],"predecessor-version":[{"id":10468,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts\/8564\/revisions\/10468"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/media\/14601"}],"wp:attachment":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/media?parent=8564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/categories?post=8564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/tags?post=8564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}