Сегодня будем создавать меню в подвале сайта (футере, footer) в стандартной теме wordpress – Twenty Fifteen.

Скачать исходники для статьи можно ниже

Вот 3 этапа, которые необходимо выполнить для создания нижнего меню в футере сайта:

1. Регистрируем новое меню в файле functions.php.
2. Размещаем HTML код меню в файле footer.php.
3. Прописываем CSS стили для создаваемого нами меню в подвале сайта – в файле стилей – style.css.

В результате у нас получиться следующее меню:

Приступим же к созданию меню в подвале сайта, в теме Twenty Fifteen.

1. Регистрируем новое меню в файле functions.php.

Заходим в админку wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл functions.php, переходим в конец его кода и вставляем:

function footer_menu() {
 
register_nav_menu('footer-menu',__( 'Меню в подвале сайта' ));  
}
 
add_action( 'init', 'footer_menu' );

Теперь если вы перейдете в пункт “Внешний вид” и его подпункт “Меню”, а после создадите новое меню, то wordpress предложит вам указать его расположение уже из 3 областей темы:

2. Размещаем HTML код меню в файле footer.php.

Заходим в админку wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл footer.php ищем в нем следующую строчку:

<footer id="colophon" class="site-footer" role="contentinfo">

то есть ищем открывающий тег – footer – и после него вставляем следующий код:

<div id="navbar" class="navbar">
				<nav id="site-navigation" class="navigation footer-navigation" role="navigation">										
					<?php wp_nav_menu( array( 'theme_location' => 'footer-menu', 'menu_class' => 'footer-nav-menu', 'depth' =>'-1' ) ); ?>					
				</nav><!-- #site-navigation -->
			</div><!-- #navbar -->

3. Прописываем CSS стили для создаваемого нами нижнего меню в подвале – в файле стилей – style.css.

Заходим в админку wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл style.css и в конце его кода вставляем:

.footer-navigation {
	clear: both;
	margin: 0 auto;
	max-width: 1080px;
	min-height: 45px;
	position: relative;
}

ul.footer-nav-menu,
div.footer-nav-menu > ul {
	margin: 0;
	padding: 0 40px 0 0;
}

.footer-nav-menu li {
	display: inline-block;
	position: relative;
}

.footer-nav-menu li a {
	color: #141412;
	display: block;
	font-size: 15px;
	line-height: 1;
	padding: 15px 20px;
	text-decoration: none;
}

.footer-nav-menu li:hover > a,
.footer-nav-menu li a:hover,
.footer-nav-menu li:focus > a,
.footer-nav-menu li a:focus {
	background-color: rgba(20,20,20,0.8);
	color: #fff;
}



.footer-nav-menu .current_page_item > a
{
	color: #000000;
	font-weight: bold;
	font-style: italic;
}

.menu-toggle {
	display: none;
}

/* Navbar */
.navbar {
	background-color:rgba(240,240,240,0.8) ;
	margin: 0 auto 20px auto;
	max-width: 1600px;
	width: 100%;
	border-bottom:solid 2px rgba(200,200,200,0.8);
	}

PS: Можно создать дочернюю тему и производить все вышеуказанные действия по созданию нижнего меню непосредственно в ней.
О том как создать дочернюю тему в wordpress читайте здесь – “codex.wordpress.org/Дочерние_темы”