{"id":248,"date":"2025-07-27T06:40:55","date_gmt":"2025-07-27T06:40:55","guid":{"rendered":"https:\/\/mitalgoswami.in\/?p=248"},"modified":"2025-07-27T06:54:06","modified_gmt":"2025-07-27T06:54:06","slug":"anatomy-of-a-theme-header-php-footer-php-and-sidebar-php","status":"publish","type":"post","link":"https:\/\/mitalgoswami.in\/?p=248","title":{"rendered":"Anatomy of a Theme: header.php, footer.php and sidebar.php"},"content":{"rendered":"\n

In WordPress, themes are modular. The files header.php<\/code>, footer.php<\/code>, and sidebar.php<\/code> form the basic structure of a page layout<\/strong>. Together, they help break up the page into reusable components.<\/p>\n\n\n\n

\n\n\n\n

Anatomy of a Theme<\/h2>\n\n\n\n

Common Template Parts:<\/h3>\n\n\n\n
File<\/th>Purpose<\/th><\/tr><\/thead>
header.php<\/code><\/td>Top section: metadata, site title, logo, navigation, etc.<\/td><\/tr>
footer.php<\/code><\/td>Bottom section: copyright, footer nav, scripts, etc.<\/td><\/tr>
sidebar.php<\/code><\/td>Sidebar: widgets, categories, search, recent posts, etc.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n

1. header.php<\/code><\/h3>\n\n\n\n

Purpose<\/strong>: Contains everything from the top of the page to the start of content\u2014like <!DOCTYPE><\/code>, <head><\/code>, logo, menu.<\/p>\n\n\n\n

Example:<\/h4>\n\n\n\n
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset=\"<?php bloginfo('charset'); ?>\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
  <title><?php bloginfo('name'); ?><\/title>
  <?php wp_head(); ?>
<\/head>
<body <?php body_class(); ?>>
  <header>
    <h1><a href=\"<?php echo home_url(); ?>\"><?php bloginfo('name'); ?><\/a><\/h1>
    <p><?php bloginfo('description'); ?><\/p>
    <nav>
      <?php wp_nav_menu(['theme_location' => 'main-menu']); ?>
    <\/nav>
  <\/header>
<\/code><\/pre>\n\n\n\n
 In your main template (index.php<\/code>, page.php<\/code>, etc.), load it with:<\/p>\n\n\n\n
<?php get_header(); ?>
<\/code><\/pre>\n\n\n\n
\n\n\n\n
 2. footer.php<\/code><\/h3>\n\n\n\n
Purpose<\/strong>: Bottom part of the page. Contains closing tags, footer widgets, and wp_footer()<\/code> (important for plugins and scripts).<\/p>\n\n\n\n
Example:<\/h4>\n\n\n\n
 <footer>
    <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.<\/p>
  <\/footer>
  <?php wp_footer(); ?>
<\/body>
<\/html>
<\/code><\/pre>\n\n\n\n
 Include it in templates using:<\/p>\n\n\n\n
<?php get_footer(); ?>
<\/code><\/pre>\n\n\n\n
\n\n\n\n
 3. sidebar.php<\/code><\/h3>\n\n\n\n
Purpose<\/strong>: Optional side panel, usually used for widgets, search, recent posts, etc.<\/p>\n\n\n\n
Example:<\/h4>\n\n\n\n
<aside id=\"sidebar\" class=\"widget-area\">
  <?php if ( is_active_sidebar( 'main-sidebar' ) ) : ?>
    <?php dynamic_sidebar( 'main-sidebar' ); ?>
  <?php else : ?>
    <p>Add widgets via Appearance > Widgets.<\/p>
  <?php endif; ?>
<\/aside>
<\/code><\/pre>\n\n\n\n
\u2705 Register Sidebar in functions.php<\/code><\/strong>:<\/p>\n\n\n\n
function mytheme_widgets_init() {
  register_sidebar([
    'name' => 'Main Sidebar',
    'id' => 'main-sidebar',
    'before_widget' => '<section class=\"widget\">',
    'after_widget'  => '<\/section>',
    'before_title'  => '<h2 class=\"widget-title\">',
    'after_title'   => '<\/h2>',
  ]);
}
add_action('widgets_init', 'mytheme_widgets_init');
<\/code><\/pre>\n\n\n\n
 Add in templates using:<\/p>\n\n\n\n
<?php get_sidebar(); ?>
<\/code><\/pre>\n\n\n\n
\n\n\n\n
 Summary Diagram<\/h2>\n\n\n\n
[ header.php ]
    \u2191
[ index.php \/ page.php \/ single.php ]
    \u2193
[ sidebar.php ]        [ footer.php ]<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
In WordPress, themes are modular. The files header.php, footer.php, and sidebar.php form the basic structure of a page layout. Together, they help break up the page into reusable components. Anatomy of a Theme Common Template Parts: File Purpose header.php Top section: metadata, site title, logo, navigation, etc. footer.php Bottom section: copyright, footer nav, scripts, etc. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,2],"tags":[],"class_list":["post-248","post","type-post","status-publish","format-standard","hentry","category-unit-5","category-wordpress"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/mitalgoswami.in\/index.php?rest_route=\/wp\/v2\/posts\/248","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mitalgoswami.in\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mitalgoswami.in\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mitalgoswami.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mitalgoswami.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=248"}],"version-history":[{"count":2,"href":"https:\/\/mitalgoswami.in\/index.php?rest_route=\/wp\/v2\/posts\/248\/revisions"}],"predecessor-version":[{"id":255,"href":"https:\/\/mitalgoswami.in\/index.php?rest_route=\/wp\/v2\/posts\/248\/revisions\/255"}],"wp:attachment":[{"href":"https:\/\/mitalgoswami.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=248"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mitalgoswami.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=248"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mitalgoswami.in\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}