Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

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?

share|improve this question
    
Maybe you haven't got the change, but plugin recommendation is off-topic now... –  brasofilo Nov 20 '12 at 2:14
    
Hmm, I didn't know. Well I hope someone provides some info for a solution then even without recommending a plugin. –  DigitalSea Nov 20 '12 at 2:15

3 Answers 3

up vote 2 down vote accepted

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
}
share|improve this answer
    
Perfect. This actually helped and worked, made it a bit cleaner of course but nice one. Thank you. –  DigitalSea Nov 20 '12 at 10:55
    
@DigitalSea If you made it "a bit cleaner" it would be useful if you would post it here so other users can use it. –  Christine Cooper Jan 16 at 15:18

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.

share|improve this answer

I think this is what you need: http://wordpress.org/plugins/floating-publish-button/.

This plugin stick the publish button section follow the page. So you can click on the Publish/Update button without scrolling up.

Hope it can help you, Son

share|improve this answer
    
Link only answers are considered to be poor quality. Please improve your answer so I can remove the downvote. Thanks. –  kaiser Jan 16 at 14:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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