How to Add New Posts To Wordpress Menu Automatically + Codes For Post Menu Tutorial

by Vizartsgirl 7:50:00 PM 0 comments

How to Add New Posts To Wordpress Menu Automatically + Codes For Post Menu Tutorial


Hey, today I'm going to show you guys how I create menus for my posts using wordpress, and a few plugins. This menu allows you to show your posts based on a certain category, and new wordpress posts you publish are also automatically added to the accordion menu.

Here are the shortcodes!

One (without image or for sidebar ):
 [display-posts category="name-here" posts_per_page=”999″ image_size="thumbnail" order="ASC"] 

Two (with image):
 [display-posts category="name-here" posts_per_page=”999″ image_size="thumbnail" order="ASC"]   


Here's the super long code snippet:

If you can't copy the code here you can copy it from my dropbox link as well:

CLICK HERE TO COPY FROM DROPBOX

(if copying from dropbox make sure you copy and paste without the numbers on the side)

add_action( 'wp_head', function () { ?>
    
    <style>
    
        /******* this makes the toggle take over entire menu on click instead of targeting # ******/

.bellows-nav .bellows-item-level-0 > .bellows-target .bellows-subtoggle {
    padding-left: 100%;
}

        /******* change the height of the links without thumbnails ******/
        
.bellows .bellows-nav, .bellows .bellows-nav .bellows-menu-item, .bellows .bellows-nav .bellows-submenu * {
    line-height: 1.5em;
        min-height: 50px;
}
      
        
        
        /******* float image left ******/
        li.listing-item {
            overflow: hidden;
        min-height: 100px;
        }
        
        li.listing-item img{
            float: left;}
        
        li.listing-item .title {
        display: block;
        text-align: center;
   
        }

        /******  This is to change the colors when you hover your posts ******/
      
      li.listing-item:hover {
    background-color: #0b63c76b;
}

        
    
        
        
        /****** remove those ugly bullet points from the menu *****/
        
ul.display-posts-listing {
    list-style: none;
        }
        
        /******  This is to change the colors of the active post your on ******/
        
li.listing-item.current-list-item {
    background-color: #3144c7;
}
      
      li.listing-item.current-list-item a {
    color: white;
}
      
    
        /****** I added some space for the post titles feel free to change or remove ******/

        li.listing-item .title {
          padding-left: 25px;
            padding-right: 25px;
            padding-top: 50px;
              padding-bottom: 50px;
        }

        </style>
<?php } );


/**
* Display Posts - current-list-item class
* @see https://displayposts.com/2019/08/20/add-class-to-current-post-for-styling/
*
* @param array $classes
* @param object $post
* @return array $classes
*/
function be_dps_current_class( $classes, $post ) {
    if( is_singular() && $post->ID === get_queried_object_id() ) {
        $classes[] = 'current-list-item';
    }
    return $classes;
}
add_filter( 'display_posts_shortcode_post_class', 'be_dps_current_class', 10, 2 );