{"id":129,"date":"2013-03-18T19:36:26","date_gmt":"2013-03-18T19:36:26","guid":{"rendered":"http:\/\/www.webninjataylor.com\/library\/?p=129"},"modified":"2014-06-24T21:47:12","modified_gmt":"2014-06-24T21:47:12","slug":"wordpress-custom-styling-via-the-tinymce-editor","status":"publish","type":"post","link":"https:\/\/webninjataylor.com\/library\/wordpress-custom-styling-via-the-tinymce-editor\/","title":{"rendered":"Customize WordPress Content Editor"},"content":{"rendered":"

Add this to your theme’s functions.php file…<\/p>\n

\/******** ADD CUSTOM STYLES TO TINYMCE EDITOR ********\/\r\nadd_filter('mce_buttons_2', 'my_mce_buttons_2');\r\nfunction my_mce_buttons_2($buttons) {\r\n    array_unshift($buttons, 'styleselect');\r\n    return $buttons;\r\n}\r\nadd_filter('tiny_mce_before_init', 'my_mce_before_init');\r\nfunction my_mce_before_init($settings) {\r\n    $style_formats = array(\r\n        array(\r\n            'title' => 'Button',\r\n            'selector' => 'a',\r\n            'classes' => 'button'\r\n        ),\r\n        array(\r\n            'title' => 'Callout Box',\r\n            'block' => 'div',\r\n            'classes' => 'callout',\r\n            'wrapper' => true\r\n        ),\r\n        array(\r\n            'title' => 'Bold Red Text',\r\n            'inline' => 'span',\r\n            'styles' => array(\r\n                'color' => '#f00',\r\n                'fontWeight' => 'bold'\r\n            )\r\n        )\r\n     );\r\n     $settings['style_formats'] = json_encode($style_formats);\r\n     return $settings;\r\n }\r\n add_action('admin_init', 'add_my_editor_style');\r\n function add_my_editor_style() {\r\n     add_editor_style();\r\n }<\/pre>\n
Full article\u00a0and array reference.<\/a><\/p>\n
This is also fairly simple once you know the syntax. All we\u2019re doing is defining the formats, then encoding them as\u00a0JSON so they\u2019re TinyMCE-friendly, then assigning them to the TinyMCE settings.<\/p>\n
Let\u2019s break apart the array and look at the different options.<\/p>\n\n\n\n\n\n\n\n\n\n
title<\/strong>\u00a0[required]<\/td>\nlabel for this dropdown item<\/td>\n<\/tr>\n
selector<\/strong>\u00a0|\u00a0block<\/strong>\u00a0|inline<\/strong>\u00a0[required]<\/td>\n\n
    \n
  • selector<\/strong>\u00a0limits the style to a specific HTML tag, and will apply the style to an existing tag instead of creating one<\/li>\n
  • block<\/strong>\u00a0creates a new block-level element with the style applied, and will replace the existing block element around the cursor<\/li>\n
  • inline<\/strong>\u00a0creates a new inline element with the style applied, and will wrap whatever is selected in the editor, not replacing any tags<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n
classes<\/strong>\u00a0[optional]<\/td>\nspace-separated list of classes to apply to the element<\/td>\n<\/tr>\n
styles<\/strong>\u00a0[optional]<\/td>\narray of inline styles to apply to the element (two-word attributes, like\u00a0font-weight<\/em>, are written in Javascript-friendly camel case:\u00a0fontWeight<\/em>)<\/td>\n<\/tr>\n
attributes<\/strong>\u00a0[optional]<\/td>\nassigns attributes to the element (same syntax as\u00a0styles<\/strong>)<\/td>\n<\/tr>\n
wrapper<\/strong>\u00a0[optional, default = false]<\/td>\nif set to\u00a0true<\/strong>, creates a new block-level element around any selected block-level elements<\/td>\n<\/tr>\n
exact<\/strong>\u00a0[optional, default = false]<\/td>\ndisables the \u201cmerge similar styles\u201d feature, needed for some CSS inheritance issues<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Note that while\u00a0classes<\/code>\u00a0and\u00a0styles<\/code>\u00a0are both optional, one of the two should be present in each array. (Otherwise, why are you adding this to the dropdown anyway?)<\/p>\n","protected":false},"excerpt":{"rendered":"
Add this to your theme’s functions.php file… \/******** ADD CUSTOM STYLES TO TINYMCE EDITOR ********\/ add_filter(‘mce_buttons_2’, ‘my_mce_buttons_2’); function my_mce_buttons_2($buttons) { array_unshift($buttons, ‘styleselect’); return $buttons; } add_filter(‘tiny_mce_before_init’, ‘my_mce_before_init’); function my_mce_before_init($settings) { $style_formats = array( array( ‘title’ => ‘Button’, ‘selector’ => ‘a’, ‘classes’ => ‘button’ ), array( ‘title’ => ‘Callout Box’, ‘block’ => ‘div’, ‘classes’ => ‘callout’, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[144],"tags":[19,5],"class_list":["post-129","post","type-post","status-publish","format-standard","hentry","category-web-shots","tag-css","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/comments?post=129"}],"version-history":[{"count":7,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/129\/revisions"}],"predecessor-version":[{"id":3395,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/129\/revisions\/3395"}],"wp:attachment":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/media?parent=129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/categories?post=129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/tags?post=129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}