Format Painter Button


One largely requested item is a button similar to Microsoft Words “Format Painter” button. Until now, no such button existed.

Format Painter Button

The purpose of this button is to allow easy copying/pasting of styling. A WordPress post or page may have dozens of styles on different content editor elements. A heading tag may have a pretty blue color with a nice indentation; while a notification paragraph may use a yellow, italicized font.

What if you’d like to apply that pretty style to, say, a link; or a list item? ¬†Without knowing HTML or CSS, it might be a challenge. ¬†However, with the help of the Format Painter button; it’s a breeze!

The Format Painter button in the toolbar.formatPainter_Button

The Format Painter button will easily allow you to “copy” the styling of one page element; and “paste” it onto a different page element. A popup window will visually guide you through the process.

Working with Page Elements

Let’s walk through the various steps involved.

Copying From

The Format Painter button will pick up (copy) both the class names and the inline styles used on the element. A window will alert the user the styles have been successfully copied. From here; the styles are stored in a buffer; and the Format Painter button will “depress”, meaning it is active.

Window displaying information copying FROM page element.copy_from

Pasting To

You may continue to edit content until you are ready to “paste” the buffered styles onto a new element. When ready, click the Format Painter button again and another window will open. This window contains a few important key pieces of information:

  • The class names and the inline styles which were picked up “copied” from the original element.
  • The class names and the inline styles if the new element (if any exist).
  • An option to “Replace”, “Combine” or “Ignore” the changes:
    • Replace – Will replace the new classes and styles with the ones being “copied”.
    • Combine – Will combine the old styles with the new styles; and merge them together.
    • Ignore – Will ignore the old styles; and nothing will be changed.
Window displaying information copying TO page element.copy_to

Example Tutorial

Let’s take a look at a simple example post I created; both from the visual side and the text side.

format_visual
format_text

There is a blue Heading 3 element; a bold and italic paragraph element; an unordered list with three list items; and finally another paragraph element.

We are going to copy the purple text from the paragraph element at the bottom of the page, and paste it onto the second list item.

Step 1

First, we copy the styling from the purple text paragraph. Position the cursor anywhere in the purple text, and click the Format Painter button. A window will open, confirming our classes and inline styles. Click the “Okay” button to buffer the information.

step1-1
step1-2

Notice how our inline styles of “color:purple;” have been copied.

Step 2

Next, we want to select the area where we wish to paste the styles. Position the cursor anywhere in the text on the second list item; and click the “Format Painter” button again (it should still be depressed). A new window will open, displaying additional information (as mentioned above).

step2-1
step2-2

Again, we can verify our inline style of “color:purple;” is being applied.
Also, we can note our new element (where we are pasting to) is void of any class names or inline styling.

Step 3

Verify the information, then make a selection for the classes and a selection for the inline styles. The default option is to “Replace” the styling; since that is the sole essence of a Format Painter button.

step3-1

That’s it. Our purple text will be applied to the second item in the unordered list.

Extending to other Elements

Because the Format Painter only uses class names and inline styling; virtually any two page elements can be used to copy. Copy from headings to paragraphs, or images to list items; they will all render properly.

Closing

Have you found another use of the Format Painter button? Please share it with us below.


Josh Lobe has written 53 articles

Josh Lobe is the sole developer of WP Edit and WP Edit Pro. A father of two; a husband to a beautiful wife; and a small home in the suburbs... he primarily enjoys coding in WordPress and designing websites.

2 thoughts on “Format Painter Button

  1. In the new WP, I find the Paste from Word button is gone. I installed WP Edit looking to add that button but I don’t see it here either. Is it just no longer available? Or is it unnecessary, as in WP itself will automatically recognize & convert Word content?
    Something else going on?
    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

ENTER CAPTCHA MATH *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>