With it, you can build highly customizable mobile-friendly menus in minutes. These not only help ensure that your website is easy to navigate, but they also help it look good. There are even options to add your logo to the menus to improve branding.

Today, I will demonstrate how to create a stylish SlickNav menu in WordPress.

Why A Mobile Navigational Menu Matters

As of May 2021, mobile traffic makes up 55.31% of all internet traffic and is continuing to grow year over year. Thus, ensuring your website is ready for mobile visitors is essential.

One of the biggest problems mobile users face on a website is the menu. Let’s face it, sometimes they are just not sized properly for mobile devices, and that makes it difficult to navigate the website. Customizing your menus for mobile users is a great way to improve the experience.

And since menus are interacted with by almost all users, it’s a great marketing area.

One of the biggest mistakes new website developers make is not branding their content. The power of branding is how large companies stay dominant, and adding your logo to the menu is one way to do it. It helps build brand recognition and can show off your creative side in one swoop.

Customizing the menus is one of the first steps to achieve a mobile-friendly WordPress site.

How to Customize WordPress Menus with SlickNav

Step 1: Install SlickNav

The SlickNav Mobile Menu plugin is a very simple customization tool for WordPress menus. With it, you can fully customize the appearance of the menu, create submenus,  and even add a search field. And most importantly, it’s easy to use.

In just a few minutes, you’ll have a fully functioning WordPress menu that’s ready to impress visitors.

Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Search for SlickNav Mobile Menu in the available search box. This will pull up additional plugins that you may find helpful.

Scroll down until you find the SlickNav Mobile Menu plugin and click on the “Install Now” button and activate the plugin for use.

Step 2: Locate the Menu CSS Class or Menu ID

Before you get started with the actual customization process, you are going to need a specific piece of information to tell SlickNav what menu you want to edit. The plugin allows you to use either the Menu CSS Class or the Menu ID.

The easiest one to obtain is the Menu ID, which I will now outline.

Click on Appearance and select the Menus option.

At the top, use the drop-down to select which menu you want to edit. Click on the “Select” button.

Look at the URL on the page, the last number is the Menu ID. Copy it for the next step.

If you want to edit multiple menus, repeat this process to obtain the necessary Menu IDs.

Before moving on, it’s important to understand that the plugin customization page only changes the appearance of the menu. To actually add new items to it, you will need to use the Menus area of WordPress.

Step 3: Customize the Menu

With the Menu ID ready to go, you can now start customizing. The process is very straightforward, but unfortunately, the plugin lacks a preview option. Thus, the only way to actually see it is after you click the “Update” button.

The only issue is that it will be on your live website, so it’s not recommended to go one change at a time. Instead, I’d recommend going through the settings then see what the finished product looks like. Afterward, you can go back and make edits.

If your website is busy, I’d recommend doing this during the off-hours.

To begin, click on Settings and select the SlickNav Menu option.

First, paste the Menu ID into the first textbox. If you have multiple menus, you can separate them with a comma, but keep in mind they will all look the same. Though, this is a great way to keep everything consistent on your website.

The settings list is pretty comprehensive, so I will cover the key features. That said, I strongly encourage you to edit each setting as necessary to get the best results.

Use the Image Logo option to upload a picture of your website’s logo. The plugin recommends the image to be 45px in-depth and up to 200px in width.

Below this, you will find options for the logo alt text, so make sure to fill it in.

You can customize what the search field will say with the Search Label Name option.

Choose which animation library to use. jquery or velocity. If you’re unfamiliar with these,  jquery is very common and works perfectly on just about every site. Velocity uses the same jquery API, but it is significantly faster.

Once you have gone through all of the settings and are completely satisfied, click on the “Update” button.

The changes will now be applied to the menus on your website, which you can now view. If you are unhappy with the appearance, you can go back to the settings page and make adjustments.

Congratulations on making mobile-friendly menus with SlickNav.

Make Your Entire Website Mobile-Friendly

Creating a mobile nav menu in WordPress is only one aspect of running a mobile-friendly site.

For instance, have you ever thought about how close together some buttons are? Probably not, but you should. This can be a nightmare for mobile users with larger fingers.

The end result is them accidentally clicking the wrong button, and it’s a surefire way to get them to leave.

Even if your buttons are responsive, placing them very close together defeats the purpose.

Another thing to consider is if your sidebar should be visible on mobile. The screen is quite small, thus, forcing visitors to have a sidebar present can eat up screen space. It can even lead to some awkward-looking pages and posts.

The bottom line is that just relying on responsive design is not enough. You have to consider some of the smaller details and how they fit into the overall mobile experience.

Help Visitors Find Your Content

Getting visitors onto your posts and pages is hard enough. And making the most out of those visits separates the successful websites from the failures.

Menus play an instrumental part in that first impression.

Customers want to find what they are looking for in seconds, and that’s what navigational menus are designed for. Thus, they need to be a priority in creating an easy-to-navigate website. It’s one of the biggest problems with new websites, and many developers often forget about mobile users.

Using responsive tools is great, but they are just not enough sometimes. Instead, you need to manually edit and customize certain elements for the best experience.

Do you think the default WordPress navigation menu looks good on a mobile device? Did you find the customization options easy to use?

The post How to Optimize WordPress Menus for Mobile Users with SlickNav appeared first on GreenGeeks.

This will let you fully customize your WordPress experience and it takes less than five minutes to accomplish. The plugin also lets you decide which user roles can see which items on the menu, so it’s great for teams.

Today, I’ll show you how to customize the admin menu in WordPress.

Is There An Advantage to Edit the Admin Menu?

Yes and no.

In truth, there are no performance enhancements associated with editing the admin menu’s appearance. It will simply change the appearance for you and your staff. However, to say that this won’t improve your work efficiency, well that’s subjective.

Everyone is different, and in some cases, an appearance change can help improve work efficiency. This can save you time getting too specific sections of your website and it can help remove distractions from the menu.

Therefore, how effective editing WordPress admin menus is entirely up to the individual.

How to Customize the WordPress Admin Menu

Step 1: Install Admin Menu Editor

The Admin Menu Editor plugin allows you to alter the order and appearance of admin menu items in WordPress. With it, you cannot only reorganize the items but completely hide them from yourself or other users. And this is done with a drag and drop interface, so it’s easy to do.

One of the coolest features is being able to make your own custom menus. For instance, you could build a menu for a staff member that only includes the links they need to work. This can streamline the process and help new staff.

Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Search for Admin Menu Editor in the available search box. This will pull up additional plugins that you may find helpful.

Scroll down until you find the Admin Menu Editor plugin and click on the “Install Now” button and activate the plugin for use.

Note: There are actually two plugins that have this name, make sure the plugin is by Janis Elsts.

Step 2: Reorganize the Menu

While there is a settings tab we could configure first, I will cover this at the end. Mostly because the settings will influence global settings and other things that will not impact the actual menu editing. Instead, the first thing we will look at is how to reorganize the menu.

On the left-hand admin panel click on Settings and select the Menu Editor option.

On the left side of the screen, you should see a replica of your admin menu. You can expand each item by clicking the small arrow.

Here, you can change the name of the menu title, where it links to, and choose which user roles have access to it.

The menu to the right of this represents the submenu items you would find by clicking on it. In the case of Posts, you would find All Posts, Add New, Categories, and Tags. You can use the small arrow to customize them the same way.

And for both menu and submenu items, you can click and drag the item to any location. This will allow you to reorganize your menus as you see fit.

Click on the “Save Changes” button to save the work.

Note: You will also find the “Undo Changes” and “Load default menu” buttons here. These can help you revert the menu to the original state.

Step 3: Create A New Menu Item

One of the bigger benefits of this plugin is the ability to create your own menu items. With it, you can create menus for specific employees, positions, just about anything else you may need.

To do so, click on the New menu icon.

This will add a custom menu item to the existing menu. Similar to the other items, you can change the name, the target page, and add extra capabilities (decide user roles). You can also drag it into any location. This also applies to submenu items.

You can repeat these steps to add multiple custom menu items. Don’t forget to save your work.

Step 4: Delete or Hide Menu Items

There may come a day when you want to delete existing menu items or the new ones you just made. In either case, it is easy to do so.

The plugin actually provides two ways to do this. The first is to actually delete the menu item and the second is to hide the menu item from view, although it is still accessible.

To fully delete the menu item, click on the menu item you wish to delete and click on the Delete menu icon.

A small popup will appear asking if you are sure. Confirm the deletion and the menu item is gone.

Note: You can restore any default menu item by using the “Load default menu” button. However custom menu items are permanently deleted. You would have to make them again.

To hide it, select the menu item and click on the hide menu icon.

Hidden menu items will have the hidden symbol next to their name. You can restore the item by click on the hide icon again.

Remember to save your work after making changes.

Step 5: Plugins and Settings

The Admin Menu Editor also allows you to hide specific plugins and settings. At the top, you may have noticed two additional tabs for Plugins and Settings respectively.

Click on the Plugins tab.

Here, you will see a full list of currently installed plugins (they do not have to be active). By default, they are visible to everyone. To change this, simply uncheck the box.

Note: The final option on this list is for new plugins. This means you can make all new plugins automatically hidden. This ensures that you won’t have to come to this page every time you add a new plugin.

Save any changes you made and click on the Settings tab.

The Settings tab contains a series of radio buttons and checkboxes. For most websites, the default options will be sufficient. Simply go through the settings to determine the best options for your website.

Congratulations on learning how to use the Admin Menu Editor to easily edit a menu in WordPress.

If you delete the plugin, the menus will be restored to their default positions.

Customize Your Workspace

As developers, it’s our job to manage the website and create content for visitors to enjoy. However, one aspect of the website that is always overlooked is the backend. Making it more efficient for the work you will be carrying out is essential, and this is only one option.

Another consideration should be editing the WordPress dashboard. You can create a variety of shortcuts and at a glance charts to appear in this space. This is great for things like Google Analytics. You can even add to-do lists to help you remember deadlines and content ideas.

How easy did you find the WordPress Admin Menu Editor plugin to use? Do you think WordPress should have admin menu editing by default?

The post How to Organize the WordPress Backend with Admin Menu Editor appeared first on GreenGeeks.

These icons have become a part of almost every website at this point and it would be a critical mistake to not include them. Today, I will demonstrate how to add social media icons to WordPress menus using the Menu Image plugin.

What Are Social Icons?

Social icons are images associated with specific social media platforms. For example, we can all recognize Twitter by the little blue bird or Facebook by the blue and white “f.”

These symbols have become synonymous with the actual platform name, and adding them to your menus can help make their existence clear to visitors. They are also far more stylish than simply adding the word Twitter or Facebook.

These can also help visitors that do not speak the same language. After all, the image is the same regardless of the region you live in. And the companies want you to use the, For example, Twitter provided all of its social icons to developers for free.

The same can be said for many other social media platforms. And there are a ton of free resources to find social icons.

However, the tricky part is actually adding them to WordPress menus, but luckily the Menu Image plugin makes it a cinch.

Step 1: Installing Menu Image

Menu Image has one use, adding images to your WordPress menus. The images can be uploaded to your media library and support a variety of sizes. Most notably are the 24×24, 36×36, and 48×48 menu sizes. These should work for the vast majority of websites.

However, the option to use the image’s original size is available, which means you can customize them to match your website’s needs. The icons can be added directly within the WordPress menu editor, so you should know exactly where to find them.

Let’s begin!

Click on Plugins and select the Add New option on the left-hand admin panel.

Search for Menu Image in the available search box. This will pull up additional plugins that you may find helpful.

Scroll down until you find the Menu Image plugin. Click on the “Install Now” button and activate the plugin for use.

Upon activation, you will be given the option to opt into the plugin’s security and features update notification list. You can opt-in if you want or skip it entirely. This will not affect using the plugin in any way.

Step 2: Picking Image Sizes

The plugin comes with three default sizes for your menu icons. They include 24×24, 36×36, and 48×48. These can be left alone or you can customize the sizes. These sizes should be fine for the majority of websites, but it never hurts to learn more just in case.

On the left-hand admin panel click on Menu Image and select the Menu Image option.

To change the image sizes, simply change the values in the respective text boxes.

Note: If you have already uploaded an image after changing the image size, you will need to either re-upload the image or use the Regenerate Thumbnails plugin to obtain the newly sized image.

Click on the “Save Changes” button when you are done.

Step 3: Picking A Menu Location

Now all that’s left is to actually add the social icons to your menus. This is done directly on the Menu editor.

Note: If you already have a menu you want to add the social icons to, feel free to skip this step.

On the left-hand admin panel, click on Appearance and select the Menu option.

The first thing you should do is to make sure you are selecting the right menu location. Themes all have a different number of menu locations available. In my case, the Twentytwenty theme has 6 different menu options.

Click on the Manage Locations tab.

This will provide you with all of the possible menu locations your theme supports. In this example, I will select the Desktop Horizontal Menu, but the process is the same for each one.

Click on the “Use new menu” option on the appropriate menu location. Alternatively, you can select an existing menu by using the corresponding drop-down box.

This will bring you to the menu editor and allow you to create a new one.

Step 4: Adding Social Icons to Menus

Creating a menu in WordPress remains exactly the same as it was originally. This plugin only adds a new feature you can find under the actual menu items, which is the option to add images.

First, you must name the menu and select the location. Once you do, click on the “Create Menu” button.

You can add the icon to any menu icon, but in our case, we are interested in social icons. Click on the Custom Links option. Enter the URL of your social media page and click the “Add to Menu” button.

Note: You do not need to add link text when adding the menu item, but it will automatically add “Menu Item” afterward, so make sure to change it.

If you need to locate the social icon you want to add, take a moment and upload it to your media library. In this case, I will use the official ones you can find on Twitter for free.

Click on the menu item you just added and click on the “Set Image” button.

This will pull up the media library. Select the image you want to add. There is also a “Set Image on Hover” button. You can add a different colored image to appear when a visitor puts his or her mouse on top of it, but this is optional.

Below these options, you can select the image size. Make sure to pick an appropriate size (the ones from step 2), otherwise, it will not look right.

You can now edit the title position (if you have one) and add a short description (optional). You can repeat these steps and add as many menu items as you want. Click on the “Save Menu” button when you are done.

You can now view the social icon on your live pages. If the images don’t look right, check out the sizing.

Congratulations on adding social icons to your WordPress menus with the Menu Image plugin.

Other Icon Suggestions

While social icons have become a standard, it is worth pointing out that you can add a variety of other icons to your menus that are not social media related. This can help visually impaired visitors find what they are looking for.

For example, you could have an actual house next to the Home menu item, or an actual cart next to a Cart menu item. These small icons look really stylish and give your menus the flair they need to stand out.

Making your website more accessible and better looking is a win-win for every website, so get started today.

Which social icons did you add to your WordPress menu? How easy was the Menu Image plugin to use? Did you consider any other icons on the menu?

The post How to Add Social Media Icons to WordPress with Menu Image appeared first on GreenGeeks.

These sticky side buttons can be a number of different things. The most popular being social media sharing buttons. However, since you can make multiple menus, you have the ability to add basically any type if icon you want. These icons can be linked to pages, posts, email links, telephone numbers, and other info.

That being said, in order to build this type of floating menu, you need to either know how to write code from scratch, or find a plugin that gives you all the tools you need to accomplish it. Today, we are going to look at a smooth plugin I found called Float menu.

This plugin will give you the ability to create floating menus and style them however you want. Let’s look at the plugin together.

Float Menu

Float Menu is a type of sticky button WordPress plugin that will allow you to easily add a floating menu and sticky buttons to your website. The menu that you build moves along while someone is scrolling down the page. This means it is always visible and always easily accessible.

The floating menu you build will not take up a lot of the screen. It is fully responsive and mobile-friendly as well. The plugin is built to allow you to add sticky side buttons that will enable you to increase conversion rates.

It does this by incorporating a lot of tools and functionality into the plugin. Some of the main features include:

• Create Unlimited Menus
• Two Display Positions (right or left)
• Customize all Labels and Buttons
• Shape Buttons Square if Needed
• Tons of Font Awesome and Icon Choices
• Select Icon Color
• Insert Links
• Open Links in New Windows
• Set Background Color of Buttons

Basically, the plugin does everything you need and more to create amazing floating buttons in WordPress using a variety of icons.

Let’s take a look at how to get the plugin installed and activated. Then, we will go over it together.

Note: The plugin does have a pro version that includes a lot of extra functionality. That being said, this tutorial is based on the free version, which gives you everything you need to create floating sticky side buttons and add menus to the left side or right side of your page.

Install and Activate Plugin

In order to start building your library of sticky side buttons and adding them to menus, you first need to install and activate the plugin. You can do this by going to the Plugins page in your WordPress admin dashboard. Simply search the name of the plugin and install it right there.

Once the plugin has been installed and activated, click on Wow Plugins > Float Menu. You will see this new label on the left side menu of your dashboard.

This will take you to the main setup page for the plugin. Here you will find everything you need to get it configured and running. Once the plugin has been configured, there is nothing else to do. It will automatically display on the left or right side of the screen, based on the way you configure it.

Let’s go over it together.

Add Sticky Side Buttons

At this point, you should be on the main configuration page for the Float menu plugin. You will see five tabs. These tabs include:

• List
• Add New
• Pro Features
• Support
• Plugin

Feel free to scroll through those if you want. They are pretty self-explanatory. The most important tab here is the “Add New” tab. This is where you will set up your main settings and then add new buttons for your menu.

Let’s go through this setup process together. Click on the “Add New” tab and open it up. Once inside, You will see two links to the left. These are “Settings” and “Menu.”

Settings

First off, go ahead and give this item a name. You can do so by filling in a name in the top field labeled “Register an item name.” This will make it easy to identify the different items (sticky buttons) moving forward, in case you ever want to add them to another menu that you build.

Now click in the “Settings” link. Here is where you will create all the main settings for this particular floating menu. Go ahead and choose all of your main positioning configurations now.

Now scroll down some and choose the submenu and popup settings that you would like for your sticky side buttons floating menu.

Finally, if you look to the upper right of the screen, you will find there are a few “targeting” settings for you to choose from. Make the choices relevant to how you want the menu to display and target.

Once that is done, go ahead and click on the “Save” button. The floating menu options have now been put into place.

Menu

Now click on the “Menu” link. Inside there, you will see a blue button called “Add Item.” Go ahead and click on that and let’s add an item together.

When you click this button, the item settings box will appear. Here is where you are going to add an item or a sticky button, to the menu you built above. Items you add can be anything.

Go ahead and select your icon, colors, labels, fonts, and anything else that is available. You can link your items as well and have them open in separate pages when appropriate.

When you are finished, you have a couple of choices. You can either click on the “Save” button and save that item, or you can click on the “Add Item” button and add another to this same menu.

Essentially, you can add as many items to a menu as you want. These actually become the sticky side buttons that will appear on the right or left of your WordPress posts and pages.

That’s it! You have successfully built a floating menu and added sticky buttons to it. The menu will now automatically display on your site based on the settings you gave.

Remember, you can repeat the process above and add as many different menus and register as many different items as you would like.

Final Thoughts

Having floating buttons in WordPress is a great way to showcase certain items and links that you want customers to have easy access to. These are called sticky buttons, and they are buttons that stick with you no matter what part of the page you are on.

By using the Float menu plugin that we went over together, you can easily add sticky side buttons to your WordPress posts and pages. Furthermore, you can do this all without having to write a single line of code. Since the plugin does everything for you, all you need to do is install it and configure its settings.

I hope this tutorial was informative and gave you easy, step-by-step instructions on how to add floating buttons in WordPress.

Have you ever added sticky buttons to your page and posts? What other plugins have you found that will do this?

The post How to Make Sticky Side Buttons in WordPress appeared first on GreenGeeks.

The first attempt at fixing that problem was the introduction of frames. Luckily we have progressed beyond clunky frame technology and we can now implement elegant navigation that stays in one place.

We’re going to use the Sticky Menu (or Anything!) on Scroll plugin to stick our navigation. That name is a mouthful, so to keep things simple, I’ll refer to the plugin as “Sticky Menu.”

What are Sticky or Floating Menus?

Before we start, we should talk about terminology for a moment. Both “sticky” and “floating” are used to describe a page element that does not move when the page is scrolled.

If those words seem contradictory, it’s because they are. It’s hard to envision something “sticky” floating around. But an argument can be made for either term, and both are commonly used, so we’ll use them here interchangeably.

Installing the Sticky Menu Plugin

Log in to your WordPress admin panel.

In the left column navigation, mouse over the “Plugins” link and click the “Add New” link.

In the “Search plugins…” box, enter “Sticky Menu.”

Once you have located the plugin, click the “Install Now” button.

Click the “Activate” button.

How Sticky Menu Works

The plugin makes a page element sticky by using the element’s CSS selector. It doesn’t work directly on menus or widgets (that would be cool though, for any plugin developers out there). But it’s possible to configure your own sticky navbar, menu or widget.

We’ll have to do some digging to find the CSS selector for the page element that we want to stick. But because the plugin works the way it does, it’s more flexible than a point-and-click version.

Finding CSS selectors on a page could be a tutorial in itself. I can’t cover the entire topic here, so we’ll use a quick and easy way to find CSS selectors.

Our example uses Google Chrome “DevTools.” Other browsers may differ, but most have a similar tool.

To access DevTools for a particular element, right-click it on the screen. Mac users will use CMD click.

I want to know the CSS selector for the menu. That’s what I want to “stick.” So I’ll right-click on the menu and click the “Inspect” link.

A DevTools window will open in a separate window, or as a panel at the side or bottom of the browser window.

As you can see here, there are many different CSS classes highlighted. A menu is made up of a lot of parts, and what DevTools shows depends on where you click.

So Which CSS Class Do We Want?

You’ll notice as you mouse over lines of code in the “Elements” window, the corresponding areas are highlighted on the page.

So lets mouse over the “Elements” window code until our menu is highlighted.

Okay, there it is, but there are a lot of CSS selectors attached to it. There’s a CSS ID, and three or four CSS classes.

But there’s also another area of DevTools that will guide us toward what we’re looking for.

The “Styles” section on the right tells us that when we’re hovered over the nav code, .main-navigation is the class.

So that’s what we’ll use.

You may have to do a bit of trial and error when sticking complex page elements that use several CSS classes or IDs. But in this case, we can be pretty certain that .main-navigation will do the trick.

Configuring Sticky Menu

Okay. let’s add the .main-navigation selector to the plugin configuration and see what happens.

In the left column navigation, mouse over the “Settings” link and click the “Sticky Menu (or Anything!)” link.

We’re going to use the “Sticky Element” field to set our sticky image. That’s where we enter the CSS selector.

The other options, “Space between top of page and sticky element,” “Check for Admin Toolbar,” “Do not stick element when screen is smaller than,” “Do not stick element when screen is larger than,” should be self-explanatory. We won’t use any of those for this demo.

I’ll enter .main-navigation into the “Sticky Element” field. Be sure to start the selector name with a dot.

Scroll down and click the “Save Changes” button.

Now we can see if we scroll down a page on the site, the menu remains visible.

But it doesn’t look very good, does it?

Let’s fix that.

Applying a Background Color to a Sticky Menu

Our sticky or floating menu looks a little garbled when there’s other page text under it. The menu is purposely transparent so it will look good if you change the background color in your theme. But for our purposes, it needs a background color.

We’re going to do that with “additional CSS.” Where your additional CSS is located depends on your theme. But for many themes, it’s in the “Theme Customizer.”

In the left column navigation, mouse over the “Appearance” link and click the “Customize” link.

Click to open the “Additional CSS” section.

Define a background color for our class, .main-navigation.

.main-navigation {
  background-color: #ffffff;
}

Enter the background color CSS in the “Additional CSS” field and click the “Publish” button.

Now if we scroll down a page, we can’t see text under our menu.

Sticking Other Page Elements

The same method we used to stick our menu can be used for any page element that has a CSS selector.

For example, we could stick an image. If we right-click an image, the image tag (

The CSS class for the image is .wp-image-1692, and if we add that to the plugin as we did with the menu selector, when we scroll down the page the image remains visible.

So we’ve used the plugin to make a menu and an image sticky. But you can float or stick shopping cart icons, call to action buttons – any page element that has a CSS selector.

As you may have noticed, the plugin is limited to a single sticky element. The developer says a future version will have the ability to configure multiple sticky elements.

What Happens if You Uninstall the Sticky Menu Plugin

If you uninstall the plugin, elements that used the plugin will be affected. The elements that were configured to be sticky will revert to their default behavior.

Usability Should Always Be Our Priority

A floating menu on your WordPress site is usually a good thing. Having the website choices available to the visitor at all times can be seen as a usability enhancement.

Usually.

If you have a large or otherwise obtrusive menu or navigation, continually floating it in front of the other site content could ultimately become annoying. It could even prevent a visitor from seeing important content.

Similarly, as in our demonstration here, floating a small image probably wouldn’t be the best use for the plugin. But finding the correct image CSS selector was more straightforward than say, finding a top navigation selector. That’s why the image was used as an example.

When we discover website technology that does cool things it’s tempting to over-use or misuse it. It’s important to make usability a priority and strive to make it a positive force on our websites.

Do you remember frames (and does the memory make you cringe just a little bit)? Do you use sticky or floating elements on your website? Let me know in the comments.

The post How to Add a Sticky Menu for Floating Navigation in WordPress appeared first on GreenGeeks.

As with most things in WordPress, there is a plugin that can do everything you need, and this is no exception. Today, I will demonstrate how to use the Five Star Restaurant Menu plugin to create a menu in WordPress.

Why Create An Online Menu?

Offering a delivery option is seen as a standard practice in 2019. The food delivery business as a whole generates over $70 billion dollars each year and in 2020, and that number is expected to grow to $75 billion.

It is an understatement to say that offering delivery is necessary.

Of course, the popularity of shopping online has been the driving force behind this increase. It has never been easier to order online then using your smartphone to place the order. However, to do this, your customer needs to see what you are offering.

Thus, you need to create a restaurant menu in WordPress to offer delivery.

Installing Five Star Restaurant Menu

Five Star Restaurant Menu is one of the best WordPress menu plugins available. It allows you to create an unlimited number of menus and items, adds a new Gutenberg block that allows you to add the menu to any page or post, has multiple styling options, and much more.

And it’s completely free to use!

Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Search for Five Star Restaurant Menu in the available search box. This will pull up additional plugins that you may find helpful.

Scroll down until you find the Five Star Restaurant Menu plugin and click on the “Install Now” button and activate the plugin for use.

Setting Up Five Star Restaurant Menu

Upon activating the plugin, you will see the setup wizard.

To start, fill in the Section Name and a description of the section. Click on the “Add Section” button when done.

For example, if you offer soup, sandwiches and soda, each one of those would be a section.

You can add as many sections as necessary by repeating the above step. I strongly recommend making the menu as close to the one in-store as possible. This reduces confusion for regular diners.

Click on the “Next Step” button after adding all of the necessary sections.

Here, you can add menu items to the sections you just created. You can upload an image, name, description, and price of the item. Click on the “Add Item” button when done.

Continue to add as many items as you need. I recommend adding images of the actual appearance of your food. It can be disappointing, to say the least, if they do not match.

Click on the “Next Step” button after adding all of the necessary items.

Here, you can select a  name and which sections you want to add to the menu. Click on the “Create Menu” button.

If you plan on making multiple menus to include certain specials, I highly recommend naming them appropriately. It can get very confusing if you do not.

Click on the “Next Step” button after adding all of the necessary menus.

The final step allows you to create a dedicated menu page for the menu you just created. Click on the “Create Page” button to finish.

The page will only consist of the shortcode calling the menu. You can see it in action on your website now.

Congratulations on creating your very own restaurant menu in WordPress.

Just A Start

If you like the Five Star Restaurant Menu plugin, I recommend looking at some of the other restaurant-themed plugins they make. They include Five Star Restaurant Reservations and Five Star Restaurant Reviews.

The online component of your restaurant is almost just as important as the actual restaurant. For many of your customers, it is going to be the first time they see your brand. Thus, you need to make sure it looks appealing.

How many menu sections did you create? Did you upload a photo for all the items or just a few?

The post How to Create a Restaurant Menu in WordPress appeared first on GreenGeeks.

They are a great addition to larger websites that have a lot of content for visitors to explore. In particular, if you have a lot of categories and subcategories, mega menus are ideal as a menu option.

Today, I will demonstrate how to add a mega menu in WordPress using the Max Mega Menu plugin.

Why Should You Use A Mega Menu

As I said, mega menus are great for websites that have a lot of content. But they are also great for creative developers. They are a much larger canvas on which a developer can create an awesome design that matches a website.

For example, take a look at the Office Depot & OfficeMax website. They have really nice mega menus that are loaded with images that make it even easier for visitors to find what they are looking for.

This is the perfect format for an online store.

Of course, you don’t have to add images like that every time. Instead, you can design the background in the mega menu to suit your needs. This can be as simple as a color change or you can create an actual image to display as the background.

In either event, mega menus bring a lot of customization to the table.

Installing Max Mega Menu

The Max Mega Menu plugin is extremely popular with over 300,000 active installs. The plugin automatically transforms all of your existing menus into mega menus. This includes menus that you can add in your Widgets area.

It also provides settings that you can change to make them behave the way you want.

To begin, click on Plugins and select the Add New option on the left-hand admin panel.

Search for Max Mega Menu in the available search box. This will pull up additional plugins that you may find helpful.

Scroll down until you find the Max Mega Menu plugin and click on the “Install Now” button and activate the plugin for use.

On the left-hand admin panel, click on Mega Menu and select the General Settings option.

Changing the Basic Settings

For the majority of websites, the default settings are more than enough, with the exception of the colors. Obviously, it is important that your menu colors match the rest of your website, which makes it the first priority.

Keep in mind that you can freely change the settings at any time. Thus, if you are unhappy with the settings, you can change them to your liking at any point.

Click on Menu Themes and select the Menu Bar tab.

By default, the menu color will be black, which may be perfect for your website. But if it is not, it’s easy to change. You can replace the menu background color with the color of your choice by simply selecting the color.

On this page, you can change other menu options as well. This includes the menu height, border-radius, font type, item spacing, and much more. I strongly encourage you to test out the various settings and select the best options for your website.

When you are done, click on the “Save Changes ” button.

These changes will be applied to all of your menus.

Creating A Mega Menu

Of course, if you did not already have a menu, nothing on your website will change. In this case, it is time to create your very own Mega Menu.

Click on Appearance and select the Menus option.

Create a new menu item and add it to your menu. Hover over the newly added menu item and click on Mega Menu.

A popup window will appear with options that you can set. You can select between three mega menu layouts including a Flyout Menu, Grid Layout, or Standard Layout.

This is entirely up to you, but I do recommend trying all three and seeing which one works best for your needs.

The settings allow you to customize what text appears and the platform it appears on (desktop or mobile). The Icon settings allow you to add an icon to the menu. You can add a custom icon with the pro edition.

Just remember to save any change you make and your Mega Menu will be good to go. Congratulations!

Make It Easy To Navigate

The entire point of any type of menu is to help your visitors navigate your website. The larger your website gets, the harder it becomes to create a menu that fits your needs. Thus, the mega menu is perfect for large websites.

Navigation in WordPress should always be simple, but it should also be pleasant to look at. Mega menus allow for extra space for both items and design.

Why do you need a mega menu? How easy did you find the Max Mega Menu plugin to use?

The post How to Easily Add a Mega Menu in WordPress appeared first on GreenGeeks.

Today, I will demonstrate how to add menu icons in WordPress using the Menu Icons plugin by ThemeIsle.

Why Add Menu Icons In WordPress

Adding an icon to a menu item makes it easier for visitors to find what they are looking for. This plugin offers multiple icons to use from the start.

You can create icons for various websites including social media icons. Facebook, Twitter, Instagram and other graphics can all be created with ease. This makes it easier for visitors to share your content on their favorite social media platform.

However, the real utility is found in its custom icon creation feature. This is a menu image WordPress plugin, meaning that you can take images uploaded to your media library and use them as menu icons.

This gives you a limitless number of images to use. Just make sure they are properly sized.

The vast majority of professional websites utilize menu icons in their design. Thus, not using them can make your website look less professional.

Installing Menu Icons

Menu Icons by ThemeIsle is a WordPress menu button plugin with lots of customization options. It has hundreds of icons to choose from and the ability to use custom images as well. The plugin is very easy to use at any skill level.

Note: Although this plugin is made by ThemeIsle, you do not need to use one of their premium themes. This plugin should be compatible with the vast majority of themes available in WordPress.

Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Search for Menu Icons by ThemeIsle in the available search box. This will pull up additional plugins that you may find helpful.

Scroll down until you find the Menu Icons by ThemeIsle plugin and click on the “Install Now” button and activate the plugin for use.

On the left-hand admin panel click on Appearance and select the Menus option. This will pull up the menu settings page.

Setting Up Menu Icons

Under the Add Menu Items section, you will see multiple ways to add items to your website’s menus. Click on the Menu Icon Settings option.

By default, only the Dashicons check box is selected. The options you select will allow you to use more icons in your menus. Dashicons contains basic icons while others contain less common ones.

While you are free to check all of the boxes, I recommend checking the Font Awesome and Image checkboxes. Font Awesome adds a lot of social media icon options and Image allows you to upload custom graphics.

Click on the “Save Settings” button when you are done.

By clicking on the Current Menus tab, you can edit the current settings in place. This is best done after you have added the icons. That way you can see what the changes will look like.

Adding Menu Icons

Click on the Custom Links option. Fill in the information for the desired link.

In this example, I will demonstrate how to create a Reddit icon, but you can repeat the following steps for any other website.

Simply enter the URL of the website you want to link to. In this case, I will use “https://www.reddit.com/”, but you can also use “https://www.Facebook.com/” and many others.

Next, add a link text. It is best to just use the name of the website, so in this case, I will use Reddit.

Click on the “Add to Menu” button.

You should now see Reddit appear in your menu structure.

Now it is time to add icons to the menu item you created. Click on the menu item and select the Icons Select option.

If you followed my recommendation, you should see Dashicons, Font Awesome, and Image options on the left-hand side. While Reddit is extremely popular, it is still not a standard icon you would add.

For this reason, you will not find it in the Dashicons section. Instead, click on Font Awesome and locate the Reddit icon you want to use.

Alternatively, you can click on Image and add your own custom icon, but you do need to make sure it is properly sized.

On the right-hand side, you will have some customization options available. How you choose to edit them is completely up to you.

Click on the “Select” button when you are done.

You can now repeat these steps to add as many icons as you want. Click on the “Save Menu” button to finish.

Congratulations, you have successfully added menu icons in WordPress using the Menu Icons by ThemeIsle plugin.

Menus Help Visitors Immensely

The entire point of a menu is to help your visitors navigate your website and reach you on other platforms. For example, you can create a home option by using your home page as a custom link. Simply add a home icon to match it and you just made a stylish home menu item.

It’s easy to do and can make it easy for new visitors to find their way back. However, social media icons are becoming more critical for success over the years. They allow visitors to reach your brand on various platforms to follow or share with their friends.

Menu icons make it easier for visitors to find what they are looking for, so utilizing them is an obvious choice.

What types of menu items did you add icons for? Did you take the time to create and upload custom menu icons?

The post How to Add Menu Icons in WordPress with ThemeIsle appeared first on GreenGeeks.

If you want to add conditional logic to WordPress menus, there are a couple different ways you can do it.

Using conditional logic in WordPress will allow to create more dynamic WordPress menus. Creating a dynamic WordPress menu with conditional logic is useful for things like:

• Hiding Menus on Certain Pages
• Showing Different Menus for Logged-In Users
• Custom Styling on Certain Menus

Let’s take a look at what conditional logic is and how we can easily add it to WordPress menus.

What is Conditional Logic?

If you take conditional logic to its root, it is basically an “if-then statement” in which p is a hypothesis and q is a conclusion. In other words, if xxxx happens in a certain way, then xxxx should be the conclusion.

In WordPress, conditional logic is used on things like WordPress forms. This can help you display certain functionality on a form that you otherwise could not.

A good example of this is a hidden payment field based on an answer or perhaps a drop down box of answers based on a question in the from. Forms will dynamically changed from user to user based on the answers given and the selections made.

The same concept applies when you add conditional logic to WordPress menus. You create a dynamic WordPress menu based on conditional logic. These menus will appear and act how you tell them based on certain actions that users perform.

Let’s take a look at a couple of ways you can easily add conditional logic to WordPress menus.

The If Menu Plugin

The easiest way to create dynamic WordPress menus with conditional logic is via a WordPress plugin. I found a great one that is easy to setup and use. The plugin we will use today to add conditional logic to a WordPress menu is called If Menu.

If Menu allows you to control what menu items your site visitors see based on certain visibility rules. Some of the main functions of this plugin include:

• The ability for an admin to display a menu item only if current site user is logged in.
• Hide different menu items based on mobile device usage.
• Display certain menu items for admin and editors.
• Hide login and registration links when a user is already logged in.
• Show menu items based on the location of a user.
• Display hidden menu items for users with memberships.
• Show different language menu items based on English or Spanish.

Add Conditional Logic to WordPress Menus Using a Plugin

To add conditional logic to a WordPress menus using this plugin, the first thing you want to do is install and activate the If Menu plugin.

Once the plugin has been installed and activated, click on Appearance > Menus, and you can immediately start make your adjustments.

To do this, simply select any menu you want to work on. Within that menu, select a menu item and click to open a drop down area.

Inside the menu item drop down, you will see a checkbox called “Enable visibility rules.” Check this box now.

When you check that box, you will see all the options for the conditional logic items pop up in two drop down menus. You simply create the conditional logic you want for each menu item.

Visibility rules can be handled however you wish with a few clicks.

First, select “Show” or “Hide” in the drop down menu.

Now move to the next drop down area and make your selection for the “If Is” section.

When you have made those two selections that particular menu item will now display based on the conditional logic you have applied to it.

In this example, I have the menu item set to “Show” if the user “Is Administrator.”

You can also add more than one type of conditional logic to a menu item. Simply click on the “+” symbol on the right and another drop down menu will appear. This will enable you to apply another type of conditional logic to the menu item and make it even more dynamic.

Once you have made all your choices for the items in the WordPress menu you are working on, click on the “Save Menu” button to apply all changes.

Add Your Own Conditions to If Menu Using Code

There are a couple of extra steps you can take here to add more conditions to your menu items. WordPress actually has a complete list of conditional tags that you can use across all of your projects.

If you would like to view their detailed list you can find it in the WordPress codex for conditional tags.

All of the conditional tags you find on that page can be used with the If Menu plugin. To do that, you need to combine the condition tag you want to use with the code below.

In this example, say you want to show or hide a menu item on custom post type pages.

So, you can accomplish this by adding the following code to the theme’s functions.php file. You can access the file by clicking on Appearance > Theme Editor. On the edit themes page, click on the Theme Functions (functions.php) file.

Add the code below to the file:

add_filter( 'if_menu_conditions', 'greengeeks_new_menu_conditions' );
function greengeeks_new_menu_conditions( $conditions ) {
$conditions[] = array('name'   => 'If it is Custom Post Type archive',

// name of the condition

'condition' => function($item) {

// callback - must return TRUE or FALSE

return is_post_type_archive();

}
);
return $conditions;
}
There you have it. You can use the code above to add other conditions to your WordPress menus as well. I hope this article has shown you how to easily add conditional logic to WordPress menus.
Have you used conditional logic for other parts of your WordPress website? Have you found that using conditional logic in WordPress menus allows you to create and deploy more dynamic layouts for your site users to enjoy?

The post How to Add Conditional Logic to WordPress Menus appeared first on GreenGeeks.

Hiding menu items can greatly reduce potential problems such as accidental content deletion or changing vital settings. And in many cases, a user like an author simply doesn’t need access to everything.

If you have a multiuser site, sometimes you’ll need certain people to have specific permissions but not have access to some of the tools in the admin toolbar. Custom user roles help keep the site running smoothly.

In this tutorial, I’ll show you how to edit the menu by user role in WordPress. The best part is it’s quick and easy. You don’t need to know how to write a single line of code.

How to Use the Role Editor Plugin

Today, I’m going to show you how User Role Editor works and how you can set WordPress to hide menu items for specific users. It’s a feature-rich tool that is easy to use and will help keep options away from specific user accounts.

1. Install the Plugin

• In the left column navigation, mouse over the “Plugins” link and click the “Add New” link.
• In the “Search plugins…” box, enter, “User Role Editor.”
• Install and activate the “User Role Editor” plugin.

2. Edit a User Role

In the left column navigation, mouse over the “Users” link and click the “User Role Editor” link.

Use the drop-down box to select the role you want to edit.

In the group column, you can select which permissions you want to edit. You can sort by core, custom posts types, and other functions available for your site.

To hide a menu item in WordPress, you’ll have to have the “Core” option selected.

In the second column, choose which abilities the user will have by clicking the checkbox.

3. Choose Which Menu Items to Remove

From here, you can choose which abilities to remove from the admin menu to protect the site from alterations. For instance, you can click the option to remove installing plugins and themes to prevent others from adding those elements.

If you need to see a list of options that are easier to read, click the “Show capabilities in human-readable form” option. This will translate the WordPress coded permissions into a more readable layout.

Once you’ve selected the abilities, click the “Update” button.

A confirmation window will pop up. Click the “Yes” button if you’re sure you want to edit the user role.

Now, the user will only have the permissions you’ve set. The options you’ve removed will not be visible.

4. Create a New Role in WordPress

If you want to create a new role for another user, click the “Add Role” button on the right.

Fill in the blanks for the user and click, “Add Role.” The option to “Make copy of” is in reference to the default permissions of the new role. Then, you can select what you want the role to have access to with the checkboxes above.

Other Plugins to Hide Menu Items

While the User Role Editor is a fine plugin, it may not suit your needs precisely. The best way to keep your site efficient is by making sure your tools work for your purposes. A plugin you don’t like or use won’t be of any help.

Here are a couple of other plugins you might want to consider to make WordPress remove menu items for roles. These plugins expand on the capabilities of the User Role Editor.

Adminimize

Adminimize is a great tool to manage a multi-user website. It alters how the backend is used while giving you the ability to assign specific rights to parts of the layout. The plugin also supports custom post types as well as customized options.

This tool even lets you control the sub-menu items of select areas. For instance, you can let users add a new post but not alter categories or tags. That kind of control can tighten up your website permissions considerably.

WP Custom Admin Interface

The WP Custom Admin Interface plugin is another great option to hide a menu item in WordPress. Not only do you have access to assign admin menu options, but you can also customize the login interface.

If you know your way around CSS, JavaScript, and PHP, you can further customize the appearance by adding those elements directly into WP Custom Admin Interface.

How Does Removing WordPress Admin Menu Items Help?

Let’s say you’re working with a client helping them get a WordPress website off the ground. If they don’t know what certain settings do, the client can really cause some damage.

In fact, I had one client nearly render his website useless because he made some fundamental admin errors. It can be frustrating when you have to go back and fix mistakes that never should have happened in the first place.

You could build a dashboard for clients to use in WordPress. But that’s an involved process, and it may be too elaborate a solution for the problem. It’s usually sufficient (and easier) to simply remove certain permissions from a user account.

Remember what noted website designer William of Ockham said, “The simplest solution is almost always the best.” That’s a philosophy that can serve most of us well. Whether we’re talking about websites or putting up shelves to hold our website design books.

Manage the Admin Screen with User Roles

Being able to hide admin menu items in WordPress helps to secure the site from accidental, and potentially destructive, changes. It also helps keep unauthorized users from accessing parts of the site they don’t need to access. Whatever your purpose, the above plugins can help.

Has a client or user ever changed website settings without your knowledge? Which options would you like to see added to tools like those listed above?

The post How to Hide Admin Menu Items for Specific Users in WordPress appeared first on GreenGeeks.