Getting Started

Step by step instructions

If you are upgrading, please our Upgrading support document first.

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.

If you are having issues with your purchase of Pro or any Premium child theme, please make sure that you join our Ashford Pro Cohort Google Group and post your issue. You can

1. Activate Ashford

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

By default the Welcome Message, Hints and Region outlines are enabled. You can turn them off from Theme Options > “Display Hints and Widgetized Sidebar Regions” and “Display Welcome Message” > Select “No”

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.

  • Dashboard → Users → Your profile → Edit your “First name”, “Last name” and “Nickname”
  • Click “Update Profile” at bottom of page
  • Dashboard → Users → Your profile → Find and select “Display name publicly as” drop down
  • Click “Update Profile” at bottom of page
  • Fill out your profile information with ONLY the information you want to PUBLICLY share on your site. Please note: the Author Box is displayed ONLY if it finds a Bio in your profile.

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.

  • Dashboard → Settings → Permalinks → Select “Custom Structure” under common settings
  • Enter one of the suggestions below into the “Custom Structure” field. This is the custom URL structure Ashford recommends especially if you are adding a blog (refer to step #8).
  • To customize the category and tag URL structure edit the “optional” fields for Category and Tag base (e.g. topics or keywords). Do not precede with a “/”.
  • Click “Save Changes” at bottom of page
It is recommended that you do not start your permalink structure with a category, tag, author, or postname fields. If you do, you severely degrade the performance of WordPress and your site. As Google factors page speed in its results, performance is the deciding consideration.
/blog/%post_id%/%postname%/
/blog/%year%/%monthnum%/%postname%/
/post/%post_id%/%postname%/
/%post_id%/%postname%/

Optionally, you can add slugs for “Category base” and “Tag base” by entering a value like “topic” or “keyword”. This slugs appear in category and tag archive page permalinks.

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:

  • Dashboard → Settings → Media Settings
  • Enter Thumbnail size:  Width=150px and Height=150px
  • Select checkbox: “Crop thumbnail to exact dimensions (normally thumbnails are proportional)”
  • Enter Medium size:  Width=300px and Height=1024px. The final width will be 320px with the default CSS styling.  This will fit nicely when the content is viewed by a mobile device.
  • Enter Large size:  Width=500px and Height=1024px. The final width will be 520px with the default CSS styling. This will fit nicely into the content area of default post or page with a sidebar.
  • OPTIONAL: If you choose to use auto-embeds, set your width to 520px and leave the height blank
  • OPTIONAL: Uncheck the option to “Organize my uploads into month- and year-based folders” which makes it easier to export and migrate image files in the future

TIP: To build a better mobile experience, insert the “medium” size into your posts and pages as the 320px width is viewed by mobile phones in portrait mode without cutting off the image.

6. Add a new page

Next, add a new page to be used as the 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. Adding a front page hero image (optional)

If you are activating Pro or a premium theme

All Ashford pages (not posts) are able to display a Hero just below the main navigation. If you own Pro, you can add nine different types of Heros to your front page (or any page for that matter).

Learn more about how to use Pro Hero Types »

If you are activating the free version of Ashford

If you are using the free version of Ashford, allows you to ONLY add an image and optional link. To add a Hero Image using the free version of Ashford:

  • Create an image 240px by 940px
  • Save it in any web optimized format (e.g. JPG)
  • Dashboard > Media > Add New
  • Select a file and click the Upload button
  • Copy the file location (paste or save it in a place where you can grab it easily later)
  • Click “Save All Changes”. This uploaded your image to the server.
  • Now edit the front page you created in step #6.
  • Add the following custom fields and values
  • name = image, value = copy in your file location
  • name = link, value = http://www.yoursite.com/link (optional)
  • Click Update
  • Learn more about using Hero Images with the free version of Ashford or learn more about how to use Pro Hero Types.

8. 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 has a couple page templates. If you want MORE—consider buying Ashford Pro and build over 250 page variations. Including a sophisticated Pro Front page template which gives you 3 widgetized sidebars.

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.

  • Dashboard → Pages → Add new
  • 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
  • Leave “Body” blank
  • Find Attributes → Template → Choose “Template for blog”
  • Find Attributes → Order → Choose “Template for blog”
  • This puts the Blog tab in the second position, next to the Home tab.
  • Click “Update Page”

With Ashford Pro, you can use the Pro Blogger or Pro Topic page template to build your front page.

10. Set your commenting preferences

Learn how to 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 custom 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 Ashford theme options

15. Apply child theme (optional)

  • Dashboard > Appearance > Themes > Select an Ashford child theme
  • Your Ashford Options are not deleted or changed when switching to Ashford Pro or Axis (or your own custom child theme). As theme options are stored according to the parent theme.

16. Customize header

By default, Ashford loads a default header. To add your own:

  • Dashboard > Appearance > Header
  • Upload a new header image (940px by 100px)
  • If your header image is taller than 100px, you can set the new height in Dashboard > Appearance > Ashford Options > Enter Custom Header height.
  • If you want to turn off the custom header, you can instead show the Blog Title and Tagline. Dashboard > Appearance > Ashford Options > Use custom header > select “no”

17. Customize background

Ashford supports WordPress 3.0 custom background images and colors.

  • Dashboard > Appearance > Background
  • Upload a sample background (it is transparent so it works with most colors)
    ashford/images/extras/background.png
  • Select “Display options”: center, no repeat and scroll
  • Add background color (optional): #D54E21
  • Click save changes

NOTE: If you are Ashford Pro your background color option entered here will be OVERRIDDEN if you select a Color Style. This option needs to be accounted for when doing child themes.

18. Customize colors

Learn how to set colors using Ashford theme options.

NOTE: The 13 color styles and 22 web fonts selections found in Ashford Options are ONLY available to Ashford Pro. See the color styles demonstrated on the Pro Demo site by looking in the “Customize” mega menu.

19. Add content

Here are some support documents which help you with creating and organizing your content.

20. Get started with mobile

Great now you have a web site filled up with content, but is it mobile? If you own Ashford Pro, your site now has a mobile version as distinct from the desktop experience (which you designed in step #19). Optimizing the mobile experience may be a lengthy project, but here is the first thing you need to do.

  • Dashboard > Appearance > Menus > Add new menu by clicking the “+” tab > Enter menu name “mobile”
  • Add menu items

This will be the navigation menu for your mobile site. We suggest that it no more that 3-4 items with short labels.

» Gettting Started with mobile

21. Test your site

It is critical that you quality test your site before you start telling the world about it:

  • Remove all placeholder text and images.
  • Check all your copy for spelling and details (e.g. addresses and phone numbers).
  • Check all pages for SEO browser titles, keywords and descriptions.
  • Check your URL structure. If you are migrating to a redesigned site, make sure that you identify legacy URLs that need to be redirected.
  • Check your XML sitemap (we recommend the Google XML Sitemaps Plugin).
  • Check your RSS feed.
  • Check keyword search.
  • Check all archive pages: author, tag, category and date archive pages.
  • Check comments including reply.
  • Check a variety of pages in all A-Grade browsers.
  • Print preview or print out a page to check your print CSS style.
  • Check your images using Smushit.com making sure your images are optimized for performance.
  • Check your performance using Web Page test.
  • Check legal items (e.g. copyright, privacy and terms of service).
  • Check page not found or 404 pages.

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