I previously explained how to remove the built-in account-oriented links that are built into Magento's web themes. Beyond those "sign-in" and "create an account" links, you can add your own links in that top bar, too.

It turns out that it's easier to add custom links in the top bar than it is to remove the account-oriented links.

Modifying the custom_link.phtml file

The key is to modify the custom_link.phtml file located in your theme's templates folder. I'm using Smartwave Porto so I go here:

/app/design/frontend/Smartwave/porto_child/Smartwave_Porto/templates/html

You may not have that porto_child folder. It's good practice to clone your default theme by creating a <theme>_child copy.

When you open this file it looks something like this:

<?php
$porto_helper = $this->helper('Smartwave\Porto\Helper\Data');
?>
<li><a href="<?php echo $porto_helper->getBaseLinkUrl(); ?>contact"><?php echo __('Contact Us'); ?></a></li>

The main key to this file is the <li> element at the bottom of the file. This is exactly what you'd expect: a link that appears in the top-menu.

The theme I'm using also assigns a helper object to the $porto_helper variable and we use the getBaseLinkUrl() method to add the front part of the URL to the link that we've encoded into the <li>.

You insert your link's resource right after that call to getBaseLinkUrl(). In the above example we are creating a link to a /contact resource.

Remember to assign text to the <a> element that you're in the process of creating. Above, you see that Contact Us is the text in the anchor.

You can add whatever links you want to this file to make them appear in the top bar in your Magento application. Here, I've added a few informational links:

<?php
$porto_helper = $this->helper('Smartwave\Porto\Helper\Data');
?>
<li><a href="<?php echo $porto_helper->getBaseLinkUrl(); ?>contact"><?php echo __('Contact Us'); ?></a></li>
<li><a href="<?php echo $porto_helper->getBaseLinkUrl(); ?>inspiration_education"><?php echo __('Inspiration & Education'); ?></a></li>
<li><a href="<?php echo $porto_helper->getBaseLinkUrl(); ?>faq"><?php echo __('FAQ'); ?></a></li>
<li><a href="<?php echo $porto_helper->getBaseLinkUrl(); ?>about"><?php echo __('About Us'); ?></a></li>

Hey! What's that __ thing?

You might have noticed this thing: __('Contact Us') in the above code. What's that?

__('word') will automatically translate word into another language if word is defined in your translation dictionary CSV file. This method also serves as a kind of sprintf, inserting variables in your translatable string. See more here and here.

So, you don't absolutely have to use the __() method but it is highly recommended for language portability.

Clear Cache to See the Results

Remember to clear the cache to see the results immediately. At the root of your Magento installation do this:

php bin/magento c:c

For more on this subject see: Magento: Clearing the Cache

Go ahead and refresh your browser.

Conclusion

It's super-easy to add custom links to the top bar of your Magento application by editing the /app/design/frontent/Smartwave/porto_child/Smartwave_Porto/templates/html/custom_html.phtml file.