Building user interfaces and options in the WordPress admin area

WordPress is the most popular content management platform (CMS) in the world, and rightly so – it offers enormous flexibility and a rich set of features for creating websites and blogs. In addition to the wide variety of themes and plugins available, WordPress allows developers to create their own user interfaces and options in the admin area of the site. In this post, we will look at how to build user interfaces and options in the WordPress admin area.

Step 1: Create a function to add options

The first step in creating the WordPress admin UI and options is to create a function that will add the options to the admin menu. To do this, add the following code to your theme's functions.php file:

function custom_admin_options() { add_menu_page( 'My Options', 'My Options', 'manage_options', 'my_options', 'my_options_page_content', 'dashicons-admin-tools', 100 ); } add_action('admin_menu', 'custom_admin_options');

This code adds a new menu named "My Options" in the WordPress admin area. add_menu_page function takes various parameters such as title, menu name, the ability to manage options, page id, name of the function that will render the page content, icon and position.

Step 2: Create a function for the content of the options page

After adding the menu, the next step is to create the function that will render the contents of the options page. Add the following code to the functions.php file:

function my_options_page_content() { ?>
  <div class="wrap">
    <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
    <form action="/en/options.php/" method="post" data-trp-original-action="options.php">
      <?php
      settings_fields('my_options_group');
      do_settings_sections('my_options');
      submit_button('Запази промените');
      ?>
    <input type="hidden" name="trp-form-language" value="en"/></form>
  </div>
  <?php
}

This code adds a form to the options page that will allow users to save their changes. The functions settings_fields and do_settings_sections display the options that are registered via register_setting and add_settings_section.

Step 3: Register the options and sections

To register your options and sections, add the following code to the functions.php file:

function my_options_init() { register_setting('my_options_group', 'my_options', 'my_options_sanitize'); add_settings_section( 'my_options_section', 'My Options Settings', 'my_options_section_callback', 'my_options' ); add_settings_field( 'my_option_field', 'My Option', 'my_option_field_callback', 'my_options', 'my_options_section' ); } add_action('admin_init', 'my_options_init');

This code registers the option "my_options" and adds a section "my_options_section" with the title "My Options Settings" and a callback section. Also adds a "my_option_field" field to this section.

Step 4: Create callback functions for sections and fields

To render the contents of the sections and fields, create the callback functions specified in the previous step. Add the following code to the functions.php file:

function my_options_section_callback() { echo &#039;<p>You can customize your options here.</p>&#039;; } function my_option_field_callback() { 1TP5Options = get_option(&#039;my_options&#039;); ?&gt;
  <input type="text" name="my_options[my_option]" value="<?php echo esc_attr($options['my_option']); ?>">
  <?php
}

Step 5: Create a function to process the data

To process and save the data when the user fills out the form, create the data processing function. Add the following code to the functions.php file:

function my_options_sanitize($input) { $output = array(); $output['my_option'] = sanitize_text_field($input['my_option']); return $output; }

This function checks the input data and uses sanitize_text_field function to ensure that the text field is sanitized before it is saved.

By following the above steps, you have successfully created a user interface and options in the WordPress admin area. Of course, this is just the base, and you can expand your options and functionality by adding additional fields, sections and validation, depending on your needs and requirements.

Creating custom options and interface in the admin area of WordPress is an effective way to improve the management of your sites by providing your clients or you with convenient tools for setting up the theme or plugin.