WordPress › Support » Move custom meta box above editor

wpismypuppet
Member
Posted 1 year ago #

I am trying to find a proper WordPress solution to moving a custom meta box above the built in editor and below the title. I can add the editor itself to a meta box and move it that way, and I can also use a little javascript to do it as well... But I'm trying to keep it clean and use built-in WordPress functionality without "hacks".
wpismypuppet
Member
Posted 1 year ago #

I know you aren't suppose to bump, but it's been over a week. Anyone?
wpismypuppet
Member
Posted 1 year ago #

Still looking for help on this one... found this post:

http://www.farinspace.com/move-and-position-wordpress-visual-editor/

which talks about using JS to move the editor into a custom meta box... but I'm looking for a WordPress only solution, if one exists.
morestar
Member
Posted 1 year ago #

I'm with you. I have a few option boxes like an SEO options box and since I set the size of the post box to be larger than the default so I can write much more without scrolling the editor, if I want to edit an option I DO have to scroll the page down to the bottom.

The SEO options are needed and priority so there's no use in them being so low down the page.

I do understand you can move those options boxes above or below one another but that doesn't help me.
ahortin
Member
Posted 1 year ago #

Meta boxes are added using the add_meta_box() function. Among the various paramenters that you can pass this function are two in particular that allow you to specify the location/position of the meta box. The particular parameters are $context and $priority.

The $context parameter allows you to specifiy whether it appears in the main body of the page or on the side of the page. The $priority parameter allows you to specify it's priority in relation to the other boxes on the screen.

Depending on your theme, you'll most likely find this call in functions.php.

Check out the following for more information on the add_meta_box() function...
http://codex.wordpress.org/Function_Reference/add_meta_box
wpismypuppet
Member
Posted 1 year ago #

Thanks for the reply ahortin... I fully understand how to add a meta box. In fact, I do this dynamically through a nice function where all I have to do is create an array to hold meta box details. My functions create the meta boxes and the content inside each meta box based off the array.

The issue I'm facing is moving the "editor" meta box. You know, the default meta box containing the main editor? I don't really want to change the core, but if I could find a hook, or the piece of core code that places that meta box on a post or page, I might be able to add that snippet of code to my functions.php to change it's order there. This way I won't break core code on updates.

P.S. I write my own themes from scratch... Not using any default themes or templates.

TroyDesign.IT
Member
Posted 1 year ago #

... but I'm looking for a WordPress only solution, if one exists.

My solution:

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);
}

wpismypuppet
Member
Posted 1 year ago #

Brilliant!!! Just what I was looking for. I knew there must have been something better than JavaScript to do this. Thanks so much.
TroyDesign.IT
Member
Posted 1 year ago #

You are welcome ;)

P.S.
Tested on versions 3.2.1 and 3.3.1
TroyDesign.IT
Member
Posted 1 year ago #

Just a small correction.
The function the_editor is deprecated(but still works) in WP3.3, use wp_editor instead.
stebesplace
Member
Posted 1 year ago #
So I attempted to get this working, and maybe I'm missing something, but I wasn't successful. After plugging in this block of code into my functions.php, I wasn't sure what else to do in order to get this working. I added my custom meta box, played around with the priorities, etc., and nothing. What am I missing? Here is the sample code from my meta box:
```
function df_press_about1_html() {
    global $post;
    $about1title = get_post_meta($post->ID, '_df_press_about1title', true);
    echo '<label>About the 3rd party title</label><input type="text" name="_df_press_about1title" value="' . $about1title  . '" class="widefat" />';
    $about1body = get_post_meta($post->ID, '_df_press_about1body', true);
    echo '<label>About the 3rd party provider content here</label><textarea class="wp-editor-area" rows="7" cols="95" name="_df_press_about1body">"' . $about1body  . '"</textarea>';
}
```
And this is the meta box add:

add_meta_box('df_press_about1', 'About 3rd Party', 'df_press_about1_html', 'press', 'normal', 'default');

I have more boxes than this, but this one gets it in there. I've adjusted the normal, default values to no avail, and have reverted them back to this.

Let me know if you guys have any ideas.

Jon Brown
Member
Posted 5 months ago #

The code from @troydesign worked perfectly for me. Thanks!

I modified it to only target a single CPT, so in the code below replace {post-type} with the post type you want to target: post, page, my_custom_post_type, etc...

add_action( 'add_meta_boxes', 'jb_make_wp_editor_movable', 0 );
	function jb_make_wp_editor_movable() {
		global $_wp_post_type_features;
		if (isset($_wp_post_type_features['{post-type}']['editor']) && $_wp_post_type_features['{post-type}']['editor']) {
			unset($_wp_post_type_features['{post-type}']['editor']);
			add_meta_box(
				'description_sectionid',
				__('Description'),
				'jb_inner_custom_box',
				'{post-type}', 'normal', 'high'
			);
		}
	}
	function jb_inner_custom_box( $post ) {
		the_editor($post->post_content);
	}

Shaun Brown
Member
Posted 3 months ago #

Works great Troy! Just one question - my editors main div has changed its background color now from its default white to a gray color...any idea why, or how to get the default CSS back?? Thanks again for the solution!
TroyDesign.IT
Member
Posted 3 months ago #

Hello Shaun, there are many way to do that. The simpler, I think, is to output a style in the head.
I have updated my solution here:
http://software.troydesign.it/php/wordpress/move-wp-visual-editor.html
look at "action_admin_head".
Shaun Brown
Member
Posted 3 months ago #

Thanks so much! Where would I add my own custom post type to this script if you dont mind me asking? It seemed to work perfect for regular posts but my editor wouldnt appear on any CPT's.
Shaun Brown
Member
Posted 3 months ago #

I have 'editor' enabled in my supports, for future reference.

Shaun Brown
Member
Posted 3 months ago #

I managed to figure it out.
Here is my solution adapted from Troy's script (thanks for the help!)

// Move TinyMCE Editor to the bottom
	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['currentevent']['editor']) && $_wp_post_type_features['currentevent']['editor']) {
				unset($_wp_post_type_features['currentevent']['editor']);
				add_meta_box(
					'description_section',
					__('Description'),
					'inner_custom_box',
						'currentevent', 'normal', 'low'
				);
			}
	add_action( 'admin_head', 'action_admin_head'); //white background
	}
	function action_admin_head() {
	?>
	<style type="text/css">
		.wp-editor-container{background-color:#fff;}
	</style>
	<?php
	}
	function inner_custom_box( $post ) {
	echo '<div class="wp-editor-wrap">';
	//the_editor is deprecated in WP3.3, use instead:
	//wp_editor($post->post_content, 'content', array('dfw' => true, 'tabindex' => 1) );
	the_editor($post->post_content);
	echo '</div>';
	}

Topic Closed

This topic has been closed to new replies.

WordPress.org

Forums

[resolved] Move custom meta box above editor (17 posts)

Topic Closed

About this Topic

Tags

Code is Poetry