Monday 1 December 2014

How to Create Conditional Menu For Logged In/Logged Out Users in Wordpress

Background

I spend most of my time these days in the development of web contents and applications, mostly using Content Management Systems (CMS) and MVC frameworks like the popular Wordpress, Joomla! and Drupal. How I have come to learn and improve so much in these frameworks, still strikes me as amazing. But let us go straight to the point why you have come to read this post.

You probably may have wondered how certain dynamic web features like; profile pages and login restrictions are created. Like in our case, you click the login link and after successful login, the link changes to "Logout" and another link showing "My Account", "My Profile", "My Dashboard" or something of that nature shows up. Interestingly, these tricks are done using certain coding techniques in php, javascript and sometimes CSS. Even though these technologies are needed to do the magic, I am assuring you we are not going into any of those in this article, so be calm!

DYNAMIC MENU LINKS FOR USER LEVELS (LOGIN/LOGOUT and MY PROFILE/REGISTER)

In a simple term, what this means is that you want to create a menu item (either at the top, main, side or footer) on your WordPress site or application that will show certain links for users who are logged in as authorized users or logged out as guest. For instance, if a user is not logged in (i.e. a guest) he/she sees the "Login" or "Register" link at certain locations on the site, and if he/she is logged in, he sees the "Logout" and/or "My Profile" link as the case may be. I guess that was the simplest way I could explain it. For those who still don't understand my simplicity, look at the screenshots below to grasp the concept better.
------------------------------------------------------------------------------------------------------------

Screenshot showing a Top Menu bar with Menu links "Login" and "Register" for Non-Logged in Users.

                Screenshot showing a Top Menu bar with Menu links "My Dashboard" and "Logout" for Logged in Users.
------------------------------------------------------------------------------------------------------------

HOW TO CREATE THE DYNAMISM

Based on what we have said so far about conditional menus, I believe the screenshots above are self-explanatory, so I will just go into the business of the day.

Now, how to go about doing this sort of trick is very straight forward. So I will just get down to the business of the moment.

There are two options to go around this trick;

1. The Hard Way- Hard coding the hooks and filters in your wordpress function.php file. (Please ensure to use a Child Theme here if you know what you are doing.) The advantage here is that you customize the functionality of the add-on to do what you desire. But the turn-off here is that its painstaking to start coding a function from the beginning. And this is the part I decided to do without in this article, so i am not writing any hooks for this.

2. The Easy Way: Right here, you simply use pre-coded tiny programs called 'plugins' to extend the functionality of the WordPress framework; in our case, the Conditional User Menu. This is the part of WordPress I cherish so much- the expandability of its core functions using plugins. I can categorically tell you that there are extensions in WordPress for virtually anything you may want to do- just have a name for your assumed function, that's all you need. The downside to this approach is that it can cause compatibility issues with other plugins in the application's directory for plugins, and it may not fully serve your need. But aside from that, what the heck! It still remains the easiest and fastest means to do what you desire to do in WordPress. Just think it, and a plugin or more exist for it.

For our Case, we will be using the "Easy Way Out" approach. We will use a plugin or two to create the coditional user menu. Both plugin functions are about the same useage and setups, but I would rather you make your choice based on application importance to your system.

PLUGIN 1-  PRIVILEGED MENU

Just Download this plugin from the wordpress repository and upload via ftp. I believe that should not be a problem because am not covering how to do that here. Or, you can search for the plugin right in your wordpress Admin backend and install directly. This method of plugin installations turns out to be quite nice and results to the easiest methods I would go for.
  1. Go to the left-pane and hover your mouse on the 'Appearance' then click on 'Menu'. 
  2. Choose which menu to have the coditional items on (in our case, a nice looking menu at the top which I coloured red.) Please note that you may not have the same menu bar as mine, so you choose where else the conditional links will stay- at your main menu, the footer menu, the side or you simply create a menu yourself. That's the beauty of WordPress.
PLUGIN 2- NAV MENU ROLES

This is another great add-on for our job. It works just like the privileged menu, both has a rather easy markup. You can extend the functionality of this plugin and any other as well to suit your creative needs. Kapish?

I know I said I would go into details on how to use this plugins, but please bear with me now. I have some good cash jobs to do. 

I hope this post helps you in your quest, as I was once a searcher like you earnestly looking for every means to solve WordPress problems.

Happy solving problem!

No comments:

Post a Comment

Tell me what you think...