Custom ckeditor.styles.js file with WYSIWYG module
These are 2 ways (there are certainly more) to add custom ckeditor stylesets using the drupal wyswiwyg module. 


Using the contributed module Ckeditor Styles
Using hook_wysiwyg_editor_settings_alter as follows: 


(code "inspired" by ckeditor_styles module)

In a custom module add the hook_wysiwyg_editor_settings_alter implementation:

/**
 * Implements hook_wysiwyg_editor_settings_alter().
 *
 * @param type $settings
 * @param type $context
 */
function MYCUSTOMMODULE_wysiwyg_editor_settings_alter(&amp;$settings, $context) {
  // We only add the settings to ckeditor wysiwyg profiles.
  if ($context['profile']-&gt;editor == 'ckeditor') {
    $format = $context['profile']-&gt;format;
    $path = drupal_get_path('module', 'MYCUSTOMMODULE') . '/js';
    $settings['stylesSet'] = "mycustomstyleset:/$path/ckeditor_styles.js";
  }
}


and add a file named ckeditor_styles.js in a sub directory js of the custom module: 

CKEDITOR.stylesSet.add('mycustomstyleset',
  [
    { name : 'Red', element : 'span', styles : {'color' : 'red' } },
    { name : 'CSS Style', element : 'span', attributes: { 'class' : 'my_style' } },
    { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } },
    { name : 'Heading 4' , element : 'h4' },
    { name : 'Blue Button', element : 'div', attributes : { 'class' : 'blue-button' } },
  ]);