Using custom fields for a custom structure

As noted previously, the WYSIWYG dump is not the best long-term strategy for our home page content. We have some significant custom markup structure in here. The WordPress editor was built to manage text and images—not containers, rows, columns, and carousel items. So, let's use WordPress custom fields to manage this content.

The steps are easy and straightforward. We'll create a custom field for the content of each carousel item (that is, our four images) and then a custom field for each column of content below it as shown in the following steps:

1. In your WordPress editor for the Home page, copy the markup for each image as shown in the following screenshot:

   

   Then, create a custom field for each, naming them item1, item2, item3, and item4. After repeating for each one, you should have a result that looks like the following screenshot:

   

2. Now for our columns content. Let's call these column1, column2, and column3, and include the heading, paragraphs, and...