Wordpress Question posted in
The official Wordpress documentation can be found here.

Show 5 latest posts in WordPress footer menu under the third menu item

I want to add a custom code under the third menu item in my WordPress footer menu. It’s meant to show the latest blogpost under the "Blog" (in this case "Insights") menu-item. I managed to do this with HTML, only now i need to add there the latest posts code (in functions.php). Problems i have are:

1: How do i add the PHP code working in functions.php (it’s working in footer.php)

2: I only want it in the footer menu (‘Secondary’), not the main menu (header menu)

Could anyone help me with this? Thanks in advance.

This is the code i have now:

Functions.php

/* footer extra content in menu */

class Add_Div_Walker extends Walker_Nav_Menu
{
}

function nav_replace_wpse_189788($item_output, $item) {
  //   var_dump($item_output, $item);
  if ('Insights' == $item->title) {
    global $my_profile; // no idea what this does?
      return '<li class="menu-item"><a href="/customers/bluespar/insights/" class="nav-link">Insights</a>
      <div class="insights-footer">Custom code

      </div></li>';
  }
  return $item_output;
}
add_filter('walker_nav_menu_start_el','nav_replace_wpse_189788',10,2);

Footer menu in footer.php:

                <?php
                wp_nav_menu(array(
                'theme_location'    => 'secondary',
                'container'       => 'div',
                'container_id'    => '',
                'container_class' => 'justify-content-end',
                'menu_id'         => false,
                'depth'           => 3,
                'walker'          => new Add_Div_Walker
                ));
                ?>

Code to show 5 latest posts (now in footer.php, should be in functions.php?)

            <ul>
                <?php
                $the_query = new WP_Query( 'posts_per_page=5' );

                while ($the_query -> have_posts()) : $the_query -> the_post();
                ?>

                <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>

                <?php
                endwhile;
                wp_reset_postdata();
                ?>
            </ul>
Tags:

2

Answers


  1. 0

    By setting ‘theme_location’ => ‘secondary’, the code only runs for the footer menu, not the main menu. The custom walker class includes the markup for the list of posts, ensuring proper HTML structure.

    Update functions.php

    Create a custom walker class that outputs the latest posts:

    class Add_Div_Walker extends Walker_Nav_Menu {
    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
        $item_output = sprintf('<li class="menu-item"><a href="%s" class="nav-link">%s</a>',
            esc_url($item->url),
            esc_html($item->title)
        );

        // If this is the "Insights" menu item and it's in the footer menu
        if ('Insights' == $item->title && 'secondary' == $args->theme_location) {
            $item_output .= '<div class="insights-footer">' . $this->get_latest_posts() . '</div>';
        }

        $item_output .= '</li>';

        $output .= $item_output;
    }

    private function get_latest_posts() {
        // Fetch the latest 5 posts
        $the_query = new WP_Query('posts_per_page=5');
        $output = '<ul>'; // Markup for the list of posts

        while ($the_query->have_posts()) : $the_query->the_post();
            $output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
        endwhile;

        $output .= '</ul>';
        wp_reset_postdata();

        return $output;
    }
}

    footer.php

    <?php
wp_nav_menu(array(
    'theme_location'    => 'secondary', // This ensures it applies to the footer menu only
    'container'         => 'div',
    'container_id'      => '',
    'container_class'   => 'justify-content-end',
    'menu_id'           => false,
    'depth'             => 3,
    'walker'            => new Add_Div_Walker()
));
?>
    Login or Signup to reply.
  2. 0

    The start_lvl and end_lvl methods add the necessary tags for submenus. This ensures that submenus () remain inside the parent <li> element.

    class Add_Div_Walker extends Walker_Nav_Menu {
        function start_lvl(&$output, $depth = 0, $args = array()) {
            $indent = str_repeat("t", $depth);
            $output .= "n$indent<ul class="sub-menu">n";
        }
    
        function end_lvl(&$output, $depth = 0, $args = array()) {
            $indent = str_repeat("t", $depth);
            $output .= "$indent</ul>n";
        }
    
        function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
            $indent = ($depth) ? str_repeat("t", $depth) : '';
    
            $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter((array) $item->classes), $item, $args));
            $class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';
    
            $id = apply_filters('nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args);
            $id = $id ? ' id="' . esc_attr($id) . '"' : '';
    
            $output .= $indent . '<li' . $id . $class_names .'>';
    
            $atts = array();
            $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
            $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
            $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
            $atts['href']   = ! empty( $item->url )        ? $item->url        : '';
    
            $atts = apply_filters('nav_menu_link_attributes', $atts, $item, $args);
    
            $attributes = '';
            foreach ( $atts as $attr => $value ) {
                if ( ! empty( $value ) ) {
                    $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                    $attributes .= ' ' . $attr . '="' . $value . '"';
                }
            }
    
            $item_output = sprintf('<a%s>%s%s%s</a>',
                $attributes,
                $args->link_before,
                apply_filters('the_title', $item->title, $item->ID),
                $args->link_after
            );
    
            // If this is the "Insights" menu item and it's in the footer menu
            if ('Insights' == $item->title && 'secondary' == $args->theme_location) {
                $item_output .= '<div class="insights-footer">' . $this->get_latest_posts() . '</div>';
            }
    
            $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
        }
    
        function end_el(&$output, $item, $depth = 0, $args = array()) {
            $output .= "</li>n";
        }
    
        private function get_latest_posts() {
            // Fetch the latest 5 posts
            $the_query = new WP_Query('posts_per_page=5');
            $output = '<ul>'; // Markup for the list of posts
    
            while ($the_query->have_posts()) : $the_query->the_post();
                $output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
            endwhile;
    
            $output .= '</ul>';
            wp_reset_postdata();
    
            return $output;
        }
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search