Editing Screen: Make Update or Publish Button Follow The Page

2 Views

The Problem:

I am currently in the finishing stages of a premium theme I’ve been developing and all is mostly well. For pages I have a few custom meta boxes for adding in slideshows and other additional pieces of page content and have found that the editing screen is now pretty long.

Read More

Due to the large vertical height you find yourself changing something at the bottom and then having to scroll back to the top to click “publish” or “update”. This gets tiring after editing 2 pages.

(see image below to see the problem first hand, click to enlarge)

enter image description here

The Question:

Is there a way to make the publish/update meta box follow the page so the “publish” and “update” buttons are always accessible and visible without having to scroll all of the way to the top?

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. Solution based in this StackOverflow Q&A.
    Well, more a proof of concept than anything… Style and scripts being printed the lazy way.

    Add a fixed Scroll to top div linked to an anchor near the Publish button.

    add_action( 'admin_head-post.php', 'scroll_to_top' );

function scroll_to_top() 
{
    ?>
    <style>#box {
      /* Position absolutely, 30px down from the top */
      position: absolute;
      top: 30px;

      /* In my case I'm centering it in the window; do what you like */
      margin-left: -100px;
      left: 50%;
      width: 200px;

      /* These are just for my example */
      height: 1.25em;
      border: 1px solid #bbb;
      text-align: center;
    }
    </style>

    <script type="text/javascript">
        jQuery(window).load( function() {   
            jQuery('<div id="box"><a href="#top">Scroll to top</a></div>').appendTo("#wpbody-content");         
            jQuery('<a name="top" id="top"></a>').appendTo("#visibility");

            function getScrollTop() {
            if (typeof window.pageYOffset !== 'undefined' ) {
              // Most browsers
              return window.pageYOffset;
            }

            var d = document.documentElement;
            if (d.clientHeight) {
              // IE in standards mode
              return d.scrollTop;
            }

            // IE in quirks mode
            return document.body.scrollTop;
          }

          window.onscroll = function() {
            var box = document.getElementById('box'),
                scroll = getScrollTop();

            if (scroll <= 28) {
              box.style.top = "30px";
            }
            else {
              box.style.top = (scroll + 2) + "px";
            }
          };
        });

    </script>
    <?php
}

  2. You can probably do this with some CSS. Here’s a quick hack job via the webkit inspector:

    #side-sortables {
    margin-top: 230px;
}
#submitdiv {
    position: fixed;
    z-index: 99;
    margin-top: -230px;
}

    This doesn’t handle the case where the UI is in single column mode though.

  3. I found a simpler solution

    Add this to your functions.php

    // Update CSS within in Admin
function admin_style() {
  wp_enqueue_style('admin-styles', get_template_directory_uri().'/admin.css');
}
add_action('admin_enqueue_scripts', 'admin_style');

    and point it to a CSS file in your theme folder with this

    @media (min-width: 850px) {
    .post-php #postbox-container-1 {
    position: fixed;
    top: 100px;
    z-index: 999999;
    right: 320px;
    }
}