✔ 1. Create Theme Folder
Go to:
/wp-content/themes/
Create a folder, e.g.:
mycustomtheme
________________________________________
✔ 2. Create Required Theme Files
Inside the folder, add:
style.css
index.php
functions.php
header.php
footer.php
________________________________________
✨ style.css
/*
Theme Name: My Custom Theme
Theme URI: https://yoursite.com
Author: Your Name
Version: 1.0
Description: A custom theme with admin options page.
*/
________________________________________
✨ index.php
<?php get_header(); ?>
<h2>Welcome to My Custom Theme with Options</h2>
<p>This content is styled dynamically using theme settings.</p>
<?php get_footer(); ?>
________________________________________
✨ header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body>
<header>
<h1><?php bloginfo('name'); ?></h1>
</header>
________________________________________
✨ footer.php
<footer>
<p>© <?php echo date('Y'); ?> My Custom Theme</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
________________________________________
________________________________________
✔ 3. Create Admin Configuration Page (Theme Options Page)
Open functions.php and add the following code:
________________________________________
✨ Add Menu Page
<?php
function mytheme_add_admin_page(){
add_menu_page(
'Theme Settings', // Page title
'Theme Settings', // Menu title
'manage_options', // Capability
'mytheme-settings', // Slug
'mytheme_settings_page',// Callback function
'dashicons-admin-customizer', // Icon
61
);
}
add_action('admin_menu', 'mytheme_add_admin_page');
________________________________________
✨ Create Input Form UI
function mytheme_settings_page() {
?>
<div class="wrap">
<h1>Theme Configuration</h1>
<form method="post" action="options.php">
<?php settings_fields('mytheme-settings-group'); ?>
<?php do_settings_sections('mytheme-settings-group'); ?>
<table class="form-table">
<tr>
<th>Background Color</th>
<td><input type="text" name="bg_color" value="<?php echo esc_attr(get_option('bg_color')); ?>" placeholder="#ffffff" /></td>
</tr>
<tr>
<th>Font Size (px)</th>
<td><input type="number" name="font_size" value="<?php echo esc_attr(get_option('font_size')); ?>" /></td>
</tr>
</table>
<?php submit_button(); ?>
</form>
</div>
<?php
}
________________________________________
✨ Register Fields in WordPress
function mytheme_register_settings(){
register_setting('mytheme-settings-group', 'bg_color');
register_setting('mytheme-settings-group', 'font_size');
}
add_action('admin_init', 'mytheme_register_settings');
________________________________________
________________________________________
✔ 4. Apply Saved Configuration in Theme Output
We apply options via dynamic CSS:
Add inside functions.php
function mytheme_dynamic_css() {
$bg = get_option('bg_color', '#ffffff');
$font = get_option('font_size', '16');
echo "
<style>
body {
background-color: {$bg};
font-size: {$font}px;
}
</style>
";
}
add_action('wp_head', 'mytheme_dynamic_css');
________________________________________
________________________________________
✔ 5. Activate Your Custom Theme
✔ Go to Appearance → Themes
✔ Click Activate on “My Custom Theme”
✔ Now visit:
➡ Admin Menu → Theme Settings
➡ Save background color & font size
➡ View website — see CSS applied dynamically 🎉
