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

Anthony Hind
Anthony Hind
5,715 Points

Custom Wordpress with Bootstrap

Hi all, I am just working through a Zac Gordan blog post about Twitter bootstrap & WordPress a simple theme, which is a great walk through, If possible i would like to make some more advanced styling changes for example I would like the body background image to dynamically change depending on what page you are on is this something that can be easily acheived? is this something that a JS WordPress plugin would be ideal for???

9 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

Anthony Hind funny you mention this. I just posted up the course I just finished recording and I'm looking for some smaller course content to do. Starting a theme from bootstrap could be cool, no? However, I feel like it would overlap with theme from scratch course. Maybe replace it?

To change the bg images dynamically is super simple! You just use the body_class() in your body tag and WP will assign a unique class to each page, and types of pages.

Then it's just a matter of using the different classes in your css to target the correct background image.

Matt Campbell
Matt Campbell
9,767 Points

No idea if there's a plugin out there to do it but yes, you can do it with PHP or jQuery. I'd do it with PHP as doing it with jQuery will mean that all the possible images you want to use will need to be downloaded before the one you want is loaded.

A simple conditional saying if this is page x, then load this piece of code else move on and load the next one till we've met our conditional.

Have a look at Randy's PHP video about changing the page title depending on the page, same principle applies.

Anthony Hind
Anthony Hind
5,715 Points

Hi Matthew,

Thanks for pointing that out. I will take a look.

Cheers Anthony

Anthony Hind
Anthony Hind
5,715 Points

Thanks Zac,

It would great if you could do some Wordpress and Bootstrap videos, I have followed your blog post and it's so useful and great for fast site development, it would be useful to see how wordpress and bootstrap can be customised and used.

From my point of view a theme walk through would be extremely useful especially with regards to maybe integrating the carousel and modals to be dynamic, or implementing the breadcrumbs with the bootstrapped styles, I'm sure you have much more of an idea.... Maybe even just a what to do and not to do when setting up wordpress and a framework like bootstrap.

Key areas I tend to struggle our forms, sliders and dynamic features that wordpress is packed full of just from your blog post and theme videos I'm much more confident with wordpress now I don't think it would be a problem replacing or somehow covering a theme from scratch an then a theme from bootstrap if anything I think it would highlight the benefits of each different method and give us students a good grasp off both methods...

Cheers

Ant

Anthony Hind
Anthony Hind
5,715 Points

Can I somehow use this same body class function to style the bootstrap jumbotron ? for example if I had a large full width jumbotron at the top of my pages could i then change the images depending on the page ??

Zac, I don't know what the pedagogical philosophy is over there, but multiple "Build a WordPress theme" courses would be awesome and very helpful to me, and I think to other people learning this stuff. It will help solidify skills we might be iffy on by perhaps presenting challenges for new angles, or by presenting different types of solutions to similar problems.

In summary: please do a Bootstrap WP theme course!

Anthony Hind
Anthony Hind
5,715 Points

Well said Tom, lets get some weight behind this and force Zac's hand :)

Cheers

Anthony

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

Hey folks!

Okay, I'm about to start working on a How to Build Websites with WordPress course to replace the blog one, which is a little outdated.

Based on your suggestions I am going to start working on a Beginners WordPress Theme Development with Bootstrap and Advanced WordPress Theme Development with Bootstrap Course as well. I have to think about it some more, but I'm open to the idea. Thanks Anthony Hind Tom Leger :)

There is a chance that I might approach this a little differently though. I will likely take the approach of pretending like a don't know anything and then walking through how to figure it out. Googling questions, downloading files as needed, looking up little tricks for customizations, and that sort of thing. I will have to figure out as well if I release it in bits and pieces or all at once

Anthony Hind
Anthony Hind
5,715 Points

That's sounds great Zac thanks for taking my comments on board, I think that's a great idea doing it from scratch like your a beginner yourself im looking forward to it already...

Anthony Hind
Anthony Hind
5,715 Points

That's sounds great Zac thanks for taking my comments on board, I think that's a great idea doing it from scratch like your a beginner yourself im looking forward to it already...