octalforty

Assigning Role On WordPress Registration & Profile Page

Yassir Yahya — Thu, 24 Nov 2011 16:55:45 +0000

Phew. I didn’t expect that the previous article, Assigning Role On WordPress Registration Page gained so much attention. This might be a little late for a follow up, but better late than never eh?

For this post, we’ll try to assign role on WordPress registration page, and then allow user to change their own role through their profile page. This might sound a bit risky as we’re giving the user rights to change their own role, but we’ll limit the role choices to our custom roles only.

The changes should satisfy one of the scenarios mentioned by Devexus. Oh, and we’ll do all this without depending on any plugins.

Create the custom roles

I’m sure by now, you should already familiarized yourself with functions.php, so let’s open it and include the snippets below:

 true,
   'delete_published_posts' => true,
   'edit_posts' => true,
   'edit_published_posts' => true,
   'publish_posts' => true,
   'read' => true,
   'upload_files' => true,
   'edit_users' => true
));
 add_role('designer', 'Designer', array(
   'edit_files' => true,
   'edit_plugins' => true,
   'edit_theme_options' => true,
   'edit_themes' => true,
   'install_plugins' => true,
   'install_themes' => true,
   'switch_themes' => true,
   'update_plugins' => true,
   'update_themes' => true,
   'read' => true,
   'edit_users' => true
));

Remember that the roles will allow certain capabilities to your user. If you’re using your roles as a way for the user to subscribe to a newsletter (or other uses) like Devexus, you might want to set the roles to be similar to the capabilities of Subscriber.

Modifying WordPress Registration Page

Now that we have our roles added, we’ll need to include these new roles to the registration page. Simply include the code snippets below:

add_action('register_form','role_registration_form');
function role_registration_form(){
   $wp_roles = new WP_Roles();
   $wp_roles->use_db = true;
   $role_names = $wp_roles->get_names();
  
   foreach( $role_names as $role_name ) {
      // Ensure that the options exclude default Wordpress roles
      if ( ($role_name !== 'Administrator') and ($role_name !== 'Editor') and ($role_name !== 'Author') and ($role_name !== 'Contributor' ) and ($role_name !== 'Subscriber') ) {
         //  Role value below needs to be in lowercase only
         $role_option .= "";
      }
   }
   $html = '
      

      
         
            ' . __('Role', 'Role') . '
               
            
         
      
   ';
   echo $html;
}

Save the file, and take a peek at your WordPress registration page. You should see a screen similar to the one below:

Screenshot showing the modified WordPress registration page.

Feel free to modify the markup, or even the CSS to suit your theme.

Now that we’ve managed to output the new role, next we’ll need to make sure that the role is saved when a user actually clicks on the Register page. The code below should do the trick:

add_action('user_register', 'register_role');
function register_role($user_id, $password="", $meta=array()) {

   $userdata = array();
   $userdata['ID'] = $user_id;
   $userdata['role'] = $_POST['role'];

   // allow if a role is selected
   if ( $userdata['role'] ){
      wp_update_user($userdata);
   }
}

Modifying WordPress Profile Page

If you’ve read the last post, this is where we stopped. Previously, as you might have noticed, updating the role on the profile will take no effect as WordPress will revert it back to the default state.

This time, we’ll still output the same field on the profile page, plus updating WordPress role field for that user based on the selection.

add_action( 'show_user_profile', 'role_selection_field' );
add_action( 'edit_user_profile', 'role_selection_field' );
function role_selection_field( $user ) {
   $wp_roles = new WP_Roles();
   $wp_roles->use_db = true;
   $role_names = $wp_roles->get_names();
  
   foreach( $role_names as $role_name ) {
      if ( ($role_name !== 'Administrator') and ($role_name !== 'Editor') and ($role_name !== 'Author') and ($role_name !== 'Contributor' ) and ($role_name !== 'Subscriber') ) {
         if ( !empty( $user->roles ) && is_array( $user->roles ) ) {
            foreach ( $user->roles as $role ) {			
               if ( strtolower($role_name) == $role ) {
                  $role_option .= "";
            }
         }
      }
   }
   ?>

What we’re doing above is including our custom user meta to the Profile page. First, we get the list of names for each role on WordPress. For each of the roles available, we’ll check if the role is one of the default roles provided by WordPress. If it’s not, we’ll include the role’s name and value as one of the options for the select element.

Next, we’ll need to output the actual markup that the user will see on the Profile page.


I guess the code above is pretty much explains themselves. We output the label, the list of roles we generated earlier into the select element, and a brief explaination for the users to explain the purpose of that field.
Save your functions.php file one more time, and checkout the Profile page. You should be able to see an extra user meta field like the screenshot below:
Screenshot showing the role field.
Next, we’ll include the code that will actually update the role when the user make the changes.

add_action( 'personal_options_update', 'save_role_selection_field' );
add_action( 'edit_user_profile_update', 'save_role_selection_field' );
function save_role_selection_field( $user_id ) {
   update_usermeta( $user_id, 'role', $_POST['role'] );
   $user = new WP_User( $user_id );

   // Remove role
   $current_user_role = get_current_user_role();
   $user->remove_role( $current_user_role );

   // Add role
   $user->add_role( $_POST['role'] );
}
// Function that will return the current user role whenever we need it.
function get_current_user_role () {
   global $current_user;
   get_currentuserinfo();
   $user_roles = $current_user->roles;
   $user_role = array_shift($user_roles);
   return $user_role;
};

?>


That's it! You could try and create a test account and update the role through the profile page. If you have different capabilities for each role, you should be able to see your sidebar changes based on your selected role. Feel free to check out the complete code on Gist.
Now dance baby, dance :)



Creating A WordPress Tag Index Page
Yassir Yahya — Sun, 20 Nov 2011 11:15:32 +0000
For some reasons, I tend to stay away from tag clouds whenever possible. While they’re visually appealing, tag clouds tend to give focus on highly-used tags and it’s quite difficult to scan for certain topics that you might actually be interested in.
With that in mind, I wanted the users to: 

See a list of all tags on my site.
See the tags sorted in alphabetical order to allow easy scanning.
Show number of frequency each tag has been used.
Provide a link for users to see posts related to the tag.

On this post, I’ll show you how you could achieve all the points above, while still keeping your tags visually appealing. In short, we’re going to create a page similar to the Tag Index page on octalforty.
Preparing the PHP file
First off, we’re going to create a new PHP file called tag-index.php and save it to your themes folder. Your tag-index.php should be on the same location as the widely-known functions.php. Once that’s done, we’ll include the code below to your tag-index.php:



    
        
		
            >
			
                
                    
                


                
                    
                

				
                
                    
                

			
            

		
        

    

		


On line 2 — 4 on the above code, we’re telling WordPress the Template Name. This will be used when we’re going to create the actual page later on. The rest of the code is a copy of WordPress 2011 theme page markup. Feel free to make any modifications to suit your own theme.
Outputting the tags
Finally, the fun part.
On line 18 of your tag-index.php, replace that line with the code below:

$character ) {
            // Get the tag information for each characters in the array.
            $tags = get_tags( array('name__like' => $character, 'order' => 'ASC') );
            // Output a wrapper so that our arrays will be contained in 4 columns.
            if ($index != 0 && $index % 4 == 0)  {
                $html = "";
            } else {
                $html = "";
            }
            // Output the character and use it as the title.
            $html .= "{$character}";
            // Output the markup for each tag found for each character.
            if ($tags) {
                $html .= "";
                foreach ( (array) $tags as $tag ) {
                    $tag_link = get_tag_link($tag->term_id);
                    $html .= "";
                    if ( $tag->count > 1 ) {
                        $html .= "";
                    } else {
                        $html .= "
";
                    }
                    $html .= "{$tag->name}#{$tag->count}";
                    $html .= "";
                }
                $html .= '';
            }
            $html .= '';
            // Output the markup for the current character.
            echo $html;
            // Increment the index by 1.
            $index++;
        }					
    }
?>

Easy huh? I’ve commented each line to ensure that it’s easier to understand what’s going around. If you’re unsure of something, just leave a comment eh?
Once you’re done figuring out what’s happening, save the file.
Create the page
Now go to your Add New Pages page on your WordPress admin. You should see a screen similar to the ones below:
Screenshot showing the Add New Page on WordPress.
Give your post a title (Hint: Tag Index). Under the Page Attributes section on the right of your screen, select Tag Index as the template.
Screenshot showing Tag Index set as the Template.
Done? Awesome. Save and preview your page to see a list of tags ordered alphabetically. You can then style it according to your taste.



10 Useful Resources for Lessn, The URL Shortener
Yassir Yahya — Sun, 16 Jan 2011 17:39:13 +0000
Recently I’ve bought myself a short domain for use with octalforty.com. Previously I’ve been using bit.ly for all my links on Twitter and I just thought it’s about time to use a url shortener service that could represent octalforty as a brand instead.
After spending few hours researching on the options available to me, I’ve decided to go with Lessn, by the great Shaun Inman.
Since Lessn is offered as-is, without support and without warranty, it would take some effort to bend it to your needs. So here I’ve listed down few ways you could use, or extend Lessn! Let’s go!


Custom Shortlinks For WordPress
Dean Robinson wrote a nice tutorial on  how to use Lessn and WordPress together. With the method, instead of having to create a shortlink for each of your post, he basically used the post ID with your short domain, to mask the original WordPress shortlink.
Read the full tutorial, Custom Shortlinks For WordPress.


WP Lessn
WP Lessn was written by Jay Robinson, and uses Shaun Inman’s Lessn to create a short URL for each new post you publish. The Lessn’d link is attached to the post meta data. The only drawback I see here is when you have a lot of existing published posts, you’ll need to re-publish them in order to generate a short link for each post.
Download WP Lessn from WordPress Plugin Directory.


Listr for Lessn
Listr was written by Arley McBlain to actually list down all the original URLs and their shortened link, in a page for easy reference.
Get Listr at debutcreative.com


Lessn & Tweetie 2.0 bookmarklet
Manasto Jones came up with this nifty little bookmarklet to make it easier to shorten a URL, and get Tweetie to include the shortened link in a new status update
Get the bookmarklet from Lessn and Tweetie by Monasto.


Lessn & Tweetie 2.0 Custom URL Shortener
Author of Lessn, Shaun Inman himself shows you how to setup Tweetie 2.0 to use your Lessn installation as a custom URL shortener.
See how to set Tweetie 2 & Lessn up!


Lessn Pepper for Mint
Lessn Pepper tracks the most recent and most popular urls and referrers in your Lessn installation and displays them in Mint. 
Get Lessn Pepper at the pepper page.


Lessn fork by Mike Tierney
Mike Tierney created a fork of Lessn, to allow a Lessn installation to be run from the root directory, instead of having to put it inside a directory.
Read more at the Github.


Lessn OS X Service
Steve Streza wrote a text service for Mac OS X 10.6+ which compresses URLs with Lessn or ButteredURLs.
Get Lessn Service from the Github page.


Lessn More
Lessn More extends the original Lessn with various features like:

The ability to use custom short URLs (slugs).
Different auto-shorten modes (optional mixed case).
The ability to avoid lookalike characters.
An optional “banned word list” to prevent auto-generating offensive URLs.
And much more!

Check Lessn More project page, or get it from Github.


Lessn More with WordPress
If you’re like me and decided to go with Lessn More, I’m sure you’ll be jumping around to know that Matt Wiebe wrote a WordPress plugin that integrates WordPress shortlink functionality with the Lessn More URL shortener. Sweet indeed!
Get the plugin from Github.


Additional reading.


Johnnie Munger shows how it’s possible to change Lessn’s hash pattern, to use arrays instead of the original base convertion. This allows his version of Lessn to support a much larger number of shortened links.
Read more from his post, A Simple URL Shortener.





Assigning Role On WordPress Registration Page
Yassir Yahya — Sat, 04 Sep 2010 19:21:53 +0000

Update! A newer post has been published as a follow-up to this post.
Read Assigning Role On WordPress Registration & Profile Page

These few months, I’ve been playing around with various parts of WordPress theming. It was no easy task as I’m used to how Expression Engine allows me to do most of the stuff I needed without much PHP knowledge needed.
One part that I’ll try to customize most of the time, is the registration page of my WordPress installation itself. Here, I’ll show you how to add a field to the WordPress registration form by leveraging the useful Cimy User Extra Fields plugin.
The plugin
First off, let’s start with downloading Cimy User Extra Fields, upload to your WordPress plugin folder and activate it. Once you’ve done that, you should see a new options aptly named Cimy User Extra Fields under Settings.


Screenshot showing Cimy User Extra Field under Settings.

Next we need to add a new field on the registration form that allows the user to select the role of their choosing.


Screenshot showing settings to add a new field with role options.

Once you’ve added the field and save changes, check your registration page and you should see something like the ones below.


Screenshot showing the new role field on the registration page.

Linking it all up
Now that’s done, we’ll need to include the code inside our functions.php file. I was having troubles figuring out how to do this at first, but managed to find this article. In that article, it shows us how to do something similar with the use of URL parameters.
We’ll need to modify a bit on the code to get it working with our dropdown field though. Below is the modified code, courtesy of my talented friend Rizal.


        
          
              
//
// Modify registration form to include roles
//
add_action('user_register', 'register_role');

function register_role($user_id, $password="", $meta=array()) {
   $userdata = array();
   $userdata['ID'] = $user_id;
   $userdata['role'] = $_POST['cimy_uef_USERTYPE'];
   if ($userdata['role'] == 'A Contributor') {
      $userdata['role'] = 'contributor';
   }
   if ($userdata['role'] == 'An Editor') {
      $userdata['role'] = 'editor';
   }

   //only allow if user role is my_role
   if (($userdata['role'] == "contributor") or ($userdata['role'] == "editor")){
      wp_update_user($userdata);
   }
}
?>
          

          
            view raw
            functions.php
            This Gist brought to you by GitHub.
          
        


And there you have it! Now all users registered to your WordPress site will be assigned a role of their choosing automatically.



Renaming jQuery UI Tabs With Validation
Yassir Yahya — Wed, 09 Jun 2010 08:38:45 +0000
Recently, one of our projects requires me to use jQuery UI Tabs for its user interface. One of the problem was, to figure a way for the user to rename the tab and validate the input at the same time. Most of the site’s client-side validation is through jQuery Validate plugin, so that should be straight-forward.
Want to see the it in action? Why not play around with the online demo or download the source files.
The markup
First off, let’s start by including jQuery, jQuery UI and jQuery livequery plugin. For this demo, I’ll point the files to Google CDN whenever possible, and start with the jQuery UI Tabs default functionality demo markup.



	
		
		jQuery UI Tabs - Default functionality
		
		
		
		

		
	
	
		
			
				
					Nunc tincidunt
					Proin dolor
					Aenean lacinia
				
				
				
				
				
				
				
				
				
				
			

		

		
	



The JavaScript
We’ll be including most of the scripts inside the