[Resolved] menu above posts

[Anil]

Hi

I intend to have a menu above posts on homepage like in https://www.wpexplorer.com/blog/

Please advise

[David]

Hi there,

i provide a solution for that here – starting from #2:

https://generatepress.com/forums/topic/any-ninja-able-to-replicate-the-left-sidebars-found-here-https-bit-ly-3egq8f5/#post-1246525

[Anil]

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.

[David]

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;
} 

[Anil]

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

[David]

Great to hear that – and those pagespeed stats are really impressive 🙂

[Leszek]

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?

[David]

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.

[Author]

Posts