Butterbean sections toggle based on Page Template selection

Plugins 12 posts 2 voices

  1. Hi Justin,

    On my current project, I have certain **sections** created for some custom **Page Template**s.

    So I am wondering if its possible to that I can show / hide certain sections based on certain Page Template selection?

    I can implement a custom solution for my needs, but as I am not much familiar with Backbone / Underscore, so I don’t want to spend too much time learning them so if you have any suggestions please let me know.

  2. The models for sections aren’t publicly available to interact with in the current release. However, in the dev branch on GitHub, they are. There are functions for working with them. Here’s how you’d get a model:

    var section = butterbean.models.get_section( 'your-section-id' );

    Then, you can use set() from Backbone to change the model’s attributes: http://backbonejs.org/#Model-set

    The attribute you’d want to set is the active attribute like so:

    section.set( 'active', false ); // true/false, depending on whether you want to show/hide

    So, you could write some JavaScript to listen for changes to the page template selector and choose whether to make a section active.

  3. Thanks Justin, I will give it a try and will let you know.

  4. Hi Justin,

    today I finally get back to this piece of code and used above code, but it doesn’t hide the section on page load or either on other events like on page template change.

    The reason I can think of is, maybe there is only one section?

    Let me know what else I can try.

  5. Hi Justin,

    This is php code,

    add_action( 'butterbean_register', 'some_details', 5, 2 );
    function some_details( $butterbean, $post_type ) {
    	$butterbean->register_manager( 'some_details',
    			'post_type' => array( 'post', 'page' ),
    			'context'   => 'normal',
    			'priority'  => 'high',
    			'label'     => esc_html__( 'Custom Details', '' )
    	$manager  = $butterbean->get_manager( 'some_details' );
    			'label' => 'General',
    			'icon'  => 'dashicons-welcome-learn-more'
    			'type'        => 'textarea',
    			'section'     => 'general',
    			'attr'        => array( 'class' => 'widefat' ),
    			'label'       => 'Some Description'
    		array( 'sanitize_callback' => 'wp_kses_post' )


    jQuery(document).ready(function($) {
      // Custom Fields
      var section = butterbean.models.get_section( 'general' );
      section.set( 'active', true );
      //section.set( 'active', false );

    I have tried simple code as this, and it doesn’t work for me either…

    setting ‘active’ param to true or false neither works.

  6. Your JS code is wrapped up in a function and has no access to the butterbean object. You need to pass that in.

    ( function( butterbean ) {
    	// Custom Fields
    	var section = butterbean.models.get_section( 'general' );
    	section.set( 'active', true );
    	//section.set( 'active', false );
    }( butterbean ) );

    No need to wait for document.ready(). Just make sure butterbean is a dependency for your script (don’t know if you did because you didn’t share all your code).

  7. Thanks Justin,

    but it doesn’t work.

    Previously, I was doing

    var section = butterbean.models.get_section( 'general' );

    and it was showing me its data, but no longer (I am testing it with WP 4.7)

    and if I do this

    section.set( 'active', true );

    it throws error regarding ‘set’ being not defined

  8. Outside of hooking your script in later than this (where the views are rendered), you won’t have access to the the Butterbean models.

    add_action( 'admin_print_footer_scripts', array( $this, 'render_views' ), 95 );

    So, the problem we have is one of order. See, Butterbean isn’t going to run until practically the end of the page load. This is so that developers can register custom views earlier and have them work.

    That’s actually problematic for what you want to do without registering a custom view. But, views are based on the section type rather than the section ID.

    I’m going to have to give this some thought. This is why it’s a good thing that this new code is only for development at the moment rather than production.

  9. I see, yes make sense to render it last.

    Sure, it will be nice to not only access them (sections / settings) using their types but also their id / name as well.

    I am utilizing it for private project, so I am comfortable using bleeding edge code.

  10. I just pushed some code live that should make this work better on the dev branch.

    Right now, setting an entire sections to inactive status doesn’t work so well. So, setting a control’s active attribute to false is the best course of action. I’m going to have to rethink some of the architecture for sections to behave correctly.

  11. Thanks, I have settled for dom manipulation for now,

    but I definitely want to utilize butterbean,

    good, looking forward to that.