Custom Walker

  • Hi,

    By using wp_nav_menu i can create this standard structure:

    <nav class="header-menu">
	<ul>
		<li><a href="">Parent category</a>
			<ul class="sub-menu">
				<li><a href="">Child category 1</a></li>
				<li><a href="">Child category 2</a></li>
				<li><a href="">Child category 3</a></li>
			</ul>
		</li>
	</ul>
</nav>

    But i would like to know if it is possible to create this type of structure by using the custom Walker class?

    <nav id="header-menu">
	<ul>
		<li><a href="">Parent category</a>
			<div class="dropdown outer">
				<div class="inner">
					<section class="m-grid m-grid--divide-6 l-grid--divide-6">
						<div class="grid_unit l-grid_unit--span-2">
							<article class="list">
								<p>Child categories:</p>
								<ul class="sub-menu">
									<li><a href="">Child category 1</a></li>
									<li><a href="">Child category 2</a></li>
									<li><a href="">Child category 3</a></li>
								</ul>
							</article>
						</div>
						<div class="grid_unit">
							<article class="box">
								<article class="image"><img src=""></article>
										<article class="excerpt small"><span class="category">Category 1</span><a href="">The title</a></article>
									</article>
								</div>
								<div class="grid_unit">
									<article class="box">
										<article class="image"><img src=""></article>
										<article class="excerpt small"><span class="category">Category 2</span><a href="">The title</a></article>
									</article>
								</div>
<div class="grid_unit">
									<article class="box">
										<article class="image"><img src=""></article>
										<article class="excerpt small"><span class="category">Category 1</span><a href="">The title</a></article>
									</article>
								</div>
<div class="grid_unit">
									<article class="box">
										<article class="image"><img src=""></article>
										<article class="excerpt small"><span class="category">Category 2</span><a href="">The title</a></article>
									</article>
								</div>

							</section>
						</div>
					</div>
				</li>
</ul>
</nav>
Viewing 1 replies (of 1 total)
  • Thread Starter Tokant

    (@tokant)

    So basically, i need to put this code

    <div class="dropdown outer">
	<div class="inner">
		<section class="m-grid m-grid--divide-6 l-grid--divide-6">
			<div class="grid_unit l-grid_unit--span-2">
				<article class="list">
					<p>Child categories:</p>

    between:

    <a href="">Parent category</a>

    and the sub-menu with child categories:

    <ul class="sub-menu">
	<li><a href="">Child category 1</a></li>
	<li><a href="">Child category 2</a></li>
	<li><a href="">Child category 3</a></li>
</ul>

    and then add this after the sub-menu:

    </article>
	</div>
	<div class="grid_unit">
		<article class="box">
			<article class="image"><img src=""></article>
			<article class="excerpt small"><span class="category">Category 1</span><a href="">The title</a></article>
		</article>
	</div>
	<div class="grid_unit">
		<article class="box">
			<article class="image"><img src=""></article>
			<article class="excerpt small"><span class="category">Category 2</span><a href="">The title</a></article>
		</article>
	</div>
	<div class="grid_unit">
		<article class="box">
			<article class="image"><img src=""></article>
			<article class="excerpt small"><span class="category">Category 1</span><a href="">The title</a></article>
		</article>
	</div>
	<div class="grid_unit">
		<article class="box">
			<article class="image"><img src=""></article>
			<article class="excerpt small"><span class="category">Category 2</span><a href="">The title</a></article>
		</article>
	</div>

	</section>
</div>
</div>
Viewing 1 replies (of 1 total)
  • The topic ‘Custom Walker’ is closed to new replies.