3

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?

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

3 Answers 3

3

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
}
3
  • Perfect. This actually helped and worked, made it a bit cleaner of course but nice one. Thank you. Nov 20, 2012 at 10:55
  • 2
    @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, 2014 at 15:18
  • As someone who has never done anything like this. Could this just be thrown into the theme's functions.php?
    – R Reveley
    May 13, 2016 at 10:18
1

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.

0

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;
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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