plugin development - Publish, Save Draft and Preview buttons do not work after being moved with jQuery

I'm trying to change the layout of the post-new.php page and as part of this I would like the publish, save draft and preview buttons below the form rather than to the right.

So in my plugin js file I'm using jQuery.append() to move them into a custom that sits below the main . I'm moving the divs: #save-action, #preview-action and #publishing-action.

This works fine layout-wise. However, now none of the buttons seem to perform their job. The publish button just appends some text to the url, the preview button just refreshes the page and the save draft button does nothing. I'm assuming I've broken something by moving them because all of my other styling works with their functionality.

Does wordpress reference the they are in or something like that to attach the actions to the buttons?

One fix would be to just call the relevant wp_*_() functions myself on the buttons but I can't seem to find them in the codex.

I guess another fix would be to move them while maintaining the structure of s that wordpress needs to keep the functionality intact.

I'm new to plugins in the backend so I'm probably doing something very wrong. I'd be grateful if someone could point me in the right direction. Or help me find the relevant wp_*_() functions to "re-attach" to the buttons.

Thank you for your time.

I'm trying to change the layout of the post-new.php page and as part of this I would like the publish, save draft and preview buttons below the form rather than to the right.

So in my plugin js file I'm using jQuery.append() to move them into a custom that sits below the main . I'm moving the divs: #save-action, #preview-action and #publishing-action.

This works fine layout-wise. However, now none of the buttons seem to perform their job. The publish button just appends some text to the url, the preview button just refreshes the page and the save draft button does nothing. I'm assuming I've broken something by moving them because all of my other styling works with their functionality.

Does wordpress reference the they are in or something like that to attach the actions to the buttons?

One fix would be to just call the relevant wp_*_() functions myself on the buttons but I can't seem to find them in the codex.

I guess another fix would be to move them while maintaining the structure of s that wordpress needs to keep the functionality intact.

I'm new to plugins in the backend so I'm probably doing something very wrong. I'd be grateful if someone could point me in the right direction. Or help me find the relevant wp_*_() functions to "re-attach" to the buttons.

Thank you for your time.

• plugin-development
• dashboard
• editor
• post-editor
• css

Share Improve this question asked Feb 9, 2017 at 0:49 ponchoponcho 12111 bronze badge 2

• this is probably an event delegation problem. – Milo Commented Feb 9, 2017 at 3:19
• Do you mean that by moving the divs out from where they usually are, when wordpress's own jQuery fires, it won't work because the buttons are not in their former parent (which is referenced by jQuery)? That makes sense if it is the problem, is there another way to customise the layout of the "New/Edit Post" form page without resorting to this post-load hacking (that evidently doesn't work)? I've tried searching around on codes.wordpress.org developer.wordpress.org and many google searches but couldn't find anything. I thought the wordpress backend was supposed to be fully customisable. – poncho Commented Feb 10, 2017 at 14:29

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

I'm pretty sure there is an option (per user) to change the page's layout to single column, and then moving the block around to match the order you require. This option can be found on top of the page, accessible from the tab Screen options.

Note that, as this is on a per-user basis, you would have to do the change for everyone manually.

EDIT: As this solution won't fit OP's requirements, I would suggest the verification of the way the $.append() method is used. As described in the docs (http://api.jquery.com/append/):

If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned).

[...]

Important: If there is more than one target element, however, cloned copies of the inserted element will be created for each target except for the last one.

The cloning would mean the previously attached event handlers would not be bound on the new elements, rendering the input/buttons useless. Make sure you only move the container around to avoid element cloning.

Also see this thread on how to use the $.detach() function: https://stackoverflow.com/a/29462003/7392929

One possible way will be to set the default screen options as described in this answer.
The 'save' and 'publish' buttons are available in submitdiv
Since you only want to move them to the bottom of the screen move the submitdiv from side to advanced in the code provided in the linked answer. You can customize the metaboxes however you please using the same method. I hope this helped.