Multiple types of content on front page

I’m fairly new to Sage and even a bit of a newbie in theme development. I would love some direction in how to create a front page with multpile types of content like I’m seeing on Ron Ellis Law by @kalenjohnson.

I see that there are four main sections between the header and footer:

    ```<div class="content">
        <main class="main" role="main">
            <div class="home-content">
            <div class="section-services">
            <div class="section-team">
            <div class="blog-container">

Would a site like this be set to display “blog” on front page? And I’m guessing most of the settings would be done in base.php, probably using <?php if(is_home() || is_front_page()) : ?>.

I’m know this isn’t really sage-centric per se. Can anyone recommend (or make) a good tutorial?

you can copy the template-custom.php file to template-home.php and then edit the line at the top that reads * Template Name: Custom Template to something like * Template Name: Home Template.

After this, in the Wordpress admin on the right hand side you’ll be able to tell your home page to use this template. After this, you’ll be able to add a custom loop to the page. I try to avoid editing base.php unless I’m making site-wide changes.

1 Like

Ah yes! Thank you, @tobyl.

Since that site I have began to use ACF Flexible Content for large sections like that; it takes more planning but is also more, well, flexible.

But tobyl is correct, you just need to make a custom template. For Ron Ellis I actually used front-page.php, which is specific to the front page, and it just looks like this:

<?php while (have_posts()) : the_post(); ?>
  <?php get_template_part('templates/front-page/content'); ?>
  <?php get_template_part('templates/front-page/services'); ?>
  <?php get_template_part('templates/front-page/team'); ?>
  <?php get_template_part('templates/front-page/blog'); ?>
<?php endwhile; ?>

It’s a really nice site, Kalen. I notice you removed the container element from <div class="wrap container" role="document">, which seems like a way to allow the items to span the entire page. Is that the purpose and is it still a method you’d recommend?

Yes, for sure… if you want to have full-width sections, you will need to remove the .container class. You will then most likely then have to add the container class to each individual section’s HTML to contain the text content.

Also, thanks for the compliment :slight_smile:

1 Like

Oh yes. Your themes are very inspiring. And thanks for the tip to add back the container on certain pages (or all but the front page).

    <div class="wrap" role="document">
    <?php else : ?>
    <div class="wrap container" role="document">
     <?php endif ?>```

Also I had never used ACF, which should probably be an embarrassing confession. Awesomeness! I have it included as an MU Plugin in Bedrock.

For what it’s worth, to try to keep logic down in base.php, I sometimes create a function for the container class, depending on how much logic it’s going to require. What you’re doing is fine, but if it starts to get out of hand with the if checks, you can do something like this:

<div class="wrap <?= Extras/container_class(); ?>" role="document">

Then in extras.php

function container_class() {
  if (is_home() || is_front_page() || is_page('full-width') || get_post_type() === 'movies') {
    return 'container-fluid';
  } else {
    return 'container';

You get the idea.


Man that is cool! Worth mentioning for other newbies that the above code requires adding the namespace to the calling file like:

use Roots/Sage/Extras;

And I believe we want a backslash slash in calling it:

<?= Extras\container_class(); ?>

On another note, do you add ACF using composer?


Sidebar but I’m missing ACF’s Flexible Content fields on a project right now. I decided to set this site up using CMB2 which is absolutely great in 100 ways but flexible content fields ain’t one of them. ;( is indeed a lovely looking site! Congrats.

1 Like

@kalenjohnson do you remember why the Ron Ellis site has the container class removed from the front page as opposed to changed to container-fluid? Or more to the point, why container-fluid is still leaving small margins on the left and right? Oh wait - it’s because main has padding… making that go away is proving tricky…

I can override $grid-gutter-width: 30px with 0px;, but that’s messing all kinds of things up…

Thanks! I only coded it, I contract for , who found me via this forum btw.

Sorry, this is slowly devolving into a rather generic Bootstrap discussion. Either remove the Bootstrap class that gets added here, or just write padding: 0;, shouldn’t be much more to it

Ah. I’ve been looking at that SASS file. Thank you. Really need to get more familiarity with Bootstrap AND SASS in terms of mixins, loops, etc. Thanks for dipping into my ignorance again, sir.
For any other newbies, a good SASS intro.

In the realm of Bootstrap discussion, I searched around (and tinkered a bit, when I should probably just be RingTFM) and found a nice JSFiddle for getting responsive Bootstrap divs of matching height, based on this SO answer. It’s quite strait forward to get matching height columns with BS3 , and the SO suggestions go on and on, but as far as I could tell none of them would work as fluid grid.