Make status appear when menu button is clicked

On my website http:disappointed:kocher.co I am trying to make it so when I click the "Post" menu, the Status plugin is revealed.
(It's similar how my user menu works in my header, that when clicked, the who's online appears).

So far I've not had any luck. Any help is much appreciated.

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hello, Michael! First, I love your site!

    Would you mind if I logged in to your site and did some testing? This might help get to the bottom of this faster. If this is ok, just grant me temporary admin access to your site by clicking "Grant Access" button in the WPMU DEV Dashboard Settings from the following path and reply on this thread after granting it?

    Admin -> WPMU DEV -> Support -> Support Access Tab

    If you have not installed WPMU DEV Dashboard plugin yet, kindly do that here : https://premium.wpmudev.org/project/wpmu-dev-dashboard/ and then allow access as per the above process.

    Thanks!

  • Michelle Shull
    • DEV MAN’s Apprentice

    Poking around in your site will help me see what we need to put where so we can make this work for you. I want to make sure I point you in the right direction. Thanks for the access! I wanted to get a closer look at how the user menu button was triggering who's online.

    To trigger the Quick Status with the link in your nav menu, that's going to take some work on your header.php file. Since this falls outside the realm of what you can do with the dashboard menu builder, you'd need to make the change on the file itself. If you're using a child theme, simply copy your header.php file from the parent theme folder the the child theme folder and make edits only on the file in the child theme's folder.

    Without looking directly at your header.php file, it's hard for me to say exactly where the edits will fall, but you're going to want to look for the area that creates navigation.

    As for creating the link itself, this tutorial from WP Candy - http://wpcandy.com/teaches/how-to-use-wordpress-hooks/#.U-z7avldUeU - does a great job of showing you how the PHP needs to be structured to make your hook work.

    Hope this helps!

  • Michelle Shull
    • DEV MAN’s Apprentice

    It can be a little intimidating at first, but it's not quite as scary as it looks once you're actually looking at the header.php. This article is on a slightly different topic, but it does a great job of illustrating the different pieces of PHP that make your menu go: http://www.wpbeginner.com/wp-themes/how-to-style-wordpress-navigation-menus/

    You seem to have a pretty good handle on WP so far, I'm optimistic. : ) Don't hesitate to ask if you get stuck.

  • Michael
    • Site Builder, Child of Zeus

    @Vinod Dmlvi
    Vinod, I recall you helped me with a similar issue

    I'm still pretty stuck on this. I am trying to make it so the menu item 'POST' will hide or show the post plugin area (at top). The first step I figure is to use style.css to hide the widget, but I can't even get that far.

    #wdqs-dashboard-widget {
         display: none;
    }

    This code seems to have no effect.
    The second part of my problem is knowing how to link it to the menu item.

    Any help is greatly appreciated!

  • Michael
    • Site Builder, Child of Zeus

    I'm not sure what I changed, but the widget is successfully hidden with the above CSS!! Now for the next problem...

    I've tried giving the menu item "POST" a class of .status_post, and toggling it with similar code to what makes my "Who's online" toggle work.

    I'm using the following code to try and toggle the plugin, but it is crashing the entire page:

    /**
     * Implement Post Status Toggle Menu
     */
    require( get_template_directory() . '/inc/custom-header.php' );
    add_filter('widget_text', 'do_shortcode');
    
    function toggle_status_button(){ ?>
    	<script type="text/javascript">
    		jQuery(document).ready(function(){
    			jQuery('.status_post').click(function(){
    				jQuery('#wdqs-dashboard-widget').slideToggle();
    			});
    		});
    	</script>
    <?php }
    add_action( 'wp_footer', 'toggle_status_button' );

    I only have very basic knowledge of this coding stuff. Is this even a proper way to use a menu item to toggle the status plugin?

  • Vinod Dalvi
    • WP Unicorn

    Hi @Michael,

    I read this whole topic and also checked your site http://kocher.co/ but i didn't find Status plugin that you have mentioned in your following previously posted reply.

    On my website http:disappointed:kocher.co I am trying to make it so when I click the "Post" menu, the Status plugin is revealed.

    So you want to display the Status plugin( which i don't see on your site ) on clicking the "Post" menu as displayed in the attached screenshot.

    Am i right?

    Could you please tell me where is your the Status plugin ( Share screenshot of it if you can ) so that i can help you to achieve it?

    Regards,
    Vinod Dalvi

  • Tyler Postle
    • CGO

    Hey Michael,

    Hope you're doing well today! Hope you don't mind if I chime in here while Vinod is offline :slight_smile:

    I believe we could do this with a bit of CSS and the display style.

    Add this to your custom stylesheet:

    #wdqs-form-root > div {
    display: none;
    }
    
    #wdqs-form-root > div:target {
    display: block;
    }

    If you don't have a custom stylesheet then use this plugin here: https://wordpress.org/plugins/simple-custom-css/

    Then make the link of your post button: /#wdqs-form-root

    Try that :slight_smile:

    If that doesn't work then perhaps Vinod will have a more effective solution.

    Look forward to hearing back!

    Cheers,
    Tyler

  • Jack Kitterhing
    • Code Norris

    Hi there @Michael,

    Hope you're well today! :slight_smile:

    The following code should work for you here.

    <script type="text/javascript">
       jQuery(function($) {
           $('li#menu-item-1273.status_post a').click(function() {
               $('#wdqs-form-root').toggle();
               return false;
           });
       });
    </script>

    It'll show on click of the "post" menu item and hide on click of that menu item again, as we're using .toggle :slight_smile:

    Any issues or questions, we're here to help.

    Thanks!

    Kind Regards
    Jack.

  • Michael
    • Site Builder, Child of Zeus

    Thanks @Jack Kitterhing
    This is working very well now. The only problem is that it defaults to being shown. Is there a way to make it hidden by default? I tried using the following CSS

    #wdqs-form-root {
    display: none;
    }

    That does make it hidden by defuly, but the text field doesn't come back with the rest of it!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.