Bringing in our home page content

As we contemplate how to bring our home page content into WordPress, two possible methods leap to mind:

  • WYSIWYG dump: Copying and pasting the entire markup structure for our carousel and columns into the visual editor and then uploading our images and placing them within the context of that markup structure.
  • Custom fields: Using WordPress custom fields to enter our key elements—the carousel images and the column content—and then customizing a template file to provide our desired markup structure.

The first approach is not a good long-term solution as the visual or WYSIWYG editor is not adept at handling complex markup structure. Nevertheless, this approach is the quickest, and in this case, it will help us with our first steps. So, let's begin quick and dirty, if you will, and we'll clean things up with the custom fields method nearer the end.

In the exercise files for this chapter, you will find the files from our Chapter 2, Bootstrappin' Your Portfolio, Portfolio results. We'll use the index.html file to get the markup we need for our carousel and columns:

  1. In the index.html file from Chapter 2, Bootstrappin' Your Portfolio, copy the entire block of code inside the opening and closing main tags, but not including the main tags themselves:
    • We'll begin with the beginning of the carousel:
      <div id="homepage-feature" class="carousel slide">
    • And we'll select everything, including the three columns and the div tags of class row and container that surround them, which takes us down through the last closing div tag just before the closing </main> tag.
  2. Copy the block we just selected in the last step, but do not paste it into WordPress yet. We need to clean it up a bit. Recall that WordPress wants to add paragraph tags around any content that seems to need it. So, we need to remove elements that might trigger this behavior.
  3. Paste this block of code into a new window of your code editor.
  4. Remove indentation as indentation will make it very difficult for us to manage the code once we paste it into the WordPress visual editor. Select the entire block of code and shift everything as far left as it can go so that each line starts at the far left with no indentation.
  5. Then, remove any comments that take a line of their own. I had the following two comments:
    <!-- Wrapper for slides -->
<!-- Controls -->
  6. Also, remove any blank line. I had a blank line above each of the preceding comments.
  7. Copy your cleaned-up block of code.
  8. In your WordPress Dashboard, go to Edit Pages and edit the page named Home.
  9. Before pasting, shift from the visual editor to the text editor by clicking on the Text tab in the upper-right corner of the editor window as shown in the following screenshot:
    Bringing in our home page content
  10. Now paste the markup into the editor.

That's a start. Now we need to upload our images.

Adding images

Let's upload our images into WordPress and insert them into the appropriate place in our markup:

  1. You'll find the portfolio images plus the logo image in the img folder from the files in Chapter 2, Bootstrappin' Your Portfolio, Portfolio project as shown in the following screenshot:
    Adding images
  2. In your WordPress page editor for the Home page, click on the Add Media button to upload your images into WordPress.
  3. Select and upload the four portfolio images as shown in the following screenshot:
    Adding images
  4. Set appropriate settings for each image as follows:
    • Provide a suitable Alt Text attribute
    • Set Alignment to None
    • For now, we can remove the hyperlink entirely (although, of course, your portfolio items will likely link to a page about that project)
    • Select the full-size version of the image
    Adding images
  5. Insert the full-size (1600 pixel) version of each image in its appropriate place in the markup, replacing the former image tag with the new one.

    Consider the following line of code:

    <img src="img/okwu.jpg" alt="OKWU.edu Homepage">

    It will now become something like the following code snippet (with the src attribute varying according to the location of your WordPress installation):

    <img src="http://localhost:8888/bootstrappin-portfolio/wp-content/uploads/2013/10/okwu.jpg" alt="OKWU.edu Homepage" width="1600" height="800" class="alignnone size-full wp-image-29" />

    Repeat this process for each of the four images.

  6. Now, with your markup and images in place, update the page!
  7. Go to your site Home page and refresh it. If all went well, you should see the carousel and columns appear as shown in the following screenshot:
    Adding images

We've got the majority of our home page content in place. You'll notice default Bootstrap styles in the colors, carousel dimensions, and other details. We'll soon swap our updated design assets into place to fix this. First, let's address a couple of template matters.

We have a page title that we don't need—a feature of the standard Roots page template. And our carousel is being constrained to the same width as the columns after it. If we inspect the page elements, we'll see that the page template has wrapped our entire page content within an element that uses the Bootstrap class container to constrain its width.

Adding images

We need to adjust our templates to remove the page title and set the carousel free from its container.

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

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