Castos Options Page Example

castos-options.php

<?php
// Options page for Castots Mega menu icons
class CastosMegaMenu {
	private $castos_mega_menu_options;
    
	public function __construct() {
		add_action( 'admin_menu', array( $this, 'castos_mega_menu_add_plugin_page' ) );
		add_action( 'admin_init', array( $this, 'castos_mega_menu_page_init' ) );
	}

	public function castos_mega_menu_add_plugin_page() {
		add_theme_page(
			'Castos Mega Menu', // page_title
			'Castos Mega Menu', // menu_title
			'manage_options', // capability
			'castos-mega-menu', // menu_slug
			array( $this, 'castos_mega_menu_create_admin_page' ) // function
		);
	}

	public function castos_mega_menu_create_admin_page() {
		$this->castos_mega_menu_options = get_option( 'castos_mega_menu_option_name' ); ?>

		<div class="wrap">
			<h2>Castos Mega Menu</h2>
			<p>This is a test options page</p>
			<?php settings_errors(); ?>

			<form method="post" action="options.php">
				<?php
					settings_fields( 'castos_mega_menu_option_group' );
					do_settings_sections( 'castos-mega-menu-admin' );
					submit_button();
				?>
			</form>
		</div>
	<?php
        
    }

	public function castos_mega_menu_page_init() {
		register_setting(
			'castos_mega_menu_option_group', // option_group
			'castos_mega_menu_option_name', // option_name
			array( $this, 'castos_mega_menu_sanitize' ) // sanitize_callback
		);

		add_settings_section(
			'castos_mega_menu_setting_section', // id
			'Settings', // title
			array( $this, 'castos_mega_menu_section_info' ), // callback
			'castos-mega-menu-admin' // page
		);

		add_settings_field(
			'svg_sprite_url_0', // id
			'SVG Sprite URL', // title
			array( $this, 'svg_sprite_url_0_callback' ), // callback
			'castos-mega-menu-admin', // page
			'castos_mega_menu_setting_section' // section
		);
	}

	public function castos_mega_menu_sanitize($input) {
		$sanitary_values = array();
		if ( isset( $input['svg_sprite_url_0'] ) ) {
			$sanitary_values['svg_sprite_url_0'] = sanitize_text_field( $input['svg_sprite_url_0'] );
		}

		return $sanitary_values;
	}

	public function castos_mega_menu_section_info() {
		$castos_mega_menu_options = get_option( 'castos_mega_menu_option_name' ); // Array of All Options
        $svg_sprite_url_0 = $castos_mega_menu_options['svg_sprite_url_0']; // SVG Sprite URL
        if ($svg_sprite_url_0) {
            $dom = new DomDocument();
            $dom->load($svg_sprite_url_0);
            $symbols = $dom->getElementsByTagName('symbol');
            echo '<div class="icons-container">';
            foreach ($symbols as $symbol) {
                $symbol_ref = substr($symbol->getAttribute('id'), 5);
                echo '<div class="icons-item"><svg width="40px" height="40px" class="icon"><use xlink:href="'.$svg_sprite_url_0.'#icon-'. $symbol_ref .'"></use></svg><span>', $symbol_ref , '</span></div>';
            }
            echo '</div>';
            echo '<style>
            .icons-container {display: flex; flex-wrap: wrap;}.icons-item{flex-basis: 250px; display: flex; align-items: center; padding: 10px; background-color: #fff; margin: 0 10px 10px 0;}.icons-item svg{margin-right: 20px;}
            </style>';
            ;
        }
	}

	public function svg_sprite_url_0_callback() {
		printf(
			'<input class="regular-text" type="text" name="castos_mega_menu_option_name[svg_sprite_url_0]" id="svg_sprite_url_0" value="%s">',
			isset( $this->castos_mega_menu_options['svg_sprite_url_0'] ) ? esc_attr( $this->castos_mega_menu_options['svg_sprite_url_0']) : ''
		);
	}
    

}
if ( is_admin() ) {
	$castos_mega_menu = new CastosMegaMenu();
}