A Guide to Custom Navigation Bars in WordPress

WordPress, being a versatile platform, allows you to customize various elements, including navigation bars. In this guide, we will walk you through the process of creating a WordPress navigation bar with a “Dashboard” link. This step-by-step tutorial assumes you have a basic understanding of WordPress themes and PHP.

Step 1: Create a Child Theme

Creating a child theme ensures that your modifications won’t be lost when the original theme is updated. Follow these steps:

  1. Navigate to Your Themes Directory:
    • Go to ‘wp-content/themes/’ in your WordPress installation.
  2. Create a Child Theme Folder:
    • Create a new folder for your child theme (e.g., your-theme-child).
  3. Create ‘style.css’:
    • Inside your child theme folder, create a style.css file with the following content:
 Theme Name:   Your Theme Child
 Template:     your-theme

Step 2: Register Navigation Menu

WordPress allows you to register custom navigation menus. Follow these steps:

  1. Edit ‘functions.php’:
    • Open the functions.php file in your child theme folder.
  2. Register a Custom Menu:
    • Add the following code to register a custom menu:
function register_custom_menu() {
    register_nav_menu('custom-menu', __('Custom Menu'));
add_action('after_setup_theme', 'register_custom_menu');

Step 3: Display Navigation Menu in Header

Now, let’s display the custom navigation menu in the header.

  1. Edit ‘header.php’:
    • Open the ‘header.php’ file in your child theme.
  2. Add Navigation Menu Code:
    • Insert the following code where you want the navigation bar to appear:

Step 4: Create Dashboard Link

Now, let’s add a “Dashboard” link to the navigation menu.

  1. Go to WordPress Dashboard:
    • Navigate to “Appearance” -> “Menus.”
  2. Create a Custom Link:
    • Create a new menu or edit an existing one.
    • Add a custom link with the URL set to ‘wp-admin’ and label it “Dashboard.”
  3. Save the Menu:
    • Save your menu.

Step 5: Style the Navigation Bar

Enhance the appearance of your navigation bar with some basic styling.

  1. Edit style.css:
    • Open the style.css file in your child theme.
  2. Add Styling Code:
    • Insert the following CSS code:
/* Style the navigation bar */
#site-navigation {
    background-color: #333;
    padding: 10px;

/* Style the menu items */
#site-navigation a {
    color: #fff;
    padding: 10px 15px;
    text-decoration: none;

/* Hover effect for links */
#site-navigation a:hover {
    background-color: #555;

Step 6: Test and Refine

  1. Refresh Your WordPress Site:
    • Visit your site to see the new navigation bar.
    • Ensure the “Dashboard” link is present.
  2. Adjustments:
    • Make any adjustments to styling or structure as needed.

You’ve successfully created a WordPress navigation bar with a “Dashboard” link.

Related Posts