WordPress.org

Forums

Custom Walker (2 posts)

  1. Tokant
    Member
    Posted 1 year ago #

    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>
  2. Tokant
    Member
    Posted 1 year ago #

    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>

Topic Closed

This topic has been closed to new replies.

About this Topic