footer.php

In footer.php we can include many useful footer features, but the most important rule is: footer.php must stay safe, clean, SEO-friendly, and must always include wp_footer();.

Below is an advanced footer.php for your RX Theme.

<?php
/**
 * The template for displaying the footer
 *
 * @package RX_Theme
 * @version 1.0.0
 */

defined( 'ABSPATH' ) || exit;

/**
 * Footer settings fallback.
 * You can later move these options to Customizer or theme options.
 */
$rx_footer_logo_id       = get_theme_mod( 'rx_footer_logo' );
$rx_footer_description   = get_theme_mod(
	'rx_footer_description',
	'RxHarun is dedicated to evidence-based health education, medical awareness, wellness guidance, and a global war against illness.'
);
$rx_footer_copyright     = get_theme_mod(
	'rx_footer_copyright',
	sprintf(
		'Copyright © %s %s. All rights reserved.',
		date_i18n( 'Y' ),
		get_bloginfo( 'name' )
	)
);
$rx_footer_show_back_top = get_theme_mod( 'rx_footer_back_to_top', true );
$rx_footer_show_social   = get_theme_mod( 'rx_footer_social_links', true );
$rx_footer_show_search   = get_theme_mod( 'rx_footer_search', true );
$rx_footer_show_schema   = get_theme_mod( 'rx_footer_schema', true );
?>

		<?php
		/**
		 * Hook before main site footer.
		 *
		 * Useful for:
		 * - Newsletter section
		 * - CTA banner
		 * - App download area
		 * - Footer ad slot
		 */
		do_action( 'rx_before_footer' );
		?>

		<footer id="colophon" class="rx-site-footer site-footer" role="contentinfo" itemscope itemtype="https://schema.org/WPFooter">

			<?php do_action( 'rx_footer_start' ); ?>

			<div class="rx-footer-main">
				<div class="rx-container rx-footer-grid">

					<section class="rx-footer-brand" aria-labelledby="rx-footer-brand-title">
						<h2 id="rx-footer-brand-title" class="screen-reader-text">
							<?php echo esc_html( get_bloginfo( 'name' ) ); ?>
						</h2>

						<?php if ( ! empty( $rx_footer_logo_id ) ) : ?>
							<a class="rx-footer-logo" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" aria-label="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
								<?php
								echo wp_get_attachment_image(
									$rx_footer_logo_id,
									'medium',
									false,
									array(
										'class'    => 'rx-footer-logo-img',
										'loading'  => 'lazy',
										'decoding' => 'async',
										'alt'      => esc_attr( get_bloginfo( 'name' ) ),
									)
								);
								?>
							</a>
						<?php elseif ( has_custom_logo() ) : ?>
							<div class="rx-footer-logo">
								<?php the_custom_logo(); ?>
							</div>
						<?php else : ?>
							<a class="rx-footer-site-title" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
								<?php echo esc_html( get_bloginfo( 'name' ) ); ?>
							</a>
						<?php endif; ?>

						<?php if ( ! empty( $rx_footer_description ) ) : ?>
							<p class="rx-footer-description">
								<?php echo esc_html( $rx_footer_description ); ?>
							</p>
						<?php endif; ?>

						<?php if ( $rx_footer_show_search ) : ?>
							<div class="rx-footer-search" role="search">
								<?php get_search_form(); ?>
							</div>
						<?php endif; ?>

						<?php if ( $rx_footer_show_social ) : ?>
							<nav class="rx-footer-social" aria-label="<?php esc_attr_e( 'Social media links', 'rx-theme' ); ?>">
								<ul class="rx-social-list">
									<?php
									$rx_social_links = array(
										'facebook'  => get_theme_mod( 'rx_social_facebook' ),
										'x-twitter' => get_theme_mod( 'rx_social_twitter' ),
										'linkedin'  => get_theme_mod( 'rx_social_linkedin' ),
										'youtube'   => get_theme_mod( 'rx_social_youtube' ),
										'instagram' => get_theme_mod( 'rx_social_instagram' ),
										'pinterest' => get_theme_mod( 'rx_social_pinterest' ),
										'telegram'  => get_theme_mod( 'rx_social_telegram' ),
										'whatsapp'  => get_theme_mod( 'rx_social_whatsapp' ),
									);

									foreach ( $rx_social_links as $rx_social_name => $rx_social_url ) :
										if ( empty( $rx_social_url ) ) {
											continue;
										}
										?>
										<li class="rx-social-item rx-social-<?php echo esc_attr( sanitize_html_class( $rx_social_name ) ); ?>">
											<a href="<?php echo esc_url( $rx_social_url ); ?>" target="_blank" rel="noopener noreferrer nofollow" aria-label="<?php echo esc_attr( ucfirst( str_replace( '-', ' ', $rx_social_name ) ) ); ?>">
												<span aria-hidden="true"><?php echo esc_html( ucfirst( str_replace( '-', ' ', $rx_social_name ) ) ); ?></span>
											</a>
										</li>
									<?php endforeach; ?>
								</ul>
							</nav>
						<?php endif; ?>
					</section>

					<?php if ( is_active_sidebar( 'footer-1' ) ) : ?>
						<aside class="rx-footer-widget-area rx-footer-widget-1" aria-label="<?php esc_attr_e( 'Footer widget area one', 'rx-theme' ); ?>">
							<?php dynamic_sidebar( 'footer-1' ); ?>
						</aside>
					<?php endif; ?>

					<?php if ( is_active_sidebar( 'footer-2' ) ) : ?>
						<aside class="rx-footer-widget-area rx-footer-widget-2" aria-label="<?php esc_attr_e( 'Footer widget area two', 'rx-theme' ); ?>">
							<?php dynamic_sidebar( 'footer-2' ); ?>
						</aside>
					<?php endif; ?>

					<?php if ( is_active_sidebar( 'footer-3' ) ) : ?>
						<aside class="rx-footer-widget-area rx-footer-widget-3" aria-label="<?php esc_attr_e( 'Footer widget area three', 'rx-theme' ); ?>">
							<?php dynamic_sidebar( 'footer-3' ); ?>
						</aside>
					<?php endif; ?>

					<?php if ( is_active_sidebar( 'footer-4' ) ) : ?>
						<aside class="rx-footer-widget-area rx-footer-widget-4" aria-label="<?php esc_attr_e( 'Footer widget area four', 'rx-theme' ); ?>">
							<?php dynamic_sidebar( 'footer-4' ); ?>
						</aside>
					<?php endif; ?>

				</div>
			</div>

			<?php if ( has_nav_menu( 'footer' ) || has_nav_menu( 'privacy' ) ) : ?>
				<div class="rx-footer-navigation-wrap">
					<div class="rx-container">

						<?php if ( has_nav_menu( 'footer' ) ) : ?>
							<nav class="rx-footer-menu" aria-label="<?php esc_attr_e( 'Footer menu', 'rx-theme' ); ?>">
								<?php
								wp_nav_menu(
									array(
										'theme_location' => 'footer',
										'menu_class'     => 'rx-footer-menu-list',
										'container'      => false,
										'depth'          => 2,
										'fallback_cb'    => false,
									)
								);
								?>
							</nav>
						<?php endif; ?>

						<?php if ( has_nav_menu( 'privacy' ) ) : ?>
							<nav class="rx-footer-privacy-menu" aria-label="<?php esc_attr_e( 'Privacy menu', 'rx-theme' ); ?>">
								<?php
								wp_nav_menu(
									array(
										'theme_location' => 'privacy',
										'menu_class'     => 'rx-footer-privacy-list',
										'container'      => false,
										'depth'          => 1,
										'fallback_cb'    => false,
									)
								);
								?>
							</nav>
						<?php endif; ?>

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

			<div class="rx-footer-bottom">
				<div class="rx-container rx-footer-bottom-inner">

					<div class="rx-footer-copyright">
						<p>
							<?php echo wp_kses_post( $rx_footer_copyright ); ?>
						</p>
					</div>

					<div class="rx-footer-credit">
						<p>
							<?php
							printf(
								esc_html__( 'Powered by %1$s and designed for %2$s.', 'rx-theme' ),
								'<a href="' . esc_url( 'https://wordpress.org/' ) . '" rel="nofollow noopener" target="_blank">WordPress</a>',
								'<strong>' . esc_html( get_bloginfo( 'name' ) ) . '</strong>'
							);
							?>
						</p>
					</div>

				</div>
			</div>

			<?php do_action( 'rx_footer_end' ); ?>

		</footer>

		<?php
		/**
		 * Hook after footer.
		 *
		 * Useful for:
		 * - Cookie notice
		 * - Floating CTA
		 * - WhatsApp button
		 * - Sticky mobile bottom bar
		 */
		do_action( 'rx_after_footer' );
		?>

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

	<?php if ( $rx_footer_show_back_top ) : ?>
		<button id="rx-back-to-top" class="rx-back-to-top" type="button" aria-label="<?php esc_attr_e( 'Back to top', 'rx-theme' ); ?>">
			<span aria-hidden="true"></span>
		</button>
	<?php endif; ?>

	<?php
	/**
	 * Optional footer schema.
	 * This helps search engines understand your website identity.
	 */
	if ( $rx_footer_show_schema ) :

		$rx_schema = array(
			'@context'    => 'https://schema.org',
			'@type'       => 'Organization',
			'name'        => get_bloginfo( 'name' ),
			'url'         => home_url( '/' ),
			'description' => get_bloginfo( 'description' ),
		);

		if ( has_custom_logo() ) {
			$rx_custom_logo_id = get_theme_mod( 'custom_logo' );
			$rx_logo_url       = wp_get_attachment_image_url( $rx_custom_logo_id, 'full' );

			if ( $rx_logo_url ) {
				$rx_schema['logo'] = esc_url_raw( $rx_logo_url );
			}
		}

		$rx_same_as = array();

		if ( ! empty( $rx_social_links ) && is_array( $rx_social_links ) ) {
			foreach ( $rx_social_links as $rx_social_url ) {
				if ( ! empty( $rx_social_url ) ) {
					$rx_same_as[] = esc_url_raw( $rx_social_url );
				}
			}
		}

		if ( ! empty( $rx_same_as ) ) {
			$rx_schema['sameAs'] = array_values( array_unique( $rx_same_as ) );
		}
		?>
		<script type="application/ld+json" class="rx-footer-schema">
			<?php echo wp_json_encode( $rx_schema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT ); ?>
		</script>
	<?php endif; ?>

	<noscript>
		<style>
			.rx-back-to-top {
				display: none !important;
			}
		</style>
	</noscript>

	<script>
		(function () {
			'use strict';

			var backToTopButton = document.getElementById('rx-back-to-top');

			if (backToTopButton) {
				var toggleBackToTop = function () {
					if (window.scrollY > 400) {
						backToTopButton.classList.add('is-visible');
					} else {
						backToTopButton.classList.remove('is-visible');
					}
				};

				window.addEventListener('scroll', toggleBackToTop, { passive: true });

				backToTopButton.addEventListener('click', function () {
					window.scrollTo({
						top: 0,
						behavior: 'smooth'
					});
				});

				toggleBackToTop();
			}

			document.documentElement.classList.add('rx-js-enabled');
		})();
	</script>

	<?php
	/**
	 * Very important.
	 * Never remove wp_footer().
	 * WordPress, plugins, analytics, scripts, block editor, WooCommerce,
	 * security plugins, and performance plugins need this hook.
	 */
	wp_footer();
	?>

</body>
</html>

For this footer to work perfectly, add these widget areas and menus inside your theme setup file or functions.php:

<?php
/**
 * RX Theme footer widget areas and menus.
 */

defined( 'ABSPATH' ) || exit;

function rx_register_footer_menus() {
	register_nav_menus(
		array(
			'footer'  => esc_html__( 'Footer Menu', 'rx-theme' ),
			'privacy' => esc_html__( 'Privacy Menu', 'rx-theme' ),
		)
	);
}
add_action( 'after_setup_theme', 'rx_register_footer_menus' );

function rx_register_footer_sidebars() {
	$footer_sidebars = array(
		'footer-1' => esc_html__( 'Footer Column 1', 'rx-theme' ),
		'footer-2' => esc_html__( 'Footer Column 2', 'rx-theme' ),
		'footer-3' => esc_html__( 'Footer Column 3', 'rx-theme' ),
		'footer-4' => esc_html__( 'Footer Column 4', 'rx-theme' ),
	);

	foreach ( $footer_sidebars as $id => $name ) {
		register_sidebar(
			array(
				'name'          => $name,
				'id'            => $id,
				'description'   => esc_html__( 'Add footer widgets here.', 'rx-theme' ),
				'before_widget' => '<section id="%1$s" class="rx-footer-widget widget %2$s">',
				'after_widget'  => '</section>',
				'before_title'  => '<h3 class="rx-footer-widget-title">',
				'after_title'   => '</h3>',
			)
		);
	}
}
add_action( 'widgets_init', 'rx_register_footer_sidebars' );

And add this CSS to your style.css:

.rx-site-footer {
	background: #0f172a;
	color: #e5e7eb;
	font-size: 16px;
	line-height: 1.7;
}

.rx-site-footer a {
	color: #ffffff;
	text-decoration: none;
}

.rx-site-footer a:hover,
.rx-site-footer a:focus {
	text-decoration: underline;
}

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

.rx-footer-main {
	padding: 64px 0 40px;
}

.rx-footer-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.rx-footer-brand {
	grid-column: span 1;
}

.rx-footer-site-title {
	display: inline-block;
	font-size: 28px;
	font-weight: 800;
	margin-bottom: 16px;
}

.rx-footer-logo-img {
	max-width: 180px;
	height: auto;
	display: block;
	margin-bottom: 16px;
}

.rx-footer-description {
	margin: 0 0 24px;
	color: #cbd5e1;
}

.rx-footer-search {
	margin-top: 20px;
}

.rx-footer-widget-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 16px;
	color: #ffffff;
}

.rx-footer-widget ul,
.rx-footer-menu-list,
.rx-footer-privacy-list,
.rx-social-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.rx-footer-widget li,
.rx-footer-menu-list li,
.rx-footer-privacy-list li {
	margin-bottom: 8px;
}

.rx-social-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.rx-social-list a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 14px;
}

.rx-footer-navigation-wrap {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	padding: 18px 0;
}

.rx-footer-menu-list,
.rx-footer-privacy-list {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
}

.rx-footer-privacy-menu {
	margin-top: 12px;
	font-size: 14px;
}

.rx-footer-bottom {
	padding: 24px 0;
}

.rx-footer-bottom-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.rx-footer-bottom p {
	margin: 0;
	color: #cbd5e1;
}

.rx-back-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 999px;
	background: #111827;
	color: #ffffff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.rx-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 1024px) {
	.rx-footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.rx-footer-grid {
		grid-template-columns: 1fr;
	}

	.rx-footer-bottom-inner {
		justify-content: center;
		text-align: center;
	}

	.rx-footer-menu-list,
	.rx-footer-privacy-list {
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
}

This footer.php includes:

Footer logo, footer description, search form, social links, 4 widget columns, footer menu, privacy menu, copyright, WordPress credit, schema JSON-LD, back-to-top button, accessibility labels, safe escaping, lazy image loading, hooks for future development, and required wp_footer() support.

Leave a Reply

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