This post is meant to serve as a guide for the WP Edit plugin available for free on the WordPress.org plugin repository.
Default WordPress Buttons
WP Edit introduces a new drag and drop panel for positioning buttons. In WP Edit, only the first row of buttons are re-positionable. The other rows are locked, and available in WP Edit Pro. The second row of buttons in the drag and drop panel are automatically inserted into the second row of the editor, just like a default installation of WordPress. If you do not see the second row of buttons in the editor, then you need to click the “Toggle toolbars” button. This button will expand/collapse the additional editor rows.
Pretty much exactly as their name infers. Keyboard shortcuts are also available for these commonly used buttons. Click the editor question mark button (Keyboard Shortcuts) to find out more.
These two buttons allow list items to be added to the editor. Bulleted lists will add bullets (or whatever else your theme styles lists with); and numbered lists will add a number sequence. List items are commonly used for, well… lists; or to highlight certain “features”; or to consolidate text. Numbered lists are used all the time to show sequential steps.
This is another button that will display differently depending on which theme is active. Theme authors have the flexibility of styling blockquote elements however they like. A block quote is commonly used to accentuate a quotation from an individual. These may be quotes from famous idles, satisfied customers or other text which should be “quoted”.
All these buttons are used for alignment. They can be used for paragraphs, images, or any other type of html element. The three alignment buttons are self-explanatory; and the “Justify” button will do a full alignment.. stretching the text to each side of the document.
Just as their name implies. These buttons are actually modified by core WordPress.. and the “Insert Link” button has been enhanced to allow fast and easy linking to other areas of the WordPress installation. These modifications to the link button are part of WordPress core.. and are not done by WP Edit.
The read more tag is used to mark the end of content that should appear where an “excerpt” is used by the theme. Common areas are main category pages; custom queries where only a portion of the content is displayed; and other ‘excerpt’ areas. The “Read More” tag will NOT appear when the full post is viewed.
Simple enough. Insert a horizontal line to visually separate content areas.
Ahhh… the good ‘ole toggle toolbars button. This is a WordPress button; it’s purpose is to expand/collapse the other editor button rows. I assume WordPress is leaning towards the ‘distraction free’ side of content producing.. and therefore provides the option to hide the additional editor rows.
What I don’t like, is this option is enabled by default. This means any new user to WP is not going to intuitively know to press that button to make available the additional editor rows. But, there you go.
What I don’t like, is this option is enabled by default. This means any new user to WP is not going to intuitively know to press that button to make available the additional editor rows. But, there you go.
This button has recently been moved to the far right of the top row of editor buttons. WP Edit makes no modification to this button; nor makes it available within the drag and drop panel.
The button will open a completely empty window, with the exception of the content editor. It’s a rather cool idea, with much potential; but there is still much work needing to be done in my opinion. I’m sure WordPress will be adding to this buttons functionality with future updates.
This button will allow color selections to be applied to text. This button has also changed with the recent update by WordPress to the Tinymce4 software. Tinymce has removed the option for a custom hex color value to be inserted into the editor.
Their reasoning is that any custom colors should be added via custom styles into the editor stylesheet. Well, then why include a palette of 20 or so predetermined colors? These get inserted the same way!
So.. I am currently looking for a solution to this issue. I have created a custom button.. which allows for custom color selections. However, this button at this time is only available in the WP Edit Pro plugin.
Another heated debate button. Before WordPress 3.9, we had two buttons in the editor for pasting. One was ‘paste as text’, and the other was ‘paste from word’. The ‘paste from word’ button has been removed from the editor by WordPress. They claim any content from Microsoft Word should be pasted directly into the “text” editor; where WordPress formatting will clean the code when saved. I have not experimented too much with this at this time.. but I do know it will be revisited in the future.
This button works as an ‘eraser’ for clearing any styling applied to an html tag. For example, if you have added a color to a text area, then you can remove it by highlighting the text and clicking this button. Specifically, the button looks for anything in the selection with inline styles; and removes them.
Just a cool location for some of the commonly used special characters. Not much more to it.
These buttons work to increase or decrease the size of indentation. Once clicked, the indentation will be ‘remembered’. Click them back and forth to adjust paragraph and html element indentation.
Hmmm… I’m not even sure what to type here… 🙂
A nifty little button created by WordPress which shows all the keyboard shortcuts to the editor buttons. Print it out… laminate it.. and set it next to your computer monitor for when you use the distraction free writing. You’re gonna need it!!
Tinymce Buttons
Now, we will examine the buttons of WP Edit which are not available in the default installation of WordPress but are available with the core Tinymce software.
This button allows selection of the various “web safe” fonts. I believe there are around 10 fonts available here by default. Many different plugins or themes may add additional fonts to this button.
Choose the font size you wish to use for a text selection. This button does not allow you to set it once.. and continue typing in the same font size. Instead, you first need to make a selection of existing textual content, then click the button to adjust it’s size.
This button has changed significantly with Tinymce4. Now, this button acts as a dropdown menu, where additional formats can be selected. This is also where you will find the “Heading” tags.
Many of the editor buttons have been moved into the Formats dropdown button. It’s very encompassing.. and negates the need for multiple buttons in the editor resulting in a cleaner interface.
Many of the editor buttons have been moved into the Formats dropdown button. It’s very encompassing.. and negates the need for multiple buttons in the editor resulting in a cleaner interface.
Create a highlight behind selected text. You’ve seen it… text that has a yellow highlight? That’s this button.
This button will allow direct insertion of media elements. You may link directly to their stored location; or you may paste an embed code (typical with YouTube and Vimeo).
Simply change the direction of the text.
The table button has changed dramatically also. One big feature removed was the ability to edit a tables attributes. I am currently looking for alternatives for both the free and pro versions of WP Edit.
However, the new table functionality is totally awesome! Much work has been done by the Tinymce team to make this feature more stable. I have a strong feeling we will begin seeing many new addons in the open source community which add to this new functionality.
The anchor button takes a text selection, and adds an anchor location via an anchor name. Then, to link to this anchor location, you would create a link from another area and link to the anchor by name.
For example, we can create an anchor location on our page using the button and naming it “myAnchor”. Then, we go to a new page, and we can link to our old pages anchor location (or even within the same page, used commonly for a Table of Contents area).
Here is a link explaining more on Anchors.
This button will display a new window showing the html source code of the document. One caveat of this button is that is ‘pushes’ all the code together. While it is a useful button, it makes reading pages with lots of content almost impossible. Therefore, I have re-coded the “Advanced HTML” button, and it is available in WP Edit Pro. The advanced HTML button adds syntax coloring and layouts to the code; includes a search and replace filter; and a few other advantages.
Both html buttons allow the user to edit the html in the popup window, and the changes will be inserted back into the content editor. This allows making edits directly via the popup window.
Have a little fun with your content using these little guys!
Quickly and easily insert todays date and time (from numerous format options) into your content.
The page break button allows posts or pages with extremely long content to be ‘broken up’ into multiple pages. There is no need to actually create additional pages. Instead, this button will take the page break area, and turn it into a new ‘numbered’ page. If we use three page breaks in the content, we will have three numbered pages.
Then, when viewed from the front-end of the website.. we would see the content down to the first page break; then we would see “1 – 2 – 3” links, where we can click to another page.
This preview button works as a quick way to preview content without having to wait on WordPress to save, generate, and load the new preview page. However, this button does not take into account the themes stylesheet. So, content that appears in the preview window may appear differently on the front-end of the site (if the theme author uses different styles than those used in the tinymce editor).
Quickly and easily print a local copy of the content area.
And what text editor would be complete without the handy-dandy search and replace filters? Well, here they are.. back for your convenience!
This button has also had a little work done to it in Tinymce4. It will create a dotted border (outline) around all block level elements on the page. It’s very useful to see floats, divs, and other block level items.. and how they are laid out on the page.
I see the features of this button transpiring into some very cool, jQuery style, abilities.
Again, pretty self explanatory. They can be used on numbers or text. They will wrap the selection with a span tag, so it’s not recommended to use this on block level elements (divs, paragraphs, etc.).
Insert an image by typing it’s url, and specify it’s size dimensions. This button has also lost some functionality from Tinymce3. WordPress is getting away from it, and leaning more towards the “add media” button above the editor. There were some advanced features available in the old Tinymce3 version of this button that I would like to get restored to the Tinymce4 version.
This button has been removed in the newest version of TinyMCE4. I have no idea why, but apparently no one took the time to code an updated button. I have begin the process; but there is still much functionality that needs to be added. This will be a time-intensive task.. and I will update the button to expand functionality as time permits.
WP Edit Pro Buttons
These are the buttons which are included in WP Edit Pro. They are not available in the free version of WP Edit. This list will grow, as we are able to produce more custom addons for the new TinyMCE4 framework.
This button will insert a paragraph tag; which will not be ‘eaten’ by the editor when saving the page content. Empty paragraph tags are removed by the editor when saving content. This button adds a class of “none” to the p tag, which keeps it valid when saving.
This button will insert a line break; which will not be ‘eaten’ by the editor when saving the page content. Empty line break tags are removed by the editor when saving content. This button adds a class of “none” to the line break tag, which keeps it valid when saving. Multiple line break tags can be inserted consecutively, and can often be used to help fix spacing issues.
Takes an email address from the page content; and turns it into an active “mail to” link. When this link is clicked, the browsers computer will open the default email client and prepare it to send an email to this address.
Quickly and easily fill any page with ‘dummy’ content. Often when setting up a new site; or testing a new layout; it’s easier to visualize how it will look when you add textual content. This button will insert dummy content (sentences, list items, paragraphs) where you choose.
This color picker button allows custom color selection of any foreground or background page element. Colors can be selected via a custom slider.. allowing for color, saturation, and hue. Or, values can be input directly.
- Supports custom HEX color input values.
- Supports RGB color input values.
- Sliders to select any color.
- Click in the color palette to refine the color selection.
This button will query WordPress, and grab all available registered shortcode tags. This makes for an easy place to keep track of all available shortcode tags. This button does not take into account any specific shortcode attributes. Rather, it is to be used as a general guide. Remember, many shortcodes may have further attributes you can define. You will want to check with the plugin/theme developer to see available shortcode attributes.
Simply awesome-sauce! This button has been completely re-written to allow insertion of any YouTube video. Features and options include:
- Custom search YouTube directly from your WordPress admin panel.
- Search bar auto-populates most common search queries.
- Matches auto-populate into a preview area.
- Selected video can be previewed in window before insertion into the content editor.
- Further refine the video with attributes like width, height, related videos, hide controls, and more.
- Popup window is purely responsive; allowing easy viewing from any mobile device.
Browser clipart hosted on the free Clker repository. All clipart is royalty free; and can be used in any publishing context. Learn more about Clker.
A dropdown button which allows insertion of the clear div element. Options include “Clear Left”, “Clear Right” and “Clear Both”.
A complete rewrite, TinyMCE4 compliant, update of the popular Code Magic button. This button makes HTML code editing MUCH more friendly and visually appealing.
- Formats HTML content using beautify.js, for visual appeal.
- Auto-completion of HTML tags as new code is entered.
- Properly indents and spaces HTML elements, creating a tree-like affect.
- Changes can be made directly in the window, and inserted back into the content editor.
- Search and replace functionality.
Run the page content against Accessibility Checker; and view any accessibility constraints. Learn more about Accessibility Checker.
Insert/Edit images with more control. Define image attributes, image margin, image padding and image border. Also includes javascript attributes (onclick, onmouseover, etc.); which can be used for executing javascript functions.
Modify various options of the horizontal line; like shadow and width.
Insert/Edit images with more control. Define image attributes, image margin, image padding and image border. Also includes javascript attributes (onclick, onmouseover, etc.); which can be used for executing javascript functions.
Copies styling from one element; and applies the same styling to another element.
Browse and insert Google images without ever leaving the content editor.
Add an abbreviation to selected editor content.
Create an image map from an image. Allows multiple “hot spots” on a single image. Each “hot spot” can link to a different url.
Select and insert an HTML tag with user-defined attributes (id, class, etc.).
Closing
I hope this reference list has been helpful. What are your button experiences? Please share them below!
Hi
Is ir possible that you could go into the “anchor” button use in more detail please?
Do you still have to use HTML?
So far I haven’t been able to make it work – I am trying to use it to make a clickable index at the top of a page, and link it to further down the page oand also to a different page.
Many thanks
Chrissie 🙂
Hi Chrissie.
Yes, that is exactly what anchors are used for in a page. And it sounds like you understand them correctly.
What exactly is not working?
Hey Josh (or anyone),
One thing that has driven me nuts over the years is when I copy-paste from HTML, I get all sorts of extra span and div tags that I should really get rid of. You can see these tantalizing div << div << p breadcrumbs at the bottom of the edit window. I keep clicking, right clicking and double clicking on those things, hoping I can get a “Delete tag” menu option. But no. So I have to hand-edit the HTML. Yuck.
Do other people have this issue, and is it something that WP Edit Pro could fix?
Hello Daniel; sorry for my delay.
Where are you copying the text from? Microsoft Word??
Hi Josh,
I have WP Edit Pro, very nice, thanks for this gem.
Regarding custom colors, you write above:
“So.. I am currently looking for a solution to this issue. I have created a custom button.. which allows for custom color selections. However, this button at this time is only available in the WP Edit Pro plugin.”
I have been searching for this button, but can not find it. Any guidance?
Cheers & thanks, San.
Hello San,
I apologize for my delay.
The button I mentioned (created) above; is no longer in the plugin. I originally created the button because the updated version (4) of TinyMCE did not have an intuitive color picker.
However, they did make a better color picker in one of their updates. This negated the need for the custom color picker I wrote… so I removed it from the plugin.
What is it you are trying to accomplish? The updated color picker is at all locations (change foreground color; change background color, etc.).
Hi, i added the WP edit, (not pro), plugin onto my wordpress, but when I go back to the page I want to edit, these buttons are not there. How do I add the new buttons to my pages so I can edit my fonts. I’m using wordpress 3.9.2
Thank you
Hi,
Are you aware of the Toolbar Toggle button?
http://learn.wpeditpro.com/wordpress-tinymce-editor/#ipt_kb_toc_73_6
Fixed it! Phew! Thanks!
Glad you got it working properly. Sorry for the scare 😉
How does it started working. I have installed. But still it is not working. I have installed wordpress version 4.6.1.
It doesn’t show up on my page. I installed it, activated it. Yes, I’ve toggled the toolbars button, many times. Refreshed. Signed out, cleared cache, signed in. Nothing. I am using Longevity theme.
Kindly help. Thanks.
Hello, I apologize for the inconvenience. Did you go to the WP Edit admin settings page and rearrange the buttons and save?
It doesn’t show up on my page. I installed it, activated it and nada. Yes, I’ve toggled the toolbars button, many times. Refreshed. Signed out, cleared cache, signed in. Nothing. I’m using the latest Worpress install and Weaver II as my theme. What am I missing?
Have installed the WP Edit plugin so that I can change font size on my wordpress site but can not get any of these additional buttons to appear in the menu bar of my blog post and wordpress pages.
To make sure I understand correctly…the WP Edit Pro does NOT come with the “tables” option that was included in the Tinymce plugin. Is this correct?
The WP Edit and WP Edit Pro both come with a “Table” button. However, the functionality of the “Table” button has changed from the (now outdated) Ultimate Tinymce plugin I wrote. The change in functionality is a direct result of changes to the core code of TinyMCE; and are beyond the realm of my power.
No.. this is incorrect. Both the pro version and the free version include the updated tables button.
My WP is version 3.9. When trying to install your plugin, it says that your plugin “is not marked as compatible”. And yet, when I was going to install TinyMCE, it said that WP versions 3.9 and higher must use WP Edit. I basically want to get control over font size. Will your plugin work? Thanks.
Yes. WP Edit (and Pro) will work on WordPress versions 3.9 and above.
Bonjour Josh, le boutton “Table” n’apparait pas en mode editing. J’ai desactive et reactive les plugins, mais rien n’a fait
Bonjour, S’il vous plaît assurez le bouton Activer les barres d’outils est activée. (Toggle Toolbar)
Does the Pro Color Picker allow custom colors to be saved in the palette for re-use?
Great question! Unfortunately, it does not by default. However, I think this is an excellent suggestion, and I will certainly add this to my trac list of features to implement. Please feel free to follow up anytime via our contact form, to check on progress. Thank you, very much, for the awesome suggestion!
Yeah – that was a great idea! What I did before was add the palette colors to Colorzilla “Favorites” for frequent reference (with logical names). Or, I would make a dummy post with the site’s color numbers on that post to refer to, next to a word or box displaying the color.
Kathy
Bonjour,
Je suis à la recherche d’un bouton fonction calque,
très pratique pour implanter, déplacer du texte et des images
comme dans Ultimate TinyMCE mais malheureusement incompatible avec la dernière version de WordPress.
Merci
Bonjour,
La fonctionnalité de couche a été supprimée dans la nouvelle version 4 de TinyMCE (le cadre utilisé par WordPress dans l’éditeur de contenu).
Malheureusement, en ce moment, je ne vois pas de plans pour un bouton de mise à jour couche.
Je vais l’ajouter à ma liste de “caractéristiques exigées” .. mais il peut prendre un certain temps à mettre en œuvre.
S’il vous plaît n’hésitez pas de vérifier avec nous n’importe quand, via notre formulaire de contact.
Merci 🙂
is there also a image mapping function ? because I use that a lot in the ultimate version.
grtz jeff
Hi Jeff,
Unfortunately, we do not have image mapping at this time. It is however, a top priority for us. We will post a new article as soon as we have something which works.
Can’t wait!
Hello,
do you have a button for inserting the “cite” tag?
This will be coming in WP Edit Pro very soon. It will be a button which will allow insertion of any valid html5 element, along with attributes, properties and javascript events.
Hi Josh, I was wondering if the button ‘Font size’ coming back within WP edit Pro? The one where you can fill in the actual size number yourself. F.E. Now it jumps from 18 to 24. Or is there another solutions except for adjusting the HTML?
Thank you in advance.
Hello; There was never an option to input an actual size.. just the option to select from a list. I can add another numerical size to the dropdown list. Or, I’m currently working on a new HTML5 “all tags” button. Basically, the font size is just a span tag, with a style of font size. The html5 button will allow you to select a span tag, and enter any style attributes (along with other attributes) you like. Is there a particular size you are wanting to see in the list?
Hey Josh, did you ever use Cold Fusion? That’s what this is sounding like and if I remember right, it was expensive and difficult to learn. Wow we’ve come a long way! That used to be only for super-geeks (of which I can only think of 2 or 3 that I know).
KA
What happened to the line break button?
Do you have to use the shortcode?
At this time, the line break button is only available in the Pro version. Please read this Article to perhaps understand a little more on my reasoning.
Thanks for your feedback. Is the button Font size coming back? The one where you can fill in the actual size number yourself. F.E. Now it jumps from 18 to 24.Thank you in advance.
Hi Josh,
Thanks for the hard work. I have found the 3 “clear div” buttons to be really useful with “Ultimate”. Can they made available (or are they already) with WP Edit ?
Thanks,
Ken.
Hello Ken,
Yes, the clear div functionality had to be re-written as well, and is currently only available in the Pro version.
The same buttons as before; clear left, clear right, and clear both. And are now in a dropdown button, rather than three separate icons.
Please let me know if you have any troubles.
Thank you.
Hi Josh.
I bought the WP edit Pro plugin. It’s a great plugin! I would like to use some functions of the TinyMCE. How does That work? Do I need to install the TinyMCE plugin? Thank you for your help.
Hi,
Unfortunately, most all of that functionality is now dead. Running both plugins together is NOT recommended, and may result in a broken editor or other erratic behavior. I have a few more addons from Ultimate Tinymce Pro I’m still in the process of converting to WP Edit Pro.. and they will trickle out in future releases. I’ll add a ‘feature request’ section to the new forum… so we can keep track of the ‘hottest’ features which need to be brought back.
Hi,
contains Wp-edit or Wp-edit pro an image map editor?
Unfortunately, not at this time. However, I am working diligently on a replacement. Please feel free to subscribe to our free Feedblitz list, as this is where we will post updates. You can find our signup on the main page of wpeditpro.com.