How do i reference another page in in wordpress theme

I am converting a static an html code to wordpress theme, i want to open another page to open when i click on the anchor tag, how do i go about it. Thanks.

<li><a href="about-us.html" class="navlink">About Us</a></li>

Answer

In WordPress, links are permalinks:

Permalinks are the permanent URLs to your individual weblog posts, as well as categories and other lists of weblog postings. Original link: https://wordpress.org/support/article/using-permalinks

When creating a theme, you must display the links that are available in the admin panel: Admin panel -> Appearance -> Menus

The menu consists of locations, location is the place in the template where the user menu is displayed

I created a mini plugin for you that allows you to create custom menus and display them anywhere

Plugin structure:

wp-contentpluginsunbywyd-custom-menus
wp-contentpluginsunbywyd-custom-menusunbywyd-custom-menus.php
wp-contentpluginsunbywyd-custom-menustemplates
wp-contentpluginsunbywyd-custom-menustemplatesnavbar.hbs
wp-contentpluginsunbywyd-custom-menuspartials
wp-contentpluginsunbywyd-custom-menuspartialsmenu_item.hbs
wp-contentpluginsunbywyd-custom-menuspartialshandlebars
wp-contentpluginsunbywyd-custom-menuspartialshandlebars{library: https://github.com/zordius/lightncandy}

My example will be complete and working so that you can create any custom menus in WordPress. I will use the handlebars template engine to make things easier.

And so the contents of the unbywyd-custom-menus.php file:

<?php
/*
Plugin Name: Unbywyd custom menus
Version: 0.1
Author: Unbywyd
Author URI: unbywyd.com
*/

/*
*   We will use the Handlebars template engine
*/
if(!class_exists('LightnCandyLightnCandy')) {
    require_once ("handlebars/autoload.php");
}
use LightnCandyLightnCandy;
define('UCMS_DIR', plugin_dir_path(__FILE__));

class unbywydCustomMenus {
    public $menus = [];
    function __construct($menus=array()) {
       $this->menus = $menus;
        add_action('init', array($this, 'init'));

        /*  
        *   Create use_custom_menu shortcode 
        *   You can use [use_custom_menu location="navbar"] in wordpress posts to display navbar menu
        *   And also for using from php  <php print do_shortcode('[use_custom_menu location="navbar" customparam="test" class="test"]'); ?>
        */
        add_shortcode( 'use_custom_menu', array($this, 'use_custom_menu'));
    }
    function use_custom_menu($attrs) { // Create shortcode handler
        if(!isset($attrs['location'])) {
            $attrs['location'] =  '';
        }
        return $this->get_nav($attrs['location'], $attrs);
    }
    function get_template( $template_name ) { // Get a template by its name from templates/ directory
        $path_to_file = wp_normalize_path(UCMS_DIR . 'templates/' . $template_name . '.hbs');
        if(!file_exists($path_to_file)) {
            return '';
        }
        return file_get_contents($path_to_file);
    }
    function get_handlebars_partials() { // Get all partials from partials/ directory
        $path_to_partials = wp_normalize_path(UCMS_DIR . 'partials/');
        if(!file_exists($path_to_partials)) {
            return array();
        }
        $list_files = scandir($path_to_partials);
        $partials = array();
        foreach($list_files as $path) {
            $path_to_file = wp_normalize_path($path_to_partials . '/'. $path);
            if(is_file($path_to_file)) {
                $ext = pathinfo($path_to_file, PATHINFO_EXTENSION);               
                if($ext == 'hbs') {         
                   $partials[pathinfo($path, PATHINFO_FILENAME)] = function($name, $context) use($path_to_file) {                        
                        return $this->prepare_template(file_get_contents($path_to_file))($context, array('partials' => $this->get_handlebars_partials()));
                   };
                }
            }
        }
        return $partials;
    }
    function get_handlebars_helpers() {
        return array(
            /*
            *   You can use debug helper to display the incoming data into the template
            *   {{{debug}}}
            */
            'debug' => function($context, $options=array()) {
                if(!current_user_can('editor') && !current_user_can('administrator')) {
                    return '';
                }
                return '<pre class="debug" dir="ltr" style="text-align:left !important;">'.json_encode($context['data']['root'], JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE).'</pre>';
            }
        );
    }
    // You can use this function to render any of your templates from /template directory
    function template_render($template_name, $data) {  
        $prepared_template = $this->prepare_template($this->get_template( $template_name ));   
        $partials = $this->get_handlebars_partials();
        return $prepared_template($data, array('partials' => $partials));    
    }
    function prepare_template($template) {        
        $template = do_shortcode($template);       
        $prepared = LightnCandy::compile($template, array(
            'flags' => LightnCandy::FLAG_HANDLEBARSJS | LightnCandy::FLAG_ADVARNAME | LightnCandy::FLAG_RUNTIMEPARTIAL | LightnCandy::FLAG_ERROR_SKIPPARTIAL,
            
            'helpers' => $this->get_handlebars_helpers()
        ));
        return LightnCandy::prepare($prepared);
    }
    function init() {
        /*
        *   Registering custom menu locations 
        */
        foreach($this->menus as $menu) {
            register_nav_menu($menu['id'], $menu['label']);
        }
    }
    function build_tree(Array $data, $parent = 0) {
        $tree = array();
        foreach ($data as $d) {
            if ($d['parent'] == $parent) {
                $children = $this->build_tree($data, $d['id']);
                if (!empty($children)) {
                    $d['children'] = $children;
                }
                $tree[] = $d;
            }
        }
        return $tree;
    }
    // Get generated HTML of navigation
    function get_nav( $location, $other_params=array() ) {
        $menu_data = $this->get_nav_menu_items_by_location($location);
        if(empty($menu_data)) {
            return 'You can do nothing, or you can display a notification that there are no links in the menu';            
        } else {
            return $this->template_render($location, array_merge($other_params, array('menu' => $menu_data)));            
        }
    }
    // Simple handler to build data of custom navigation
    function get_nav_menu_items_by_location( $location, $args = [] ) {
        $locations = get_nav_menu_locations();
        if(!isset($locations[$location])) {
            return array();
        }
        $object = wp_get_nav_menu_object( $locations[$location] );

        if(isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on') {
            $link = "https";
        } else {
            $link = "http";
        }

        $link .= "://";
        $link .= $_SERVER['HTTP_HOST'];
        $link .= $_SERVER['REQUEST_URI'];

        if(!$object) {
            return array();
        }
        $menu_items = wp_get_nav_menu_items( $object->name, $args );
        if(!$menu_items) {
            return array();
        } else {
            $menu = array();
            foreach( $menu_items as $i) {
                  $data = array(
                    'url' => $i->url,
                    'id' => $i->ID,
                    'parent' => $i->menu_item_parent,
                    'title' => $i->title,            
                    'active' => $i->url == $link || $i->url . '/' == $link,
                    'attr_title' => $i->attr_title,
                    'description' => $i->description,
                    'class' => implode(' ', $i->classes)
                );
                if(!empty($i->target)) {
                    $data['target'] = $i->target;
                }
                $menu[] = $data;
            }
            return $this->build_tree($menu);
        }
        return $menu_items;
    }
}

/*
*   Сreate our custom menus
*   Of course, you can add this complexity and bring it up to the plugin settings and display it in the wordpress admin panel as option page.
*/
new unbywydCustomMenus(
[
    ['id' => 'navbar', 'label' => 'Navbar menu'], 
    ['id' => 'footer', 'label'=> 'Menu in footer']
]);

First you call the plugin class and pass your custom menus to register them:

new unbywydCustomMenus(
[
    ['id' => 'navbar', 'label' => 'Navbar menu'], 
    ['id' => 'footer', 'label'=> 'Menu in footer']
]);

Then you can customize the menus in the admin panel and add them to your locations Admin panel -> Appearance -> Menus | Manage Locations

and now you can display your menu anywhere in the post using a shortcode:

 [use_custom_menu location="navbar" customparam="test" class="test"]

You will also be able to display it programmatically using php:

<php print do_shortcode('[use_custom_menu location="navbar" customparam="test" class="test"]'); ?>

Link to GutHub with working plugin