Cara menambahkan area menu navigasi pada header tema WordPress

Jika kamu mengembangkan tema/template WordPress, tentunya kamu butuh menampilkan menu navigasi pada header template kamu. Nah, kamu bakal butuh script ini:

//Header Menu Hook, for functions.php of your theme
function myplugin_header_navigation(){
	register_nav_menu('myplugin-headernavigation',__('Header Navigation'));
}

add_action('init', 'myplugin_header_navigation');

Script di atas perlu ditambahkan pada fungtions.php dalam direktori template yang kamu buat. Lalu, tambahkan ini pada bagian header template kamu:

//Showing Header Menu, for header block of your theme
wp_nav_menu(array(
	'theme_location' => 'myplugin-headernavigation',
	'container_class' => 'header-menu'
));

Adapun untuk styling menu navigasi, mungkin css ini bisa membantu:

/*Header Menu*/

.header-menu ul {
	margin: 0;
	list-style: none;
	padding: 0;
}

.header-menu ul li {
	float: left;
	line-height: 38px;
	margin: 0 1px;
	position: relative;
}

.header-menu ul li a {
	margin: 0 1px;
	padding: 0 15px;
	color: #5d5c5c;
	font-weight: 600;
	display: block;
}

.header-menu .sub-menu li a,
.header-menu ul.children li a {
	line-height: 1.5;
	padding: 10px 15px;
}

.header-menu ul li:hover>a,
.header-menu ul li.current-menu-item>a,
.header-menu ul li.current_page_item>a,
.header-menu ul li.current-menu-ancestor>a,
.header-menu ul li.focus>a {
	color: #0e365a;
}

.header-menu ul.sub-menu,
.header-menu ul.children {
	background: #f2f2f2 none repeat scroll 0 0;
	min-width: 200px;
	position: absolute;
	top: 100%;
	z-index: 99;
	left: -9999rem;
	opacity: 0;
	-webkit-transform: translateY(0.6rem);
	-ms-transform: translateY(0.6rem);
	-o-transform: translateY(0.6rem);
	transform: translateY(0.6rem);
	-webkit-transition: opacity 0.15s linear, transform 0.15s ease, left 0s 0.15s;
	-o-transition: opacity 0.15s linear, transform 0.15s ease, left 0s 0.15s;
	transition: opacity 0.15s linear, transform 0.15s ease, left 0s 0.15s;
}

.header-menu ul li:hover>ul.sub-menu,
.header-menu ul li:hover>ul.children,
.header-menu ul li.focus>ul.sub-menu,
.header-menu ul li.focus>ul.children {
	left: 0;
	opacity: 1;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition: opacity 0.15s linear, transform 0.15s ease, right 0s 0.15s;
	-o-transition: opacity 0.15s linear, transform 0.15s ease, right 0s 0.15s;
	transition: opacity 0.15s linear, transform 0.15s ease, right 0s 0.15s;
}

.header-menu ul.sub-menu li,
.header-menu ul.children li {
	float: none;
	display: block;
	border-bottom: 1px solid #e1e1e1;
}

.header-menu ul.sub-menu li:last-child,
.header-menu ul.children li:last-child {
	border: none;
}

.header-menu ul.sub-menu li ul,
.header-menu ul.children li ul {
	right: 9999em;
	left: auto !important;
	top: 0% !important;
	-webkit-transition: opacity 0.15s linear, transform 0.15s ease, right 0s 0.15s;
	-o-transition: opacity 0.15s linear, transform 0.15s ease, right 0s 0.15s;
	transition: opacity 0.15s linear, transform 0.15s ease, right 0s 0.15s;
}

.header-menu ul.sub-menu li:hover>ul,
.header-menu ul.children li:hover>ul,
.header-menu ul.sub-menu li.focus>ul,
.header-menu ul.children li.focus>ul {
	right: -100%;
	left: auto !important;
	top: 0% !important;
	-webkit-transition: opacity 0.15s linear, transform 0.15s ease, left 0s 0.15s;
	-o-transition: opacity 0.15s linear, transform 0.15s ease, left 0s 0.15s;
	transition: opacity 0.15s linear, transform 0.15s ease, left 0s 0.15s;
}

.header-menu li.menu-item-has-children>a:after,
.header-menu li.page_item_has_children>a:after {
	content: "\f107";
	font-family: FontAwesome;
	position: absolute;
	right: 15px;
	top: 2px;
}

.header-menu ul.sub-menu li.menu-item-has-children>a::after,
.header-menu ul.sub-menu li.page_item_has_children>a::after {
	top: 10px;
}

.header-menu ul.sub-menu li.menu-item-has-children>a:after,
.header-menu ul.children li.page_item_has_children>a:after {
	content: "\f105";
}

.header-menu ul li.menu-item-has-children a,
.header-menu ul li.page_item_has_children a {
	margin-right: 15px;
}
/*End of Header Menu*/

Contohnya seperti di video ini: