Adding a custom styles format to TinyMCE plugin on Drupal 7

Ever had to create a custom style for the Wysiwyg/TinyMCE plugin on Drupal 7? Well I came across this very niche issue at work earlier this week and it did my head in for a couple of hours. I decided to post this solution in the nil chance someone else comes across a similar issue.

The solution I came up with is to create a custom module and place it in sites/all/modules/custom directory. It is recommended to save all custom modules in a 'custom' directory and drupal standard modules in a ‘contrib’ directory.

Add the following block of code into your mycustommodule.module file in your custom module and edit as you please. For more custom settings have a look at the hook_wysiwyg_editor_settings_alter drupal hook.

 function mycustommodule_wysiwyg_editor_settings_alter(&$settings, $context) {  
   // Each editor has its own collection of native settings that may be extended  
   // or overridden. Please consult the respective official vendor documentation  
   // for details.  
   if ($context['profile']->editor == 'tinymce') {  
     $settings['style_formats'] = array(  
       array(  
         'title'  => 'Black 25%',  
         'selector' => 'a',  
         'classes' => 'btn-small btn-black',  
         'block' => 'a',  
         'styles' => array (  
           'color' => 'black'  
         )  
       ),  
       array(  
         'title'  => 'Black 50%',  
         'selector' => 'a',  
         'classes' => 'btn-medium btn-black',  
         'block' => 'a',  
         'styles' => array (  
           'color' => 'black'  
         )  
       ),  
     )  
   }  
 }  

Voila!!

As always feel free to leave a comment or contribution below! :)