Skip to content

Instantly share code, notes, and snippets.

@robincornett

robincornett/admin.php Secret

Last active May 7, 2016
Embed
What would you like to do?
Add style dropdown to WordPress TinyMCE editor.
<?php
/**
* Admin functionality for Leaven.
* @copyright 2016 Robin Cornett
*/
add_editor_style( 'editor-style.css' );
// Add Google fonts to editor
add_action( 'after_setup_theme', 'leaven_editor_fonts' );
function leaven_editor_fonts() {
$font_url = str_replace( ',', '%2C', '//fonts.googleapis.com/css?family=Open+Sans:300,400,700|Lora:400italic,700italic' );
add_editor_style( $font_url );
}
// Adds the style dropdown to the top menu in the editor.
add_filter( 'mce_buttons', 'leaven_mce_editor_buttons' );
function leaven_mce_editor_buttons( $buttons ) {
$buttons[] = 'styleselect';
return $buttons;
}
// Adds the style dropdown to the second row of buttons in the editor.
//add_filter( 'mce_buttons_2', 'leaven_mce_editor_buttons_second' );
function leaven_mce_editor_buttons_second( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
add_filter( 'tiny_mce_before_init', 'leaven_modify_mce_styles' );
function leaven_modify_mce_styles( $init_array ) {
// Define the style_formats array
$style_formats = array(
array(
'title' => __( 'Button', 'leaven' ),
'selector' => 'a',
'classes' => 'button',
),
array(
'title' => __( 'Notice', 'leaven' ),
'block' => 'div',
'classes' => 'notice',
),
array(
'title' => __( 'Disclaimer', 'leaven' ),
'selector' => 'p',
'classes' => 'disclaimer',
),
);
$init_array['style_formats'] = wp_json_encode( $style_formats );
return $init_array;
}
body { background-color: #fff; color: #292c33; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 300; line-height: 1.75; margin: 0; word-wrap: break-word; }
.mce-content-body { margin: 12px; background: #fff; }
.site-container { overflow-x: hidden; }
a, button, input:focus, input[type="button"], input[type="reset"], input[type="submit"], textarea:focus, .button, .gallery img { -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; }
::-moz-selection { background-color: #292c33; color: #fff; }
::selection { background-color: #292c33; color: #fff; }
a { color: #e0ac34; font-weight: 700; text-decoration: none; }
a:hover { color: #292c33; }
p { margin: 0 0 28px; padding: 0; }
ol, ul { margin: 0; padding: 0; }
li { list-style-type: none; }
b, strong { font-weight: 700; }
blockquote, cite, em, i { font-family: "Lora", Georgia, serif; font-size: 1.1em; font-style: italic; }
blockquote { margin: 40px; }
blockquote::before { content: "\201C"; display: block; font-size: 30px; height: 0; left: -20px; position: relative; top: -10px; }
h1, h2, h3, h4, h5, h6 { font-family: "Open Sans", sans-serif; font-weight: 700; line-height: 1.2; margin: 0 0 10px; }
h1 { font-size: 2.5em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.1em; }
h4 { font-size: 18px; }
h5 { font-size: 0.9em; }
h6 { font-size: 0.76em; }
embed, iframe, img, object, video, .wp-caption { max-width: 100%; }
.gallery-caption, .wp-caption { margin: 0; }
img { height: auto; }
.featured-content img, .gallery img { width: auto; }
input, select, textarea { background-color: #fff; border: 1px solid #dddfe4; color: #292c33; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 300; padding: 16px; width: 100%; }
input:focus, textarea:focus { border: 1px solid #a5aab6; outline: none; }
input[type="search"] { border-radius: 0; -webkit-appearance: none !important; }
input[type="checkbox"], input[type="image"], input[type="radio"] { width: auto; }
::-moz-placeholder { color: #292c33; font-weight: 300; opacity: 1; }
::-webkit-input-placeholder { color: #292c33; font-weight: 300; }
button, input[type="button"], input[type="reset"], input[type="submit"], .button { background-color: #292c33; border: none; color: #fff; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; cursor: pointer; padding: 16px 24px; text-transform: uppercase; width: auto; }
.button.wide { text-align: center; width: 100%; }
.footer-widgets button, .footer-widgets input[type="button"], .footer-widgets input[type="reset"], .footer-widgets input[type="submit"], .footer-widgets .button { background-color: #e0ac34; color: #fff; }
.footer-widgets button:hover, .footer-widgets input:hover[type="button"], .footer-widgets input:hover[type="reset"], .footer-widgets input:hover[type="submit"], .footer-widgets .button:hover { background-color: #fff; color: #292c33; }
button:hover, input:hover[type="button"], input:hover[type="reset"], input:hover[type="submit"], .button:hover { background-color: #de2f25; color: #fff; }
.entry-content .button:hover { color: #fff; }
.button { display: inline-block; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button { display: none; }
table { border-collapse: collapse; border-spacing: 0; line-height: 2; margin-bottom: 40px; width: 100%; }
tbody { border-bottom: 1px solid #a5aab6; }
td, th { text-align: left; }
td { border-top: 1px solid #a5aab6; padding: 6px 0; }
.gallery { overflow: hidden; }
.gallery img { border: 1px solid #dddfe4; height: auto; padding: 4px; }
.gallery img:hover { border: 1px solid #a5aab6; }
.gallery-item { float: left; margin: 0 0 28px; text-align: center; width: 50%; }
.aligncenter, .alignright, .alignleft, .centered, .alignright img, .alignleft img { display: block; margin: 0 auto 24px; }
a.alignleft, a.alignnone, a.alignright { max-width: 100%; }
a.aligncenter img { display: block; margin: 0 auto; }
a.alignnone { display: inline-block; }
.alignright .avatar { float: right; margin-left: 24px; }
.notice { border-left: 2px solid #de2f25; margin: 24px; padding: 24px; }
.disclaimer { font-family: "Lora", Georgia, serif; font-style: italic; font-size: 0.9em; }
.mce-content-body ol, .mce-content-body ul { margin-bottom: 28px; margin-left: 40px; }
.mce-content-body ol > li { list-style-type: decimal; }
.mce-content-body ul > li { list-style-type: disc; }
.mce-content-body ol ol, .mce-content-body ul ul { margin-bottom: 0; }
@media only screen and (min-width: 30em) {
.gallery-columns-3 .gallery-item, .gallery-columns-6 .gallery-item, .gallery-columns-9 .gallery-item { width: 33%; }
.gallery-columns-4 .gallery-item { width: 25%; }
.alignleft { float: left; text-align: left; }
.alignright { float: right; text-align: right; }
img.alignnone, .alignnone { margin-bottom: 12px; }
a.alignleft, img.alignleft, .wp-caption.alignleft { margin: 0 24px 24px 0; }
a.alignright, img.alignright, .wp-caption.alignright { margin: 0 0 24px 24px; } }
@media only screen and (min-width: 50em) {
.post-password-form { text-align: center; }
.post-password-form input[type="password"] { width: 50%; }
.gallery-columns-5 .gallery-item { width: 20%; }
.gallery-columns-6 .gallery-item { width: 16.6666%; }
.gallery-columns-7 .gallery-item { width: 14.2857%; }
.gallery-columns-8 .gallery-item { width: 12.5%; }
.gallery-columns-9 .gallery-item { width: 11.1111%; } }
<?php
add_action( 'genesis_setup', 'leaven_setup', 15 );
function leaven_setup() {
include_once( get_stylesheet_directory() . '/includes/admin.php' );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment