Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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');