How to add a Category-based Mega Menu in Wordpress Without a Plugin
Mega Menu is a content-rich menu where each category (or menu item) shows items (or child list) of that category either as a text list or image & text list. Look at the image for this post. On the main navigation menu, you will see menu list items: Level 1, Fitness, Mind, Body, etc. The first item there is a "normal" list item (a link to a page) while the rest are categories in Wordpress.
If you look at my main menu here in Zirev.com, you'll see a toggleable menu item that goes by the name of topics. If you toggle that, you'll see different toggleable lists of recent posts according to labels. We'll do something similar to that except that the menu items (or first-level child menu-items) are categories and each of them contains a child list of recent posts on their own in Wordpress.
Basically, what we're going to do is create a mega menu based on recent posts by Category. So let's begin:
The new code should look similar to this:
You can change the array items according to your liking (e.g. change theme_location to another instead of primary), just don't change walker.
Now, pay close attention to this code from above:
If you want to show more than five posts in the mega menu, change via posts_per_page.
I have a live working website for this at healthdoll.com.
- Disclaimer: I won't help you with the styling though via style.css or jquery. Proceed at your own risk.
Basically, what we're going to do is create a mega menu based on recent posts by Category. So let's begin:
We're going to edit the walker class function so add this code on your navigation menu in header.php (or edit your code for wp_nav_menu):
<?php
$walker = new description_walker;
wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu', 'walker' => $walker ) );
?>
The new code should look similar to this:
You can change the array items according to your liking (e.g. change theme_location to another instead of primary), just don't change walker.
Add category menu items on your primary menu via your Wordpress dashboard
Refresh your website (homepage) and see if your menu is showing new category items.
Hover and inspect element of a category menu-item.
My hovered li menu-item has this:
class="menu-item menu-item-type-taxonomy menu-item-object-category"
Go to a post or a single page that belongs to a category featured on your menu. Inspect element of that category menu-item.
My li menu-item now has this:
class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent"
Whatever your results, we are going to need that later
In your functions.php file, add this walker function:
class description_walker extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth, $args) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = ' class="'. esc_attr( $class_names ) . '"';
$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
$attributes .= ' class= "main-link"';
$prepend = '';
$append = '';
$description = '';
$item_output = $args->before;
$item_output .= '<a '. $attributes .'>';
$item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
$item_output .= $description.$args->link_after;
$item_output .= '</a>';
if ($class_names == ' class="menu-item menu-item-type-taxonomy menu-item-object-category"' or $class_names == ' class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent"') {
ob_start(); ?>
<ul class="cat-sub-menu">
<?php $the_query = new WP_Query( array( 'category_name' => $item->title, 'posts_per_page' => 5 ) );
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
if ( has_post_thumbnail() ) { ?>
<li><a href="<?php the_permalink(); ?>" class="cat-sub" rel="bookmark"><div class="thumbnail"><?php the_post_thumbnail(); ?></div><div class="cat-title"><?php the_title(); ?></div></a></li>
<?php } else { // if no featured image is found ?>
<li><a href="<?php the_permalink(); ?>" class="cat-sub" rel="bookmark"><div class="thumbnail"></div><div class="cat-title"><?php the_title(); ?></div></a></li>
<?php
}
}
}
wp_reset_postdata(); ?>
</ul> <?php
$item_output .= ob_get_contents();
ob_end_clean();
}
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
Now, pay close attention to this code from above:
In the first line from the picture directly above, replace the class names generated from your results from instructions 4 and 5 in if($class_names ==
Basically, what you're going to do is to replace the content with your result from Step 4 the first occurrence of $class_names == which is highlighted in lime from Step 6 and then put the result from Step 5 on the next (the next occurrence of $class_names == after "or") which is highlighted in orange from Step 6.Make sure to pay close attention to the space before class="menu-item
Style your Mega Menu through your style.css file
I cannot share my styling because it could be highly different from your template. All you have to know (as you can see from the above image) is that I assign the ul list a class of cat-sub-menu and its child list of class cat-sub.If you want to show more than five posts in the mega menu, change via posts_per_page.
I have a live working website for this at healthdoll.com.
Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging
ReplyDeleteweb designing course in chennai
This comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteExcellent post, I learned something new and challenging one in this task. Update more info.
ReplyDeleteWeb Designing Course in chennai
web designing training in chennai
Web Development courses in Chennai
AngularJS Training in Chennai
PHP Training in Chennai
gst Training in Chennai
ReactJS Training in Chennai
Web Designing Course in Velachery
Web Designing Course in T Nagar
Web Designing Course in OMR
This comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteI have read all the comments and suggestions posted by the visitors for this article are very fine,We will wait for your next article so only.Thanks! Ozzun Cheap Domain and hosting company
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeletebest php training in chennai
ReplyDeletebest php developer institution chennai
best php training with placement in chennai
best php training center in chennai
best php course in chennai
I have been reading for the past two days about your blogs and topics, still on fetching! Wondering about your words on each line was massively effective.
ReplyDeletebest appium training in chennai
appium online training
appium training centres in chennai
appium training institutes in chennai
appium training institutes for appuim in chennai
appium training content
As a marketing strategy for increasing site's relevance, SEO consultants consider how search algorithms work and what people search for. Wordpress webshop laten maken
ReplyDelete*It’s hard to find knowledgeable people on this topic, but you sound like you know what you’re talking about! Thanks website design company nyc
ReplyDeleteWhat others have stated and in some uncommon cases, suicide might occur. new york web designs
ReplyDeleteThis is an awesome motivating article. I am practically satisfied with your great work. You put truly extremely supportive data. Keep it up. Continue blogging. Hoping to be perusing your next post good luck.
ReplyDeleteAi & Artificial Intelligence Course in Chennai
PHP Training in Chennai
Ethical Hacking Course in Chennai Blue Prism Training in Chennai
UiPath Training in Chennai
This blog is literally what I was searching for.
ReplyDeletethemes
The subsequent time I read a blog, I hope that it doesnt disappoint me as a lot as this one. I imply, I do know it was my choice to learn, however I actually thought youd have something attention-grabbing to say. All I hear is a bunch of whining about something that you could repair in the event you werent too busy in search of attention. interface design agency san francisco
ReplyDeleteGaming desktops are not as problematic as you might assume, and earning your personal gaming personal pc is not as tough as a lot of folks would make you imagine. Given that you by now have a precise software in thoughts when setting up your personal gaming device, there are truly only three most important elements you need to have to be concerned about, and almost everything else is genuinely secondary: the processor, movie card, and RAM. interface design agency san francisco
ReplyDeleteUltimately, a problem that I'm passionate about. I have looked for data of this caliber for the previous various hours. Your site is greatly appreciated. device mockup
ReplyDeleteAnyway with more prominent assortment and quantities of paid premium WordPress topics additionally plugin download for wordpress comes fluctuating degrees of value.
ReplyDeleteHello there, Could I export this post image and make use of that on my personal blog? ipad psd
ReplyDeleteOther substance the board frameworks incorporate Joomla and Drupal, yet actually WordPress is the simplest to comprehend, the least demanding to work with, and the most effectively versatile.Fix database error
ReplyDeleteOther substance the board frameworks incorporate Joomla and Drupal, yet actually WordPress is the simplest to comprehend, the least demanding to work with, and the most effectively versatile.Fix database error
ReplyDeleteGreat job for publishing such a beneficial web site. Your web log isn’t only useful but it is additionally really creative too. here
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteJust admiring your work and wondering how you managed this blog so well. It’s so remarkable that I can't afford to not go through this valuable information whenever I surf the internet! custom writing service
ReplyDeleteTry Shopping 2.0! In the event that, you don't have an inclination for stores and wish to shop at a mix of stores disconnected or on the web, use web applications and shopping instruments like 'Shopping List' at Infodoro.com or Froogle at Google.com.besimple.com/
ReplyDeleteThank you so much for this innovative post, keep it up for more valuable information. Visit Ogen Infosystem for professional Website Designing and SEO Services in Delhi, India.
ReplyDeleteWeb Designing Company in Delhi
cool stuff you have got and you keep update all of us. schlüsselnotdienst 24h
ReplyDelete