Ordering input fields in WordPress General Settings page

Question

I have created a plugin that adds a input box, 'Logo URL' on the Settings > General page in WordPress. This input can be called and works correctly. I have created another plugin that pulls the 'Logo URL' and applies the path to pull an image for the Login screen. Everything appears peachy.

The only issue I am having is that I would like to move the 'Logo URL' on the Settings > General page to up under 'Site Address (URL)'. I am at a loss on how to do this. I have scoured the web and been unable to find a helpful answer.

I am currently removing the original General page and adding a New General page but am unsure how to parse the correct options-general.php.

How to move the Logo_URL higher on the General Page?

/**
  * This is the code to create the Settings box on the Settings > General
  */    
$new_general_setting = new new_general_setting();

class new_general_setting {
    function new_general_setting( ) {
        add_filter( 'admin_init' , array( &$this , 'register_fields' ) );
    }
    function register_fields() {
        register_setting( 'general', 'URL_logo', 'esc_attr' );
        add_settings_field('URL_logo', '<label for="URL_logo">'.__('Website     logo (URL)' , 'URL_logo' ).'</label>' , array(&$this, 'fields_html') , 'general' );
    }
    function fields_html() {
        $value = get_option( 'URL_logo', '' );
        echo '<input type="text" id="URL_logo" name="URL_logo" value="' .     $value . '" />';
    }
}

Thanks. I changed it. Does that change any functionality? Like I said, I have 0 coding experience. I am just piecing together things I find on the internet and am trying to make it work the way I want. — user1143822
WP requires PHP 5.2.4+. Forget the internet, you'll find lots of cool stuff here and at WordPress Development ;) Oh, yes, kudos for the Question with a sscce.org It's hard to see one these days... — brasofilo

brasofilo brasofilo · Accepted Answer · 2013-10-03T23:41:10

No, there's no way of ordering that natively. WordPress first prints its stuff then ours. It has to be done with jQuery.

add_action( 'admin_footer-options-general.php', function()
{
    ?>
    <script type="text/javascript">
    jQuery(document).ready( function($) 
    {
        var son = $("label[for='URL_logo']").parent().parent(); // Our setting field
        var father = $("label[for='home']").parent().parent(); // WordPress setting field
        son.insertAfter(father);
    });
    </script>
    <?php
});

The recommended way is to enqueue the JS inside an action call for "admin_print_scripts-$hookname". Note the hook name use in admin_footer and admin_head too.

As your field only changes after the page loaded, we can notice the "jump". To smooth it, we can use:

add_action( 'admin_head-options-general.php', function()
{
    echo '<style>#wpbody .wrap form{display:none}</style>';
});

And add this jQuery after replaceWith():

$('#wpbody .wrap form').fadeIn('slow');

Ordering input fields in WordPress General Settings page

1 Answers