Editing a WordPress theme with Dreamweaver CS5 – Part 4: Building a custom home page

Additional Requirements

WordPress

• Learn more

XAMPP (if you have Windows)

• Learn more

MAMP (if you have Mac OS X)

• Learn more

This is Part 4 of a four-part tutorial series on editing a WordPress theme in Adobe Dreamweaver CS5. Part 1 covers the basics of WordPress themes. Part 2 shows you how to set up a local server and your site. Part 3 covers how to customize a WordPress theme, with a logo, menu, and styled headers. This part focuses on creating a custom theme home page in which featured posts are displayed with a post thumbnail image.

If you haven't already done so, complete the steps in Part 2 and Part 3 before completing this part of the tutorial series.

This tutorial is divided into the following sections:

• Building the new home page layout structure
• Creating featured posts in WordPress
• Creating a custom featured post loop

Building the new home page layout structure

Most blog home pages consist of a list of posts displayed chronologically. The post data can either be a full post or a post summary depending on how the author has configured the blog.

Some bloggers prefer to show a list of featured posts above the normal list of posts to highlight special content or articles. Using the sample theme for this series, you're going to create a new home page that you can use to highlight specific posts and display a thumbnail image for each.

Create home.php from index.php

As you may recall from the section on the WordPress file hierarchy in Part 1 of this series, index.php is the default theme file used if certain other PHP pages are not found in your theme. The home.php file is one of the specific pages that WordPress looks for when a visitor views your blog home page. If home.php is not found, it will use index.php instead. Since you are creating a custom layout for your home page to support featured posts, you need to create the home.php file as a starting point for the customization.

Part 2 of this tutorial showed you how to set up a local site in Dreamweaver and unzip the sample WordPress theme files available in Part 1. You will be using the sample theme files in this customization.

To create the home.php file for the new home page, follow these steps:

1. If you have not already done so, download and unzip MyTheme.zip, the sample file for this tutorial.
2. Open the sample theme's index.php file in the MyTheme folder in Dreamweaver.
3. Save the file as home.php in the same folder (the MyTheme folder of your themes directory).

You now have a working home.php file for customization.

Note: If you upload the home.php file to your local blog server and browse to your home page, WordPress will use the home.php file. However, since it is currently identical to the index.php file you created it from, you will not see any differences.

Create a special featured post area

The featured posts in the sample theme will be placed above the normal posts and right sidebar and just below the navigation bar. This area will have room to display three posts across the full 960-pixel width of the blog.

Follow these steps to create the featured post area by inserting a wrapper container spanning the full page width and a 960-pixel wide container div that will hold your featured posts.

1. In Dreamweaver, open home.php if it is not already open.
2. In Code view, position your cursor immediately after <?php get_header();?> at the start of the file.

   For the following steps, you can manually type the container code or you can choose Insert > Layout Objects > Div Tag to create the new divs.

3. Create a div and set the id to featureWrapper.
4. Inside that div, create another div, and set the id to featuredposts.
5. Review the changes in Code view (see Figure 1).

Now that you have the initial container code in place, you can apply some styles.

6. Add the following initial styles for the feature area to the end of style.css:

Since you set up a local testing server with WordPress installed in Part 2 of this tutorial, you can preview your changes simply by saving the files in Dreamweaver and with the home.php page showing, click Live View. Then type http://localhost/ into the Address: bar at the top of the page and press Enter or Return to see the changes. Another way to test is by opening your test blog in a browser (the URL is usually http://localhost/). Don't forget to make sure that your local server is running (XAMPP or MAMP). If you are working on a remote blog, you can upload your files to your server and preview them in a browser as you make changes.

Note: Simply clicking the Live View button with the home.php file open will typically not allow you to preview the page. You need to type in http://localhost/ into the Address; field and press Enter or Return.

The code changes you've just made create a basic new feature area (see Figure 2).

You can easily change the color of the feature area by simply changing the background color value for the featureWrapper ID in the style.css file. I used an arbitrary height value of 200 pixels for the featuredposts ID simply to make the area visible without any content present. You'll remove this value once content has been inserted.

Create the featured post containers

The goal is to have three posts across the feature area, so you need to create three containers to hold the post data. The featured posts will ultimately be pulled from your WordPress database using a custom loop. I'll cover this in more detail later in the tutorial, but it's important to keep in mind because it affects how you will want to structure the post containers.

The container is simply a div that uses the float:left property; and the same container is repeated for each post in the custom loop. Initially you'll add three containers and some sample content to visualize the featured posts. Later, when you add the custom loop, you'll remove the extra code that is no longer needed.

Follow these steps to create the three featured post areas:

1. In home.pho, create three identical divs within the featuredposts div you created earlier.
2. Set the class of all three new divs to featurebox (see Figure 3).

3. In the style.css file, style the featurebox class by floating each box to the left, adding 20 pixels of right padding, and assigning a width of 290 pixels:

4. Back in home.php, add some sample content to the featurebox divs using an H3 tag for the post title and a paragraph of text representing sample post content:

5. Preview your changes in Dreamweaver by clicking the Live View button with home.php showing. Then type http://localhost/ into the Address: bar at the top of the page and press Enter or Return to see the changes (see Figure 4). If that is already the case, then simply click the Refresh Design View button in the Document toolbar.

The H3 tags inherit the color property from the H3 style for the rest of the theme.

6. To remove the bold property from the title font, change the color, and return the letter spacing to normal, edit style.css and add the following code (see Figure 5):

7. To insert a thumbnail image and a text link into each sample post, modify each featurebox div as follows:

8. To style the thumbnail images and the link states for text links in the featured area, add the following CSS styles to the style.css style sheet:

9. While you are editing style.css, you can also remove the CSS height property from the featuredposts ID, since you now have content to fill the container.
10. Next, add the following code immediately preceding the close of the featuredposts div in home.php:

11. To create the clearboth class style in the style.css file, add the following: .clearboth { clear:both; }

    Because the post container has a float:left property, you need the two preceding steps to clear the float for the featuredposts container to enclose the featurebox containers (see Figure 6).

Back to top

Creating featured posts in WordPress

Now that you've completed the page structure modifications for the custom home page, you're ready to add some featured posts in WordPress. There are many ways to do this, but the most common approach is to use a special post category for the posts you wish to feature on your home page.

For this tutorial, you will create a post category in WordPress named featured, and any posts that you assign to that category will be featured on the home page. The loop you create for your featured posts area will only use the most recent three posts in the featured category.

Set up a featured post category in WordPress

To create the featured post category in WordPress, follow these steps:

1. Open a browser and go to your local WordPress admin area (typically the URL is http://localhost/wp-admin/)
2. Log in to WordPress.
3. In the left sidebar of the dashboard, click Posts.
4. Click Categories.
5. For the Category Name, type featured.
6. Also, for the category Slug, type featured (see Figure 7).
7. Click Add New Category to save your new category.

Create a post to use in the feature area

Once you have created your featured category, you can create some new posts in the category. (You can also assign older posts to the featured category if you already have content on your blog.) After creating the post title and content, you'll need to create an excerpt, assign the post to the featured category, and add a custom field to hold the URL of the thumbnail image for each featured post.

Many WordPress users are unfamiliar with custom fields, but these fields are very helpful when designing themes. Custom fields allow you to assign specific keys and values to individual posts, which you can then access in your theme using the WordPress get_post_meta() tag.

Follow these steps to create your first featured post:

1. Click Add New in the left sidebar of WordPress under the Posts tab.
2. Type the post title and post content.
3. Type an excerpt for the post in the Excerpt box (see Figure 8).

   Later you will code the feature area on the home page to use the custom excerpt entered for each featured post.

4. To assign the post to your new featured category, click the check box labeled feature in the Categories panel in the right sidebar (see Figure 9). If the featured category you created earlier is not immediately visible, scroll up or down until you see it.

5. In the Publish panel at the top of your right sidebar, click Save Draft to save your changes.

   Your post will not be visible on your blog until you click Publish. You'll come back to this post to add the custom field with the URL to the thumbnail image after uploading that image. You can link to any image on any server as long as you have the full URL to the image to paste into the custom field value.

6. To upload an image, begin by clicking the Media tab on the left sidebar in WordPress.
7. Click Add New, browse to an image, and upload it to your server.
8. When the upload is complete, click the image in the Media Library to display the Edit Media page.
9. Select the entire contents of the File URL box and copy it. On Windows, you can right-click and select Copy from the context menu (see Figure 10).

10. Click the Posts tab in the left sidebar.
11. Click the name of your post title to edit the post.
12. In the Custom Fields options, type featurethumb for the Name; this is the name of the custom field used for this tutorial.
13. For the Value, paste the image URL that you copied from the File URL of the thumbnail (see Figure 11).

14. Click Add Custom Field.
15. Click Publish.

Remember, you're going to need a minimum of three posts in the featured category to fill the new feature area in the theme. Add two more featured posts using the steps above (you can use the same image for all three posts or a different image for each post). You can then move on to coding your theme.

Back to top

Creating a custom featured post loop

You now have a featured category, posts with excerpts, and thumbnails associated with each post via a custom field. Now it's time to jump back to Dreamweaver and add the code for the feature area post loop.

Remove the sample content

Earlier, you added some sample content in home.php for styling purposes, and now you need to take most of it out to prepare for the post loop.

1. Remove all but one of the featurebox divs in home.php.
2. In the remaining featurebox div, remove the sample post title text, but leave the H3 tags.
3. Remove the rest of the sample content, leaving only the paragraph tags in which the excerpt will be placed, the img tag, and the Read More sample link (see Figure 12). The featureWrapper div should now look like this:

Create a new post loop

WordPress posts are displayed using a loop, which is simply PHP code that processes the posts to display on your page. For the new feature post area, you will be creating a new loop that uses a special tag designed to perform database queries within WordPress.

In the home.php file, the loop code will be positioned inside the featuredposts div and will loop through the featured posts category up to a maximum of three posts. The featurebox div, the H3 tag, and the paragraph tags will be inside the loop, so they will be repeated with each iteration of the loop.

1. Edit home.php and change the featuredposts div to the following:

2. Once all the code is in place, save the home.php page, then click Live View. Type http://localhost/ into the Address: bar at the top of the page and press Enter or Return to see the changes. You should see three featured posts with thumbnails, excerpts, and links to the full articles (see Figure 13).

Here's how the new post loop works. The custom post query starts immediately inside the featuredposts div with these lines:

This simply tells WordPress there is a new database query named $featuredPosts.

The next line tells WordPress to retrieve a maximum of three posts from the featured category you created earlier:

The next line starts the actual loop that displays the featured posts:

The following section is simply the code you created earlier using the sample content, but the sample content has been replaced with the actual WordPress tags that retrieve each post's title, the custom field value for the thumbnail image, the post excerpt, and the permalink to the full article on the blog.

The last bit of code closes the loop and closes the featuredposts div:

Edit the main post loop

Did you notice the problem in the blog preview? The featured posts are being duplicated below in the main blog post section of the home page. The main post loop needs to be modified so that it does not display posts from the featured post category.

The first thing you need to do is identify the ID of your featured category. Simply follow these steps:

1. In WordPress, click the Categories option below Posts in the left sidebar.
2. Hover your mouse over the featured category and look at the status bar of your browser. The ending number is the ID of your featured category (see Figure 14).

Now you can edit the main loop to exclude this category.

3. Insert the following code just before the start of the main loop (not the featured posts loop), and replace the 10 value with your own featured category ID (see Figure 15). Make sure to leave the minus sign, as that tells WordPress to exclude the category.

Your featured category will now be excluded from your main post listing, and WordPress will display the rest of the posts you create, in the main area of the page. Try refreshing the blog in the Dreamweaver, with Live View selected by clicking the Refresh Design View button in the Document toolbar to see the change. Make sure that the URL in the Address: field is still http://localhost/.

Back to top

Where to go from here

There are many more changes you can make to your own theme files to make them unique. This article has shown just a few of the possibilities. Now that you have a foundation for creating and editing your own theme files on your machine using Dreamweaver CS5, you're ready to customize your blog with your own look and feel.

Back to top