WordPress – List Categories Limit

I want to ask something which I don’t have any idea if its possible or not.

I will show you first as html to explain what I need.

<nav class="nav-categories">
<ul>
<li class="no-filter">
<a href="#"> <strong>Category Name</strong> <span class="count">25</span></a>
</li>
<li class="no-filter">
<a href="#"> <strong>Category Name</strong> <span class="count">25</span></a>
</li>
<li class="no-filter">
<a href="#"> <strong>Category Name</strong> <span class="count">25</span></a>
</li>
<li class="no-filter">
<a href="#"> <strong>Category Name</strong> <span class="count">25</span></a>
</li>
</ul>
 
<div class="hidden-content" id="hidden-categories">
<ul>
<li class="no-filter">
<a href="/category/38/massaggi" title="Massaggi">Category Name<span class="count">25</span></a>
</li>
<li class="no-filter">
<a href="/category/38/massaggi" title="Massaggi">Category Name<span class="count">25</span></a>
</li>
<li class="no-filter">
<a href="/category/38/massaggi" title="Massaggi">Category Name<span class="count">25</span></a>
</li>
<li class="no-filter">
<a href="/category/38/massaggi" title="Massaggi">Category Name<span class="count">25</span></a>
</li>
</ul>
</div>
                    
<button class="category-toggle" data-action="content-toggle" data-target="#hidden-categories" data-more="Display More Categories" data-less="Display Less Categories">Display All Categories</button>
</nav>

As you see on the code above there are 2 <ul> elements two menus, but one is visible and one is hidden which I can display hidden-content by clicking on the button.

With the code below I can display all WordPress categories but would be nice to know if its possible to display the half of categories in the first div and the other half in hidden-content class.

<?php
$categories = get_categories();
echo '<nav class="nav-categories"><ul>';
foreach($categories as $category) { 
echo '<li class="no-filter"><a href="' . get_category_link( $category->term_id ) . '">' . $category->name.''; 
echo '<span class="count">' . $category->count . '</span>';
echo '</a></li>';
} 
echo '</ul></nav>';
?>

Answer

Yes it is possible, and there are many ways to achieve this, probably the easiest and fastest is (this is extremely naive and I just added a few additions and modifications to your code, the concept is just find the index that is half the array length), this should work assuming your originally code works, if it doesn’t then I’m sure you can understand the concept.

<?php
$categories = get_categories();
$firstNav = "";
$secondNav = "<div class="hidden-content" id="hidden-categories">";
echo '<nav class="nav-categories"><ul>';
$maxIndex = count($categories) - 1;
$half = floor($maxIndex / 2); //To get the middle of the array, or you can use ceil();
$curIndex = 0;
foreach($categories as $category) { 
if ($curIndex <= $half) {
$firstHalf .= '<li class="no-filter"><a href="' . get_category_link( $category->term_id ) . '">' . $category->name.''; 
$firstHalf .= '<span class="count">' . $category->count . '</span>';
$firstHalf .= '</a></li>';
}
else {
$secondHalf .= '<li class="no-filter"><a href="' . get_category_link( $category->term_id ) . '">' . $category->name.''; 
$secondHalf .= '<span class="count">' . $category->count . '</span>';
$secondHalf .= '</a></li>';
}
$curIndex++;
} 
$firstHalf .= "</ul>";
$secondHalf .= "</div>";
echo $firstHalf;
echo $secondHalf;
echo '</ul></nav>';
?>

Advertisement

Answer