How to create good navigation links in WordPress

In this article, we’ll show you how to customize WordPress navigation links. As with most customizations, the methods you use depend on which version of WordPress and which theme you’re using. The examples in this article are using WordPress version 4.8 running the Classic theme.

Some of the customizations explained in this article require editing WordPress configuration files. Always make backup copies of files before you edit them. It’s also a good idea to only make one change before testing your site, so if an error occurs, you’ll know the most recent change likely caused it. There are three methods you can use to edit files:

  • Some files can be edited directly in WordPress. Log in to WordPress via the HostPapa Dashboard. From the WordPress dashboard, go to Appearance > Editor and look for the file in the list presented on the right side of the screen. Click the file name to open it in the editor.
  • If the file you need to edit isn’t available in the WordPress dashboard, you can download it using an FTP client and then edit it using your preferred text editor. When you’ve made the changes in the file, save and upload it. 

You can also edit the file in the cPanel File Manager.

About WordPress site navigation

Good site navigation consists of links and menus that help people find the information they need while keeping your site visually uncluttered and organized. Common navigation elements include menus for categories, archives, and links to pages that contain important information. Most WordPress themes place menus and links in a prominent location, such as the sidebar or header.

In many themes, the locations and names of menus and links can be customized in the WordPress dashboard without directly editing PHP files or template tags. This article is for WordPress admins who are comfortable working with configuration files and PHP code.

The sidebar

Pages

Pages usually contain static content such as contact details or biographical information. The template tag used to list pages is wp_list_pages. By default, this template tag generates a list of all site pages and subpages, but you can use parameters to specify that only some pages should be listed. For example, use the exclude parameter to exclude pages with specific Page IDs or the depth parameter to display only top-level pages.

The code in the example below displays a list of all pages and subpages. The list is displayed with the title Pages.

<?php wp_list_pages('title_li=' . __('Pages:')); ?>

And here is the result displayed in the sidebar. There are two top-level pages, About this site and Legal, and each top-level page has two subpages.

Let’s change the list title and display only the top-level pages. To do this, we’ll add the depth parameter with a value of 1, which displays only top-level pages, and change the title_li value to Info. Here is the updated code:

<?php wp_list_pages( array(
 'depth' => 1,
 'title_li' => . __('Info:')
) ); ?>

And the links in the sidebar now look like this:

Categories

Categories allow you to group your posts into sections. For example, you may have posts that contain information about dog grooming and other posts about vegan recipes. Assigning relevant categories and subcategories to your posts keeps the content organized and helps your readers find the topics that interest them. The template tag for creating category lists is wp_list_categories().

The code in the example below displays a list of all categories used on the site. The list is displayed with the title Categories.

 <?php wp_list_categories('title_li=' . __('Categories:')); ?>

And here is the result displayed in the sidebar. There are five top-level categories and two subcategories.

By default, WordPress assigns the uncategorized category to any posts you don’t specify as belonging to a different category. Let’s add the exclude parameter to remove uncategorized from the list. To do this, we need to find the numeric ID of the uncategorized category. 

Log in to the WordPress dashboard and go to Posts > Categories

Locate the category in the list. 

Place your mouse over the category title and look in the bottom left-hand corner of your browser. You’ll see a URL that includes category&tag_ID= followed by a number. The number is the category ID. In the example below, the category ID is 1.

Now that you have the category ID, you can change the template tag code:

<?php wp_list_categories( array(
 'exclude' => 1,
 'title_li' =>'' . __('Categories:') . ''
 ) ); ?>

And our Categories links in the sidebar now look like this:

For more information about the wp_list_categories template tag and its parameters, see wp_list_categories in the WordPress Code Reference.

Archives

Archives allow you to group and display posts by date, and you can link to archives by day, week, month, or year. The template tag for creating the archive list is wp_get_archives().

By default, wp_get_archives displays a link for each month of posts:

<?php wp_get_archives(); ?>

This works well if you have just a few months of archived posts, but what if you have five years of frequent posts? You’ll probably want to restrict the archives displayed in the sidebar to the past 3, 6, or 12 months. In our example, we’re going to display the past three months of archives by month. Here’s the updated code:

<?php wp_get_archives('monthly&limit=3'); ?>

Our Archives links in the sidebar now look like this:

You can also use wp_get_archives with the type and limit parameters to display a specific number of recent posts. For example, to display the last five posts by post title, use the following code:

<?php wp_get_archives('type=postbypost&limit=5'); ?> 

The Archives now displays links to the most recent five posts:

Admin or Meta

The Admin or Meta links are displayed for logged-in WordPress Administrators and may include RSS feeds and other admin features. For more information about Admin or Meta links and their options, see the following:

Other navigation options

You can link to specific posts or pages using the get_permalink() template tag. Links to posts or pages are often found in the site header or footer and should be used sparingly to draw attention to the vital information you want your site visitors to see. To use get_permalink, you’ll need the numeric ID of the post or page you want to link to.

For example, to display a link to the Easy broccoli soup post, first find the post ID. 

In the WordPress dashboard, go to Posts > All Posts and locate the post in the list. 

Place your mouse over the title of the post and look in the bottom left-hand corner of your browser. You’ll see a URL that includes post= followed by a number. The number is the post ID. In the example below, the post ID is 92.

Now that you have the post ID, you can write the code for the link to the post. The get_permalink template tag uses the post ID (92) as its parameter and is wrapped in the HTML <a> tag, which defines it as a link.

<a href="<?php echo get_permalink(92); ?>">Our famous easy broccoli soup</a>

The permalink is displayed below the header.

If you need help with your HostPapa account, please open a support ticket from your dashboard.

Related Articles

Get online with our affordable web hosting

Get online with our affordable web hosting

Learn more now
HostPapa Mustache