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.

  • this is probably an event delegation problem.
    – Milo
    Feb 9 '17 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
    Feb 10 '17 at 14:29

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

  • Thanks for the reply but this solution wouldn't work for me. I'm making this for someone else and they'll be adding users themselves. I don't want anyone to be able to customise the design of the page because the backend is already heavily styled and if they can customise things it'll potentially break things. So I'm hoping to get this one design working and then remove all customisation options.
    – poncho
    Feb 10 '17 at 14:28
  • Alright! Just updated my answer, please make sure the events are still bound on the elements after using the $.append() method. Feb 10 '17 at 15:12
  • Ah that makes sense. I'll have a go and then update/mark as solved if all goes well. Thanks!
    – poncho
    Feb 11 '17 at 15:50

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.