Posts Tagged ‘WordPress’

How to Register Custom Taxonomy For WordPress Users [WordPress Tip]

The Custom Taxonomy feature has been introduced since WordPress 2.9. It allows you to create custom groups for Post, Page as well as Custom Post Types.

Say that you are building a book directory website, and you have created a Custom Post Type for posting the Books. By using Custom Taxonomy, you can create a custom taxonomy for it, called Genre. Within this Genre taxonomy, you can create a number of items (which technically is called terms) such as Fiction, Kids, or Biography for grouping the Books.

Unfortunately, at this point, we can’t register Custom Taxonomy to Users; at least not in a straightforward way as we would register it in the other Post Types. One perfect application that we could foresee from this idea is that we can use it to assign additional user attributes, such as their occupation, profession or organizational position, in place of registering a new set of User Roles. It also opens the possibility to query the users based upon the assigned taxonomy terms.

If this idea is something that may benefit your website, take a look at this tip.

Getting Started

First, we will install a plugin named User Taxonomies to simplify our job.

Once the plugin is activated. Go to GenerateWP to generate the Taxonomy codes. Put the code output in the functions.php file of your theme. This code snippet below is an example. Though, it has been stripped out to make this article look shorter. You can follow this link to see the full code.

 if ( ! function_exists( 'user_staff_position' ) ) { function user_staff_position() { register_taxonomy( 'staff_position', 'post', $args ); } add_action( 'init', 'user_staff_position', 0 ); } 

Now, change the Post Type parameter in the following line:

 register_taxonomy( 'staff_position', 'post', $args ); 

…from post to user, like so:

 register_taxonomy( 'staff_position', 'user', $args ); 

Now, go to the WP-Admin, and you should find a new menu added under the Users menu, as seen below.

Assigning the Custom Taxonomy

Navigate to the new menu and create a few terms. For this example, we created two items: CEO and Managers.

Then go to user editing screen and assign one item from the taxonomy to the user.

Query the Users

We are going to display the users in the theme based on the given term (of the taxonomy). But before going further, let’s create a new page template. We are going add the codes throughout the following section within this new template.

In this particular case, we won’t be able to query the users with get_users or WP_User_Query; when you create a new WP_User_Query class, it does not output the Custom Taxonomy that is assigned to the users. Justin Tadlock, in his tutorial, shows us how to use the get_objects_in_term function, instead.

This function outputs the object ID (which in our case the object means the user) that are tied with the term. To use it, we need two parameters: the Term ID and the Taxonomy name. You can spot the Term ID at the Browser URL bar when you edit it as shown below.

Once you’ve found the ID, put it within the function, like so.

 $users = get_objects_in_term(3, 'user_position'); 

You can use var_dump() to display the object IDs that have been retrieved; In my case, it returns the users with the ID of 1 and 3.

Using these IDs, we can also retrieve, for example, the user name and avatar.

 <ul> <?php if ( !empty( $users ) ) : ?> <?php foreach ( $users as $id ) : ?> <li class="user-entry"> <figure><?php echo get_avatar( get_the_author_meta('email', $id), '40' ); ?></figure> <h4 class="user-title"><a href="<?php echo esc_url( get_author_posts_url( $id ) ); ?>"><?php the_author_meta( 'display_name', $id ); ?></a></h4> </li> <?php endforeach; ?> <?php endif; ?> </ul> 

…and, finally, here is the result.

That’s it. You can freely modify the above codes to meet your requirement.

Top 50 Best Responsive WordPress Portfolio Themes

If you’re looking for a portfolio template to showcase your art, photography, or web design Singapore work, the wide selection of quality themes makes WordPress a great option. While there have been many…

Click through to read the rest of the story on the Vandelay Design Blog.

Showcase of the Best WordPress Magazine Themes

If you run a news-style blog that publishes high volumes of content, a magazine-style design or theme may be the most appropriate. WordPress users have loads of great magazine and news themes to…

Click through to read the rest of the story on the Vandelay Design Blog.

Who Offers the Best WordPress Hosting?

For any business or website, choosing the right host is an important decision. However, when you’re using WordPress to power your website there are some additional decisions that need to be made,…

Click through to read the rest of the story on the Vandelay Design Blog.

How To Display Icons In WordPress Menu [WordPress Plugin]

The icon is a great complement to any type of web design Singapore. Many icons are universally recognized. Take a public toilet signage at the airport. Without the need to know the local language, if it is foreign to you, you can immediately grasp which toilet is for the ladies, and which is for the gents from the icon used at the front of the door.

The same thing could also be applied for a Website; displaying an icon could help the users to navigate through your website. This helps with user experience, and will also make a website look prettier.

But displaying such an icon in a CMS like WordPress could be a challenge. If your website is built on top WordPress, here we will show you the easiest way to show an icon in WordPress menu.

Getting Started

Adding an icon in WordPress is made easy with a WordPress plugin called Menu Icons. First, install and activate this plugin.

Now we are ready to add the icons.

Adding Icon

For this example, I would like to use TwentyTwelve, a nice and clean WordPress theme. I also created a few pages that I will include in the menu.

Create a new menu through Appearance > Menus. Don’t forget to assign the menu location, unless it won’t appear anywhere in the website.

Then we will add an icon for each item. To begin, let’s expand one of the menu items. You will find a link that says Icon: Select icon. Click on the “Select icon” to start selecting. Here you will be presented with a window similar to the WordPress media library.

At the time of this writing, this plugin comes with 3 font icon libraries namely Dashicons, Genericons, and FontAwesome.

However, even though we are freely to use any icons, it is better to derive the icons from one library, since each of them has their own traits such as the size and the curve. In other words, if you use FontAwesome, use it throughout the website. Doing so would maintain the the icon consistency and make it look more unified.

When you select the icon, you will see the preview on the right panel. In the right panel make some adjustments. You can place the icon before or after the menu, control the font size, and set the vertical alignment. When the setting is done click on the Select, and proceed to add an icon for the other items in the menu.

Final Thought

Menu Icons is a very handy plugin to add icon in menu. It integrates well with the WordPress UI pattern which it very intuitive to use. In addition, the developer has planned a few new features for the next versions, including adding more icon libraries, and the ability to upload custom icon.

I hope you enjoy and find this tip useful. Go ahead and give the plugin a try.