First, write theme_customizer_options after that use code like logo upload, theme_customizer_options and more …
Example :
// In your theme options panel or customizer settings
// Register Theme Customizer Options
function theme_customizer_options($wp_customize) {
// Footer Description
footer logo code ---
$wp_customize->add_setting('custom_logo');
$wp_customize->add_control(
new WP_Customize_Image_Control(
$wp_customize,
'custom_logo',
array(
'label' => 'Upload Custom Logo',
'section' => 'title_tagline',
'settings' => 'custom_logo',
)
)
);
// other code ---
///other code--
}
add_action('customize_register', 'theme_customizer_options');Logo Upload
- Logo Upload
- Implement a theme option that allows users to upload a custom logo for their website. Provide a file upload field in the theme options panel and use the uploaded image as the site’s logo.
Function.php
// In your theme options panel or customizer settings
$wp_customize->add_setting('custom_logo');
$wp_customize->add_control(
new WP_Customize_Image_Control(
$wp_customize,
'custom_logo',
array(
'label' => 'Upload Custom Logo',
'section' => 'title_tagline',
'settings' => 'custom_logo',
)
)
);
In Template file
- Appropriate Section:
<header>or wherever the logo is displayed.
<?php
$custom_logo_id = get_theme_mod('custom_logo');
$logo_url = wp_get_attachment_image_url($custom_logo_id, 'full');
if ($logo_url) {
echo '<img src="' . esc_url($logo_url) . '" alt="Custom Logo">';
} else {
echo '<h1>' . get_bloginfo('name') . '</h1>';
}
?>
theme_customizer_options
- Color Scheme Selection
- Allow users to choose from predefined color schemes for their website. Create a dropdown or radio button field in the theme options panel to select a color scheme and apply the chosen colors to various elements of the theme.
Function.php
// In your theme options panel or customizer settings
$wp_customize->add_setting('color_scheme');
$wp_customize->add_control(
'color_scheme',
array(
'label' => 'Select Color Scheme',
'section' => 'colors',
'type' => 'select',
'choices' => array(
'default' => 'Default',
'blue' => 'Blue',
'green' => 'Green',
),
)
);
In Template file
<?php
$color_scheme = get_theme_mod('color_scheme', 'default');
echo '<div class="content" style="background-color: ' . esc_attr($color_scheme) . ';">';
// Rest of the content
echo '</div>';
?>
Typography Options
- Typography Options
- Provide options to customize the typography of the theme. Allow users to select font families, sizes, weights, and other typography settings through the theme options panel.
Function.php
// In your theme options panel or customizer settings
$wp_customize->add_setting('font_family');
$wp_customize->add_control(
'font_family',
array(
'label' => 'Font Family',
'section' => 'typography',
'type' => 'select',
'choices' => array(
'arial' => 'Arial',
'helvetica' => 'Helvetica',
'times' => 'Times New Roman',
),
)
);
In Template file
<?php
$font_family = get_theme_mod('font_family', 'arial');
echo '<style>';
echo 'body { font-family: ' . esc_attr($font_family) . '; }';
echo '</style>';
?>
Background Image
- Background Image
- Enable users to set a custom background image for their website. Implement a file upload field in the theme options panel and apply the uploaded image as the background for the site.
Function.php
// In your theme options panel or customizer settings
$wp_customize->add_setting('background_image');
$wp_customize->add_control(
new WP_Customize_Image_Control(
$wp_customize,
'background_image',
array(
'label' => 'Upload Background Image',
'section' => 'background_image',
'settings' => 'background_image',
)
)
);
In Template file
<?php
$background_image = get_theme_mod('background_image');
if ($background_image) {
echo '<style>';
echo 'body { background-image: url("' . esc_url($background_image) . '"); }';
echo '</style>';
}
?>
Header Layout
- Header Layout
- Offer different header layout options to users. Allow them to choose from different header styles, such as a centered logo, a left-aligned logo, or a full-width header, through the theme options panel.
Function.php
// In your theme options panel or customizer settings
$wp_customize->add_setting('header_layout');
$wp_customize->add_control(
'header_layout',
array(
'label' => 'Select Header Layout',
'section' => 'header',
'type' => 'select',
'choices' => array(
'centered' => 'Centered Logo',
'left' => 'Left-aligned Logo',
'full-width' => 'Full-width Header',
),
)
);
In Template file
<?php
$header_layout = get_theme_mod('header_layout', 'centered');
if ($header_layout === 'centered') {
// Centered logo layout
} elseif ($header_layout === 'left') {
// Left-aligned logo layout
} elseif ($header_layout === 'full-width') {
// Full-width header layout
}
?>
Footer Customization
- Footer Customization
- Allow users to customize the footer section of their website. Provide options to add custom text, social media links, or even widget areas in the footer through the theme options panel.
Function.php
// In your theme options panel or customizer settings
$wp_customize->add_setting('footer_text');
$wp_customize->add_control(
'footer_text',
array(
'label' => 'Custom Footer Text',
'section' => 'footer',
'type' => 'textarea',
)
);
In Template file
<?php
$footer_text = get_theme_mod('footer_text');
if ($footer_text) {
echo '<p>' . esc_html($footer_text) . '</p>';
}
?>
Custom CSS
- Custom CSS
- Include a textarea field in the theme options panel where users can enter custom CSS code to override or modify the default styles of the theme.
Function.php
// In your theme options panel or customizer settings
$wp_customize->add_setting('custom_css');
$wp_customize->add_control(
'custom_css',
array(
'label' => 'Custom CSS',
'section' => 'custom_css',
'type' => 'textarea',
)
);
In Template file
<?php
$custom_css = get_theme_mod('custom_css');
if ($custom_css) {
echo '<style>';
echo wp_kses_post($custom_css);
echo '</style>';
}
?>
Featured Content
- Featured Content
- Implement an option to highlight specific posts or pages as featured content. Allow users to select which content should be displayed prominently on the homepage or in a dedicated section of the theme.
Function.php
// In your theme options panel or customizer settings
$wp_customize->add_setting('featured_content');
$wp_customize->add_control(
'featured_content',
array(
'label' => 'Select Featured Content',
'section' => 'homepage',
'type' => 'select',
'choices' => array(
'post' => 'Latest Posts',
'page' => 'Specific Page',
),
)
);
In Template file
<?php
$featured_content_type = get_theme_mod('featured_content', 'post');
if ($featured_content_type === 'post') {
// Display latest posts as featured content
} elseif ($featured_content_type === 'page') {
// Display a specific page as featured content
}
?>
Page Layouts
- Page Layouts
- Provide options to choose different page layouts for individual pages. Offer options for full-width, sidebar-left, or sidebar-right layouts through the page editor or theme options panel.
Function.php
// In your theme options panel or customizer settings
$wp_customize->add_setting('page_layout');
$wp_customize->add_control(
'page_layout',
array(
'label' => 'Select Page Layout',
'section' => 'page',
'type' => 'select',
'choices' => array(
'full-width' => 'Full Width',
'sidebar-left' => 'Sidebar Left',
'sidebar-right' => 'Sidebar Right',
),
)
);
Social Media Integration
- Social Media Integration
- Allow users to enter their social media profile URLs in the theme options panel. Display social media icons in the header or footer of the theme, linking to the respective profiles.
Function.php
// In your theme options panel or customizer settings
$wp_customize->add_setting('social_facebook');
$wp_customize->add_control(
'social_facebook',
array(
'label' => 'Facebook URL',
'section' => 'social_media',
'type' => 'text',
)
);
Custom Widgets
- Custom Widgets
- Include custom widgets in the theme that users can add to their widgetized areas. Provide options to configure these widgets through the WordPress Customizer or theme options panel.
Function.php
// Register custom widget areas in your theme's functions.php
function custom_widgets_init() {
register_sidebar(
array(
'name' => 'Custom Widget Area',
'id' => 'custom_widget_area',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
)
);
}
add_action('widgets_init', 'custom_widgets_init');
<?php dynamic_sidebar('custom_widget_area'); ?>
Custom Post Types and Taxonomies
- Custom Post Types and Taxonomies
- Implement options to enable/disable specific custom post types and taxonomies. Allow users to choose which post types or taxonomies should be active on their site through the theme options panel.
Function.php
// Register custom post type in your theme's functions.php
function custom_post_type() {
register_post_type(
'custom_post',
array(
'labels' => array(
'name' => 'Custom Posts',
'singular_name' => 'Custom Post',
),
'public' => true,
'has_archive' => true,
)
);
}
add_action('init', 'custom_post_type');
Slider Options
- Slider Options
- Offer options to configure a featured slider on the homepage. Allow users to select the slider’s content, animation effects, timing, and other settings through the theme options panel.
Function.php
// In your theme options panel or customizer settings
$wp_customize->add_setting('slider_options');
$wp_customize->add_control(
'slider_options',
array(
'label' => 'Slider Options',
'section' => 'homepage',
'type' => 'checkbox',
'choices' => array(
'autoplay' => 'Enable Autoplay',
'arrows' => 'Display Navigation Arrows',
'dots' => 'Display Pagination Dots',
),
)
);
Breadcrumb Navigation
- Breadcrumb Navigation
- Provide options to enable/disable breadcrumb navigation on the site. Allow users to choose whether they want to display breadcrumb trails for improved navigation through the theme options panel.
Function.php
// In your theme options panel or customizer settings
$wp_customize->add_setting('breadcrumb_navigation');
$wp_customize->add_control(
'breadcrumb_navigation',
array(
'label' => 'Breadcrumb Navigation',
'section' => 'header',
'type' => 'checkbox',
'choices' => array(
'enabled' => 'Enable Breadcrumb Navigation',
),
)
);
Footer Copyright Text
- Footer Copyright Text
- Allow users to enter their desired copyright text for the footer. Include a text field in the theme options panel to let users customize the copyright notice displayed at the bottom of the site.
Function.php
// In your theme options panel or customizer settings
$wp_customize->add_setting('footer_copyright');
$wp_customize->add_control(
'footer_copyright',
array(
'label' => 'Footer Copyright Text',
'section' => 'footer',
'type' => 'text',
)
);
