Course: Completing the Site

In this course we’ll show you how to add put the finishing touches on your WordPress website. We’ll cover the following topics:

  1. Implementing client change requests
  2. Adding a Contact Us page
  3. Completing final changes
  4. Final client review and approval

Implementing client change requests

In this lesson, we’re going to show you some examples of changes a client may make, and how to implement them on your website. We’ll cover the following changes:

  • Uploading a client logo
  • Changing the color of the Home page heading to green

We’ll cover these topics in two ways:

  • With text and screenshots
  • With video

Let’s get started!


Implementing client changes: Text and screenshots

As we mentioned in a previous lesson, Stover Tree Service has reviewed the initial site design and requested the following changes:

  1. Add image of trees to Home page
  2. Upload their new logo
  3. Change the color of Home page heading to green

We’ve already added the image to their Home page in the Adding images to pages and posts lesson. In this lesson, we’ll add the new logo and change the color of the heading.

Uploading a client logo

Since our client did not have their logo ready before we submitted the initial site design for review, we went with the Text Title option in the Creating a client logo and favicon lesson. This is what the current title looks like:

The Text Title and Tagline

The Text Title and Tagline

Since we’ve now received a logo from the client, we can upload it to the site. In order to do this, we need to return to the Theme Options panel and click on the ‘Upload’ button next to the ‘Custom Logo’ field:

The Upload button for the Custom Logo

The Upload button for the Custom Logo

We can then click on the ‘Select Files’ button in the Client Logo dialog box:

The Select Files button in the Client Logo dialog box

The Select Files button in the Client Logo dialog box

And then select the logo and click on the ‘Open’ button:

Selecting the client logo

Selecting the client logo

Once the logo has been selected, we can scroll down to add the alternative text and click on the ‘Use this Image’ button:

Adding alternative text and clicking on the Use this Image button

Adding alternative text and clicking on the Use this Image button

Our client logo now shows in the ‘Custom Logo’ field. The final steps are to uncheck the ‘Text Title’ checkbox and click on the ‘Save All Changes’ button:

Unchecking the Text Title checkbox and clicking on the Save All Changes button

Unchecking the Text Title checkbox and clicking on the Save All Changes button

We can now take another look at how the logo appears on our site:

The new client logo displayed on the Home page

The new client logo displayed on the Home page

Changing the color of headings

Our client has also requested that we change the color of the heading on the Home page to green. We can see in the previous screenshot that it’s currently a dark gray, and doesn’t really stand out on the page.

Our client has also provided the hex color code for the green in their logo: 6a9010. We’re going to use this code to change the color of the heading to green. We can start by navigating to the Page Editor for the Home page in the Dashboard:

The Home page in the Page Editor

The Home page in the Page Editor

The next step is to highlight the heading and then click on the Text Color tool:

The Text Color tool in the Page Editor

The Text Color tool in the Page Editor

This opens up a color palette with the standard color options. We want to click on the ‘More colors’ button so we can enter the hex color code our client provided:

The ‘More colors’ button in the Text Color tool

The ‘More colors’ button in the Text Color tool

We can then enter our hex color code in the ‘Color’ field and click on the ‘Apply’ button:

Entering a hex color code in the color picker

Entering a hex color code in the color picker

 

This changes the color in the Page Editor, and we can then click on the ‘Update’ button:

Heading color changed in Page Editor

Heading color changed in Page Editor

And then view the updated page:

Heading color changed on the Home page

Heading color changed on the Home page


Implementing client changes: Video

Watch this video to see the steps we’ve covered above:


Congratulations on completing Lesson 1! You should now understand:

  1. How to upload a client logo
  2. How to change the color of a heading

Adding a Contact Us page

In this lesson, we’re going to show you how to create a Contact Us page for your website.

We’ll cover the steps in two ways:

  • With text and screenshots
  • With video

Let’s get started!


Adding a Contact Us page: Text and screenshots

We’ve now added all of the pages to our Stover Tree Service website except for the Contact Us page. Setting up the Contact Us page is a bit different than setting up the other pages, so we’re going to go through the steps in this lesson.

Since the Mystile theme has built-in contact form functionality, we’ll be using it to create our Contact Us page. We can start by going into Theme Options and selecting the Contact Page panel:

The Contact Page panel in Theme Options

The Contact Page panel in Theme Options

The next step is to check the ‘Enable Contact Information Panel’ checkbox:

Enabling the Contact Information Panel

Enabling the Contact Information Panel

This will open up the contact information fields, where we can enter the contact information for our client. Once we’ve entered all of the client info we can click on the ‘Save All Changes’ button:

Adding contact information and saving the changes

Adding contact information and saving the changes

Now that we’ve added the contact information, the next step is to add the Contact Us page. We can do this by navigating to ‘Pages -> Add New’ in the Dashboard:

The Add New page panel in the WordPress Dashboard

The Add New page panel in the WordPress Dashboard

Once we’re in the Page Editor, we can give our page a title, choose the ‘Contact Form’ template, and then click on the ‘Publish’ button:

Creating and publishing the Contact Us page

Creating and publishing the Contact Us page

We can then view the page to see how it looks:

The completed Contact Us page

The completed Contact Us page

There’s one final step: Adding this page to the navigation menu. We can follow the same steps we covered in the Adding navigation menus lesson to add the Contact Us page, and then take a look at the updated navigation menu:

The Contact Us page added to the navigation menu

The Contact Us page added to the navigation menu


Adding a Contact Us page: Video

Watch this video to see the steps for creating a Contact Us page:


Resource: Contact Form Plugins

If you’re using a theme that doesn’t include contact form functionality, we recommend that you use a plugin to create your form for your Contact us page.

Contact Form is our favorite free plugin. It’s very simple to configure and use, and provides all the basic options for contact forms. (See details below.)

Gravity Forms is our favorite premium plugin. This is a very slick and intuitive plugin, and it makes it very simple to create advanced contact forms. Pricing currently ranges from $39.00 – $199.00 per year.

Including a contact form is a staple of any professional website. Giving your visitors an easy way to contact you will provide opportunities to interact with them, and ultimately, increase your sales. If you don’t have a contact form on your sites or your client’s sites, make that a priority today. You are missing out on valuable sales opportunities.

For a plugin that provides a basic contact form, we recommend the Contact Form plugin. This plugin has a very intuitive interface, and it’s easy to create a basic contact form with it.

After you’ve created your contact form, it’s important to test it. Complete the form yourself, and then review the email you receive to assure that all of the fields are configured properly.

You can watch this video to see how easy it is to create a contact form with the Contact Form plugin:


Congratulations on completing Lesson 2! You should now understand how to add a Contact Us page to your WordPress website.


Completing final changes

In this lesson, we’re going to cover an example of the final changes you’ll need to make before submitting your website to your client for final review. We’ll cover the following changes:

  • Removing comments from pages
  • Removing default content

We’ll cover these topics in two ways:

  • With text and screenshots
  • With video

Let’s get started!


Completing final changes: Text and screenshots

Staying with our Stover Tree Service example website, we’ve got a couple more tasks to do to complete the site before submitting it to our client for final review.

Removing comments from pages

The default functionality in WordPress is for comment functionality to be included on all posts and pages. For a professional website, comments aren’t usually included on pages, but they are included on blog posts. We’re going to remove the comment functionality from Stover’s pages in order to present a professional appearance.

If we take a look at our current Home page, we can see that the comments box is displayed below the main content:

The comments box on the Home page

The comments box on the Home page

In order to remove it, we’ll start by navigating to the Home page in the Page Editor:

The Home page in the Page Editor

The Home page in the Page Editor

There is a dedicated comments panel in the Page Editor; however, it’s not currently being displayed. In order to view it, we need to click on the ‘Screen Options’ panel at the top of the page:

The Screen Options panel in the Page Editor

The Screen Options panel in the Page Editor

This opens up the Screen Options panel, where we can see all of the available options. In order to remove comment functionality, we’ll need to check the ‘Discussion’ checkbox:

The Discussion panel in Screen Options

The Discussion panel in Screen Options

We can then scroll down in the Page Editor to view the Discussion panel:

The Discussion panel in the Page Editor

The Discussion panel in the Page Editor

We can uncheck the ‘Allow comments’ checkbox to remove the comment functionality from this page, and then click on the ‘Update’ button:

Unchecking the ‘Allow comments’ checkbox

Unchecking the ‘Allow comments’ checkbox

We can then return to the Home page to see that the comment functionality has been removed:

Comment functionality removed from Home page

Comment functionality removed from Home page

Once we’ve removed the comment functionality from the Home page, it’s a simple matter of repeating the same steps to remove comments from our remaining pages.

Tip: Removing Comments from Pages

If you know that you don’t want to include comments on your website’s pages, it’s a good idea to get into the habit of adding this step while you’re creating your pages. It will require less time, and make you more efficient in your process.

Another note: Once you’ve added a panel in Screen Options, it will appear on all of your pages in the Page Editor, so this step only needs to be completed once.

Removing default content

The final change we’re going to make is to remove the default content that comes preinstalled with WordPress. There are typically three default items: A sample page, sample post, and sample comment.

Starting with the page, we can view all of our pages under the Pages panel to find the Sample Page:

The Sample Page in the Pages panel

The Sample Page in the Pages panel

We can then hover over the Sample Page in the page list and click on the ‘Trash’ link to remove it:

Removing the Sample Page from the pages list

Removing the Sample Page from the pages list

We can then navigate to the Posts panel to remove the ‘Hello World’ post:

Removing the Hello World post from the posts list

Removing the Hello World post from the posts list

And finally we can navigate to the Comments panel to remove the sample comment:

Removing the sample comment from the comments list

Removing the sample comment from the comments list


Completing final changes: Video

Watch this video to see the steps we’ve outlined above:


Congratulations on completing Lesson 3! You should now understand:

  1. How to remove comments from pages
  2. How to remove default WordPress content

Final client review and approval

In this lesson, we’re going to cover the items you’ll need to include for your final client review and approval.

Let’s get started!


The final client review process

As we covered in the Client review and approval lesson, there are some specific considerations you’ll want to address when submitting your site for final client review. The final review is similar to the initial review, but there are some key differences.

When to initiate final client review and approval

It’s important to wait until your site is completed before submitting it for final client review. The site should be ready for public viewing, and there shouldn’t be any remaining changes necessary.

How to direct your client

Much as with the initial client review, you’ll want to direct your client to make sure they address everything necessary for final review and approval. Unlike the initial review, however, you’ll want your client to review all aspects of the site before making final approval.

This would include the following:

1. All pages. Make sure that your client is satisfied with the appearance of all pages on the site, including both copy and images.

2. All posts. Make sure that your client is also satisfied with all posts on the site if they have a blog, including both the Blog page and individual posts. Again, this would include all copy and images.

3. Navigation. Have your client review the site’s navigation menu and structure to make sure that it’s set up as desired.

4. Links. Your client should also review all links on the site to assure that they’re linking to the proper destinations.

5. Sidebar content. If your client’s website includes a sidebar, make sure that your client reviews and approves this content, too.

6. Functionality. If you have any specific functionality included on the site – for example, a contact form – make sure that your client is satisfied with the content and appearance.

Finally, you’ll want to make it clear to your client that the next step is going live with the site, so they’re aware that it needs to be ready for public viewing.

Next steps

Once your client has reviewed and approved the site, we strongly recommend that you secure any outstanding payments before transferring the site and going live. This is the best leverage you have, and will go a long way toward securing timely payment.


Congratulations on completing Lesson 4! You should now understand the steps necessary for final client review and approval.

This concludes the Completing the Site course. In our next course, we’ll show you how to transfer and test your completed site.

Testing and Transferring the Site