Archived topic
menu above posts
7 replies · Started by Anil on May 4, 2020
Hi
I intend to have a menu above posts on homepage like in https://www.wpexplorer.com/blog/
Please advise
Hi there,
i provide a solution for that here - starting from #2:
Thanks David, trying to implement that.
1. how to add current-menu-item class for that particular category page.
2. how to center the menu....
Best regards.
1. Update the PHP in your Hook to this:
<?php
$cat_args = array(
'orderby' => 'name',
'order' => 'asc',
'hide_empty' => true,
);
$post_categories = get_terms( 'category', $cat_args );
if ( ! empty( $post_categories ) ) {
echo '<div class="post-cat-nav-container">
<span class="post-nav-title">Categories</span>
<ul class="post-cat-nav">';
foreach ( $post_categories as $key => $category ) {
$currentClass = ( is_category( $category->name ) ) ? 'current' : '';
printf(
'<li>
<a class="%1$s" href="%2$s">
%3$s
</a>
</li>',
$currentClass,
get_term_link( $category ),
$category->name
);
}
echo '</ul>
</div>';
}
?>
And update the CSS to this:
.post-cat-nav {
list-style: none;
margin: 0;
padding: 10px 0;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
align-items: center;
justify-content: center;
}
.post-cat-nav li {
flex: 0 0 auto;
margin-right: 0.5em;
}
.post-cat-nav li a {
font-size: 15px;
padding: 5px 12px;
border: 1px solid;
border-radius: 25px;
border-color: transparent;
}
.post-cat-nav-container {
text-align: center;
padding-left: 30px;
padding-right: 30px;
}
.post-cat-nav li a.current {
border-color: #000;
}
Perfect :-)
Thank you very much.
you can see that now
Best regards.
P.S. Also notice below footer I wrote how fast is GP
(This webpage is generated in 0.083 second with 46 queries at 2020-05-04 21:36:03.)
Many a times page is generated in 40-50 milli second
Great to hear that - and those pagespeed stats are really impressive :)
Hello,
I'm currently trying to achieve similar outcome. I've copied the peace of code You pasted in your post.
It doesn't show posts itself (like here: https://www.wpexplorer.com/blog/), just the categories. May I ask for any advice?
Hi there,
that code simply displays a menu of category terms.
Do you want to raise a new topic and explain what you require and we can advise.