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.
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!!
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.
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
Modify various options of the horizontal line; like shadow and width.
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.).
I hope this reference list has been helpful. What are your button experiences? Please share them below!