Getting Started

Step by step instructions

This tutorial is for site owners building NEW web sites using the Ashford WordPress theme. The theme was developed to be used as a content mangement system (CMS). This tutorial will:

  • Create a NEW site
  • Use a custom static Page as the home page
  • Add a Blog Page Template to display blog posts

After completing this step by step tutorial, you will be ready to enter content.

1. Activate Ashford

Please start by activating the standard Ashford WordPress Theme. If you are using a child theme, we suggest that you apply that child theme as the final step in this process.

2. Edit Site Name and Tagline

Next, please edit your General Settings to correctly display your “Blog Title” and “Tagline”. By default, Ashford uses Blog Title and Tagline to create the header.

Dashboard → Settings → General Settings → Edit “Blog Title” and “Tagline”

Tip: While you are on the General Settings page you can also select the right time-zone. You have to manually update this for Daylight Savings Time.

3. Edit your profile

Next, please select your “Display Name”. This is the name that will be shown to the world when you add a page, post or make a comment. Please follow all the steps in order.

  1. Dashboard → Users → Your profile → Edit your “First name”, “Last name” and “Nickname”
  2. Click “Update Profile” at bottom of page
  3. Dashboard → Users → Your profile → Find and select “Display name publicly as” drop down
  4. Click “Update Profile” at bottom of page

Tip: While you are on the Profile panel, you might want to make sure you update your password to something you can remember.

4. Create human readable URLs

By default your site will generate “system” URLs. Please modify these URLs to be human readable and search engine optimized (SEO). This is a critical step as it is difficult to “change” the URL structure once your web site is live and indexed by Google.

  1. Dashboard → Settings → Permalinks → Select “Custom Structure” under common settings
  2. Enter this /blog/%category%/%postname%/ or /blog/%post_id%/%postname%/ or /blog/%year%/%monthnum%/%postname%/ into the “Custom Structure” field. This is the custom URL structure Ashford recommends especially if you are adding a blog (refer to step #8). NOTE: Use the category ONLY if you are sure that you will not be re-categorizing your posts. If you change categories, the URL will change breaking backlinks and causing page not found errors.
  3. To customize the category and tag URL structure edit the “optional” fields for Category and Tag base (e.g. topics or tags). Do not precede with a “/”.
  4. Click “Save Changes” at bottom of page

5. Enter media settings

Ashford uses thumbnails and other built-in WordPress image features. This requires that you enter the following values in the Media panel:

  1. Dashboard → Settings → Media Settings
  2. Enter Thumbnail size:  Width=150px and Height=150px
  3. Select checkbox: “Crop thumbnail to exact dimensions (normally thumbnails are proportional)”
  4. Enter Medium size:  Width=300px and Height=300px
  5. Enter Large size:  Width=520px and Height=1020px

» Click here to learn how to build with images

New with WordPress 2.9, if you choose to use auto-embeds (like Facebook), set your width to 520px and leave the height blank.

6. Add a new page

Next, please add a new page that will be used as your front page. If you do not have your content ready, just use “Welcome” for the title and add some Lorem Ipsum text as a placeholder. You will be able to further customize your front page later.

» Click here to learn how work with pages

7. Use your new page as your front page

By default, your home page will display blog posts in reverse chronological order. However, this tutorial shows how to build a web site that uses a static page as its front page.

  • Dashboard → Settings → Reading → Select “A static page”
  • Under the “Front page” drop down select the title of the new page you just added

Ashford provides many Page Templates to make your site unique. You will be able to customize your new front page later.

8. Adding a front page hero image (advanced, optional)

All Ashford pages (not posts) are able to display a hero image just below the main navigation.

In any version prior to v1.0, to activate a front page hero image, please follow the steps below:

  • Create an image 300px (it can be any height) by 940px
  • Save it as a web optimized JPG and name it “hero_front_page.jpg”
  • FTP this file to the theme images folder found /wp-content/themes/ashford/images
  • Note: if you are using a Ashford Pro or an Ashford child theme, the hero image must be placed in that child theme /images folder.
  • Warning: this method has server requirements. If you are using a release earlier that v0.6, this feature can cause some headaches depending on your web host. If you have issues please use the second method described below.

You can also add a custom field to any page to create the Hero image and optionally wrap the image with a link:

  1. Create an image 300px (it can be any height) by 940px
  2. Save it in any web optimized format
  3. Login to WordPress
  4. Dashboard > Media > Add New
  5. Select a file and click the Upload button
  6. Copy the file location (paste or save it in a place where you can grab it easily later)
  7. Click “Save All Changes”. This uploaded your image to the server.
  8. Now edit the page where you want this Hero image to appear
  9. Add the following custom fields and values
    name = image, value = copy in your file location
    name = link, value = http://www.yoursite.com/link (optional)
  10. Click Update

You can follow this pattern on ANY page to add a Hero image wrapping it in an optional link.

» Learn more about how to work with hero images

If you BUY PRO, you get seven Hero Types including: image, slideshow, slider, carousel and three more (available in v1.0 available April 1, 2010). Plus we make adding Hero Types easier through a new Hero Type Settings panel on the Edit Page screen.

9. Add a Blog tab to your main navigation (optional)

You changed your front page in step #6, so there is no place to read blog posts. If you also want to have a blog on your web site, please add a Blog tab to your main navigation.

  1. Dashboard → Pages → Add new
  2. Enter “Blog” in “Title” field
    ‡ Refer to step #4. This page should be titled “Blog” to function correctly and be accessed via www.yoursite.com/blog
  3. Leave “Body” blank
  4. Find Attributes → Template → Choose “Template for blog”
  5. Find Attributes → Order → Choose “Template for blog”
    This puts the Blog tab in the second position, next to the Home tab.
  6. Click “Update Page”

10. Set your commenting preferences

»  Customize your comments with recommended settings for comments

11. Choose your default gravatar

  • Dashboard → Settings → Discussion → Avatars
  • Select the default avatar when a comment author does not have a Gravatar enabled. Ashford adds 2 avatars.

12. Turn off comments on pages

  • According to WordPress best practices, Ashford allows comments to be added to pages. To turn off comments on pages, you need to Uncheck the “Allow comments” settings per page.
  • Or Ashford can turn off comments to be turned off for all pages,
  • Dashboard → Apearance → Ashford Options → Choose “no” to display comments on pages.

13. Add widgets to your footer sidebar

Ashford allows you to customize your footer sidebar with widgets. We recommend that you use three widgets. This will build three nice columns. It is the only sidebar to display on every page. Please follow all these steps in order.

  • Select the Dashboard → Design → Widgets subpanel
  • Find the Current Widgets in the right column
  • Select the “footer” sidebar and click the show button
  • Add and remove widgets
  • Click on edit to change a widget’s controls and click done button
  • When finished click save changes button

14. Customize Ashford theme options

» Click here customize your Ashford theme options

15. Apply child theme (optional)

Your Ashford Options are not deleted or changed when switching to an Ashford child theme.

  • Ashford child themes are coming soon.
  • For advanced WordPress users and developers, instructions are coming on how to modify Ashford the right way using a child theme (instead of hacking the parent Ashford Theme).

16. Test your site

Take a look at your site. Here are ways to troubleshoot commons issues or look through the other support documentation.

17. Customize your brand

The free Ashford theme is purposefully generic looking. Now its time to customize it to support your brand: add a logo, masthead and/or background image.

» Customize Ashford Theme Options basic color

» Customize your brand, logo, masthead and footer

If you want expert support, consider buying Ashford Pro and get unlimited support for building, customizing and growing your site.