Ví dụ cách viết header cho giao diện

Hướng dẫn viết code cho header trên giao diện mẫu của HocWP Team. Tập tin header sẽ nằm tại đường dẫn custom → views → module-site-header.php, ví dụ này dựa trên Bootstrap và Font Awesome được tải bởi plugin Bootstrap and Font Awesome by HocWP Team.

<div class="container">
	<div class="row">
		<div class="col-sm-12 col-md-3 col-lg-5 col-logo">
			<?php do_action( 'hocwp_theme_site_branding' ); ?>
			<button type="button" class="navbar-toggle visible-sm visible-xs" data-toggle="collapse"
			        data-target="#main-menu">
				<span class="sr-only"><?php _e( 'Toggle navigation', 'hocwp-theme' ); ?></span>
				<i class="fa fa-bars" aria-hidden="true"></i>
			</button>
		</div>
		<div class="col-sm-12 col-md-9 col-lg-7 col-btn-text">
			<div class="row">
				<?php
				global $hocwp_theme;
				$options = $hocwp_theme->options['general'];
				$ht      = isset( $options['header_text'] ) ? $options['header_text'] : '';
				$hb      = isset( $options['header_button'] ) ? $options['header_button'] : '';
				if ( ! empty( $hb ) && ! empty( $ht ) ) {
					?>
					<div class="col-sm-12 col-md-5 col-lg-4 header-button">
						<div class="pull-right">
							<?php echo wpautop( $hb ); ?>
						</div>
					</div>
					<div class="col-sm-12 col-md-7 col-lg-8 header-text">
						<div class="pull-right">
							<?php echo wpautop( $ht ); ?>
						</div>
					</div>
					<?php
				} else {
					if ( ! empty( $hb ) ) {
						?>
						<div class="col-md-12 header-button">
							<div class="pull-right">
								<?php echo wpautop( $hb ); ?>
							</div>
						</div>
						<?php
					}
					if ( ! empty( $ht ) ) {
						?>
						<div class="col-md-9 header-text">
							<div class="pull-right">
								<?php echo wpautop( $ht ); ?>
							</div>
						</div>
						<?php
					}
				}
				?>
			</div>
		</div>
	</div>
</div>