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

by 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:


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

add_action( 'wp_head', function () { ?>
        /******* 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;

<?php } );

* Display Posts - current-list-item class
* @see
* @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 );


A Visual Artist sharing her world, and the things she loves with you!


Post a Comment