SitePoint Sponsor

User Tag List

Results 1 to 25 of 35

Hybrid View

  1. #1
    SitePoint Member lilainoz's Avatar
    Join Date
    May 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating Custom Options Pages in WordPress

    Notice: This is a discussion thread for comments about the SitePoint article, Creating Custom Options Pages in WordPress.
    __________

    Show us your new great power! How far can you take your Options page further?

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    This is a fantastic write-up and comes at a most convenient time!

    Off Topic:

    I rated the article but it doesn't show up. The ratings functionality seems out of order.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great article/tutorial.

    If you'd like to add your "sub-menu" to a section other than the "Settings" menu use the following:

    Code:
    add_dashboard_page(...) // Add sub-menu to Dashboard menu
    add_posts_page(...) // Add sub-menu to Posts menu
    add_media_page(...) // Add sub-menu to Media menu
    add_links_page(...) // Add sub-menu to Links menu
    add_pages_page(...) // Add sub-menu to Pages menu
    add_comments_page(...) // Add sub-menu to Comments menu
    add_theme_page(...) // Add sub-menu to Appearance menu
    add_plugins_page(...) // Add sub-menu to Plugins menu
    add_users_page(...) // Add sub-menu to Users menu
    add_management_page(...) // Add sub-menu to Tools menu
    For different icons, buttons, and other admin panel styles see: How to design and style your WordPress plugin admin panel (Onextrapixel.com)

  4. #4
    SitePoint Addict raydenx's Avatar
    Join Date
    Jun 2003
    Location
    Singapore
    Posts
    208
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the wonderful info about adding to different sections of the WordPress admin.

    I've always wondered how to do that.

  5. #5
    SitePoint Member loveglory's Avatar
    Join Date
    Aug 2010
    Location
    Islamabad
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for cool information, but let me know is it free of cost.

  6. #6
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This topic is totally new to me. I find it so informative. Thanks for the post.

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2007
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That
    was
    awesome

    Thanks so much.
    Patriotism is the virtue of the vicious.

  8. #8
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its great to developed creative custom option and such a revealing information you share with us, We learn a lot from it and will be in touch with you for more add-ons. Wish you all the best.

    <snip />
    Last edited by SpacePhoenix; Sep 5, 2010 at 23:48. Reason: removed fake signature

  9. #9
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please add the source code link.

  10. #10
    SitePoint Zealot
    Join Date
    Sep 2009
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with akshayaurora. There should be a link to download the code.
    I believe this is on topic. Just some related thoughts and questions for those following this thread. If you have built an options page using the Options API and then one using the Settings API, which do you think is better as far as efficiency and security? I have spent the last few days digging into the Settings APIi and it sure seems like a lot of work in contrast to the Options API. Maybe if one built a class to do all of this it would be lighter. Does anyone have any experience building a settings API class, or know of a tutorial on the subject? I'm not versed in OOP and maybe the code isn't fit for a class. What do you think?

  11. #11
    SitePoint Member
    Join Date
    Jul 2007
    Location
    New York, NY
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So... I'm the only person that can't get this to work, eh?
    I get the "Theme Options" in the Settings panel just fine, but all clicking that does is refresh my Dashboard...
    No need to post the code here, I don't think, as I am merely copying/pasting right from the article...
    This is a localhost installation that, otherwise, works just fine... Any thoughts/guesses?
    Thanks,
    Atg
    Aaron T. Grogg
    aarontgrogg.com/

  12. #12
    SitePoint Member
    Join Date
    Jul 2007
    Location
    New York, NY
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by aarontgrogg View Post
    So... I'm the only person that can't get this to work, eh?
    Issue was "__FILE__" when on a localhost...

    Argh...

    Atg
    Aaron T. Grogg
    aarontgrogg.com/

  13. #13
    SitePoint Enthusiast
    Join Date
    Jul 2005
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In case someone can't get this to work on a local setup and need some practical advice, replace all instances of:

    PHP Code:
    __FILE__ 
    with:

    PHP Code:
    basename(__FILE__
    And you're good to go.

  14. #14
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've been having a hard time getting this to work. The page shows up under stettings, the page loads fine and the form works... and I can enter a value... but when I hit submit the page refreshes to a blank white screen. The url at this point is:

    Code:
    http://www.(MYDOMAIN)/wp-admin/options.php
    If I manually delete the /options.php it reloads the admin page and I can once again get to our new options page and the value has indeed been saved (at least it is showing up in the field.

    Any thoughts? A validation issue?

  15. #15
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And since I couldn't find a link to the code as a single file, I couldn't really check mine against it... so here is what I've pasted if it helps:

    Code:
    <?php 
    
    add_action('admin_menu', 'create_theme_options_page');
    
    function create_theme_options_page() {
      add_options_page('Theme Options', 'Theme Options', 'administrator', basename(__FILE__), 'build_options_page');
    }
    
    function build_options_page() {
    ?>
      <div id="theme-options-wrap">
        <div class="icon32" id="icon-tools"> <br /> </div>
    
        <h2>My Theme Options</h2>
        <p>Take control of your theme, by overriding the default settings with your own specific preferences.</p>
    
        <form method="post" action="options.php">
    	<?php settings_fields('plugin_options'); ?>
      	<?php do_settings_sections(basename(__FILE__)); ?>
    
          <p class="submit">
            <input name="Submit" type="submit" class="button-primary" value="<?php esc_attr_e('Save Changes'); ?>" />
          </p>
        </form>
      </div>
    <?php }
    
    
    add_action('admin_init', 'register_and_build_fields');
    function register_and_build_fields() { 
      register_setting('plugin_options', 'plugin_options', 'validate_setting');
      add_settings_section('main_section', 'Main Settings', 'section_cb', basename(__FILE__));
      add_settings_field('banner_heading', 'Banner Heading:', 'banner_heading_setting', basename(__FILE__), 'main_section');
    }
    
    
    function validate_setting($plugin_options) {
      return $plugin_options;
    }
    
    function section_cb() {}
    
    // Banner Heading
    function banner_heading_setting() {
      $options = get_option('plugin_options');
      echo "<input name='plugin_options[banner_heading]' type='text' value='{$options['banner_heading']}' />";
    }
    
    
    ?>

  16. #16
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Zachary,

    Try changing

    Code:
    <form method="post" action="options.php">
    to

    Code:
    <?php admin_url('admin.php') ?>
    I did that and it fixed the problem I was having with options.php However, my problem is that nothing is saved to the database. Any ideas?

  17. #17
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Great tutorial.

    However, how do you remove the custom logo?

    Maybe a user of the theme changes their mind and doesn't want a logo, is there anyway to create a remove logo option?

    Thanks a lot!

  18. #18
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    You would need to add a button that says clear or something then modify the code block in example 18 to something like:
    Code PHP:
         if ( preg_match('/(jpg|jpeg|png|gif)$/', $image['type']) ) {
           $override = array('test_form' => false);
           // save the file, and store an array, containing its location in $file
           $file = wp_handle_upload( $image, $override );
           if (isset($_POST['removeLogo']){
             $plugin_options[$keys[$i]]= '';
           }
           $plugin_options[$keys[$i]] = $file['url'];
     
         } else {
    NOTE: I didn't test this so I don't know the results.
    Ryan B | My Blog | Twitter

  19. #19
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rguy84 View Post
    You would need to add a button that says clear or something then modify the code block in example 18 to something like:
    Code PHP:
         if ( preg_match('/(jpg|jpeg|png|gif)$/', $image['type']) ) {
           $override = array('test_form' => false);
           // save the file, and store an array, containing its location in $file
           $file = wp_handle_upload( $image, $override );
           if (isset($_POST['removeLogo']){
             $plugin_options[$keys[$i]]= '';
           }
           $plugin_options[$keys[$i]] = $file['url'];
     
         } else {
    NOTE: I didn't test this so I don't know the results.
    Thanks for taking the time to answer, although I have no idea how I'd go about adding a remove logo button!

    Cheers

  20. #20
    Non-Member webdelux's Avatar
    Join Date
    Jun 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any help is much appreciated, I am stuck. Cant figure out why my code isnt working... I am adding several fields into the custom options page. They are showing up in the page. The input and textareas seem to work but the options.php page does not show the saved data. The options page is showing no errors and I get a success message upon clicking save.

    <?php

    add_action('admin_menu', 'create_theme_options_page');

    function create_theme_options_page() {
    add_options_page('Theme Options', 'Theme Options', 'administrator','t_o', 'build_options_page');
    }

    function build_options_page() {
    ?>
    <div id="theme-options-wrap">
    <div class="icon32" id="icon-tools"> <br /> </div>

    <h2>My Theme Options</h2>
    <p>Take control of your theme, by overriding the default settings with your own specific preferences.</p>

    <form method="post" action="options.php">
    <?php settings_fields('plugin_options'); ?>
    <?php do_settings_sections('t_o'); ?>
    <p class="submit">
    <input name="Submit" type="submit" class="button-primary" value="<?php esc_attr_e('Save Changes'); ?>" />
    </p>
    </form>
    </div>
    <?php
    }
    add_action('admin_init', 'register_and_build_fields');
    function register_and_build_fields() {
    register_setting('plugin_options', 'plugin_options', 'validate_setting');

    add_settings_section('img_1_section', 'Image 1', 'section_cb','t_o');
    add_settings_field('img_1', 'Image 1:', 'img_1_setting','t_o', 'img_1_section');
    add_settings_field('img_1_text', 'Image 1 Text:', 'img_1_text','t_o', 'img_1_section');

    add_settings_section('img_2_section', 'Image 2', 'section_cb','t_o');
    add_settings_field('img_2', 'Image 2:', 'img_2_setting','t_o', 'img_2_section');
    add_settings_field('img_2_text', 'Image 2 Text:', 'img_2_text','t_o', 'img_2_section');

    add_settings_section('img_3_section', 'Image 3', 'section_cb','t_o');
    add_settings_field('img_3', 'Image 3:', 'img_3_setting','t_o', 'img_3_section');
    add_settings_field('img_3_text', 'Image 3 Text:', 'img_3_text','t_o', 'img_3_section');

    add_settings_section('img_4_section', 'Image 4', 'section_cb','t_o');
    add_settings_field('img_4', 'Image 4:', 'img_4_setting','t_o', 'img_4_section');
    add_settings_field('img_4_text', 'Image 4 Text:', 'img_4_text','t_o', 'img_4_section');

    add_settings_section('img_5_section', 'Image 5', 'section_cb','t_o');
    add_settings_field('img_5', 'Image 5:', 'img_5_setting','t_o', 'img_5_section');
    add_settings_field('img_1_text', 'Image 5 Text:', 'img_5_text','t_o', 'img_5_section');

    add_settings_section('img_6_section', 'Image 6', 'section_cb','t_o');
    add_settings_field('img_6', 'Image 6:', 'img_6_setting','t_o', 'img_6_section');
    add_settings_field('img_6_text', 'Image 6 Text:', 'img_6_text','t_o', 'img_6_section');

    add_settings_section('img_7_section', 'Image 7', 'section_cb','t_o');
    add_settings_field('img_7', 'Image 7:', 'img_7_setting','t_o', 'img_7_section');
    add_settings_field('img_7_text', 'Image 7 Text:', 'img_7_text','t_o', 'img_7_section');

    add_settings_section('img_8_section', 'Image 8', 'section_cb','t_o');
    add_settings_field('img_8', 'Image 8:', 'img_8_setting','t_o', 'img_8_section');
    add_settings_field('img_8_text', 'Image 8 Text:', 'img_8_text','t_o', 'img_8_section');

    add_settings_section('img_9_section', 'Image 9', 'section_cb','t_o');
    add_settings_field('img_9', 'Image 9:', 'img_9_setting','t_o', 'img_9_section');
    add_settings_field('img_9_text', 'Image 9 Text:', 'img_9_text','t_o', 'img_9_section');

    add_settings_section('img_10_section', 'Image 10', 'section_cb','t_o');
    add_settings_field('img_10', 'Image 10:', 'img_1_setting','t_o', 'img_10_section');
    add_settings_field('img_10_text', 'Image 10 Text:', 'img_10_text','t_o', 'img_10_section');

    add_settings_section('img_11_section', 'Image 11', 'section_cb','t_o');
    add_settings_field('img_11', 'Image 11:', 'img_11_setting','t_o', 'img_11_section');
    add_settings_field('img_11_text', 'Image 11 Text:', 'img_11_text','t_o', 'img_11_section');

    add_settings_section('img_12_section', 'Image 12', 'section_cb','t_o');
    add_settings_field('img_12', 'Image 12:', 'img_12_setting','t_o', 'img_12_section');
    add_settings_field('img_12_text', 'Image 12 Text:', 'img_12_text','t_o', 'img_12_section');

    add_settings_section('img_13_section', 'Image 13', 'section_cb','t_o');
    add_settings_field('img_13', 'Image 13:', 'img_13_setting','t_o', 'img_13_section');
    add_settings_field('img_13_text', 'Image 13 Text:', 'img_13_text','t_o', 'img_13_section');

    add_settings_section('img_14_section', 'Image 14', 'section_cb','t_o');
    add_settings_field('img_14', 'Image 14:', 'img_14_setting','t_o', 'img_14_section');
    add_settings_field('img_14_text', 'Image 14 Text:', 'img_14_text','t_o', 'img_14_section');

    add_settings_section('img_15_section', 'Image 15', 'section_cb','t_o');
    add_settings_field('img_15', 'Image 15:', 'img_15_setting','t_o', 'img_15_section');
    add_settings_field('img_15_text', 'Image 15 Text:', 'img_15_text','t_o', 'img_15_section');

    }

    // Image 1
    function img_1_setting() {
    $options = get_option('plugin_options');
    echo "<input name='plugin_options[img_1]' type='text' value='{$options['img_1']}' />";
    }

    // Image 1 Text
    function img_1_text() {
    $options = get_option('plugin_options');
    echo "<textarea name='plugin_options[img_1_text]' type='text' value='{$options['img_1_text']}'></textarea>";
    }

    // Image 2
    function img_2_setting() {
    $options = get_option('plugin_options');
    echo "<input name='plugin_options[img_2]' type='text' value='{$options['img_2']}' />";
    }

    // Image 2 Text
    function img_2_text() {
    $options = get_option('plugin_options');
    echo "<textarea name='plugin_options[img_2_text]' type='text' value='{$options['img_2_text']}'></textarea>";
    }

    // Image 3
    function img_3_setting() {
    $options = get_option('plugin_options');
    echo "<input name='plugin_options[img_3]' type='text' value='{$options['img_3']}' />";
    }

    // Image 3 Text
    function img_3_text() {
    $options = get_option('plugin_options');
    echo "<textarea name='plugin_options[img_3_text]' type='text' value='{$options['img_3_text']}'></textarea>";
    }

    // Image 4
    function img_4_setting() {
    $options = get_option('plugin_options');
    echo "<input name='plugin_options[img_4]' type='text' value='{$options['img_4']}' />";
    }

    // Image 4 Text
    function img_4_text() {
    $options = get_option('plugin_options');
    echo "<textarea name='plugin_options[img_4_text]' type='text' value='{$options['img_4_text']}'></textarea>";
    }

    // Image 5
    function img_5_setting() {
    $options = get_option('plugin_options');
    echo "<input name='plugin_options[img_5]' type='text' value='{$options['img_5']}' />";
    }


    // Image 5 Text
    function img_5_text() {
    $options = get_option('plugin_options');
    echo "<textarea name='plugin_options[img_5_text]' type='text' value='{$options['img_5_text']}'></textarea>";
    }

    // Image 6
    function img_6_setting() {
    $options = get_option('plugin_options');
    echo "<input name='plugin_options[img_6]' type='text' value='{$options['img_6']}' />";
    }

    // Image 6 Text
    function img_6_text() {
    $options = get_option('plugin_options');
    echo "<textarea name='plugin_options[img_6_text]' type='text' value='{$options['img_6_text']}'></textarea>";
    }

    // Image 7
    function img_7_setting() {
    $options = get_option('plugin_options');
    echo "<input name='plugin_options[img_7]' type='text' value='{$options['img_7']}' />";
    }

    // Image 7 Text
    function img_7_text() {
    $options = get_option('plugin_options');
    echo "<textarea name='plugin_options[img_7_text]' type='text' value='{$options['img_7_text']}'></textarea>";
    }

    // Image 8
    function img_8_setting() {
    $options = get_option('plugin_options');
    echo "<input name='plugin_options[img_8]' type='text' value='{$options['img_8']}' />";
    }

    // Image 8 Text
    function img_8_text() {
    $options = get_option('plugin_options');
    echo "<textarea name='plugin_options[img_8_text]' type='text' value='{$options['img_8_text']}'></textarea>";
    }

    // Image 9
    function img_9_setting() {
    $options = get_option('plugin_options');
    echo "<input name='plugin_options[img_9]' type='text' value='{$options['img_9']}' />";
    }

    // Image 9 Text
    function img_9_text() {
    $options = get_option('plugin_options');
    echo "<textarea name='plugin_options[img_9_text]' type='text' value='{$options['img_9_text']}'></textarea>";
    }

    // Image 10
    function img_10_setting() {
    $options = get_option('plugin_options');
    echo "<input name='plugin_options[img_10]' type='text' value='{$options['img_10']}' />";
    }

    // Image 10 Text
    function img_10_text() {
    $options = get_option('plugin_options');
    echo "<textarea name='plugin_options[img_10_text]' type='text' value='{$options['img_10_text']}'></textarea>";
    }

    // Image 11
    function img_11_setting() {
    $options = get_option('plugin_options');
    echo "<input name='plugin_options[img_11]' type='text' value='{$options['img_11']}' />";
    }

    // Image 11 Text
    function img_11_text() {
    $options = get_option('plugin_options');
    echo "<textarea name='plugin_options[img_11_text]' type='text' value='{$options['img_11_text']}'></textarea>";
    }

    // Image 12
    function img_12_setting() {
    $options = get_option('plugin_options');
    echo "<input name='plugin_options[img_12]' type='text' value='{$options['img_12']}' />";
    }

    // Image 12 Text
    function img_12_text() {
    $options = get_option('plugin_options');
    echo "<textarea name='plugin_options[img_12_text]' type='text' value='{$options['img_12_text']}'></textarea>";
    }

    // Image 13
    function img_13_setting() {
    $options = get_option('plugin_options');
    echo "<input name='plugin_options[img_13]' type='text' value='{$options['img_13']}' />";
    }

    // Image 13 Text
    function img_13_text() {
    $options = get_option('plugin_options');
    echo "<textarea name='plugin_options[img_13_text]' type='text' value='{$options['img_13_text']}'></textarea>";
    }

    // Image 14
    function img_14_setting() {
    $options = get_option('plugin_options');
    echo "<input name='plugin_options[img_14]' type='text' value='{$options['img_14']}' />";
    }

    // Image 14 Text
    function img_14_text() {
    $options = get_option('plugin_options');
    echo "<textarea name='plugin_options[img_14_text]' type='text' value='{$options['img_14_text']}'></textarea>";
    }

    // Image 15
    function img_15_setting() {
    $options = get_option('plugin_options');
    echo "<input name='plugin_options[img_15]' type='text' value='{$options['img_15']}' />";
    }

    // Image 15 Text
    function img_15_text() {
    $options = get_option('plugin_options');
    echo "<textarea name='plugin_options[img_15_text]' type='text' value='{$options['img_15_text']}'></textarea>";
    }



    function section_cb() {}

    function validate_setting($plugin_options) {
    return $plugin_options;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •