We've established a custom base structure for our home page and set up a custom page template to remove the normal page title. Now it's time to create a custom template for our home page content.
Roots manages content loops in files named content-page.php
, content-single.php
, and content.php
in the templates
folder as shown in the following screenshot:
If you look at the contents of these files, you'll see the loops for standard posts and pages.
We want to make our own custom version of content-page.php
:
content-page.php
.content-home.php
.content-home.php
in your editor and you'll see the following lines of code:<?php while (have_posts()) : the_post(); ?> <?php the_content(); ?> <?php wp_link_pages(array('before' => '<nav class="pagination">', 'after' => '</nav>')); ?> <?php endwhile; ?>
<?php the_content(); ?>
<?php wp_link_pages(array('before' => '<nav class="pagination">', 'after' => '</nav>')); ?>
In their place, let's put a bit of alternative content so that we can test things.
Hello this is a test!
.page-home.php
template to use this new content loop.page-home.php
in your editor.<?php get_template_part('templates/content', 'page'), ?>
Replace 'page'
with 'home'
so that it now reads like the following line:
<?php get_template_part('templates/content', 'home'); ?>
This instructs the template to pull our new content file, content-home.php
, in the templates
folder.
You should now see nothing but a line of text and the default footer.
Congratulations! Your new content template is connected. Now, to flesh it out, we will build a carousel from our new fields.
We want to pull the markup for our carousel items from their respective custom fields. If you've not worked with custom fields before, see the WordPress documentation at http://codex.wordpress.org/Custom_Fields.
We'll start by requesting the items themselves as follows:
content-home.php
file in your editor, remove the test message. You should now have nothing except the following lines of code:<?php while (have_posts()) : the_post(); ?> <?php endwhile; ?>
item1
. The following line will do it:<?php $item="item1"; echo get_post_meta($post->ID, $item, true); ?>
This line first creates a PHP variable for item1
and then uses that variable in the get_post_meta()
template tag. The parameters $post->ID
, $item
, and true
specify that we're working with the current post (or page) and asking for the field named item1
to be returned as a string. (The false
parameter would return it as an array.)
<?php $item="item1"; echo get_post_meta($post->ID, $item, true); ?> <?php $item="item2"; echo get_post_meta($post->ID, $item, true); ?> <?php $item="item3"; echo get_post_meta($post->ID, $item, true); ?> <?php $item="item4"; echo get_post_meta($post->ID, $item, true); ?>
If you save and refresh, you should see the images all appear, stretching down the page one after the other.
It's time now to wrap these items with our carousel markup. (Remember, you'll find this back in our original index.html
file as well as in the WYSIWYG editor.)
div
followed by the carousel indicators as shown in the following code snippet:<?php while (have_posts()) : the_post(); ?> <div id="homepage-feature" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#homepage-feature" data-slide-to="0" class="active"></li> <li data-target="#homepage-feature" data-slide-to="1"></li> <li data-target="#homepage-feature" data-slide-to="2"></li> <li data-target="#homepage-feature" data-slide-to="3"></li> </ol>
carousel-inner
element and wrap each of our custom field tags in div class
as item
, the first one with the active
class as shown in the following code snippet:<div class="carousel-inner"> <div class="item active"> <?php $item="item1"; echo get_post_meta($post->ID, $item, true); ?> </div> <div class="item"> <?php $item="item2"; echo get_post_meta($post->ID, $item, true); ?> </div> <div class="item"> <?php $item="item3"; echo get_post_meta($post->ID, $item, true); ?> </div> <div class="item"> <?php $item="item4"; echo get_post_meta($post->ID, $item, true); ?> </div> </div><!-- /.carousel-inner -->
<!-- Controls --> <a class="left carousel-control" href="#homepage-feature" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#homepage-feature" data-slide="next"> <span class="icon-next"></span> </a> </div><!-- /#homepage-feature.carousel -->
Refresh your browser and you should see the functioning carousel again!
Now we just need to pull in our columns.
To pull in the content for our three columns, we'll repeat a process very similar to the previous steps.
The following template tags will pull in the custom field for each column:
<?php $column="column1"; echo get_post_meta($post->ID, $column, true); ?> <?php $column="column2"; echo get_post_meta($post->ID, $column, true); ?> <?php $column="column3"; echo get_post_meta($post->ID, $column, true); ?>
Then, we need only to nest these within our markup structure—including the container
, row
, and column
classes.
<div class="page-contents container"> <div class="row"> <div class="col-sm-4"> <?php $column="column1"; echo get_post_meta($post->ID, $column, true); ?> </div> <div class="col-sm-4"> <?php $column="column2"; echo get_post_meta($post->ID, $column, true); ?> </div> <div class="col-sm-4"> <?php $column="column3"; echo get_post_meta($post->ID, $column, true); ?> </div> </div><!-- /.row --> </div><!-- /.container -->
Save your results, and you should see the three columns appear in their designated layout.