Beginning with WP Edit Version 4.0 (and WP Edit Pro Version 5.0); the WP Edit (Pro) Custom Buttons API will be introduced, allowing other WordPress plugin/theme developers to add their buttons into the WP Edit (Pro) button configuration system. Using ...

 

Custom Buttons API and more...



Custom Buttons API


Beginning with WP Edit Version 4.0 (and WP Edit Pro Version 5.0); the WP Edit (Pro) Custom Buttons API will be introduced, allowing other WordPress plugin/theme developers to add their buttons into the WP Edit (Pro) button configuration system.

Using the Custom Buttons API will allow a user of WP Edit (Pro) to place the custom plugin or theme button in any editor row (and location) as desired.

The following article is intended for plugin/theme developers. Please do not attempt to edit code unless experienced.

Create Buttons Normally

The buttons will still need to be created normally; just like any other editor buttons. This will involve both adding the button to the editor; and initializing the code for the button.

Creating the buttons normally will also ensure they are visible in the content editor, until the WP Edit (Pro) user has a chance to visit the WP Edit (Pro) admin settings page and set the button arrangement; or if WP Edit (Pro) is deactivated.

Adding Buttons to Editor

The first step is adding the button to the editor. There are many articles on how to add a custom button to the tinymce editor; so I’ll just cover the basics.

Typically, adding a button to the editor will look like:

add_filter( 'mce_buttons_2', 'myplugin_register_buttons' );function myplugin_register_buttons( $buttons ) { array_push( $buttons, 'my_plugin_button' );return $buttons;}

Here, my_plugin_button is the name of the button being added in the editor button javscript file.

Adding Initialization Code

The next step is adding the plugin to the external plugins filter. This tells WordPress where the javascript file is located that handles the button. Again, there are many articles so I’ll just cover the basics.

add_filter( 'mce_external_plugins', 'myplugin_register_tinymce_javascript' );function myplugin_register_tinymce_javascript( $plugin_array ) { $plugin_array['my_plugin_js'] = plugins_url( '/js/tinymce-plugin.js',__FILE__ ); return $plugin_array;}

Here, my_plugin_js is the name of the plugin being added in the editor button javascript file.
The plugins_url( '/js/tinymce-plugin.js',__FILE__ ); is the location of the editor button javascript file.

Quick View of Javascript Button Code

Just for reference, let’s see where these values come from in the javascript code used for the editor button:

(function() { tinymce.PluginManager.add('my_plugin_js', function( editor, url ) { editor.addButton('my_plugin_button', { text: 'My Plugin', onclick: function() { editor.insertContent('WP Edit (Pro) is awesome!'); } }); });})();

The my_plugin_js is the unique name of the button plugin being passed to the editor Plugin Manager. The same value is used in the mce_external_plugins filter being passed to WordPress. Finally, the button_id value in the custom buttons API must also match this value.

The my_plugin_button is the unique name of the actual button, and is the same value used in the mce_buttons_2 filter being passed to WordPress.

Custom Buttons API

WP Edit (Pro) provides a custom buttons API to allow plugin/theme developers to add their editor buttons into the WP Edit (Pro) button configuration system. This will allow end users to place the button in any desired location in the editor toolbars.

Developers can access this system by using the wp_edit_custom_buttons filter. The filter provides one argument; which is an array of arrays, each containing seven key/value pairs. New buttons can be added by appending a new array (or arrays) to the filter.

These values only affect how the button appears on the WP Edit (Pro) admin settings page; and do not interfere with how the button is displayed in the content editor.


KeyTypeValue
tooltip_title(string) (required)The title of the button; shown on fancy tooltip.
If fancy tooltips are disabled; this title will be displayed using the “title” attribute.
tooltip_content(string) (required)The content of the button; shown on the fancy tooltip.
Content accepts html tags. Wrap sentences with paragraph tags.
Use this to display a brief message regarding the functionality of the button.
button_id(string) (required)This value MUST match the name of the “mce_external_plugins” filter key used to add the javascript file for the editor button.
It is the same value used in the javascript file to create the button being used (TinyMCE.PluginManager.add(‘THIS VALUE’, …)).
dashicon(string) (optional)WP Edit includes the WordPress “dashicons” stylesheet.
This value should only be set if the button icon will be loaded from the dashicons stylesheet.
An example value might be “dashicons dashicons-editor-ul” or “dashicons dashicons-editor-ol”.
If this value is set; the “button_text” value must be blank.
custom_icon(string) (optional)This value can be used for a custom button image.
An example might be:
plugins_url() . '/my_plugin/my_editor_button/images/my_image.png'
Recommended image size is 20px by 20px.
If this value is set; the “button_text” value must be blank.
button_text(string) (optional)The text to be shown on the button.
This should only be used if the button is labled with text (no icon).
If an image is used instead (in the “dashicon” or “custom_icon” value; leave this field blank.
editor_row(string) (optional)The editor toolbar row where the button should be appended (until moved and saved by user).
Possible values are:
A) ‘toolbar1’ (string)
B) ‘toolbar2’ (string)

Text Button Example

Adding a text button simply involves passing the text of the button as the “button_text” value. Be sure to leave the “dashicon” and “custom_icon” values blank; if a text value is set.

add_filter( 'wp_edit_custom_buttons', 'wp_edit_button_filter' );function wp_edit_button_filter( $args ) { $args[] = array( 'tooltip_title' => 'Test Plugin','tooltip_content' => '<p>Test Plugin content.</p>','button_id' => 'test_plugin','dashicon' => '','custom_icon' => '','button_text' => 'Test Plugin','editor_row' => 'toolbar2' ); // Important; return original filter $args return $args;}

Basically, we are appending a new array to the incoming array being filtered. This example will add a new button titled “Test Plugin”, and add it to the WP Edit (Pro) buttons container (second row).

Custom Buttons API

Dashicon Button Example

A WordPress Dashicon may also be used for the WP Edit (Pro) button image. Visit the WordPress Dashicons Webpage; and select which icon will be used. Next, click the “Copy HTML” link. This will display a javascript alert; containing the dashicon code.

The code for a dashicon (after clicking “Copy HTML”) will contain some extra html markup (a span container). All that is needed are the class names inside the span tag. For example, <span class="dashicons dashicons-admin-tools"></span> becomes just dashicons dashicons-admin-tools.
add_filter( 'wp_edit_custom_buttons', 'wp_edit_button_filter' );function wp_edit_button_filter( $args ) { $args[] = array( 'tooltip_title' => 'Test Plugin','tooltip_content' => '<p>Test Plugin content.</p>','button_id' => 'test_plugin','dashicon' => 'dashicons dashicons-admin-tools','custom_icon' => '','button_text' => '','editor_row' => 'toolbar2' ); // Important; return original filter $args return $args;}

Basically, we are appending a new array to the incoming array being filtered. This example will add a new button with the dashicon image, and add it to the WP Edit (Pro) buttons container (second row).

Custom Buttons API

Custom Icon Button Example

Finally, a custom icon can be used for the WP Edit (Pro) button image. When using a custom button; the location of the image will need to be passed in the “custom_icon” value.

Recommended image size for the WP Edit (Pro) button image is 20px by 20px.
add_filter( 'wp_edit_custom_buttons', 'wp_edit_button_filter' );function wp_edit_button_filter( $args ) { $args[] = array( 'tooltip_title' => 'Test Plugin','tooltip_content' => '<p>Test Plugin content.</p>','button_id' => 'test_plugin','dashicon' => '','custom_icon' => plugins_url() . '/my_plugin/my_editor_button/images/my_image.png','button_text' => '','editor_row' => 'toolbar2' ); // Important; return original filter $args return $args;}

Basically, we are appending a new array to the incoming array being filtered. This example will add a new button with the custom image, and add it to the WP Edit (Pro) buttons container (second row).

Custom Buttons API

Multiple Buttons Example

Adding multiple buttons to the Custom Buttons API is easy. Just create additional arrays to accommodate each additional editor button.

add_filter( 'wp_edit_custom_buttons', 'wp_edit_button_filter' );function wp_edit_button_filter( $args ) { $args[] = array( 'tooltip_title' => 'Test Plugin','tooltip_content' => '<p>Test Plugin content.</p>','button_id' => 'test_plugin','dashicon' => 'dashicons dashicons-admin-tools','custom_icon' => '','button_text' => '','editor_row' => 'toolbar2' ); $args[] = array( 'tooltip_title' => 'Test Plugin 2','tooltip_content' => '<p>Test Plugin content 2.</p>','button_id' => 'test_plugin_2','dashicon' => '','custom_icon' => plugins_url() . '/my_plugin/my_editor_button/images/my_image.png','button_text' => '','editor_row' => 'toolbar2' ); // Important; return original filter $args return $args;}

The result is two buttons being added to the WP Edit (Pro) buttons container (second row).

Custom Buttons API

Full Code Example

The full code example below can be used as reference.

add_filter( 'mce_buttons_2', 'myplugin_register_buttons' );function myplugin_register_buttons( $buttons ) { array_push( $buttons, 'my_plugin_button' ); return $buttons;}add_filter( 'mce_external_plugins', 'myplugin_register_tinymce_javascript' );function myplugin_register_tinymce_javascript( $plugin_array ) { $plugin_array['my_plugin_js'] = plugins_url( '/js/tinymce-plugin.js',__FILE__ ); return $plugin_array;}add_filter( 'wp_edit_custom_buttons', 'wp_edit_button_filter' );function wp_edit_button_filter( $args ) { $args[] = array( 'tooltip_title' => 'Test Plugin','tooltip_content' => '<p>Test Plugin content.</p>','button_id' => 'my_plugin_js','dashicon' => '','custom_icon' => plugins_url() . '/my_plugin/my_editor_button/images/my_image.png','button_text' => '','editor_row' => 'toolbar2' ); // Important; return original filter $args return $args;}

User Experience

Let’s outline what the end-user of WP Edit (Pro) will see when the filtered buttons are applied.

Phase One

If the end-user has not yet visited the WP Edit (Pro) admin settings page to save the new buttons (or if WP Edit (Pro) is deactivated); the editor buttons will be appended to whichever editor row was used when “Creating the Buttons Normally” (detailed above).

Custom Buttons API

Phase Two

Once the end-user visits the WP Edit (Pro) admin settings page; a notice will be displayed alerting the user new buttons have been added to the container.

Custom Buttons API

Phase Three

After the user places the buttons in a new location and saves; the process is complete. The buttons will now appear in the same location in the editor.

WP Edit (Pro) Buttons Editor
Custom Buttons API

Post/Page Content Editor
Custom Buttons API

Conclusion

As illustrated above; it’s really simple to add buttons to the WP Edit (Pro) button Custom Buttons API. A single function will allow other plugin/theme plugins to add their buttons to a system which allows the end-user to place the buttons in any custom arrangement.

Notes

  • It is important to both add the button manually; and via the WP Edit (Pro) Custom Buttons API. This will ensure the button is shown in the editor even if WP Edit (Pro) is deactivated. Once the end user saves the WP Edit (Pro) buttons; the new button locations will appear in the editor.
  • When using the wp_edit_custom_buttons filter; it is VERY important to return the $args array, or else it will prevent other plugin/theme buttons from rendering.
  • If adding multiple buttons; the button_id must be unique for each button. In fact; it is a good idea to namespace the button with a unique prefix; which will prevent clashes with other plugin/theme buttons.
  • Both the Free version and the Paid version of WP Edit use the same wp_edit_custom_buttons filter. There is no need to code buttons for both plugins separately. The custom buttons will be recognized by either WP Edit version.

Help

If you would like some assistance with setting the WP Edit (Pro) Custom Buttons API filter properly; please feel free to open a support ticket on the WP Edit Pro Support Website.


The post Custom Buttons API appeared first on WP Edit Pro Knowledge Base.

      
 

Troubleshoot Blank WordPress Editor


Brief Introduction

I have been working directly with the WordPress content editor for just over three years, now. My two primary plugins; WP Edit and WP Edit Pro interact directly with the WordPress content editor, adding new and exciting editing possibilities.

In my experience I have also learned how to “break” the editor. Perhaps I entered an improper piece of code, or perhaps something inside WordPress core changed; resulting in a “broken” editor. Additionally; I am a WordPress Forum moderator and see these issues arise frequently in the forums.

Signs of a Broken or Blank WordPress Editor

There are quite a few signs which may appear with a broken or blank WordPress editor:

  1. The editor is blank (no text). Actually, the text is white and the background is white; making it “appear” blank. If you select the editor content with the mouse; you’ll see it is still there.
  2. The editor button rows are not loading.
  3. It is impossible to toggle between “visual” and “text” modes.
  4. When clicking editor buttons; they do nothing.
  5. No javascript is working on the page; for example, you can’t click the “Screen Options” tab, or you can’t reorder metaboxes on the post/page editor page.

If you are experiencing any of these symptoms, then something is not communicating properly in your WordPress environment.

Most people will recognize a broken WordPress editor after a major update; either to core or to a plugin or theme. WordPress is extremely dynamic; with ever-changing code. It is the plugin/theme developers responsibility to “keep up” with WordPress and follow their suggested best coding practices. So the first thing we want to check is making sure everything is up to date.

Updating Everything

Before we continue; it is very important to ensure all code is up to date. This includes:

  • Updating to the latest version of WordPress.
  • Updating the theme to the latest release.
  • Updating all plugins to their latest releases.

Now, manually clear your browser cache. This will “force” the browser to re-download all website content; which will include updated javascript and style sheets. The WordPress content editor is notorious for holding onto cached javascript files; sometimes resulting in a broken editor.

Check Editor Again

Now that everything has been updated; and the browser cache has been cleared; let’s check the editor again. If the editor works; Congratulations! It was a simple matter of updating the files and clearing the browser cache. You are now up to date with the code; stable; and secure. Go celebrate!!

If the editor is still not working; don’t get discouraged. You’re definitely not alone.

Recognizing/Troubleshooting a Conflict

The next step is to troubleshoot for a plugin or theme conflict (happens all the time). It is very important to follow all steps exactly as outlined below.

  1. Deactivate all plugins. Yes, ALL plugins.
  2. Switch to the newest default WordPress theme (currently 2015).
  3. Manually clear the browser cache.

Now, go back and see if the editor is working properly. 99 out of 100 times; the editor “should” be working properly now. If it is not; then something is happening which is beyond the scope of this article. Please go back and confirm the first three steps were followed precisely.

If the editor is now working properly, let’s continue.

Test the Theme

With the editor working properly; it’s time to reactivate the theme. Switch back to the theme being used before the testing above; and manually clear the browser cache. Again, go back and test the editor.

If the editor is not working properly; the issue is with the theme. Please file a support ticket with the theme author/vendor.

If the editor is still working properly; the theme is good, and we can continue.

Testing Plugins

Here is where the issue typically happens. In most of my experience; a broken content editor can be attributed to a plugin. It may be using outdated code; hasn’t adjusted to a change in WordPress core; or is simply broken.

So, let’s begin testing plugins. Different methods can be used depending on how many plugins are installed; but here is my suggestion:

  1. Reactivate a few plugins (2 – 3).
  2. Manually clear the browser cache.
  3. Go back and check the editor.

If the editor loads properly; those plugins are good. Repeat the steps above until the editor breaks again.

If the editor breaks; one of those plugins is faulty.

The idea is to keep reactivating/deactivating plugins until we narrow down exactly which plugin is causing the editor to break. Once found; we can notify the plugin author.

What Next?

Once you have identified the faulty plugin or theme; it would be great to notify the developer. See if you can find the plugin/theme support channel, and create a support ticket. Remember; the developer may not be aware of the issue, so be nice.

It is extremely rare the editor would not work properly with all plugins deactivated and using the default WordPress theme.

However, if when deactivating all plugins and switching to the default WordPress theme; the content editor is still not loading properly; then please create a support ticket in the WordPress Forums. Link to this article so the moderators/volunteers can see we have tested everything properly.


The post Troubleshoot Blank WordPress Editor appeared first on WP Edit Pro Knowledge Base.

      
 

Styles & Scripts


WP Edit Pro now provides an interface for users to enter custom styles and scripts. There are two options for setting up styles and scripts:

  • Globally – from the WP Edit Pro settings page (Posts/Pages tab). These styles and scripts will be executed on ALL posts and pages.
  • Individually – from the post/page editor screen. These styles will ONLY be executed on the page where they are entered.

Global WP Edit Pro Styles & Scripts

Setting styles and scripts on the global level will execute the code on all posts and pages. This is best used when a style or script will be used on multiple (if not all) posts and/or pages. Instead of having to enter it multiple times on each post or page; simply enter it in the global section.

global_styles_scripts_settings

Remember; these styles and scripts will be loaded on all posts and pages.

Individual WP Edit Pro Styles & Scripts

Another option; is setting the styles and scripts on a per post/page basis. This allows custom CSS to be entered for each post or page. This option is best used when separate custom styles or scripts are needed for each post or page.

Enable Individual Post/Page Styles & Scripts

The setting to enable individual style and scripts can be found on the WP Edit Pro settings page (Posts/Pages tab).

ind_scripts_styles_main

Individual Post/Page WP Edit Pro Metabox

Once the setting has been enabled; the WP Edit Pro Scripts and Styles metabox will appear on each post/page; beneath the content editor.

post_page_metabox1

Individual Styles

The styles entered here will ONLY appear on the same post/page where they are entered.

Individual Scripts

The scripts entered here will ONLY appear on the same post/page where they are entered.

Body Classes

This option will allow the user to specify additional classes that will be added to the body HTML tag.

Post Classes

This option will allow the user to specify additional classes that will be added to the post HTML tag.

Styles & Scripts Page Output

When adding custom styles and scripts; it’s important to understand where they will appear in the final page output. The current coding “best practices” is to place custom styles in the head of the document; and custom scripts in the body of the document.

Custom Styles Output

Custom styles will be output in the header of the document; just before the closing head HTML tag.

Global custom styles will appear as follows:
global_page_styles_output

Individual custom styles will appear as follows:
ind_page_styles_output

Custom Scripts Output

Custom scripts will be output in the body of the document; just before the closing body HTML tag.

Global custom scripts will appear as follows:
global_scripts_output

Individual custom scripts will appear as follows:
ind_scripts_output

Notes to Remember

A few important notes to remember when using styles and scripts.

Order of Priority

Because some people may want only global styles or scripts; and some people may only want individual styles or scripts; and some people may want both…. there is an order of priority.

  • Global styles and scripts will appear first in the final code output.
  • Individual styles and scripts will appear next; after global styles and scripts (if they exist).
  • If no global styles and scripts exist; and no individual styles and scripts exist; then no code will be output.

Individual Styles & Scripts Functionality

The individual styles and scripts; and their associated functions; will ONLY execute if the option is set on the WP Edit Pro settings page (Posts/Pages tab).

If the option is not set; then none of the individual styles and scripts will be executed; even if they are already saved in the post/page settings.

Admin Only Individual Scripts

Because of the sometimes sensitive nature of WordPress; running scripts should most often only be performed by trusted users. For this reason; only administrators (or more specifically; those with the “manage options” capability) will be able to edit/insert scripts on individual posts and pages.

Data is Embedded… Not Linked

The styles and scripts are embedded into the final page output; they are not linked to externally.

No Input Validation

There is no input validation. The code is applied exactly as it is entered in the options areas.


The post Styles & Scripts appeared first on WP Edit Pro Knowledge Base.

      
 

Dropbox Create Web Application


In version 3.6 of WP Edit Pro; the Dropbox button was introduced. In order to use the Dropbox button; a web application must first be created.

This post is intended to walk through the process of creating said Dropbox web application.

Create Drobox Web Application

The first step is to visit the Developers Applications section of Dropbox. A new account will need to be created if one doesn’t already exist.
dropbox_login

Once an account has been created; click the “App Console” link in the left navigation menu.
app_console

Create Application and Select Name

Next, click the “Create App” button in the upper right hand of the screen.
create_app

Next, check the “Drop Ins” option.
drop_ins

Now a name must be selected for the application. Choose a unique name; that is easily recognizable.
app_name

Finally, click “Create App”.

Obtaining Application Key

Once the application has been created; the next screen will show details of the newly created application. Among these details; is the “App key”.
app_key

Copy the “App key”; and paste it back into WP Edit Pro (Editor tab), under the Drobbox “App key” option.
dropbox_settings

Lastly, enter the domain of the website where the dropbox files will appear (your site url) into the “Drop-ins domains” option field. This is necessary to connect successfully to the Dropbox API and pull the files to the website.

Congratulations! Dropbox is now successfully configured.


The post Dropbox Create Web Application appeared first on WP Edit Pro Knowledge Base.

      
 

Adding New WordPress TinyMCE Fonts


WordPress TinyMCE Default Fonts

The TinyMCE editor used by WordPress for creating and editing posts and pages uses a set of default fonts.  These fonts are available “out of the box” when WordPress is installed.

  • Andale Mono
  • Arial
  • Arial Black
  • Book Antiqua
  • Comic Sans MS

  • Courier New
  • Georgia
  • Helvetica
  • Impact
  • Tahoma

  • Terminal
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Web Dings

These fonts are proven to be cross-browser supported, and will suffice for 99% of common typesetting. However, what if we want to really “jazz” up the content with some additional custom fonts? Well, there is no easy interface… so we must resort to custom code.

The following functionality is available in WP Edit Pro; with easy to use graphical interfaces for uploading and adding custom fonts.

There is no need to follow this guide of you are a WP Edit Pro user.

Add a  New Font to TinyMCE

Adding a new font(s) to the TinyMCE editor is a multi-step process. Let’s first take a look at the steps:

  1. Upload the new font to the server (or call font from another server).
  2. Create a new stylesheet with the font declaration.
  3. Add newly created stylesheet to TinyMCE Editor.
  4. Define the font in the “Font Family” dropdown editor button.
  5. Add newly created stylesheet to front-end and admin sides of website.

Upload Font

The first step is to select a font and make it available for referencing into our site. We see a lot of plugins who use the Google Fonts repository. If Google Fonts are desired, we can skip this step (more later).

Okay, so we have a .otf, .ttr, .woff or .woff2 font (legal for usage) on our computer desktop. This font will need to be uploaded to our server. I typically create a new folder in my wp-content directory.. and name it custom-fonts. Then, simply upload the font to the wp-content/custom-fonts directory.

Leave the font here.. and we will reference it later from our custom stylesheet.

Create New Stylesheet

Next, we need to create a new stylesheet with our new font declaration, and upload it to our server. The stylesheet will contain the rules for each of the fonts we are going to use.

The following links will help explain the stylesheet in more detail:
W3Schools
CSS-Tricks

For the purposes of this example, I have selected two fonts from the FontSquirrel website.

The two fonts will be “Seaside” and “Journal”.

Here is how the stylesheet should appear:

@font-face { font-family: seaside; src: url('http://mysite.com/wp-content/custom-fonts/seaside.ttf') format('truetype');}@font-face { font-family: journal; src: url('http://mysite.com/wp-content/custom-fonts/journal.ttf') format('truetype');}
Remember to change http://mysite.com to the appropriate name of your website.

Lastly, we need to save this stylesheet and upload it to our server. I save mine in the same directory as the custom fonts I upload (step 1 above). This example will save the file as custom-fonts.css and upload it to the wp-content/custom-fonts directory. Final location will resemble wp-content/custom-fonts/custom-fonts.css.

Add Stylesheet to TinyMCE Editor

Now, we need to load the stylesheet we created into the TinyMCE editor. To do this, we will need to use our Child Theme.

It is important to add the following code in a child theme (or custom plugin) to prevent it being over-written whenever the theme is updated.

Here is the code to intercept the TinyMCE initialization process; and allow us to add our stylesheet:

function load_custom_fonts($init) { $stylesheet_url = 'http://mysite.com/wp-content/custom-fonts/custom-fonts.css'; // Note #1 if(empty($init['content_css'])) { // Note #2 $init['content_css'] = $stylesheet_url; } else { $init['content_css'] = $init['content_css'].','.$stylesheet_url; } return $init; // Note #3}add_filter('tiny_mce_before_init', 'load_custom_fonts'); // Note #4
Notes:
1) This is the location to the CSS stylesheet we created above. Remember http://mysite.com should be changed to your actual website domain.

2) This is where we “filter” our stylesheet into the editor initialization process. We first check if any stylesheets are coming in via the $init variable; if there are not, we simply add our stylesheet. If there are, we add to the existing stylesheets.

3) We have to return the $init variable, or it will break the editor.

4) This is the filter name used by WordPress to hook into the TinyMCE editor.

We are going to build upon this code in the next step.

Define Font Family Editor Button

The next step is adding the name of the font to the existing “Font Family” editor dropdown button.

Expanding on the code above; we have a little more to add:

$font_formats = isset($init['font_formats']) ? $init['font_formats'] : 'Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats'; // Note #1$custom_fonts = ';'.'SeaSide=seaside;Journal=journal'; // Note #2$init['font_formats'] = $font_formats . $custom_fonts; // Note #3
Notes:
1) First we check if any existing fonts are in the initialization process; if they are, we use them; otherwise, we have to re-create the original set of fonts used by default in the editor.

2) Next, we write our new custom fonts. The format is (Font Name)=(“font-family” name as defined in our stylesheet). Multiple fonts are separated by a semi-colon (;).

3) Lastly, we take the original fonts, and add our original fonts.

The final code in our custom function will look like this:

function load_custom_fonts($init) { $stylesheet_url = 'http://mysite.com/wp-content/custom-fonts/custom-fonts.css'; if(empty($init['content_css'])) { $init['content_css'] = $stylesheet_url; } else { $init['content_css'] = $init['content_css'].','.$stylesheet_url; } $font_formats = isset($init['font_formats']) ? $init['font_formats'] : 'Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats'; $custom_fonts = ';'.'SeaSide=seaside;Journal=journal'; $init['font_formats'] = $font_formats . $custom_fonts; return $init;}add_filter('tiny_mce_before_init', 'load_custom_fonts');

Now, if we open the editor and add the “Font Family” button… we should see our newly defined fonts in the dropdown list.

custom_fonts

But wait… the fonts do not appear in their respective font format. The font will also not render properly on the front-end of the website. This is because we also have to add our stylesheet with the custom font declarations to our admin area and the front-end of the website.

Add Stylesheet to Admin and Front-end Header

The last step is to add our stylesheet (created in step 2, above) and make it available to the admin area (for the font dropdown button) and for the front-end of the website (so posts/pages have the font available).

We can achieve this with another custom function added to our child theme:

function load_custom_fonts_frontend() { echo '<link type="text/css" rel="stylesheet"  class="fbz_link" href="https://p.feedblitz.com/t3.asp?/953272/0/0_/feeds.feedblitz.com/~/t/0/0/learn/~mysite.com/wp-content/custom-fonts/custom-fonts.css">';}add_action('wp_head', 'load_custom_fonts_frontend');add_action('admin_head', 'load_custom_fonts_frontend');

Remember to change http://mysite.com to the actual domain where the stylesheet file is located.

This will add our custom stylesheet to both the admin header area, and the front-end header area. Now, our custom fonts will appear correctly in the editor “Font Family” dropdown button; and also on the front-end of the website (in posts and pages).

custom_fonts2

Final Results

We have uploaded our custom fonts; created a custom stylesheet with our new font declarations; added the stylesheet to a) the content editor initialization process (so fonts render properly in the content editor) b) the admin header area (so fonts render properly in the dropdown menu) and c) the front-end of the website (so fonts render properly in posts/pages).

We can now simply highlight some text, apply our new font, and sit back and view our success.

Note: It may be desirable to adjust the “Font Size” of the new font. This button can be added via the WP Edit Pro “Buttons” tab.

custom_fonts3

custom_fonts4

Closing

This wraps up how to add fonts to the WordPress TinyMCE editor as of WordPress version 4.1 and TinyMCE version 4.

Please leave any questions, comments and/or feedback below.


The post Adding New WordPress TinyMCE Fonts appeared first on WP Edit Pro Knowledge Base.

      
 
 
   
Email subscriptions powered by FeedBlitz, LLC, 365 Boston Post Rd, Suite 123, Sudbury, MA 01776, USA.