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 Create Bootstrap Styled Theme Templates Creating a static front page

Posted by Andrew Christ
Andrew Christ
855 Points

Completing this tutorial w/ Bootstrap Carousel Example.

For this video, creating a static page, I added the PHP code into my front-page.php file, then took everything between the div with a class="carousel slide" and pasted it into the Home page under "Pages". It works and the carousel works, but the slides come in and then drop-down several pixels after sliding in. Any idea why? Thanks for any help!

Andrew

3 Answers

Andrew Christ
Andrew Christ
855 Points

So after a little research and browsing around, I found other people that were having this problem. Several solutions were offered in the form of plugins. I chose to add the following:
<?php remove_filter ('the_content', 'wpautop'); ?> to my functions.php file which solved the problem and now the page appears as it should. Not sure if this will affect other items on the site, but I suppose I will find out while continuing to build. Find the whole thing very interesting.

Andrew

Richard Duffy
Richard Duffy
16,488 Points
Richard Duffy
Richard Duffy
16,488 Points

Hey Andrew Christ,

Can you post a screenshot oh what is happening so we can get a better picture? It might be you have not closed off a div tag properly or that your own stylesheets are conflicting with bootstraps stylesheets.

Regards,

Richard.

Andrew Christ
Andrew Christ
855 Points
Andrew Christ
Andrew Christ
855 Points

I apologize, I thought I put the link in the post. I think I discovered the issue. I posted the HTML into text on the home page and it seems to have added an ending "p" tag in several locations. Why this happened, I'm not exactly sure. Anyway, if you go to bootstrapdemo.ajcwebclient.com, and view source, you can see what I mean. But all of the ending "p" tags don't show up where I can delete them. I'm sure there is some formatting or something I should have done, but was not aware of. Maybe I'm not supposed to put HTML directly in the page like that. Thanks!

Andrew

Frank Chang
Frank Chang
1,235 Points
Frank Chang
Frank Chang
1,235 Points

Did you paste it in Text (HTML) instead of Visual?

I have created a similar site using Jumbotron template + CPT Bootstrap Carousel plugin, but now I want to try if I can migrate Carousel template into WordPress too. Is there any chance you could give me a few tips on that? What did you do differently compared to the Jumbotron example besides adding the remove_filter ('the_content', 'wpautop'); function?

Andrew Christ
Andrew Christ
855 Points

Frank,

I didn't really do too much differently. I broke up the HTML the same way, placing the navigation in the header.php file, then everything after that up to the footer in the index.php, then the front-page.php. After thinking about it, I'm wondering if the only way the carousel would work is to use a plugin. It does make sense to use a slideshow plugin, but the idea for me was to create something where the user, having little knowledge of WordPress could go in and replace the placeholder images with images of their own directly into the Visual of the "Home" page. But as I've discovered, WordPress likes to remove HTML elements for some reason. I can place the code in the Text(HTML) just fine and the carousel works until I try to place <img> tags. I'm not seeing how it would work, but I have to play around more. If you have any ideas, feel free to share. Thanks!

Andrew