Настройки сайта. Раздел с полями

Создадим отдельный раздел с настройками сайта, с различным набором полей (файл, область текста с редактором wisiwig, текст, чекбокс, radio и select). Это удобно для редактирования внешаблонных областей.

Функционал

// Создаём страницу настроек
function my_theme_settings_menu() {
    add_menu_page(
        'Настройки сайта',      // Заголовок
        'Настройки сайта',      // Название пункта меню
        'manage_options',       // Право
        'my_theme_settings',    // slug
        'my_theme_settings_page' // функция отображения
    );
}
add_action('admin_menu', 'my_theme_settings_menu');


// Регистрируем настройки
function my_theme_register_settings() {
    register_setting('my_theme_settings_group', 'my_theme_file_id');
    register_setting('my_theme_settings_group', 'my_theme_text_content');
    register_setting('my_theme_settings_group', 'my_theme_short_text');
    register_setting('my_theme_settings_group', 'my_theme_checkbox');
    register_setting('my_theme_settings_group', 'my_theme_radio_option');
    register_setting('my_theme_settings_group', 'my_theme_select_option');
}
add_action('admin_init', 'my_theme_register_settings');


// Страница настроек
function my_theme_settings_page() {
    ?>
    <div class="wrap">
        <h1>Настройки сайта</h1>
        <form method="post" action="options.php">
            <?php settings_fields('my_theme_settings_group'); ?>
            <?php do_settings_sections('my_theme_settings_group'); ?>

            <table class="form-table">
                <tr valign="top">
                    <th scope="row">Прайс-лист</th>
                    <td>
                        <?php
                        $file_id = get_option('my_theme_file_id');
                        $file_title = $file_id ? get_the_title($file_id) : 'Нет выбранного файла';
                        ?>
                        <input type="hidden" name="my_theme_file_id" id="my_theme_file_id" value="<?php echo esc_attr($file_id); ?>">
                        <button type="button" class="upload_custom_file_button">Загрузить файл</button>
                        <span id="file_name_display"><?php echo esc_html($file_title); ?></span>
                    </td>
                </tr>
				<tr valign="top">
					<th scope="row">Область текста</th>
					<td>
						<?php
						$text_value = get_option('my_theme_text_content');
						wp_editor(
							$text_value,
							'my_theme_text_content',
							array(
								'textarea_name' => 'my_theme_text_content',
								'tinymce' => true,
								'media_buttons' => true,
								'textarea_rows' => 10,
							)
						);
						?>
					</td>
				</tr>
				<tr valign="top">
					<th scope="row">Короткий текст</th>
					<td>
						<input type="text" name="my_theme_short_text" value="<?php echo esc_attr( get_option('my_theme_short_text') ); ?>" style="width: 100%;">
					</td>
				</tr>
				<tr valign="top">
					<th scope="row">Включить что-то</th>
					<td>
						<input type="checkbox" name="my_theme_checkbox" value="1" <?php checked(get_option('my_theme_checkbox'), '1'); ?>>
					</td>
				</tr>
				<tr valign="top">
					<th scope="row">Выберите опцию</th>
					<td>
						<label>
							<input type="radio" name="my_theme_radio_option" value="" <?php checked( get_option('my_theme_radio_option'), '' ); ?> /> По умолчанию
						</label><br>
						<label>
							<input type="radio" name="my_theme_radio_option" value="option1" <?php checked( get_option('my_theme_radio_option'), 'option1' ); ?> /> Вариант 1
						</label><br>
						<label>
							<input type="radio" name="my_theme_radio_option" value="option2" <?php checked( get_option('my_theme_radio_option'), 'option2' ); ?> /> Вариант 2
						</label>
					</td>
				</tr>
				<tr valign="top">
					<th scope="row">Выберите вариант</th>
					<td>
						<select name="my_theme_select_option" style="width: 200px;">
							<?php $current_value = get_option('my_theme_select_option'); ?>
							<option value="" <?php selected( $current_value, '' ); ?>>По умолчанию</option>
							<option value="option1" <?php selected( $current_value, 'option1' ); ?>>Вариант 1</option>
							<option value="option2" <?php selected( $current_value, 'option2' ); ?>>Вариант 2</option>
							<option value="option3" <?php selected( $current_value, 'option3' ); ?>>Вариант 3</option>
						</select>
					</td>
				</tr>
            </table>
            <?php submit_button(); ?>
        </form>
    </div>
    <script>
    jQuery(document).ready(function($){
        var frame;
        $('.upload_custom_file_button').on('click', function(e){
            e.preventDefault();
            if(frame){
                frame.open();
                return;
            }
            frame = wp.media({
                title: 'Выберите файл',
                button: { text: 'Выбрать' },
                multiple: false
            });
            frame.on('select', function(){
                var attachment = frame.state().get('selection').first().toJSON();
                $('#my_theme_file_id').val(attachment.id);
                $('#file_name_display').text(attachment.title);
            });
            frame.open();
        });
    });
    </script>
    <?php
}

Чтобы работала кнопка добавления файла, нужно добавить функцию:

function my_enqueue_media_uploader() {
    wp_enqueue_media(); // подключение медиабиблиотеки
}
add_action('admin_enqueue_scripts', 'my_enqueue_media_uploader');