Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress From Bootstrap to WordPress Add Bootstrap Components to WordPress Theme How to Add Bootstrap Modal Windows to Your WordPress Theme

Carl Sergile
Carl Sergile
16,570 Points

My modal works as needed but getting an error

Hey so I had to do some serious hacking to get this modal to work just the way I want it, which is to link up to an empty id in the navbar. When the user clicks contact me, the modal contact form would show up.

The problem im having is that I'm getting this error message once i hit certain part. Error: Warning: Cannot modify header information - headers already sent by (output started at /Applications/Sites/localwp.com/wp-content/themes/bootstrap-to-wp/functions.php:64) in /Applications/Sites/localwp.com/wp-includes/pluggable.php on line 1171

So basically my question is how do I link/hook up my my div that inside my function.php to my regular markup. This is the way I have it set up now, don't ask me why I decided to put my markup inside the the function.php file, but I did. I need to find a way to just atttach it to my markup if that makes any sense

<?php add_action('wp_head', 'modal_wp_head'); function modal_wp_head(){ ?> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Ɨ</button> <h4 class="modal-title">Contact</h4> </div> <div class="modal-body"> <?php if( function_exists( 'ninja_forms_display_form' ) ){ ninja_forms_display_form( 1 ); } ?> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <?php } ?> <?php //This functions makes pictures inside the widget responsive. function responsive_image_widget( $attr = array() ) { $attr['style'] = 'max-width: 100%; height: auto;'; return $attr; } add_filter( 'image_widget_image_attributes', 'responsive_image_widget' );

//This creates the actual widgets //First parameter takes the name of the widget //Second parameter gives an unquie id that you can use in the template //Third parameter is a short description that shows up in the admin bar create_widget( 'Front Page Left', 'front-left', 'Displays on the left of the homepage'); create_widget( 'Front Page Right', 'front-right', 'Displays in the center of the homepage'); create_widget( 'Page Sidebar', 'page', 'Displays on the side of pages with a sidebar'); create_widget( 'Blog Sidebar', 'blog', 'Displays on the side of pagesin the blog section');

?>