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?
For example, say I want to list the meta boxes like so:
1. “add heading here” meta box
2. “add introduction here” meta box
3. “add image here” meta box
4. THEN have the WYSIWYG HTML/visual editor here
5. “add another image here” meta box
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.
add_action('admin_init','admin_init_hook');
function admin_init_hook()
{
function blank(){}
foreach (array('page','post','custom_type') as $type)
{
add_meta_box('custom_editor', 'Content', 'blank', $type, 'normal', 'high');
}
}
Then there are a few style modifications which correct the display of the visual editor when its placed inside the meta box.
#postdiv.postarea, #postdivrich.postarea { margin:0; }
#post-status-info { line-height:1.4em; font-size:13px; }
#custom_editor .inside { margin:2px 6px 6px 6px; }
#ed_toolbar { display:none; }
#postdiv #ed_toolbar, #postdivrich #ed_toolbar { display:block; }
A little bit of jQuery is then used to put the visual editor into the empty meta box.
jQuery('#postdiv, #postdivrich').prependTo('#custom_editor .inside');
Recommended: If this is to be handed off to a client, I recommend that you preset the meta box ordering for the WordPress user account that the client will be using.
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!
Thanks again!
Ooops! Typo!!! I meant souls not the soles of peoples feet! Confused feet!!!!
good tricks ! it’s very useful again thanks
So you can move the wysiwyg like this but can you create a second one without the reliance on a plugin? or would two just confuse the hell out of the wp database?
Great article though, I have come across your website fairly recently but have seen great value in everything I have read. Keep up the good owrk.
you mentioned in your plugin that you suggest that the meta boxes be “preset”. Could you please provide the code or a link to where we can find out how to do this?
Chris, when I say “preset” I mean the following:
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.
Yeah, I’m wondering about this too. I’d like to have 3 wysiwyg text editors on the “add new ____” page for my CPT.
Thanks Dimas for the explanation.
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).
Hello Dimas,
Very great blog you have with LOTS of useful info, thanks for that!
I was wondering if any of you guys figured out how to have multiple wysiwyg text editors as @David Alexander and @Charles were referring to? Would be very helpful to know.
Thanks 🙂
@David, @Charles, @Dasha, I just posted a new article: How to Use Multiple WordPress WYSIWYG Visual Editors, please have a try and give me your thoughts.
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?
Thanks for the code, it help me a lot
thanks again
Hello,
your code is working perfectly. But i would have this into a custom post type that i created with “more posts” plugin. Where must i add something to your code?
Thanks alot
Great idea.
Since the editor would easily break on drag-and-drop.
I simply moved #normal-sortables before #postdivrich:
Move the Position of the WordPress WYSIWYG Visual Editor below sortables boxes on edit.php only for a certain custom post. (note that you have to change custom_postype_name for the postype name)
In functions.php you have to add this code.
function admin_footer_hook(){
global $post;
if ( get_post_type($post) == 'custom_postype_name'') {
?>
jQuery('#normal-sortables').insertBefore('#postdivrich');
<?php
}
}
add_action('admin_footer','admin_footer_hook');
Hi again,
The code duplicate the form title, if the plugin qTranslate installed. like this:
Titre (Deutsch) :
Titre (Français) :
Titre (Deutsch) :
Titre (Français) :
and it’s impossible to move the WYSIWUG
is there any solution?
thanks
Thanks, but I have a question,
How to implement it in a new content type?
I created a new content type called “Movies”, when I create a new “Movie”, the editor can’t me affected… only new posts does…
Any help?
Figured it out – just add your own here:
foreach (array(‘page’,’post’,’custom_type’, ‘movies’)
argh! but that does not change the way the published post (order) look!…
any ideas???
I tried in vain to get this to work. Thinking something in my theme’s css was screwing it up, I tried to install this code on the default wordpress twenty_eleven theme.
Jquery (I am guessing) is the problem, anyone know exactly how to insert this into the default theme, and (once working) I can do it on my theme.
Thanks!
http://wordpress.org/support/topic/move-custom-meta-box-above-editor
Look at TroyDesig’s solution.
I found this code on the WordPress form, seems to work well without any Javascript.
add_action( ‘add_meta_boxes’, ‘action_add_meta_boxes’, 0 );
function action_add_meta_boxes() {
global $_wp_post_type_features;
if (isset($_wp_post_type_features[‘post’][‘editor’]) && $_wp_post_type_features[‘post’][‘editor’]) {
unset($_wp_post_type_features[‘post’][‘editor’]);
add_meta_box(
‘description_section’,
__(‘Description’),
‘inner_custom_box’,
‘post’, ‘normal’, ‘high’
);
}
if (isset($_wp_post_type_features[‘page’][‘editor’]) && $_wp_post_type_features[‘page’][‘editor’]) {
unset($_wp_post_type_features[‘page’][‘editor’]);
add_meta_box(
‘description_sectionid’,
__(‘Description’),
‘inner_custom_box’,
‘page’, ‘normal’, ‘high’
);
}
}
function inner_custom_box( $post ) {
the_editor($post->post_content);
}
Daniel Nice, did you visit the link I posted?
http://wordpress.org/support/topic/move-custom-meta-box-above-editor
You pasted TroyDesign.IT’s solution than has been improved here:
http://software.troydesign.it/php/wordpress/move-wp-visual-editor.html
Bye Bye