Setup Instructions for the Langford Wordpress Theme

1. Installing

Langford Theme is downloaded from Creative Market as a ZIP file and can be installed using the standard Wordpress theme installer. If you are unsure how to install a theme from a ZIP file you can follow the steps in this excellent tutorial.

2. Setting the front page

Langford Theme has two different Page templates that you can use as your site's front page - the gallery and the table of contents.

If you know Wordpress already then this should be easy to set up, just create a Page and set its template to either "Gallery" or "Table Of Contents" - then, set your newly created page as the front page in Wordpress's Reading settings.

Creating a page and setting its template

In order to set the front page in Langford Theme we need to create a new Page and then set it to use either the gallery or table of contents template.

  1. Create a new Page in your Wordpress admin panel
  2. Call it something like "Home page" - it doesn't matter
  3. Set the Template option to be either "Gallery" or "Table Of Contents"
  4. Save your new Page
  5. If you selected "Gallery" then refer to section 3 for how to configure the gallery and select images to show.
  6. Click on the "Settings" menu on the left-hand menu of the Wordpress admin, then choose the "Reading" sub-menu
  7. At the top is the "Front page displays" option, click "a static page" and then set the "Front page" option to be your newly-created page

The image below shows the add page screen and the template selection that needs to be changed.

Langford Theme's "home page" template uses a standard Wordpress gallery to show images, which can be set up and used like any other gallery in Wordpress.

  1. Firstly, follow the steps in Section 2 to create a New Page
  2. On the edit screen of your new page, select "Add Media"
  3. This is the gallery creation screen, you can upload new images to add to the gallery or select from your Media Library. You may want to make each image in your gallery be a clickable link - to make an image clickable simply fill in the URL of each image in the Location box, this can be any URL.

    Images in the gallery are expected to have a width and height of 300px x 300px
  4. Once you've finished adding images, Save the gallery
  5. Save/Update your Page and the gallery will now be viewable

Langford Theme uses a Wordpress Menu to display the menu items at the top of each page. The only imporant thing to note is that the menu must be called header-menu so that the theme picks it up and uses it as the main menu. The image below shows the menu that we are changing

  1. Select the Appearance menu from the left-hand side of your Wordpress admin panel
  2. Select the Menus sub-menu
  3. Now you'll see the Menu edit screen as shown in the image below. A Wordpress menu shows links to one or more Pages, select the Pages you want included in the Menu from the left-hand list and select "Add To Menu".
  4. Make sure to set the Menu name to be header-menu. Your menu will not display if you use any other name
  5. Save your menu to finish

5. Columns in posts and pages

Langford Theme is able to display multi-column layouts inside Posts and Pages - it is even possible to mix and match different layouts within a single post. See this page for layout examples and instructions. Wordpress Shortcodes are used to define the columns - Shortcodes are a standard Wordpress feature and are used, among other things, to insert Galleries into posts.

6. Creating a Contact me page

Langford Theme comes with an built-in contact form that accepts a user's name, email and message and emails it to you. If you want to use a plugin for your contact form instead you can ignore this part.

To create a contact page you need to create a new page and use the "Contact page" template.

  1. Add a new page, call it "Contact me" or something similar - the page's name will appear in the main menu if you choose to add it there
  2. Set the page's template to be "Contact me" - see diagram below
  3. That's it!

When a user fills in the contact page the details will be emailed to the address specified when setting up Wordpress. This can be changed in the "General" settings area in the Wordpress admin panel.

7. Adding header images to posts

A Post can have a full-width header image in it, see this example of what it looks like. To add a header image to a post simply set the post's featured image. Images are full-width, it is recommended that you use an image that is big enough to display full-width on the largest monitors, so an image should be roughly 2000px wide - images are automatically scaled-down when being views on smaller devices such as tablets and phones. The image below shows where to set the featured image for a post.

8. Still stuck?

Thanks for choosing Langford Theme, if you still can't get your new theme working Drop me a line and we'll get you up and running in no time.