Although there are many plugins available that can handle the Theme Options in the Wordpress Backend, but still I would like to go with the Wordpress settings API, but even after reading so many tutorials I am feeling struck.
Is there anyone in our community who has handled Wordpress settings API.
I wish to achieve these things →
Create Theme Options settings in typography where I can handle typography(Font type, Font size selection etc) for H1, H2, H3, H4, H5, H6, strong, blockquote, p etc.
I can Import Google Fonts and they should be available to be applied in typography.
I have a basic understanding of theme-settings API such as →
I can create menus and sub menus through API →
function demo_add_options_page() {
// Introduces a new top-level menu page
add_menu_page(
'Demo Theme Options', // The text to be displayed in the browser title bar
'Demo Theme', // The text to be used for the menu
'manage_options', // The required capability of users to access this menu
'demo-theme-options', // The slug by which this menu item is accessible
'demo_theme_options_display' // The name of the function used to display the page content
);
// Introduce a submenu page specifically for the header options
add_submenu_page(
'demo-theme-options', // The slug for the parent menu page to which this sub menu belongs
'Header Options', // The text that's rendered in the browser title bar
'Header Options', // The text to be rendered in the menu
'manage_options', // The capability required to access this menu item
'header-options', // The slug by which this sub menu is identified
'demo_theme_options_display' // The function used to display this options for this menu's page
);
// Introduce a submenu page specifically for the footer options
add_submenu_page(
'demo-theme-options', // The slug for the parent menu page to which this sub menu belongs
'Footer Options', // The text that's rendered in the browser title bar
'Footer Options', // The text to be rendered in the menu
'manage_options', // The capability required to access this menu item
'footer-options', // The slug by which this sub menu is identified
'demo_theme_options_display' // The function used to display this options for this menu's page
);
} // end demo_add_options_page
add_action( 'admin_menu', 'demo_add_options_page' );
I can create sections and fields like this →
/*-----------------------------------------------*
* Sections, Settings, and Fields
/*-----------------------------------------------*
/**
* Registers a new settings field on the 'General Settings' page of the WordPress dashboard.
*/
function demo_initialize_theme_options() {
// Let's introduce a section for the header options
add_settings_section(
'header_section', // The ID to use for this section in attribute tags
'Header Options', // The title of the section rendered to the screen
'demo_theme_header_description_display', // The function used to render the options for this section
'demo-theme-header-options' // The ID of the page on which this section is rendered
);
// Let's introduce a section for the footer options
add_settings_field(
'display_header', // The ID (or the name) of the field
'Display Header Text', // The text used to label the field
'demo_header_text_display', // The callback function used to render the field
'demo-theme-header-options', // The page on which we'll be rendering this field
'header_section' // The section to which we're adding the setting
);
// Let's introduce a section to be rendered on the new options page
add_settings_section(
'footer_section', // The ID to use for this section in attribute tags
'Footer Options', // The title of the section rendered to the screen
'demo_theme_footer_description_display', // The function used to render the options for this section
'demo-theme-footer-options' // The ID of the page on which this section is rendered
);
// Define the settings field
add_settings_field(
'footer_message', // The ID (or the name) of the field
'Theme Footer Message', // The text used to label the field
'demo_footer_message_display', // The callback function used to render the field
'demo-theme-footer-options', // The page on which we'll be rendering this field
'footer_section' // The section to which we're adding the setting
);
// Register the settings for the header section
register_setting(
'header_section', // The name of the group of settings
'header_options', // The name of the actual option (or setting)
'demo_sanitize_header_options' // The callback to footer sanitization option
);
// Register the 'footer_message' setting with the 'General' section
register_setting(
'footer_section', // The name of the group of settings
'footer_options', // The name of the actual option (or setting)
'demo_sanitize_footer_options' // The callback to footer sanitization option
);
} // end demo_initialize_theme_options
add_action( 'admin_init', 'demo_initialize_theme_options' );
But now coming to what I want seems complicated to a beginer like me, and I am feeling lost. Perhaps If I have a sample code for my requirement then I can read and learn. Looking forward. Thanks!