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>
Advertisement
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"]'); ?>