How to Add A Custom Navigation Sidebar In WordPress?

13 minutes read

To add a custom navigation sidebar in WordPress, you can follow these steps:

  1. Open your WordPress dashboard and navigate to the "Appearance" tab.
  2. Click on "Widgets" from the dropdown menu.
  3. On the Widgets screen, locate the "Navigation Menu" widget and click on it.
  4. Drag and drop the navigation menu widget into the desired sidebar area.
  5. Expand the widget by clicking on the arrow icon.
  6. Choose the navigation menu you want to display in the sidebar from the "Select Menu" dropdown.
  7. Customize the widget settings, such as title and display options, according to your preferences.
  8. Save the changes by clicking on the "Save" button.


By following these steps, you can add a custom navigation sidebar to your WordPress website without the need for a list. This sidebar will display the chosen navigation menu, providing navigation options for your site visitors.

Best WordPress Books of April 2024

1
WordPress: The Missing Manual: The Book That Should Have Been in the Box

Rating is 5 out of 5

WordPress: The Missing Manual: The Book That Should Have Been in the Box

2
WordPress All-in-One For Dummies (For Dummies (Computer/Tech))

Rating is 4.9 out of 5

WordPress All-in-One For Dummies (For Dummies (Computer/Tech))

3
WordPress Explained: Your Step-by-Step Guide to WordPress (2020 Edition)

Rating is 4.7 out of 5

WordPress Explained: Your Step-by-Step Guide to WordPress (2020 Edition)

4
Professional WordPress: Design and Development

Rating is 4.5 out of 5

Professional WordPress: Design and Development

5
WordPress Plugin Development Cookbook: Create powerful plugins to extend the world's most popular CMS, 2nd Edition

Rating is 4.4 out of 5

WordPress Plugin Development Cookbook: Create powerful plugins to extend the world's most popular CMS, 2nd Edition

6
WordPress 5 Complete: Build beautiful and feature-rich websites from scratch, 7th Edition

Rating is 4.3 out of 5

WordPress 5 Complete: Build beautiful and feature-rich websites from scratch, 7th Edition

7
Building Web Apps with WordPress: WordPress as an Application Framework

Rating is 4.2 out of 5

Building Web Apps with WordPress: WordPress as an Application Framework

8
WordPress for Beginners 2020: A Visual Step-by-Step Guide to Mastering WordPress (Webmaster Series)

Rating is 4 out of 5

WordPress for Beginners 2020: A Visual Step-by-Step Guide to Mastering WordPress (Webmaster Series)


How to add social media icons to a custom navigation sidebar in WordPress?

To add social media icons to a custom navigation sidebar in WordPress, you can follow these steps:

  1. Choose a social media icon set: There are numerous free and paid icon sets available online. You can search for social media icon sets on websites like Flaticon or Iconfinder. Alternatively, you can create custom icons using graphic design tools like Adobe Illustrator or Canva.
  2. Prepare the icons: Once you have selected the icon set or created custom icons, download the icons in a format that supports transparency, such as PNG or SVG. It is essential to have icons with transparent backgrounds for seamless integration with your WordPress theme.
  3. Upload the icons to your WordPress site: Log in to your WordPress admin dashboard and go to Media > Add New. Upload all the social media icons you have downloaded or created, and take note of their file URLs or attach them to individual pages/posts if you prefer.
  4. Install a social media icons plugin: There are several social media icon plugins available in the WordPress plugin repository. One popular option is the "Simple Social Icons" plugin. Go to Plugins > Add New, search for the plugin you prefer, install, and activate it.
  5. Configure the plugin: After activation, you will find the plugin's settings under Appearance > Customize > Widgets (or Appearance > Widgets, depending on your WordPress version). Look for a widget called "Social Icons" or similar. Drag and drop the widget into your preferred sidebar area.
  6. Set up the social media icons: Within the widget configuration, you will find options to add the social media profile URLs and select icons for each social media platform. Add your respective URLs and select the uploaded icons for each social media platform.
  7. Customize the icons: Customize the appearance of the social media icons according to your site's design. Usually, you will find options to adjust the icon size, spacing, alignment, and color within the widget configuration settings.
  8. Save and preview changes: Once you have set up the icons as desired, click the "Save" or "Publish" button to save your changes. You can then preview your custom navigation sidebar to ensure the social media icons are displaying correctly.


Following these steps, you should be able to successfully add social media icons to a custom navigation sidebar in WordPress.


How to customize the navigation menu on WordPress?

To customize the navigation menu on WordPress, you can follow these steps:

  1. Login to your WordPress admin dashboard.
  2. Go to "Appearance" and click on "Menus".
  3. On the Menus page, you'll find a list of your existing menus. If you haven't created any, click on "create a new menu".
  4. Give your menu a name and click on "Create Menu".
  5. Now you can start adding items to your menu. On the left-hand side, you'll see a list of available pages, posts, categories, or custom links. Check the boxes next to the items you want to add and click on "Add to Menu".
  6. You can rearrange the menu items by dragging and dropping them.
  7. To create submenus, simply drag an item below and slightly to the right of another item. This will make it a submenu item.
  8. To add custom links to your menu, click on the "Custom Links" tab on the left-hand side. Enter the URL and link text, and click on "Add to Menu".
  9. Once you've added all the desired menu items, you can further customize their settings. Click on the dropdown arrow next to each item to reveal the available options.
  10. You can also assign a menu to a specific location on your website. Look for the "Menu Settings" section, where you'll find a list of available theme locations. Check the box next to the desired location and click on "Save Menu".
  11. To style the appearance of your menu, go to "Appearance" and click on "Customize". Depending on your theme, you may find a "Menu" or "Navigation" option.
  12. On the customization page, you can change the colors, font, and other styling options for your menu. Preview the changes until you're satisfied, and then click on "Save & Publish".


That's it! Your navigation menu on WordPress is now customized according to your preferences.


How to include sub-menus in a custom navigation sidebar in WordPress?

To include sub-menus in a custom navigation sidebar in WordPress, you can follow these steps:

  1. Register a navigation menu in your WordPress theme's functions.php file. For example, add the following code:
1
2
3
4
function custom_theme_navigation() {
  register_nav_menu('custom-sidebar', 'Custom Sidebar');
}
add_action('after_setup_theme', 'custom_theme_navigation');


This code will create a navigation menu called "Custom Sidebar".

  1. In your theme's template file (e.g., sidebar.php), add the following code to display the navigation menu:
1
2
3
4
wp_nav_menu(array(
  'theme_location' => 'custom-sidebar',
  'container' => false,
));


This code will output the navigation menu created in step 1.

  1. To create a sub-menu, go to the Appearance > Menus page in your WordPress admin panel.
  2. Create a new menu and add your desired menu items.
  3. To add sub-menu items, drag and drop the items below the parent menu item, slightly to the right. This will create a hierarchical structure.
  4. Save the menu.


The sub-menus will now be displayed in your custom navigation sidebar. When you hover over a parent menu item, its sub-menu items will be shown in a dropdown.


You can also customize the appearance of the navigation menu using CSS according to your theme's style.

Best WordPress Hosting Providers in 2024

1
Vultr

Rating is 5 out of 5

Vultr

  • Ultra-fast Intel Core
  • High Performance and Cheap Cloud Dedicated Servers
  • 1 click install Wordpress
  • Low Price and High Quality
2
Digital Ocean

Rating is 4.9 out of 5

Digital Ocean

  • Active Digital Community
  • Simple Control Panel
  • Starting from 5$ per month


What is the recommended size for custom navigation sidebar images in WordPress?

The recommended size for custom navigation sidebar images in WordPress can vary depending on the theme being used. However, a commonly recommended size is around 300 pixels wide by 400 pixels tall. It is always best to check the theme's documentation or consult with the theme developer to determine the optimal size for the navigation sidebar images in a specific WordPress theme.


How to add navigation links to external websites in a custom navigation sidebar in WordPress?

To add navigation links to external websites in a custom navigation sidebar in WordPress, you can follow these steps:

  1. Open your WordPress dashboard and go to Appearance -> Widgets.
  2. Find the "Custom Menu" widget and drag it to the desired sidebar location on the right.
  3. Expand the widget to see its options.
  4. Click on the "Select Menu" drop-down and choose "Create a new menu."
  5. Enter a name for your menu and click on the "Create Menu" button.
  6. The menu editor will open. In the "Custom Links" section, enter the URL of the external website in the "URL" field. Give it a name in the "Link Text" field, which will be displayed as the menu item.
  7. Click the "Add to Menu" button, and you'll see the newly added menu item appear in the right column.
  8. To add more menu items, repeat steps 6 and 7.
  9. You can rearrange the order of menu items by dragging and dropping them.
  10. Once you've added all the desired external links, click the "Save Menu" button.
  11. Go back to the frontend of your website and refresh the page. You should now see the custom navigation sidebar with the external links.


Note: Make sure you have the "Custom Menu" widget enabled in your theme's sidebar configuration. Depending on your theme, the process may vary slightly, but the overall concept remains the same.

Facebook Twitter LinkedIn Telegram Whatsapp Pocket

Related Posts:

To create a sidebar in WordPress, you can follow these steps:Log in to your WordPress dashboard.Go to the "Appearance" section on the left-hand menu and click on "Widgets".On the Widgets page, you will see a list of available widgets on the lef...
To customize the navigation menu in October CMS, you follow these steps:Open your October CMS project in your preferred code editor.Navigate to the directory "config" and open the "cms.php" file.Find the 'navigation' array in the file. ...
Everyone on internet knows what smilies or emoticons or emojis are. Smilies basically add emotions and expressions to write-ups. WordPress too, provides a basic set of over 20 emoticons to its users to use on their blogs. Some of the commonly used WordPress sm...