header.php

harun.bspt2014@gmail.com

WordPress header.php template: semantic HTML5 structure, accessibility, SEO-ready hooks, menu/search support, skip links, schema-ready attributes, and safe WordPress escaping.

In rx-theme/header.php you can add semantic HTML5 structure, accessibility, SEO-ready markup, WordPress hooks, menu, logo, search, mobile navigation, breadcrumbs area, schema attributes, preload-friendly structure, and performance-safe header layout.

Place this file here:

rx-theme/header.php

Use this advanced header.php code:

<?php
/**
 * Header template for RX Theme.
 *
 * @package RX_Theme
 */

defined( 'ABSPATH' ) || exit;

$rx_site_name        = get_bloginfo( 'name' );
$rx_site_description = get_bloginfo( 'description' );
$rx_home_url         = home_url( '/' );
$rx_is_front_page    = is_front_page() && is_home();
$rx_has_custom_logo  = has_custom_logo();

$rx_header_classes = array(
	'rx-site-header',
	'rx-header',
	'rx-header--semantic',
);

if ( $rx_has_custom_logo ) {
	$rx_header_classes[] = 'rx-header--has-logo';
} else {
	$rx_header_classes[] = 'rx-header--text-logo';
}

if ( is_user_logged_in() ) {
	$rx_header_classes[] = 'rx-header--logged-in';
}

$rx_header_class = implode( ' ', array_map( 'sanitize_html_class', $rx_header_classes ) );
?>
<!doctype html>
<html <?php language_attributes(); ?> class="no-js">
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
		<link rel="pingback" href="<?php echo esc_url( get_bloginfo( 'pingback_url' ) ); ?>">
	<?php endif; ?>

	<?php
	/**
	 * Very important WordPress hook.
	 * Plugins, SEO tools, analytics, styles, scripts, preload tags,
	 * schema, and many other features use this hook.
	 */
	wp_head();
	?>
</head>

<body <?php body_class( 'rx-body' ); ?> itemscope itemtype="https://schema.org/WebPage">

<?php
/**
 * Required WordPress body hook.
 * Important for plugins, Google Tag Manager, accessibility tools,
 * analytics, and WordPress core scripts.
 */
wp_body_open();
?>

<a class="rx-skip-link screen-reader-text" href="#rx-main-content">
	<?php esc_html_e( 'Skip to main content', 'rx-theme' ); ?>
</a>

<div id="rx-page" class="rx-page site" data-theme="default">

	<header
		id="rx-site-header"
		class="<?php echo esc_attr( $rx_header_class ); ?>"
		role="banner"
		itemscope
		itemtype="https://schema.org/WPHeader"
	>

		<div class="rx-header__topbar" aria-label="<?php esc_attr_e( 'Top information bar', 'rx-theme' ); ?>">
			<div class="rx-container rx-header__topbar-inner">

				<div class="rx-header__topbar-left">
					<?php if ( $rx_site_description ) : ?>
						<p class="rx-site-description">
							<?php echo esc_html( $rx_site_description ); ?>
						</p>
					<?php endif; ?>
				</div>

				<div class="rx-header__topbar-right">
					<nav
						class="rx-top-navigation"
						aria-label="<?php esc_attr_e( 'Top menu', 'rx-theme' ); ?>"
					>
						<?php
						if ( has_nav_menu( 'top' ) ) {
							wp_nav_menu(
								array(
									'theme_location' => 'top',
									'menu_id'        => 'rx-top-menu',
									'menu_class'     => 'rx-top-menu',
									'container'      => false,
									'depth'          => 1,
									'fallback_cb'    => false,
								)
							);
						}
						?>
					</nav>
				</div>

			</div>
		</div>

		<div class="rx-header__main">
			<div class="rx-container rx-header__main-inner">

				<div class="rx-branding" itemscope itemtype="https://schema.org/Organization">

					<?php if ( $rx_has_custom_logo ) : ?>
						<div class="rx-branding__logo" itemprop="logo">
							<?php the_custom_logo(); ?>
						</div>
					<?php endif; ?>

					<div class="rx-branding__text">

						<?php if ( $rx_is_front_page ) : ?>
							<h1 class="rx-site-title" itemprop="name">
								<a href="<?php echo esc_url( $rx_home_url ); ?>" rel="home" itemprop="url">
									<?php echo esc_html( $rx_site_name ); ?>
								</a>
							</h1>
						<?php else : ?>
							<p class="rx-site-title" itemprop="name">
								<a href="<?php echo esc_url( $rx_home_url ); ?>" rel="home" itemprop="url">
									<?php echo esc_html( $rx_site_name ); ?>
								</a>
							</p>
						<?php endif; ?>

						<?php if ( $rx_site_description ) : ?>
							<p class="rx-site-tagline">
								<?php echo esc_html( $rx_site_description ); ?>
							</p>
						<?php endif; ?>

					</div>
				</div>

				<div class="rx-header__actions">

					<button
						id="rx-mobile-menu-toggle"
						class="rx-menu-toggle"
						type="button"
						aria-controls="rx-primary-menu"
						aria-expanded="false"
					>
						<span class="rx-menu-toggle__icon" aria-hidden="true"></span>
						<span class="rx-menu-toggle__text">
							<?php esc_html_e( 'Menu', 'rx-theme' ); ?>
						</span>
					</button>

					<button
						id="rx-search-toggle"
						class="rx-search-toggle"
						type="button"
						aria-controls="rx-header-search"
						aria-expanded="false"
					>
						<span aria-hidden="true">🔍</span>
						<span class="screen-reader-text">
							<?php esc_html_e( 'Open search', 'rx-theme' ); ?>
						</span>
					</button>

					<button
						id="rx-theme-toggle"
						class="rx-theme-toggle"
						type="button"
						aria-label="<?php esc_attr_e( 'Toggle dark mode', 'rx-theme' ); ?>"
					>
						<span aria-hidden="true">🌓</span>
					</button>

				</div>

			</div>
		</div>

		<nav
			id="rx-site-navigation"
			class="rx-primary-navigation"
			role="navigation"
			aria-label="<?php esc_attr_e( 'Primary menu', 'rx-theme' ); ?>"
			itemscope
			itemtype="https://schema.org/SiteNavigationElement"
		>
			<div class="rx-container rx-primary-navigation__inner">

				<?php
				if ( has_nav_menu( 'primary' ) ) {
					wp_nav_menu(
						array(
							'theme_location' => 'primary',
							'menu_id'        => 'rx-primary-menu',
							'menu_class'     => 'rx-primary-menu',
							'container'      => false,
							'depth'          => 3,
							'fallback_cb'    => false,
						)
					);
				} else {
					wp_page_menu(
						array(
							'menu_class' => 'rx-primary-menu rx-page-menu',
							'before'     => '<ul id="rx-primary-menu" class="rx-primary-menu rx-page-menu">',
							'after'      => '</ul>',
						)
					);
				}
				?>

			</div>
		</nav>

		<section
			id="rx-header-search"
			class="rx-header-search"
			aria-label="<?php esc_attr_e( 'Header search form', 'rx-theme' ); ?>"
			hidden
		>
			<div class="rx-container rx-header-search__inner">
				<?php get_search_form(); ?>
			</div>
		</section>

		<?php if ( function_exists( 'rx_breadcrumbs' ) && ! is_front_page() ) : ?>
			<nav
				class="rx-breadcrumbs-wrap"
				aria-label="<?php esc_attr_e( 'Breadcrumb navigation', 'rx-theme' ); ?>"
			>
				<div class="rx-container">
					<?php rx_breadcrumbs(); ?>
				</div>
			</nav>
		<?php endif; ?>

	</header>

	<?php if ( is_front_page() ) : ?>
		<section
			class="rx-hero rx-hero--front-page"
			aria-labelledby="rx-hero-title"
			itemscope
			itemtype="https://schema.org/WebSite"
		>
			<div class="rx-container rx-hero__inner">

				<div class="rx-hero__content">
					<h2 id="rx-hero-title" class="rx-hero__title" itemprop="name">
						<?php echo esc_html( $rx_site_name ); ?>
					</h2>

					<?php if ( $rx_site_description ) : ?>
						<p class="rx-hero__description" itemprop="description">
							<?php echo esc_html( $rx_site_description ); ?>
						</p>
					<?php endif; ?>

					<form
						role="search"
						method="get"
						class="rx-hero-search"
						action="<?php echo esc_url( home_url( '/' ) ); ?>"
						itemprop="potentialAction"
						itemscope
						itemtype="https://schema.org/SearchAction"
					>
						<meta itemprop="target" content="<?php echo esc_url( home_url( '/?s={search_term_string}' ) ); ?>">

						<label class="screen-reader-text" for="rx-hero-search-field">
							<?php esc_html_e( 'Search this website', 'rx-theme' ); ?>
						</label>

						<input
							id="rx-hero-search-field"
							type="search"
							name="s"
							class="rx-hero-search__field"
							placeholder="<?php esc_attr_e( 'Search articles...', 'rx-theme' ); ?>"
							value="<?php echo esc_attr( get_search_query() ); ?>"
							itemprop="query-input"
							required
						>

						<button type="submit" class="rx-hero-search__button">
							<?php esc_html_e( 'Search', 'rx-theme' ); ?>
						</button>
					</form>
				</div>

			</div>
		</section>
	<?php endif; ?>

	<div id="rx-content" class="rx-content site-content">

		<main
			id="rx-main-content"
			class="rx-main site-main"
			role="main"
			tabindex="-1"
		>

At the end of your footer.php, before wp_footer();, you should close the opened tags like this:

		</main>
	</div><!-- #rx-content -->

	<footer id="rx-site-footer" class="rx-site-footer" role="contentinfo">
		<div class="rx-container">
			<p>
				&copy; <?php echo esc_html( date_i18n( 'Y' ) ); ?>
				<?php bloginfo( 'name' ); ?>.
				<?php esc_html_e( 'All rights reserved.', 'rx-theme' ); ?>
			</p>
		</div>
	</footer>

</div><!-- #rx-page -->

<?php wp_footer(); ?>

</body>
</html>

For this header to work perfectly, add these menu registrations in your theme setup file, for example:

<?php
/**
 * Register RX Theme menus.
 */

defined( 'ABSPATH' ) || exit;

function rx_theme_register_menus() {
	register_nav_menus(
		array(
			'primary' => esc_html__( 'Primary Menu', 'rx-theme' ),
			'top'     => esc_html__( 'Top Menu', 'rx-theme' ),
			'footer'  => esc_html__( 'Footer Menu', 'rx-theme' ),
			'social'  => esc_html__( 'Social Menu', 'rx-theme' ),
		)
	);
}
add_action( 'after_setup_theme', 'rx_theme_register_menus' );

Add this small JavaScript for mobile menu, search toggle, and dark mode. Best place:

rx-theme/assets/js/header.js
(function () {
	'use strict';

	const menuToggle = document.getElementById('rx-mobile-menu-toggle');
	const primaryMenu = document.getElementById('rx-primary-menu');
	const searchToggle = document.getElementById('rx-search-toggle');
	const searchBox = document.getElementById('rx-header-search');
	const themeToggle = document.getElementById('rx-theme-toggle');
	const page = document.getElementById('rx-page');

	if (menuToggle && primaryMenu) {
		menuToggle.addEventListener('click', function () {
			const expanded = menuToggle.getAttribute('aria-expanded') === 'true';

			menuToggle.setAttribute('aria-expanded', String(!expanded));
			primaryMenu.classList.toggle('is-open');
			document.body.classList.toggle('rx-mobile-menu-open');
		});
	}

	if (searchToggle && searchBox) {
		searchToggle.addEventListener('click', function () {
			const expanded = searchToggle.getAttribute('aria-expanded') === 'true';

			searchToggle.setAttribute('aria-expanded', String(!expanded));
			searchBox.hidden = expanded;

			if (!expanded) {
				const input = searchBox.querySelector('input[type="search"]');
				if (input) {
					input.focus();
				}
			}
		});
	}

	if (themeToggle && page) {
		const savedTheme = localStorage.getItem('rx-theme-mode');

		if (savedTheme) {
			page.setAttribute('data-theme', savedTheme);
		}

		themeToggle.addEventListener('click', function () {
			const currentTheme = page.getAttribute('data-theme') || 'default';
			const nextTheme = currentTheme === 'dark' ? 'default' : 'dark';

			page.setAttribute('data-theme', nextTheme);
			localStorage.setItem('rx-theme-mode', nextTheme);
		});
	}

	document.documentElement.classList.remove('no-js');
	document.documentElement.classList.add('js');
})();

Enqueue the JS in inc/core/enqueue.php or functions.php:

function rx_theme_enqueue_header_script() {
	wp_enqueue_script(
		'rx-header',
		get_template_directory_uri() . '/assets/js/header.js',
		array(),
		wp_get_theme()->get( 'Version' ),
		true
	);
}
add_action( 'wp_enqueue_scripts', 'rx_theme_enqueue_header_script' );

And add this basic CSS to your style.css or assets/css/header.css:

.rx-container {
	width: min(100% - 32px, 1200px);
	margin-inline: auto;
}

.rx-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 99999;
	padding: 10px 14px;
	background: #fff;
	color: #000;
	border-radius: 6px;
}

.rx-skip-link:focus {
	top: 16px;
}

.rx-site-header {
	position: relative;
	z-index: 100;
	background: var(--rx-header-bg, #ffffff);
	color: var(--rx-header-color, #111827);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.rx-header__topbar {
	font-size: 14px;
	background: #f8fafc;
}

.rx-header__topbar-inner,
.rx-header__main-inner,
.rx-primary-navigation__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.rx-header__main {
	padding-block: 18px;
}

.rx-branding {
	display: flex;
	align-items: center;
	gap: 14px;
}

.rx-site-title {
	margin: 0;
	font-size: clamp(24px, 4vw, 36px);
	line-height: 1.15;
	font-weight: 800;
}

.rx-site-title a {
	color: inherit;
	text-decoration: none;
}

.rx-site-tagline,
.rx-site-description {
	margin: 0;
	color: #475569;
}

.rx-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.rx-menu-toggle,
.rx-search-toggle,
.rx-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	background: #ffffff;
	border-radius: 999px;
	cursor: pointer;
}

.rx-menu-toggle__icon {
	width: 18px;
	height: 2px;
	background: currentColor;
	position: relative;
	display: inline-block;
}

.rx-menu-toggle__icon::before,
.rx-menu-toggle__icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: currentColor;
}

.rx-menu-toggle__icon::before {
	top: -6px;
}

.rx-menu-toggle__icon::after {
	top: 6px;
}

.rx-primary-navigation {
	background: #ffffff;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.rx-primary-menu {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rx-primary-menu a {
	display: block;
	padding-block: 14px;
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}

.rx-primary-menu a:hover,
.rx-primary-menu a:focus {
	text-decoration: underline;
}

.rx-header-search {
	padding-block: 16px;
	background: #f8fafc;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.rx-hero {
	padding-block: clamp(48px, 8vw, 110px);
	background: linear-gradient(135deg, #f8fafc, #eef2ff);
}

.rx-hero__title {
	margin: 0 0 14px;
	font-size: clamp(34px, 7vw, 72px);
	line-height: 1.05;
}

.rx-hero__description {
	max-width: 760px;
	font-size: clamp(18px, 2vw, 22px);
	color: #475569;
}

.rx-hero-search {
	display: flex;
	max-width: 720px;
	margin-top: 28px;
}

.rx-hero-search__field {
	flex: 1;
	min-height: 52px;
	padding-inline: 16px;
	border: 1px solid #cbd5e1;
	border-radius: 12px 0 0 12px;
}

.rx-hero-search__button {
	min-height: 52px;
	padding-inline: 24px;
	border: 0;
	border-radius: 0 12px 12px 0;
	background: #111827;
	color: #ffffff;
	font-weight: 700;
	cursor: pointer;
}

[data-theme="dark"] {
	--rx-header-bg: #020617;
	--rx-header-color: #f8fafc;
	background: #020617;
	color: #f8fafc;
}

[data-theme="dark"] .rx-header__topbar,
[data-theme="dark"] .rx-primary-navigation,
[data-theme="dark"] .rx-header-search {
	background: #0f172a;
}

[data-theme="dark"] .rx-site-tagline,
[data-theme="dark"] .rx-site-description {
	color: #cbd5e1;
}

@media (max-width: 768px) {
	.rx-header__topbar-inner,
	.rx-header__main-inner,
	.rx-primary-navigation__inner {
		align-items: stretch;
	}

	.rx-header__topbar {
		display: none;
	}

	.rx-primary-menu {
		display: none;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 0;
	}

	.rx-primary-menu.is-open {
		display: flex;
	}

	.rx-primary-menu a {
		padding: 14px 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	}

	.rx-hero-search {
		flex-direction: column;
	}

	.rx-hero-search__field,
	.rx-hero-search__button {
		border-radius: 12px;
	}

	.rx-hero-search__button {
		margin-top: 10px;
	}
}

This header.php gives your RX Theme:

Semantic HTML5 header, topbar, logo branding, primary navigation, mobile menu, search toggle, dark mode toggle, skip link, schema-friendly attributes, hero search on homepage, breadcrumb support, WordPress hooks, SEO plugin compatibility, accessibility support, and safe escaping.

rx-theme/ ├── functions.php ├── style.css ├── index.php ├── header.php ├── footer.php │ ├── inc/ │ ├── core/ │ │ ├── theme-setup.php │ │ ├── enqueue.php │ │ ├── menus.php │ │ ├── sidebars.php │ │ ├── image-sizes.php │ │ └── cleanup.php │ │ │ ├── helpers/ │ │ ├── template-functions.php │ │ ├── sanitization.php │ │ ├── breadcrumbs.php │ │ ├── reading-time.php │ │ ├── related-posts.php │ │ ├── pagination.php │ │ └── schema.php │ │ │ ├── seo/ │ │ ├── meta-tags.php │ │ ├── canonical.php │ │ ├── sitemap.php │ │ ├── robots.php │ │ ├── schema-article.php │ │ └── indexnow.php │ │ │ ├── performance/ │ │ ├── preload.php │ │ ├── preconnect.php │ │ ├── cache-headers.php │ │ ├── lazy-loading.php │ │ ├── defer-scripts.php │ │ └── critical-css.php │ │ │ ├── security/ │ │ ├── hardening.php │ │ ├── uploads.php │ │ ├── rest-api.php │ │ └── login-security.php │ │ │ ├── options/ │ │ ├── customizer.php │ │ ├── theme-options.php │ │ ├── color-options.php │ │ ├── typography-options.php │ │ └── layout-options.php │ │ │ ├── admin/ │ │ ├── admin-page.php │ │ ├── dashboard-widgets.php │ │ ├── system-status.php │ │ └── notice.php │ │ │ ├── builders/ │ │ ├── header-builder.php │ │ ├── footer-builder.php │ │ ├── layout-builder.php │ │ ├── sidebar-builder.php │ │ └── hook-builder.php │ │ │ ├── post-types/ │ │ ├── portfolio.php │ │ ├── medical-library.php │ │ ├── review-board.php │ │ ├── glossary.php │ │ └── faq.php │ │ │ ├── taxonomies/ │ │ ├── medical-category.php │ │ ├── disease-type.php │ │ └── article-level.php │ │ │ ├── shortcodes/ │ │ ├── buttons.php │ │ ├── alerts.php │ │ ├── medical-boxes.php │ │ ├── faq.php │ │ └── table-of-contents.php │ │ │ ├── widgets/ │ │ ├── recent-posts-widget.php │ │ ├── related-posts-widget.php │ │ ├── medical-toc-widget.php │ │ └── author-box-widget.php │ │ │ ├── ajax/ │ │ ├── load-more.php │ │ ├── live-search.php │ │ ├── filter-posts.php │ │ └── newsletter.php │ │ │ ├── woocommerce/ │ │ ├── woocommerce-setup.php │ │ ├── product-layout.php │ │ ├── cart.php │ │ └── checkout.php │ │ │ └── integrations/ │ ├── rank-math.php │ ├── yoast.php │ ├── elementor.php │ ├── gutenberg.php │ └── cloudflare.php in this box where i will add theme setup file

Add the theme setup file here:

rx-theme/inc/core/theme-setup.php

This file is for the main WordPress theme support features, such as:

title-tag
post-thumbnails
custom-logo
custom-background
custom-header
HTML5 support
editor styles
wide alignment
responsive embeds
automatic feed links
translation textdomain

Your structure is already correct:

rx-theme/
├── functions.php
│
├── inc/
│   ├── core/
│   │   ├── theme-setup.php  ✅ add theme setup code here
│   │   ├── enqueue.php
│   │   ├── menus.php
│   │   ├── sidebars.php
│   │   ├── image-sizes.php
│   │   └── cleanup.php

In your functions.php, load it like this:

<?php
/**
 * RX Theme functions.
 *
 * @package RX_Theme
 */

defined( 'ABSPATH' ) || exit;

define( 'RX_THEME_VERSION', wp_get_theme()->get( 'Version' ) );
define( 'RX_THEME_DIR', get_template_directory() );
define( 'RX_THEME_URI', get_template_directory_uri() );

require_once RX_THEME_DIR . '/inc/core/theme-setup.php';
require_once RX_THEME_DIR . '/inc/core/enqueue.php';
require_once RX_THEME_DIR . '/inc/core/menus.php';
require_once RX_THEME_DIR . '/inc/core/sidebars.php';
require_once RX_THEME_DIR . '/inc/core/image-sizes.php';
require_once RX_THEME_DIR . '/inc/core/cleanup.php';

Then inside:

rx-theme/inc/core/theme-setup.php

add this:

<?php
/**
 * Theme setup functions.
 *
 * @package RX_Theme
 */

defined( 'ABSPATH' ) || exit;

if ( ! function_exists( 'rx_theme_setup' ) ) :

	function rx_theme_setup() {

		/*
		 * Make theme available for translation.
		 */
		load_theme_textdomain( 'rx-theme', get_template_directory() . '/languages' );

		/*
		 * Add default posts and comments RSS feed links to head.
		 */
		add_theme_support( 'automatic-feed-links' );

		/*
		 * Let WordPress manage the document title.
		 */
		add_theme_support( 'title-tag' );

		/*
		 * Enable featured images.
		 */
		add_theme_support( 'post-thumbnails' );

		/*
		 * Enable custom logo.
		 */
		add_theme_support(
			'custom-logo',
			array(
				'height'      => 120,
				'width'       => 420,
				'flex-height' => true,
				'flex-width'  => true,
			)
		);

		/*
		 * Enable HTML5 markup.
		 */
		add_theme_support(
			'html5',
			array(
				'search-form',
				'comment-form',
				'comment-list',
				'gallery',
				'caption',
				'style',
				'script',
				'navigation-widgets',
			)
		);

		/*
		 * Gutenberg editor support.
		 */
		add_theme_support( 'align-wide' );
		add_theme_support( 'responsive-embeds' );
		add_theme_support( 'wp-block-styles' );
		add_theme_support( 'editor-styles' );

		/*
		 * WooCommerce basic support.
		 */
		add_theme_support( 'woocommerce' );

		add_theme_support(
			'wc-product-gallery-zoom'
		);

		add_theme_support(
			'wc-product-gallery-lightbox'
		);

		add_theme_support(
			'wc-product-gallery-slider'
		);

		/*
		 * Custom background support.
		 */
		add_theme_support(
			'custom-background',
			array(
				'default-color' => 'ffffff',
				'default-image' => '',
			)
		);

		/*
		 * Custom header support.
		 */
		add_theme_support(
			'custom-header',
			array(
				'default-image'      => '',
				'default-text-color' => '111827',
				'width'             => 1920,
				'height'            => 420,
				'flex-width'        => true,
				'flex-height'       => true,
			)
		);

		/*
		 * Register navigation menus.
		 * You may also keep this in inc/core/menus.php.
		 */
		register_nav_menus(
			array(
				'primary' => esc_html__( 'Primary Menu', 'rx-theme' ),
				'top'     => esc_html__( 'Top Menu', 'rx-theme' ),
				'footer'  => esc_html__( 'Footer Menu', 'rx-theme' ),
				'social'  => esc_html__( 'Social Menu', 'rx-theme' ),
			)
		);
	}

endif;

add_action( 'after_setup_theme', 'rx_theme_setup' );

But since your structure already has:

inc/core/menus.php

the cleaner way is:

theme-setup.php = theme supports only
menus.php = register menus only

So best professional structure:

inc/core/theme-setup.php  ✅ add_theme_support()
inc/core/menus.php        ✅ register_nav_menus()
inc/core/enqueue.php      ✅ CSS/JS loading
inc/core/sidebars.php     ✅ widget areas
inc/core/image-sizes.php  ✅ image sizes
inc/core/cleanup.php      ✅ remove unnecessary WordPress output

rx-theme/assets/js/header.js i can not find

You cannot find it because in your folder structure you did not create the assets/ folder yet.

Create it manually inside your theme:

rx-theme/
├── assets/
│   ├── js/
│   │   └── header.js
│   ├── css/
│   │   └── header.css
│   └── images/

So the full path will be:

rx-theme/assets/js/header.js

Step 1: Create folders

Inside your rx-theme folder, create:

assets

Inside assets, create:

js
css
images

Then inside js, create this file:

header.js

Step 2: Add this code inside header.js

(function () {
	'use strict';

	const menuToggle = document.getElementById('rx-mobile-menu-toggle');
	const primaryMenu = document.getElementById('rx-primary-menu');
	const searchToggle = document.getElementById('rx-search-toggle');
	const searchBox = document.getElementById('rx-header-search');
	const themeToggle = document.getElementById('rx-theme-toggle');
	const page = document.getElementById('rx-page');

	if (menuToggle && primaryMenu) {
		menuToggle.addEventListener('click', function () {
			const expanded = menuToggle.getAttribute('aria-expanded') === 'true';

			menuToggle.setAttribute('aria-expanded', String(!expanded));
			primaryMenu.classList.toggle('is-open');
			document.body.classList.toggle('rx-mobile-menu-open');
		});
	}

	if (searchToggle && searchBox) {
		searchToggle.addEventListener('click', function () {
			const expanded = searchToggle.getAttribute('aria-expanded') === 'true';

			searchToggle.setAttribute('aria-expanded', String(!expanded));
			searchBox.hidden = expanded;

			if (!expanded) {
				const input = searchBox.querySelector('input[type="search"]');

				if (input) {
					input.focus();
				}
			}
		});
	}

	if (themeToggle && page) {
		const savedTheme = localStorage.getItem('rx-theme-mode');

		if (savedTheme) {
			page.setAttribute('data-theme', savedTheme);
		}

		themeToggle.addEventListener('click', function () {
			const currentTheme = page.getAttribute('data-theme') || 'default';
			const nextTheme = currentTheme === 'dark' ? 'default' : 'dark';

			page.setAttribute('data-theme', nextTheme);
			localStorage.setItem('rx-theme-mode', nextTheme);
		});
	}

	document.documentElement.classList.remove('no-js');
	document.documentElement.classList.add('js');
})();

Step 3: Load it from inc/core/enqueue.php

Open:

rx-theme/inc/core/enqueue.php

Add this:

<?php
/**
 * Enqueue RX Theme styles and scripts.
 *
 * @package RX_Theme
 */

defined( 'ABSPATH' ) || exit;

function rx_theme_enqueue_assets() {

	wp_enqueue_style(
		'rx-theme-style',
		get_stylesheet_uri(),
		array(),
		wp_get_theme()->get( 'Version' )
	);

	wp_enqueue_script(
		'rx-header',
		get_template_directory_uri() . '/assets/js/header.js',
		array(),
		wp_get_theme()->get( 'Version' ),
		true
	);
}
add_action( 'wp_enqueue_scripts', 'rx_theme_enqueue_assets' );

Your final folder should look like this:

rx-theme/
├── functions.php
├── style.css
├── header.php
├── footer.php
├── index.php
│
├── assets/
│   ├── js/
│   │   └── header.js ✅
│   ├── css/
│   └── images/
│
├── inc/
│   ├── core/
│   │   ├── theme-setup.php
│   │   ├── enqueue.php ✅
│   │   ├── menus.php
│   │   ├── sidebars.php
│   │   ├── image-sizes.php
│   │   └── cleanup.php

So yes, my friend — you just need to create assets/js/header.js yourself. It is not a default WordPress file.

Leave a Reply

Your email address will not be published. Required fields are marked *