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.

Topic post-editor editor dashboard plugin-development css Wordpress

Category Web

1
answered at

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.

1
answered at

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

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.