skip to Main Content

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>

2

Answers


  1. You could just put in the static URL https://www.website.com/about but that will change if you move the about page into another folder. To keep this dynamic, you can use the wordpress function get_page_link() (if you have the page id) or get_permalink and get_page_by_path if you have the slug. The about page will need to be created in the database first so you can get these parameters.

    Using page ID: (ex: page ID is 40)

    <li><a href="<?php echo get_page_link(40); ?>" class="navlink">About Us</a></li>
    

    Using slug: (ex: slug is ‘about-us’)

    <li><a href="<?php echo get_permalink( get_page_by_path( 'about-us' ) ); ?>" class="navlink">About Us</a></li>
    

    You can also get it using the page title, though this might change over time so I don’t recommend it:

    <li><a href="<?php echo get_permalink( get_page_by_title( 'About Us' ) ) ?>" class="navlink">About Us</a></li>
    

    More information about retrieving links dynamically here: https://code.tutsplus.com/tutorials/why-you-shouldnt-code-urls-in-wordpress-themes-or-plugins–cms-23262

    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search