How to create a Circular structure menu in your WordPress Website?

How to create a Circular structure menu in your WordPress Website?

Learn WordPress – Tutorials

Published on June 28, 2020 by Prithu Singh Thakuri

0 Comment

How to Create a Circular Structure Menu in your WordPress website

How to Create a Circular Structure Menu in your WordPress website

Do you want toCreate a Circular StructureMenuin your WordPress Website?

Circular Menu also known as (round menu, circle menu, radius menu) is a new structure to display the menu items on your website. A circular menu is a great option for listing the items in the webpages where user can view and select the preferred items with quick navigation. The circular-shaped menu has an appealing and modern look and breaks the generic UI pattern of horizontal navigation. 

In this tutorial, we will learn to Add/Create a Circular Structure Menu in WordPress Website. 

The best way to add/create a circular menu on your site is to use a WordPress plugin. The use of the plugin makes it easy, simple, convenient and add a beautiful feature on the menu. For this, we introduce you to the Responsive Circular Menu Plugin for WordPress – WP Circular Menu

WP Circular Menu

WP Circular Menu

See what is in this blog (table of contents) hide

WP Circular Menu

It is a premium circular structure menu for easy and quick navigation on your site. The plugin makes the use of the default WordPress menu function to create menus. You can easily add up to 12 menu items and can include additional elements to the default menu items such as Menu Icons and Tooltip. 

Major Features of WP Circular Menu:

  • Unlimited Circular Menu
  • Integrated with WordPress Menu
  • 9 ready to go templates with 5 draggable templates and 4 fixed templates
  • Fullscreen flat grid design for mobile devices
  • Custom Icons Support
  • Multiple menus per page
  • Easy Build Settings.
  • 9 menu position for fixed design
  • Animations
  • Easy Customization Options.
  • Tooltip support (Show/ Hide/ Add Custom Tooltip). Tooltip colour and background colour option
  • Typography (font-family/ weight/ transform) Options
  • Permission Settings (Logged in user/ Logged out user/ Everyone)
  • Display option (Hide Menu on specific page/ Default pages/ Archive pages)
  • Custom CSS option
  • Translation Ready

Let’s Add/Create Circular Structure Menu in your WordPress Website

Step 1: Install the WP Circular Menu Plugin

As a first step, you need to get have a WP Circular Menu Plugin on your WordPress website. In order to do so, go to CodeCanyon and Purchase WP Circular Menu plugin. After the purchase is made, you will receive a zipped file in the Email. 

In order to install the plugin in your site, follow our tutorial guide on ‘How to Install New WordPress Plugin?’

WP Circular Menu

WP Circular Menu

Install and activate the plugin on your site. 

Step 2: Add/Create a Circular Menu

Once the plugin is installed and activated in your site, you can see the WP Circular Menu on the left bar of the WordPress admin menu. 

When you click on the menu, you will go to the menu listing page. You can click on add new but before that, you need to create a menu first. 

In order to create a new menu

  • Go to Dashboard>> Appearance>> Menus.
  • Click on Create a Menu.

How to Create a Circular Menu Structure in your WordPress Website

How to Create a Circular Menu Structure in your WordPress Website

  • Give the menu a name and click on Create Menu.

Menu Structure

Menu Structure

  • Go to Screen Option on the top of the Menu Page and check WP Circular Menu under Boxes.
  • Locate the WP Circular Menu Meta boxes, Check on Use as a circular menu option if you want to use the current menu as Circular menu.

WP Circular Menu

WP Circular Menu

  • Select the menu items you want to add to be menu and click on the save menu. 

WP Circular Menu Structure

WP Circular Menu Structure

The menu supports 12 menu items except for template 9 which supports 8 menu item dues to design limitation. The plugin does not support sub-menus. 

You will see the WP Circular Menu icon on each menu item, click on it to open a modular setting menu.

Create Circular Menu Structure

Create Circular Menu Structure

Unlike a normal menu, this menu allows you to add things like an icon, background image, alter Tooltip text to your individual menu item.

Menu Settings

When you click on the WP Circular menu, it leads you to the menu settings page.

WP Circular Menu - Menu Settings

WP Circular Menu - Menu Settings

  • Menu Icon Type
    • Font Icons: Circular Menu Supports a wide range of font icons including Dashicons, Font Awesome, Genericons, Linear Icons and Themify icons. Click the button to select a font icon. You can also directly add icon code such as dashicons|dashicons-admin-site or fa|fa-envelope-o or genericon|genericon-aside or lnr|lnr-home or ti|ti-home.

WP Circular Menu - Menu Icons

WP Circular Menu - Menu Icons

  • Custom Icon: If icons are not a thing for you, you can upload your own icons images from the WordPress media library. Click button to upload media from the media library or even directly place an image URL

WP Circular Menu - Custom Menu

WP Circular Menu - Custom Menu

  • Menu Name
    • Hide/ Show Menu Name: In default, the circular menu will show the menu name label when you hover it. If you don’t want this feature, check this option to hide showing of the menu name on hover.
    • Custom Name: If you want to alter the menu name text then simply add text here to overwrite the default menu name.

WP Circular Menu - Menu name

WP Circular Menu - Menu name

  • Notification Label
    • Notification Text: Want to focus your viewers to a particular page? Have a hot sale going on your store? The circular menu allows to added static Notification label to let people know what is going on with each particular link.

WP Circular Menu - Notification Label

WP Circular Menu - Notification Label

  • Background
    • Image Background: Best suited for template 2 and not supported in template 3, 4 and 5, you can add background images in each of the menu list items.

You will need to first save the menu after any menu item change to see the WP Circular Menu option in the newly added menu items.

WP Circular Menu - Background

WP Circular Menu - Background

After you have created your menu items, you can create your first-ever circular menu.

Step 3: Configure WP Circular Menu

Now it’s time for us to create our circular menu. For this

  • Click on WP Circular Menu on the left admin panel.
  • Click on add new.
  • Enter a title for your Circular menu.
  • Publish the menu

How to Create Circular Menu Structure in your WordPress Website

How to Create Circular Menu Structure in your WordPress Website

Build Circular Menu

  • Select the assigned circular menu from the SELECT MENU option. Configure your menu.

Create Circular Menu Structure in your WordPress Website

Create Circular Menu Structure in your WordPress Website

Layout Settings

  • Select Template: Select any one of 9 prebuilds ready to go templates. We offer 5 draggable templates and 4 fixed templates.
  • Initial position: Only available for draggable templates. You can set the initial position of the menu on page load.
  • Positions: Only available for fixed templates. Set a suitable fixed position for your menu to load on.
  • Animation: Select open and close animation.
  • Toggle Button:
    • Toggle Animation: Select animation for the toggle button
    • Customize: Check to customize the toggle button.
      • Icon colours: set open, close and hover colour for the toggle bars.
      • Background: set open, close and hover colour for toggle button background.
      • Border: set open, close and hover colour and width for toggle button border.
  • Menu item:
    • Customize: Check to customize the menu items.
      • Icon colours: set icon colour, active colour and hover colour for the menu icons.
      • Background: set icon colour, active colour and hover colour for the menu icon background.
      • Border: set icon colour, active colour and hover colour for the menu icon background. Option available only in template 2, 3, 6 and 9.
      • Center Image: set an image background in the menu centre. Option available only in template 1, 4 and 8
      • Center colour: set a background colour in the menu centre. Option available only in template 1, 4 and 8
  • Notification label:
    • Choose template: Choose one of five templates for your notification label.
    • Notification animation: Choose one of five animations for your notification label.
    • Customize: Check to customize the notification label.
      • Text colours: set text colour for your notification label.
      • Background colour: set background colour for your notification label.
  • Tooltip:
    • Customize: Check to customize the tooltip.
      • Text colours: set text colour for your tooltip.
      • Background colour: set background colour for your tooltip.
  • Typography:
    • Customize: Check to customize the typography.
      • Font family: select a font family.
      • Text transform: set-top capitalize, lowercase or uppercase your tooltip and notification label.

How to Add a Circular Menu Structure in your WordPress Website

How to Add a Circular Menu Structure in your WordPress Website

Display Settings

You can set where to show or hide the Circular menu. These settings can be used to manage multiple menus on different pages. By default, all menus are set to show in all pages. You can set where to show the menu and whom to show the menu to.

  • Permission Settings: Set to show the menu to All users/ Logged in users or Logged out users.
  • Hide Circular Menu in: Select the pages where you do not want to show this particular menu. The list should cover all the default WordPress Standard Pages and all the single pages of any custom post type. If you select the All Single Page option no menu will be shown in the single pages regardless of the particular page option below.

Add Circular Menu Structure in your WordPress Website

Add Circular Menu Structure in your WordPress Website

Custom CSS

You can enable the Custom CSS option and add the necessary code as per the necessity. 

WP Circular Menu - CSS

WP Circular Menu - CSS

Step 4: Using the Shortcode in WP Circular Menu

You can use shortcode to add any draggable template to your site. Here is how you can add a Circular menu via. Shortcode

For this, 

  • Go to Template Settings and configure the Keep open, Hide Toggle Button option.

WP Circular Menu - Shortcode

WP Circular Menu - Shortcode

It is essential that you disable the Draggable property.

  • Go to Display settings and turn on the Use as shortcode and hide everywhere else option.

WP Circular Menu - Display

WP Circular Menu - Display

Go to the Extra option and turn of the responsive flat design.

  • Copy the shortcode from Shortcode Information meta box and paste it to your desired place.

Shortcode Usage - WP Circular Menu

Shortcode Usage - WP Circular Menu

In this way, you can simply add/create a circular Structure menu on your WordPress website. Also, the use of shortcode enables you to add to a specific page or post in a simple and easy way. Get the perfect WP Circular Menu by AccessPress Themes and design a perfect menu for your site!

Purchase

Get latest updates, deals and more from us!

Deals, Updates
and more…

Source

Leave a comment

Send a Comment

Your email address will not be published. Required fields are marked *