As we contemplate how to bring our home page content into WordPress, two possible methods leap to mind:
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:
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:<div id="homepage-feature" class="carousel slide">
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.<!-- Wrapper for slides --> <!-- Controls -->
That's a start. Now we need to upload our images.
Let's upload our images into WordPress and insert them into the appropriate place in our markup:
img
folder from the files in Chapter 2, Bootstrappin' Your Portfolio, Portfolio project as shown in the following screenshot: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.
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.
We need to adjust our templates to remove the page title and set the carousel free from its container.