Learn how to move and reposition the WordPress Visual Editor. This quick guide will show you how to essentially make the WYSIWYG Editor act like a generic meta box, allowing you to reorder it in any position you want.

A question was asked by a visitor:

I was wondering if it’s at all possible to have a WYSIWYG HTML/visual editor field right bang smack in the middle of the meta boxes rather than being perched on top of the page?

The Solution, Repositioning The Editor

This solution uses javascript to move the visual editor. If you know of a pure WordPress/PHP solution, let me know, but for now this may be helpful in your projects (copy and paste the following into your functions.php file):

Breaking It Down, Step by Step

First an empty meta box is created, this creates the HTML elements and sets them in place as a container for the visual editor when it will be moved. This also allows WordPress to properly remember and order the meta boxes when they are dragged and dropped.

23 responses to “How to Move and Position The WordPress WYSIWYG Visual Editor”

I’ve just added the above code to my functions.php and it works perfectly (although I knew it would). Now there won’t be any confused soles wondering why on earth the main content had to be added before the main heading!
DIMAS, you’re an absolute superstar!

You’ve just finished the website for a client and are about to hand it off, the client’s login is: “jane”, you would essentially login as the client and preset the order of the meta boxes by dragging and dropping them. You set an initial order, but ultimately the client can reorder has she sees fit.

As I am aware that you are currently in the process of developing a bunch of excellent tools which will allow programmers a better means of dealing with the creation of custom post types and customizing the admin area I feel you should take the following things into consideration if you have not already done so. These are my thoughts which I feel would be VERY valuable for everyone… let me know what you think:

a) set the default position for custom post types, the regular post/page type as well as the default homepage dashboard. Not just for new meta boxes but also for existing default meta boxes.
b) set the default open/closed state for all these meta boxes
c) allow the programmer to remove the ability for a user (or user role) to move a metabox or close it with the option to remove the ability for the meta box to be hidden on the screen setting area.
d) set the default number of columns for these different post types (individually) as well as the dashboard. And possibly force this position so the user can’t change (or see the option to change this).

Dimas, I see your site is built in Thesis. I use the same system for my clients. I’d like to add a WYSIWYG editor to the Multimedia Box field — the client needs to have custom content show up in the sidebar for their posts, and this seems an easy way for them to have that ability — having the WYSIWYG editor would help, as they don’t know any HTML.

Can you give me a clue how to position the visual editor at the multimedia box entry area?