Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

Creating a custom content template

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:

Duplicate content-page.php.
Rename it content-home.php.

Open 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; ?>

Observe that this page content loop does two things:
- Pulls in the content from the WYSIWYG editor
- Creates links for paginated pages (if needed)
We want to update this loop to pull in our custom fields in place of the WYSIWYG editor. So, remove the following line:
```
<?php the_content(); ?>
```
We will not be paginating the home page, so remove the following line as well:
```
<?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.
Type something like Hello this is a test!.
Now we need to instruct our page-home.php template to use this new content loop.
Open page-home.php in your editor.
Edit the following line:
```
<?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.
Save the changes.
Refresh the Home page.
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.

Building our carousel from custom 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:

With the 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; ?>
```
What we write next needs to be placed between these lines, and thus within the page loop.
To get our first carousel item, we need to ask for the content of the custom field called 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.)
Save this file. Refresh your Home page and you should see the first image appear as shown in the following screenshot:
Now we need only to repeat the same line, updating each one to pull the next item. We need only to update the variable definition at the front of each line.
```
<?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.)

We'll start with the fundamental parent 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>

Then, we'll begin the 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 -->

And we'll finish with the carousel controls.

<!-- 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 -->

With the carousel markup in place, save the file.
Refresh your browser and you should see the functioning carousel again!

Now we just need to pull in our columns.

Adding our content columns from custom fields

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.

Adding our content columns from custom fields

Next let's put our footer content in place.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.

Table of Contents for Creating a custom content template

Create new playlist

Sign In

Sign Up

Creating a custom content template

Building our carousel from custom fields

Adding our content columns from custom fields

Table of Contents for
Creating a custom content template