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

What's the best way to accomplish this: Hooks or CSS?

Issue: I have a 3rd party wordpress theme installed, which is built on bootstrap. On all pages, the theme uses the container class for it's main content.

However, I want to make only certain buddypress pages use the container-fluid class.

What is the best way of targeting only those pages and changing the class?

Hello M, It's a little hard to say without looking at the code, and without knowing which theme you are using, but I'm thinking the best approach may be to make a child theme and then make custom page templates for the pages you want to be fluid. If you haven't made a child theme or custom page templates before, it's pretty easy, and pretty well explained in the WordPress Codex (Child theme: http://codex.wordpress.org/Child_Themes; Custom Page Templates: http://codex.wordpress.org/Page_Templates)

The idea would be to take a copy of the page template you want to make fluid and put it in your child theme and give it a unique name. In the page template code, change the container class to container-fluid. Then, in the pages you wanted to be fluid, select that template from the template drop down in the page attributes box, usually in the right sidebar.

If you want to say which theme you're using, I could look at it and see if there's a simpler way--like a hook or filter built into the theme that lets you change the class.

Good luck! Richard

2 Answers

Lucas Santos
Lucas Santos
19,315 Points

This question is pretty difficult to answer because it really depends on how this theme was built and what naming conventions they use on their files. Which is why you would need to provide more information but what I would do is first make a child theme if you have not already, then edit the file that is the archive for whatever page this is weather it is a category page, archive page or custom taxonomy. And where the structure of the code is set up add a php conditional to the class and echo out -fluid.

This is an example but it can look something like this:

<div class="container<?php if( is_page('example') ){ echo '-fluid'; } ?>">
<h1>Page Title</h1>
<p>This is a page,</p>
</div><!--container div-->

Now the conditional would all depend on where your template is in the template hierarchy. Note that this is just an example because I have very little information about this theme and how its set up to actually tell you how you can go about doing this. But this is just one way that I would go about adding a custom class depending on what page i'm on.

Hi guys. Thanks a ton for the feedback. The theme doesn't use hooks, unfortunately. I do use a child theme. The original was created by wpbeaverbuilder.

Richard Norby, the buddypress profile pages do not use pages in wordpress so I can't switch out the template using the UI. Assuming that is what you meant?

Lucas Santos, I like your idea. I tried to edit the page.php file in my child theme (which calls the container class) and put this in it but it keeps throwing the error below. Any idea why?

Parse error: syntax error, unexpected '}', expecting ',' or ';'

<?php get_header(); ?>

<div class="fl-content-full container<?php if( is_page("my-activity") ){ echo "-fluid" }; ?>">
    <div class="row">
        <div class="fl-content col-md-12">
            <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
                <?php get_template_part('content', 'page'); ?>
            <?php endwhile; endif; ?>
        </div>
    </div>
</div>

<?php get_footer(); ?>

On line 3, try getting rid of the semi-colon after the if statement and add a semi-colon after the echo statement, like this:

if( is_page("my-activity") ){echo "-fluid"; } ?>">
Lucas Santos
Lucas Santos
19,315 Points

Yeah just misplaced semi-colon, remove it after the last curly brace and put it after "fluid". I updated my answer.