[Resolved] Dropdown Button

[Darryl]

Is a there a means to generate this type of dropdown button displayed here (first “Live Demo”):

https://www.tutorialspoint.com/bootstrap/bootstrap_button_dropdowns.htm

Thanks

[Leo]

Hi there,

Not sure if I fully understand.

That looks like just a simple button that links to another page?

Let me know 🙂

[Darryl]

Not the actual “live demo” buttton, below the code box, the “primary” buttons that show what the code above does..

[Leo]

That will require some custom coding unfortunately.

Are you using Bootstraps already?

If so this should help:
https://getbootstrap.com/docs/4.0/components/dropdowns/

If not then try Googling “button with drop down” and see if you can find a pure HTML and CSS solution.

[Darryl]

I finally managed to get bootstrap integrated with the Generatepress theme

1.) Install jquery manager plugin,
2.) created a child theme
3.) downloaded latest bootstrap and placed files in appropriate child theme directory
4.) Then used this code to load the css and js files:

function themebs_enqueue_styles() {

  wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri() . '/css/bootstrap.min.css' );
  wp_enqueue_style( 'core', get_stylesheet_directory_uri() . '/style.css' );

}
add_action( 'wp_enqueue_scripts', 'themebs_enqueue_styles');

function themebs_enqueue_scripts() {
  wp_enqueue_script( 'bootstrap', get_stylesheet_directory_uri() . '/js/bootstrap.bundle.min.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'themebs_enqueue_scripts');

My in relation to my original button is this:

The button now functionally works on the front-end, (with broken / conflicted css)… However, within the gutenberg editor neither the css or js are read by the browser.

I tried to put the above script directly into the child theme’s functions.php, directly into the parent theme’s functions.php, and tried to insert it via the Snippet plugin, but no effect.

How do I get the bootstrap css js to show up inside gutenberg?
Secondary question, what is the recommended best method to resolve css conflicts between generatepress and bootstrap?

THX

[David]

Hi there,

there is a fork of Bootstrap – called Isolated Bootstrap, that will enable you to avoid conflicts with other styles – see this topic here:

https://generatepress.com/forums/topic/isolated-bootstrap/

Personally i don’t think its a great idea adding an entire framework for as single element. And you may better off getting someone to code that element for you – or ask on StackOverflow for advice.

However whatever method you choose you would need to add your styles to the editor as well using the enqueue_block_editor_assets hook:

https://developer.wordpress.org/reference/hooks/enqueue_block_editor_assets/

[Darryl]

Hey there thanks for the help…

I just have an addiction to jquery that I need to kick… You are definitely right “one element” wouldn’t be worth the performance issues of installing an entire framework… I have experience with bootstrap components, its a safety blanket for the moment…

I tried your recommendations, but still couldn’t get the editor to properly display css or js files using the isolated-bootstrap and the hook you recommended.

I already found an html5 means of getting my button so it isn’t worth the time invest for me to chase this rabbit.

But thanks for the stack overflow tip… if I truly need to integrate, I follow up this issue in that forum.

For anyone looking for a simple-drop down button

  <label>Select list</label>
             <select id = "myList">
               <option value = "1">one</option>
               <option value = "2">two</option>
               <option value = "3">three</option>
               <option value = "4">four</option>
             </select>

[David]

Glad to be of help.
And thanks for sharing your method !

[Author]

Posts