Creating custom styles drop down in CKEditor in Drupal 7

CKEditor is a bit finicky when it comes to the listing of the custom classes that appear in the drop down. Here are my step by step to simplify the process.
  1. Create a file ckeditor.styles.js in your theme
  2. Insert the code for each class or style as follows
  3. Edit editor profile > CSS
  4. Under Predefined Styles set path to the file created above. For me the %tjs/ckeditor.style.js did not work so I had to specify the path exactly /sites/example.com/themes/example/js/ckeditor.style.js
  5. Save
  6. Now the drop down styles should be only the ones you listed in the ckeditor.styles.js file
To ensure that CKEditor also keeps the assigned classes
  1. Go to Admin > Configuration > CKEditor
  2. Under Profiles, choose your profile and edit it
  3. Go to Advanced Options > Custom JavaScript configuration
  4. Add config.allowedContent = true;
  5. Save the profile